分享Sketch的10个小技巧 可以解决大问题！

用Sketch设计过程中，我们经常会遇到各种各样令人纠结的小插曲，与大家一样，我也会遇到这些问题。而在遇到问题的过程中，想办法解决才是关键，而通过查找相应的Sketch官方指南，或和自己的开发伙伴探讨，都能得到有效的解决方案。以下的小技巧或许会给你带来帮助，如果你和我想的一样，那还真是巧了～🥰

1、Sketch分割线，用 fill 替代 border

List 模块是界面设计中最为常见的模块，一倍图下（以下案例均以1倍图示意，即 375*667 尺寸），用 skech 处理单个 list 单元分割线时，建议使用高为 0.5px 的图形，而不是border。这样可将 0.5px 的图形与底部做底部对齐处理，而使用 border 则会出现 0.5px 的悬空，造成设计稿不够严谨的情况。

2、奇数与 0.5 的使用场景

一般情况下，我们建议所有与元素的尺寸与间距均设定为偶数，而对于不可抗拒的因素，比如在制作大按钮时，iOS官方的处理办法是固定左右间距（Margin），即按钮距左右边界的间距一致（如右上图：按钮距左右分别为 24px，此时按钮宽度出现 327px 是可以的）。但对于按钮内部而言，按钮的高度一般为偶数，而我们时常会遇到字高（Font height）为基数的情况，此时建议将文字做强制居中处理（如下图：当文字距离上下分别为 10px、9px 时，建议将文字上移 0.5px ，以保证视觉居中的识别效果）。

3、善于使用Sketch的图像填充

设计过程中，对于需要使用图像（pic）填充的元素，建议使用图形填充属性中的「图像填充」而非将图片做剪切蒙版的处理。这样不仅能保持设计文件的轻量化，对于经常团队协作的小伙伴而言，也能在一定程度上降低必要操作的工作量。题外话：为了保证使用图形填充的美观程度，这里需要将图片素材提前处理成一致大小的素材备用，并做好分类整理，尽管前期会有一定的工作量，但对于后续的工作内容上，不仅能提升选用图片素材的效率，也能保证设计稿视觉风格的一致性。

4、剪切蒙版让画板更加整洁

如今越来越的团队开始强调设计的组件化意识，而对于设计稿中的组件化模块，不妨试试试这样做：在模块单元下方绘制一块图形，然后将上方的所有元素剪切蒙版至这块图形当中，并做打组 合理命名处理，这样在框选画板中的元素时，你的文件自上而下都是规整的矩形模块，而不会出现超出画板的定界框。

5、你的文字调整字高么

文字是制作界面的必要元素，在设计与开发这对cp的相处过程中，我们经常会发现开发小哥哥尽管按照设计稿的切图标注一比一开发，也依然会出现实现效果不佳的情况，这是因为 sketch 的默认文字高度与开发工具的字高不是完全一致的，如果将 sketch 中的字高调整成开发工具中的字高，则会在一定程度上解决这个问题。具体规律如下（限 iOS系统中的英文字体）：8-14号字高范围为字号 2、16-24号字高范围为字号 4、26-36号字高范围为字号 6、38-40号字高范围为字号 8。小伙伴们也可以自行跟自己的开发伙伴配合，测量 iOS 中文，Android 中英文的匹配关系与规律，以便更好的还原自己的设计作品。题外话：对于 iOS 系统而言，英文字体为 San Francisco，它具有动态可调节的神奇效果，即字号小于 20pt 时，使用 SF Text，因为其字母的半封闭空间与字母间距更大，可读性更好，适用于较小的字体；而字号大于等于 20pt 时则使用 Display。

6、在 symbol 中切图效果更佳

Sketch设计过程中，建议将所有需要切图的 icon 或 图片，都在元素底部绘制好透明的定界框，打组将其转换为 symbol，并做好合理命名。在 symbol 中，切片放在元素的组上方，最后将切片和内容再打一个组，选中切片勾选中右侧属性栏中的 Export group contents only，即可保证设计稿上传任何协作工具（蓝湖 or invision）时，下载的切图为透明且为预期尺寸的。

7、整理一下 symbol 的命名

symbol的命名按「一级/二级/三级/…」或「分类A/分类B/分类C…」即可在设计文件中切换相同种类的素材时，保证右侧的选项中元素的一致性，大大提升设计效率。（注意两者之间一定要用/区分）

8、整理一下 symbol 的排序

symbol的排序按照尺寸大小，自上而下的排列，这样在团队协作的过程中，尤其是整合多人的设计文件，也能保证 symbol 的合理性和整洁程度。题外话：多人协作要保证命名一致，合并文件时系统则会自动将两个文件中的 symbol 合并为一个，从而避免出现一份文件中，同一的组件出现 n 种样式的情况。题题外话：在设定 symbol 的过程中一定要保持克制，精简切图的尺寸数量，比如将 22、24、26px 大小的切图都合并为24px，不要问为什么（不想打字解释了，太累了），稿做多了你会感谢我的😂

9、Sketch 文件也可以有封面

设计稿完成后，尝试制作一个简单的封面（可包含项目Logo、版本、或其他描述什么的，至于具体放什么完全取决于你），然后在封面页保存，你的设计文件缩略图就会显示为你的封面内容，对于多模块，多版本的设计文件而言，这简直就是强迫症的福音。

10、试试用 iPhone X 的尺寸做设计吧

试试用 iPhone X 的尺寸做设计吧，为什么呢～实际上，我们发现 X 的尺寸（375*812）与 8 的尺寸（375*667）宽度上是一致的，所以用 X 还是用 8 在宽度上是没有任何差异化影响的；而使用 X 尺寸的画板设计，我们不需要额外考虑任何适配成本，用 8 怎么做，用 X 就怎么做，因为 iOS 的官方 UI kit 中，已经将顶部刘海和底部的 Home Indicator 预留好了，所以完全按照在 8 的画板中的做法去做就好了，而我们却可以同时感受设计稿在 8 和 X 两种尺寸中的效果，也便于注意特殊吸底元素的适配关系，一举两得。题外话：使用 X 做设计，在项目复盘的过程中，你的设计也会包装的更加出色～