Sketch APP UI 10天特训 - 1

Sketch 特训 - 1

最近思考如何针对自己的专业，突出自己的设计优势。最后决定在 Sketch 上下一番功夫。不同 Photoshop，它专为 UI 设计定制化打造，在 UI 设计上有的得天独厚的优势。希望自己能总结一套自己的使用心得，也欢迎和大家共同探讨如何能更好使用 Sketch 来提高设计效率。

有一点需要说明的是，Adobe 的软件有其自己的特点。当你发现 Sketch 在实现某一效果比较费力时，不妨就改用 Adobe 的软件，输出后再导入 Sketch 即可。没有最好的设计软件，只有不断改进的设计方法。

第一期我想自己探索一下基本的设计流程，能不能给自己一些定量的指标（后期不断调整），用更理性的思维进行 UI 设计。

设计探索思路：

1. Grid layout
2. Vertical rhythm
3. Color palette

Grid layout

因为是 APP 设计，大部分 APP 是单列的。相比于 Column layout, Grid 布局个人觉的更为实用。Material Design 给出了参考是 4dp 的网格布局，我比较喜欢更宽松的感觉，所以我设置了 12px 的网格布局。Sketch 提供了方便的网格生成工具，View -> Canvas -> Grid setting.

12 px grid layout

使用 Grid 的时候，Horizontal 方向上，尽量让元素贴着网格。Vertical 方向上，尽量让元素的 x-height 贴着网格。从而保证视觉间隔上的统一。

Gird layout

Vertical Rhythm

UI 上一个很重点的部分就是层级感，重点内容，非重点内容。从而划分出一级文字，二级文字。给不同层级文字选择一个好的比例就显得很重要。给大家推荐一个设置文字层级的网站 Modularscale.

Modularscale

我的默认文字大小是 14px, 比例是 1.3，行高默认是 1.3，所以上一级文字大小是 18px.

Vertical Rhythm

Color Palette

基础布局完成后，需要根据你的想法调整一下颜色。这方面我还没有太多经验，一般会选择一个主色调，然后根据视觉感受再选择一个强调色，还是要多观察大自然，多实验。

配色

这里主色我设了三级颜色：

1. 3D2E56， 87%
2. 3D2E56， 54%
3. 3D2E56， 23%

不同的透明度用来强调辅助强调内容的重要性，蓝灰色总体给人一种高格调的视觉感。
然后选择了玫红色作为强调色，提供一下点缀。Tab栏的阴影需使用更淡的主色，调一个和谐的分隔感，这里数据是 box-shadow: #3d2e56 5% 0 2px 24px 0。

优化

根据自己的审美，观察哪些地方看起来还不是很舒服，手动进行微调。重点是视觉上的平衡感。这里我放大了部分图标，使其视觉上更突出，且大小上相对应。同时调整了一下 margin，整体上看起来更平衡。

优化

展示

添加个背景和圆角，就可以作为展示了。

展示

总流程

Design flow

数据总结：

1. 12px grid
2. 1.3 vertical rhythm
3. 14/1.3 base font size
4. 87%, 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