Sketch的10个使用小技巧

1、分割线,用 fill 替代 border 

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

Sketch的10个使用小技巧

2、奇数与 0.5 的使用场景

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

Sketch的10个使用小技巧

3、善于使用图像填充 

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

Sketch的10个使用小技巧

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

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

Sketch的10个使用小技巧

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。

Sketch的10个使用小技巧

6、在 symbol 中切图效果更佳

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

Sketch的10个使用小技巧

7、整理一下 symbol 的命名

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

Sketch的10个使用小技巧

8、整理一下 symbol 的排序

symbol的排序按照尺寸大小,自上而下的排列,这样在团队协作的过程中,尤其是整合多人的设计文件,也能保证 symbol 的合理性和整洁程度。

题外话:多人协作要保证命名一致,合并文件时系统则会自动将两个文件中的 symbol 合并为一个,从而避免出现一份文件中,同一的组件出现 n 种样式的情况。

题题外话:在设定 symbol 的过程中一定要保持克制,精简切图的尺寸数量,比如将 22、24、26px 大小的切图都合并为24px

Sketch的10个使用小技巧

9、Sketch 文件也可以有封面

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

Sketch的10个使用小技巧

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

Sketch的10个使用小技巧
分享到: 新浪微博 微信 QQ好友 QQ空间 豆瓣

相关新闻

联系我们

155-0755-1234

在线咨询:点击这里给我发消息

邮件:b@xshd.net

工作时间:周一至周五,9:30-18:30,节假日休息