写在前面

在设计过程中，我们经常会遇到各种令人困惑的小插曲。和大家一样，我也遇到过这些问题。

遇到问题sketch ui kitsketch ui kit，关键是找到解决方法，查阅相应的官方指南或者和开发伙伴讨论都可以得到有效的解决方案。

以下这些建议或许对你有帮助，如果你跟我的想法一样，那真的是巧合了~

1.分割线，用填充代替

列表模块是界面设计中最常见的模块，在1x图的情况下（以下案例均以1x图进行说明，即375*667大小），使用skech处理单个列表单元的分割线时，建议使用高度为0.5px的图形，而不是。

这样0.5px的图形就可以与底部对齐，但是使用它会造成0.5px的悬垂，使设计稿不够严谨。

2.奇数和0.5的使用场景

一般情况下我们建议所有元素的尺寸和间距都设置为偶数，对于不可抗拒的因素，比如制作较大的按钮时，iOS官方的解决方案是固定左右间距（），即按钮距离左右边框各1/2距离，按钮之间间距一致（如右上图：按钮距离左右都是24px，所以按钮宽度327px是可以接受的）。

但对于按钮内部来说，按钮高度通常为偶数，而我们经常会遇到字体高度为基数的情况，这种情况下建议将文字强制居中（如下图：当文字距离顶部、底部距离分别为 10px、9px 时，建议将文字上移 0.5px 即可保证视觉居中识别效果）。

3.善于使用图像填充

在设计过程中，对于需要用图片（pic）填充的元素，建议使用图形填充属性中的“图像填充”，而不是使用图片作为剪贴蒙版。

这样不仅可以保持设计文件的轻量化，而且对于经常团队协作的人员来说也在一定程度上减少了必要操作的工作量。

题外话：为了保证图形填充的美观，需要提前将图片素材处理成大小一致的素材，并进行分类，虽然前期会有一定的工作量，但这不仅对后续的工作内容有好处，还能提高选取图片素材的效率，保证设计稿视觉风格的一致性。

4. 剪贴蒙版让画板更整洁

如今，越来越多的团队开始强调设计的组件化意识，对于设计稿中的组件化模块，不妨尝试这样做：

在模块单元下方绘制一个图形，然后将上面的所有元素裁剪到这个图形上，并进行分组+适当命名，这样当你在画板中选择元素时，你的文件从上到下都是规则的矩形模块，没有超出画板的边界框。

5. 您调整了文本的高度吗？

文字是制作界面必不可少的元素，在设计开发相处的过程中，我们经常会发现即使开发人员按照设计稿一一开发，但实现效果依然不佳。这是因为默认的文字高度与开发工具的字符高度并不完全一致。如果将字符高度调整为开发工具中的字符高度，这个问题会得到一定程度的解决。

具体规则如下（仅限iOS系统英文字体）：8-14字体高度范围为字体大小+2，16-24字体高度范围为字体大小+4，26-36字体高度范围为字体大小+6，38-40字体高度范围为字体大小+8。

小伙伴们还可以和自己的开发小伙伴一起测算iOS中中文、英文的匹配关系和规则，从而更好的还原自己的设计作品。

题外话：对于iOS系统来说，英文字体是San，它有一个神奇的动态调整效果。即当字体大小小于20pt时，使用SF Text，因为它的字母半包围空间和字母间距较大，可读性较好，适合较小的字体；当字体大小为20pt或更大时使用。

6. 从中间切开效果更佳

在设计过程中，建议对所有需要裁剪的图标或者图片在元素底部绘制透明的边界框，并进行分组转换，并赋予合理的名称。

在 中，将切片放置在元素组上方，最后将切片和内容分组在一起。在右侧的属性栏中，选择切片并勾选仅分组，以确保当设计上传到任何协作工具（Blue Lake 或 ）时，下载的切片是透明的，并且具有预期的尺寸。

7. 组织命名

您可以通过以“1级/2级/3级/…”或“A类/B类/C类…”命名方式切换设计文件中同类型的素材，保证右侧选项中元素的一致性，大大提高设计效率。（注意两者必须以/区分）

8. 整理一下

设计文件按照大小从上到下进行排序，这样在团队协作时，特别是整合多人设计文件时，可以保证合理性和整齐性。

题外话：多人协作的时候需要命名一致，合并文件的时候系统会自动将两个文件合并为一个，这样就避免了一个文件里n个样式中都出现相同组件的情况。

题外话：设置过程中一定要克制，简化裁剪尺寸数量，比如把22、24、26px的裁剪合并成24px，不要问为什么（我不想打字解释，太累了），如果你做过更多的稿子，你会感谢我的

9. 文件也可以有封面

设计完成后，尽量做一个简单的封面（可以包括项目logo，版本，或者其他的说明，放什么完全由你决定），然后保存在封面页上。你的设计文件缩略图上会显示你的封面内容，这简直就是对多模块，多版本设计文件有强迫症的人的福音。

10. 尝试使用 X 尺寸进行设计

尝试用X的尺寸来设计，为什么？

事实上我们发现X的尺寸（375*812）和8的尺寸（375*667）在宽度上是一致的，因此使用X和8在宽度上没有区别；

使用 X 尺寸的画板进行设计时，我们无需考虑任何额外的适配成本。我们可以用 X 做和 8 一样的事情，因为在 iOS 官方 UI Kit 中，顶部边缘和底部 Home 都已经预留好了。所以只要按照 8 寸画板中的指示操作，我们就能同时体验到 8 和 X 两个尺寸下的设计稿效果，而且还方便关注特殊底部吸睛元素的适配关系，一举两得。

题外话：用X来设计，项目评审的时候你的设计会被包装得更加出色~

如果想了解更多UI设计方面的知识，最好不要联系我，毕竟我暂时懒得讲这个。

...

..

..

...

结束了

如有侵权请联系删除！