ios端组件库 苹果组件库在哪_圆角矩形


添加组件库

给你的 Sketch 加入一个 Sketch Library,你就可以通过使用该 Library 中现成的组件来加快画图速度。

iOS Sketch Library

最常用的比如说 iOS Sketch Library,在 Apple Design Resources 可以下载到。

苹果的资源安装方式比较高级,如果安装了高版本的 Sketch,点添加就可以唤起 Sketch。


ios端组件库 苹果组件库在哪_无法创建中间层组件_02


其它组件库

普通一点的,下载之后是一个 Sketch 文件。比如 Sketch App Sources 中的一些组件库,或者这个挂在 GitHub 上的:

Material Icons Sketch Library

下载之后是一个 .sketch 的文件,你需要先把它妥善保存在电脑的某个位置。然后双击用 Sketch 打开,在文件菜单中添加为组件库就可以了:


ios端组件库 苹果组件库在哪_圆角矩形_03


之后,它就存在于你的 Sketch 的组件库中了:


ios端组件库 苹果组件库在哪_无法创建中间层组件_04



使用组件库

添加完组件库后,你就可以往你的画板里面添加现成的组件了。

点开左上角的加号,选择组件,放在你的画板中:


ios端组件库 苹果组件库在哪_App_05


ios端组件库 苹果组件库在哪_iOS_06


选中组件后,通过右侧的面板,可以修改其中的文字:


ios端组件库 苹果组件库在哪_无法创建中间层组件_07


iOS 的组件由苹果开发,比较精致,组件中内嵌的图标也都是组件,可以替换成别的组件:


ios端组件库 苹果组件库在哪_App_08


如果这种程度的自定义无法满足你的需求,你可以右键组件,将它分离,就可以任意编辑了。


ios端组件库 苹果组件库在哪_iOS_09



创建组件

举个例子来说明如何创建组件:一个播放按钮。

知乎传图片太麻烦,先把图片都放出来:


ios端组件库 苹果组件库在哪_iOS_10


首先播放按钮大致思路已经很明确了,一个三角形,如图 1。

但直接导出给研发的话,就会出现布局上的问题。比如图 2 中,我们尝试把三角形居中对齐放置在圆形、圆角矩形中,前者可以用来暗示「这里是一个视频」,后者形如 YouTube 的 Logo。

我保证,三角形确确实实是居中了的,但是看上去依然不协调:感觉偏向左边。

这种问题不光三角形会遇到,其它不规则的形状都有可能出现这种不协调感。解决办法很简单,微调位置,直到视觉上感觉协调,如图 4。

但是原理是什么呢?原理是我们应当利用三角形的重心来居中。三角形的重心是三角形三条中线的交点,我们可以简单通过绘图找到三角形的重心位置,如图 3,借此,我们再以图 2 的居中为基础,再把三角形往右移动 3 px。

这样的话我们就把重心放在了中间的位置上,看上去也更协调了,如图 4 与下图:


ios端组件库 苹果组件库在哪_App_11


为了研发团队能达到视觉图的效果,我们可以在三角形的左边,把这 3px 的偏移补上。也就是说,我们最终导出的图标素材应该是图 5 这样的,左边多出宽度为 3px 的透明区域。

好了,完事,导出!

这时候问题就来了,Sketch 在导出的时候替我们把这 3px 宽度的透明给剪掉了:


ios端组件库 苹果组件库在哪_ios端组件库_12


这时该如何办法?很简单,创建组件。

选中这个调整过的三角形,点击 Sketch 左上角的创建组件,给你的组件取名:


ios端组件库 苹果组件库在哪_无法创建中间层组件_13


Demo/Adjusted Play Button 这种命名方式将允许 Sketch 把你的组件按照路径整理起来,是一个很好的习惯。

最后,左边栏上方的页面里,应该多了一个叫组件的页面,里面有一个画板,就是我们的播放按钮。


ios端组件库 苹果组件库在哪_App_14


选中整个画板再导出,透明部分就不会被裁掉了。

除此以外,我们再需要用到这个三角形的时候,只需要从左上角的加号里,找到我们的 Adjusted Play Button 就好了。


Paradigm

我们应该尽量多地去创建组件,这样有利于减少项目(也就是这个 sketch 文件)的维护成本。

比如这个播放按钮,在这个 Sketch 文件的 3 个页面、20 个画板里、总共出现了 30 次,这时候你忽然需要把三角形换成浅灰色的,或者把它的三个角变成圆角,这时候你就需要来回翻找去修改。通常情况有几处会忘记修改。

而如果你把三角形变成了组件,你只需要在组件页面里修改这个三角形就可以了。

如果这个三角形需要在多个项目中使用,你甚至可以单独为你的团队创建一个组件库,说白了就是单独创建一个 Sketch 文件,然后像上文中一样,添加为组件库。一旦团队需要做整体风格上的转变,你只需要到你的组件库中去修改,就能把修改应用到所有使用了这个组件库中的组件的文件。

最后呼吁大家尽量使用正版的 Sketch,团队成员可以推动团队管理员去获得正版授权,因为随着一个又一个版本的迭代,Sketch 组件变得越来越好用了,这一点大家有目共睹(从前的组件灵活性很低,一个组件拖到画布里,可定制性非常低)。将来再升级几个版本后,还用“复制粘贴”来复用元素的手法,不觉得太原始了吗?