最近思考如何针对自己的专业，突出自己的设计优势。最后决定在 Sketch 上下一番功夫。不同 Photoshop，它专为 UI 设计定制化打造，在 UI 设计上有的得天独厚的优势。希望自己能总结一套自己的使用心得，也欢迎和大家共同探讨如何能更好使用 Sketch 来提高设计效率。
有一点需要说明的是，Adobe 的软件有其自己的特点。当你发现 Sketch 在实现某一效果比较费力时，不妨就改用 Adobe 的软件，输出后再导入 Sketch 即可。没有最好的设计软件，只有不断改进的设计方法。
第一期我想自己探索一下基本的设计流程，能不能给自己一些定量的指标（后期不断调整），用更理性的思维进行 UI 设计。
设计探索思路：
- Grid layout
- Vertical rhythm
- Color palette
Grid layout
因为是 APP 设计，大部分 APP 是单列的。相比于 Column layout, Grid 布局个人觉的更为实用。Material Design 给出了参考是 4dp 的网格布局，我比较喜欢更宽松的感觉，所以我设置了 12px 的网格布局。Sketch 提供了方便的网格生成工具，View -> Canvas -> Grid setting.
使用 Grid 的时候，Horizontal 方向上，尽量让元素贴着网格。Vertical 方向上，尽量让元素的 x-height 贴着网格。从而保证视觉间隔上的统一。
Vertical Rhythm
UI 上一个很重点的部分就是层级感，重点内容，非重点内容。从而划分出一级文字，二级文字。给不同层级文字选择一个好的比例就显得很重要。给大家推荐一个设置文字层级的网站 Modularscale.
我的默认文字大小是 14px, 比例是 1.3，行高默认是 1.3，所以上一级文字大小是 18px.
Color Palette
基础布局完成后，需要根据你的想法调整一下颜色。这方面我还没有太多经验，一般会选择一个主色调，然后根据视觉感受再选择一个强调色，还是要多观察大自然，多实验。
这里主色我设了三级颜色：
- 3D2E56，
87% - 3D2E56，
54% - 3D2E56，
23%
不同的透明度用来强调辅助强调内容的重要性，蓝灰色总体给人一种高格调的视觉感。
然后选择了玫红色作为强调色，提供一下点缀。Tab栏的阴影需使用更淡的主色，调一个和谐的分隔感，这里数据是 box-shadow: #3d2e56 5% 0 2px 24px 0。
优化
根据自己的审美，观察哪些地方看起来还不是很舒服，手动进行微调。重点是视觉上的平衡感。这里我放大了部分图标，使其视觉上更突出，且大小上相对应。同时调整了一下 margin，整体上看起来更平衡。
展示
添加个背景和圆角，就可以作为展示了。
总流程
数据总结：
12px grid1.3 vertical rhythm14/1.3 base font size87%, 54%, 23%, 5% color opacity hierarchy
Reference
Dribbble 参考：https://dribbble.com/shots/3455944-App-Travel-2
Meterial Icon: https://material.io/icons/#ic_settings_overscan
Lofter 地址：http://joeyqiang.lofter.com/post/1d7ab360_f5e7bd4
