添加组件库
给你的 Sketch 加入一个 Sketch Library,你就可以通过使用该 Library 中现成的组件来加快画图速度。
iOS Sketch Library
最常用的比如说 iOS Sketch Library,在 Apple Design Resources 可以下载到。
苹果的资源安装方式比较高级,如果安装了高版本的 Sketch,点添加就可以唤起 Sketch。
其它组件库
普通一点的,下载之后是一个 Sketch 文件。比如 Sketch App Sources 中的一些组件库,或者这个挂在 GitHub 上的:
Material Icons Sketch Library
下载之后是一个 .sketch 的文件,你需要先把它妥善保存在电脑的某个位置。然后双击用 Sketch 打开,在文件菜单中添加为组件库就可以了:
之后,它就存在于你的 Sketch 的组件库中了:
使用组件库
添加完组件库后,你就可以往你的画板里面添加现成的组件了。
点开左上角的加号,选择组件,放在你的画板中:
选中组件后,通过右侧的面板,可以修改其中的文字:
iOS 的组件由苹果开发,比较精致,组件中内嵌的图标也都是组件,可以替换成别的组件:
如果这种程度的自定义无法满足你的需求,你可以右键组件,将它分离,就可以任意编辑了。
创建组件
举个例子来说明如何创建组件:一个播放按钮。
知乎传图片太麻烦,先把图片都放出来:
首先播放按钮大致思路已经很明确了,一个三角形,如图 1。
但直接导出给研发的话,就会出现布局上的问题。比如图 2 中,我们尝试把三角形居中对齐放置在圆形、圆角矩形中,前者可以用来暗示「这里是一个视频」,后者形如 YouTube 的 Logo。
我保证,三角形确确实实是居中了的,但是看上去依然不协调:感觉偏向左边。
这种问题不光三角形会遇到,其它不规则的形状都有可能出现这种不协调感。解决办法很简单,微调位置,直到视觉上感觉协调,如图 4。
但是原理是什么呢?原理是我们应当利用三角形的重心来居中。三角形的重心是三角形三条中线的交点,我们可以简单通过绘图找到三角形的重心位置,如图 3,借此,我们再以图 2 的居中为基础,再把三角形往右移动 3 px。
这样的话我们就把重心放在了中间的位置上,看上去也更协调了,如图 4 与下图:
为了研发团队能达到视觉图的效果,我们可以在三角形的左边,把这 3px 的偏移补上。也就是说,我们最终导出的图标素材应该是图 5 这样的,左边多出宽度为 3px 的透明区域。
好了,完事,导出!
这时候问题就来了,Sketch 在导出的时候替我们把这 3px 宽度的透明给剪掉了:
这时该如何办法?很简单,创建组件。
选中这个调整过的三角形,点击 Sketch 左上角的创建组件,给你的组件取名:
Demo/Adjusted Play Button 这种命名方式将允许 Sketch 把你的组件按照路径整理起来,是一个很好的习惯。
最后,左边栏上方的页面里,应该多了一个叫组件的页面,里面有一个画板,就是我们的播放按钮。
选中整个画板再导出,透明部分就不会被裁掉了。
除此以外,我们再需要用到这个三角形的时候,只需要从左上角的加号里,找到我们的 Adjusted Play Button 就好了。
Paradigm
我们应该尽量多地去创建组件,这样有利于减少项目(也就是这个 sketch 文件)的维护成本。
比如这个播放按钮,在这个 Sketch 文件的 3 个页面、20 个画板里、总共出现了 30 次,这时候你忽然需要把三角形换成浅灰色的,或者把它的三个角变成圆角,这时候你就需要来回翻找去修改。通常情况有几处会忘记修改。
而如果你把三角形变成了组件,你只需要在组件页面里修改这个三角形就可以了。
如果这个三角形需要在多个项目中使用,你甚至可以单独为你的团队创建一个组件库,说白了就是单独创建一个 Sketch 文件,然后像上文中一样,添加为组件库。一旦团队需要做整体风格上的转变,你只需要到你的组件库中去修改,就能把修改应用到所有使用了这个组件库中的组件的文件。
最后呼吁大家尽量使用正版的 Sketch,团队成员可以推动团队管理员去获得正版授权,因为随着一个又一个版本的迭代,Sketch 组件变得越来越好用了,这一点大家有目共睹(从前的组件灵活性很低,一个组件拖到画布里,可定制性非常低)。将来再升级几个版本后,还用“复制粘贴”来复用元素的手法,不觉得太原始了吗?