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

作者通过日常工作中遇到的问题总结出了使用sketch的10个小技巧,一篇文章,解决几乎所有 UI 设计师都会遇到的小问题。原文地址:https://www.zcool.com.cn/article/ZMTE1MzQ4NA==.html 如果有什么关于Sketch的疑问可以去原文下面留言。

undefined

写在前面

用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 做设计,在项目复盘的过程中,你的设计也会包装的更加出色~  

End🤗

相关推荐

微信扫一扫,分享到朋友圈

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