使用sketch设计商城app原型的流程

前锋UI视频教程：2018sketch课程

前期准备

1. 把各个页面上的元素做成思维导图以供后续参考
2. 查阅基本模型查看需要多少种字体，设定完成并模版化，构成创建该app所需要的所有字体库。
3. 查阅所有图标，单独开一个icon的page，复制出所有需要的在@1x情况下图标尺寸为44*44的rectangle，组成一个group。

TIPS on shortcut

cmd++g = group

cmd+shift+l = lock

图标绘制

选中一个对象，按下option可以查看对象之间的间距。

在设定一个元素的宽和高的时候，需要注意是2的倍数。一方面图标尺寸默认44*44，另一方面2的倍数比较方便居中对齐。

在图标绘制的时候考虑图标的两种状态，一种是选中，一种是未选中，（当然也可以根据hover/clicked等状态自行定义一个图标的多个状态），绘制出一个图标的多种状态。

页面绘制

一套APP中所有的border和border-radius尽量都保持一致。

中文字体一般用双数，才能让文字显示更完整。

内阴影和外阴影的设置可以让某个物件凸起或者凹陷，但一般不会去做内阴影。

在sketch中@1x的情况下去画线，粗细用0.5px，而不是1px，目的是在@2x的情况下呈现1px的效果。

如何确定两边间距？在一倍率下的间距数值乘以倍率要是一个整数。比如说@0.75x和@1.5X的情况下，选择8的倍数做间距。

一个单个的icon可以做很小，但是考虑到用户交互，一定要大于44X44才适用于用户点击。这种情况下对单个icon创建组件，组件的大小至少为44X44，然后在组件内部点击对象可以做任意大小。

icon的种类可以分两种，一种是用于装饰的，一种是用于交互的。装饰的无需在artboard上生成组件，直接按照合适的大小调整；交互的需要现在artboard中生成组件，在组件页面编辑完成所有需要的元素（可能在组件中还有小组件生成）。

对于组件中的文字，一定要说清楚可以容纳的最大字数是多少，作为备注指示之后的程序员。

文字区域尽量给出提示最多可以容纳最多多少个字符。

蒙板中的MASK是作为最上面的那一个图层出现的，会用MASK的轮廓呈现出底下多个图片的样子。比如最多的应用就是刘海屏。