Sketch学习

作者：Robert Chen 译者：Andy矢倉

原文：Sketch Tutorial for iOS Developers

作为一名iOS开发者，我经历过几个没有设计师的项目，结果就是，痛苦的一逼。

做这种类型的项目，设计是非常重要的，特别是迭代设计。

在每个项目最开始的时候，客户其实并不知道自己想要什么。直接堆码之前我们还是有点小小的设计知识更有助于你跟客户撕逼的时候占上风，其实我们只是想更完美，难道不是吗？

这里我更推荐的做法是，迭代原型，而不是先堆码，这才是一个合格码农该做的。

但是怎样才能在没有设计师的前提下设计原型，那就必须用到

Sketch

这货。

Sketch

是创作

Logo

和

Icon

feel倍儿爽的工具。它是基于矢量图形的，这意味着你在调整图形大小的时候可以不用担心丢失画质。它包含

iPhone设备尺寸

的画板和一个内置的

UIKit模板

，你也可以用

Sketch

来创建迭代设计原型。另外，

Sketch

还是一个让程序汪能快速上手的工具。

在本教程中，你可以学到：

使用UIKit模板创建一个模型。

使用矢量工具创建Icon。

通过组合基本形状制作Icon。

为Xcode导出图片素材资源。

而最重要的，你能以开发者的身份来学习这份教程。准备好就可以升级了您的设计技能！Let's do it！

开始

首先第一件事情，你需要

Sketch

。在

www.sketchapp.com

14天试用版。购买激活需要

$99

，要什么版本自己看着办。

一旦你已经安装了Sketch，打开Sketch，坐下来，放松，吸气，呼气，放屁，然后就可以开始一场盛大之旅了！

在下面的章节中，我将指导里在Sketch中挑战各种UI元素来制作图标。请注意，这些都只是出于学习目的，等你自己上手后，完全可以让其狗带，毕竟本教程后面已经不需要这些东东了。

正所谓，能动手就憋逼逼，那就不瞎逼逼了，直接开整。

模板 - Templates

iOS的界面设计模板包含一套矢量格式UIKit组件集合。它有一个标签栏，导航栏，表视图，以及更多。您可以使用它创建一套设计原型。

操作路径

File\New
From Template\iOS UI Design

，你会看到以下内容：



注意这个菜单里也可以选择Android的

Material
Design

设计模板。

打开之后你会看到一个包含各种iOS的UI组件的巨大模板。你可以通过在画布上拖拽选择各个控件，你可以通过按住

Command

，并使用鼠标滚轮进行画布缩放。

画板 - Artboards

你可以在Sketch这个无限大的画布上绘制你想要的任何图形，如果你要展现多个App屏幕的内容，那就要通过

画板

这个东西。画板组织一个固定的画布图层。当你导出画板，所有的图层将会合并成一个单一的文件。这里可以把它看做成Xcode里一个Storyboard的控制器场景(ViewController
Scenes)。

通过执行以下步骤来创建一个新的画板：

拖动画布，移动到一个空白区域。

从左上方第一个功能按钮

Insert

，单击选择

Artboard

。

在出现的右窗格中，选择

iPhone6

尺寸。

注意：你看到的这个教程的UI模板可能会低于你所使用的版本，某些UI控件或者元素的位置可能会有不同，但这并不影响本教程的学习。



创建之后你应该能看到一个叫做

iPhone6

的空白画板。默认情况下，新创建的画板将把它周围自由浮动的元素也都包含进去。这样肯定就煞笔了，所以我们还是按照上面的步骤，把默认的模板滚到别的地方，中间留出空白区域用于创建我们所需要的画板。

只要你爽，画板你想添加多少都行。

Sketch

有

iPhone

，

Apple
Watch

，甚至

iPad
Pro

的尺寸。如果你点错或者不想使用这个画板，选择删除即可，不用想太多。

注意：如果你想要任意大小的画板，你可以

Insert\Artboard

，随便选择一个画板，任意拖动大小即可，至于命名，在左边的文件组织列表栏里把画布所在的分组栏重命名即可。

复制，粘贴

现在，你已经有了一个画板，从UIKit模板中拖动这几个控件。一个

Navigation
Bar

，

Tab
Bar

和

Table
View Cell

。

虽然你可以复制和粘贴

?C和?V

，但这很难预测粘贴后控件出现的位置。所以还是老实点，按住

Option

键拖动一个控件，在你想要粘贴的地方松开鼠标左键即可。



提示：如何使用快捷键

?D

重复前面的动作。使用

Option

拖拽粘贴与

?D

创建多个副本：

选择一个控件直接按住

Option

键拖拽

Cell

到合适位置。

接着使用快捷键

?D

创建剩下的

Cell

。

如上图演示一样，你有没有吃精呢？

基础形状 - Basic Shapes

首先，新开个文件或者在画布上找个空白的地方插入一个画板：

Insert\Artboard

接着，我们来搞个图形玩玩，

Insert\Shape

选择一个可用的形状。



实际上，我们可以使用快捷键来插入新的形状。使用

快捷键O

再按住鼠标左键拖拽即可插入一个椭圆，同样使用

快捷键R

可以插入一个矩形。下面，罗列出一些常用的图形插入快捷键：

L：插入直线快捷键

O：插入椭圆快捷键

T：插入文本快捷键

R：插入矩形快捷键

有了这些，你可以自己动手画个机器人玩玩（过程中你可能需要调整下字体来达到相同的效果）。



注意：在插入的时候你可以按住

Shift

来保证图形绘制成圆形和正方形。

制作图形 - Styling a Shape

基础的形状虽然好，但是基本上不能给人留下深刻的印象，所以我们可以使用窗口右侧的

Inspector

栏来编辑图形的一些基础属性，比如颜色，边框半径啥的。这个东西你可以理解为

Xcode

的

Attributes
Inspector

工具栏。



下面罗列的选项你可以多试试，熟悉一下：

位置/大小 - Position/Size：对于有的图形或者画布很难拖动调整，你就可以利用这个选项调整画布，点击

Size

选项中间的

小锁图标

可以锁定比例，在调整大小的时候就会按照你想要的比例等比例缩放。

半径 - Radius：这个选项应该不用解释太多应该都懂，就是调增矩形边角弧度半径的的一个滑块。

透明度 - Opacity：看名字也知道了，同上，不多解释，下面会有很多示例。

填充 - Fills：使用颜色选择器来改变图层的填充色，也可以取消透明填充。

边框 - Borders：设置边框粗细和边框颜色，也可以完全禁用它。

小贴士：Sketch自带有色彩拾取器，快捷键是

Control-C

，这完全是一个内置拾取器，非常方便。



有了这些，你可以跟着下面的动态图做学习下药丸的制作：

使用快捷键

R

创建一个矩形。

通过调整矩形边角半径

Radius

到

100

让其看起来像药丸。



就如刚才说的一样，你可以自己试试其他的设置，提升一下熟练度。

图层列表 - Layer List

这个功能区

图层列表
- Layer List

位于窗口的左边，它包含了图层列表所包含的所有图层文件。图层是重叠起来的，结构类似于

Storyboard

中的视图层次结构。

文件组织层逻辑，你可以把多个图层作为一个单元一起移动，你还可以使用导出把它到合并成一个单一的对象并导出成图片。在图层列表中，组的概念用文件夹图标表示。

下列是图层组管理常用的快捷键：

?G：选择多个图层拉进一个组。使用

?-Shift-G

键取消组合。

?R：重命名选定的项目。Sketch里

回车键

只能展开组，不能重命名哈。

?-Option-Up/Down：快速移动在组内移动图层，可以理解为iOS开发中视图的层级

index

的移动。

?-Shift-L：锁定图层，让其在画布中不能被选择，即便是在图层列表选择也不能编辑。这个功能将在下一节使用。



提示：使用这些功能能让我们很好的组织图层结构，就如一个有洁癖的开发需要好的工程目录组织一样，快速定位和爽心悦目是必须的，比如动态图利演示的

TableView

和

Tab
Bar

一样。然后你可以使用

?-Option-Up

组合快捷键把图层移动到整个画板前沿，避免被其他图层挡住。这里我们尽量不要选择拖拽来排列，避免不小心拖到一个组到另一个组里去了（老版本的

Xcode

经常有这鸟问题，一不小心组就拖错了）。

试试加些分组到你的

iPhone

画板里，记得多练习下分组命名。

矢量工具 - Vector Tool

画圆啊，矩形啊，线条这些都太low逼了，限制也比较多。接下来我们就试试矢量工具来把刚才这些基本图形变变形。

用直线来画图形

您可以通过点击创建任意多边形，接下来试着做一个多边形：

1.使用快捷键

V

激活矢量图形工具。

2.开始画梯形的边角。

3.通过点击起点闭合形状。

4.点击编辑按钮 -

Edit

，拖动各个向量指向重新定位。

5.添加填充颜色 -

Fill

。

6.删除边框 -

Border

。



非常爽的是，因为Sketch可以让你在事后重新定位每个矢量点，因此不需要你有很大的绘画技巧就可以使用矢量工具。当你拖拽矢量点的适合还有跟

Storyboard

里面拖拽控件一样，会有对齐提示，只不过这里是红色的实现。

旋转副本 - Rotate Copies

如果你以为这里就只是画个梯形简直图样，接着我们就使用旋转副本功能来搞个风车耍耍。旋转副本创建了复制图形并给你创建了一圈，看起来有木有像个花瓣（像个毛）？又在瞎逼逼了，动手试试：

1.选择菜单

Layer\Paths\Rotate
Copies

。

2.输入

3

，制作三份副本（算上你画的那个一个是四个）。

3.拖动白点，白点位置标示圆心，旋转一圈，看看有没有像银行标志，手里剑，风车啥的。



Sketch的旋转副本功能会自动创建一个循环副本，至于组合型，我们后面会讲到。

剪刀 - Scissors

位于旋转副本功能上面有个叫做

剪刀
- Scissors

的菜单选项。这里我们使用它投机倒把，创建一个WatchKit活动环耍耍：

1.创建一个圆（记住，使用快捷键

O

并按住

Shift

拖动出一个圆圈）。

2.取消填充

Fill

。

3.把边框

Border

的值加大到

25

。

4.选择菜单

Layer\Paths\Scissors

。

5.

剪断

圆圈的左上部分。

6.旋转边框

Border

栏，点击齿轮

Gear

按钮。

7.在弹出的菜单里选择圆端

rounded
ends

选项。



这里说明一下，其实一个圆就是通过四个矢量点和四条矢量路径回执而成，所以矢量路径可以随便干掉。

小提示：你可以在使用剪刀剪断矢量路径之前用编辑功能拖动任意路径。

模式和操作棒 - Modes and Handles

Sketch使用四个向量点来绘制圆。你可以画一个圆试试，然后单击工具栏中的

编辑Edit

看到这些向量点。

可以你会怀疑，一个长方形也有四个矢量点。 这特么到底是怎么回事？其实两者之间的区别就在于圆使用的是

贝塞尔曲线
- Bezier Curves

。



简单的说，

贝塞尔曲线
- Bezier Curves

就是是可以通过

控制点

弯曲的曲线线条。Sketch称这些控制点叫

操作棒
- handles

。每个向量点附带有控制每边弧度的两个操作棒。这意味着线的弯曲程度是通过操作棒的各个控制端做决定。听起来比较复杂，但是这里我们需要太深入了解，在Sketch中，您只需拖动操作棒，直到曲线变成你想要的样子就可以了。

Sketch方便的定义了基于在需要操作的对象上相对位置的不同的四种模式。



直线模式 - Straight：这个模式没有操作棒，意味着也没有曲线变化，那当然也就是直线了。

对称模式 - Mirrored：操作棒具有相同的长度，并形成一条直线，像飞机的机翼，操作棒是相互对称的。所以使用这个模式创建的就是对称曲线。

不对称模式 - Asymmetric：操作棒任是一条直线，但它们可以有不同的长度。

不连续模式 - Disconnected：两个操作棒相互独立，既不对称，长度也不相同。

所以前两种模式都是对称形式，只不过一个是直线，一个是曲线。后两种模式是非对称形式，方便创造任意曲线。

实际使用中，创建曲线so easy，只需点击矢量点再选择

不连续模式
- Disconnected

即可。然后你就可以随便玩了，只要不会让曲线看起来断开就行。

在实践中，使曲线是非常简单的。在矢量点只需双击，然后点击断开。然后你像电视天线的兔耳每个把手futz直到曲线看起来正确。

要了解更多关于模式和操作棒，这篇

文章

可以参考。

贝塞尔曲线理论 - Bezier Curve Theory

其实你并不真的需要知道贝塞尔曲线背后的数学才能使用矢量工具 - 但是我偏不！ ：] 这里我有一个非数学的比喻，可以帮助了解计算机是怎么把这个东西画到屏幕上的。

这里原作者使用了不恰当的棒球比赛模型来来举例，里面没有裁判，我也不太了解棒球规则，就不瞎逼逼了，按照我的理解来说。

1.绿色boy要直接冲回老家全垒打。

2.蓝色boy去当然要截断，冲向绿色boy，由于绿色boy是移动的，所以蓝色boy的走位就是曲线运动。

3.然而下路的红色boy心急比较重，不能眼看着绿色boy被干，当然要去KO蓝色boy，所以红色boy的走位也很风骚，也是曲线。



本垒和红色boy的位置代表矢量点，绿色和蓝色boy的位置就是操作棒。这样红色boy的运动轨迹就是

贝塞尔曲线

。



不知道这么说你们有明白了没有，如果还没明白，这里有个

可视化工具

，自行解决了，贝塞尔说起来没完没了。

矢量操作棒上手

接下来我们动手创建一个地图标记的图标：

1.先在画布上拉一个圆。

2.边框

Border

设置为

15

。

3.进入编辑状态（顶部工具条的

Edit

），选择底部的矢量点。

4.把操作模式从

对称模式 - Mirrored

改为

直线模式
- Straight

。

5.把底部的向量点向下拖动。

6.拖动

边角 - Corners

滑块的值到

35

（这里根据你圆的半径自行更改，效果一样就行）。



所谓的地图标记就和上面示意图一样，点和圈之间的关系。后面的教程会对地图标记做更详细的介绍。

创建自定义图标

我们来搞个Logo，这里只是用简单的铅笔工具来画线，然后拿矢量工具来描边。

接下来我们就搞一个

Ray
Wenderlich

的Logo耍耍。

1.

这个

是Logo的低像素版本。

2.把这张Logo扔进Sketch。

3.选中图片，在右侧的属性编辑栏把

不透明
- Opacity

属性改为

20%

，方便描边。

4.使用快捷键

Command-Shift-L

把图层锁定，防止你不小心拖动了，锁定之后图层名称旁边会有小锁的图标。

5.快捷键

V

激活适量工具。

6.点击Logo里图形的每个顶点，半弧形的不用点，直接回到最开始的点来闭合矢量路径。

7.在图像路径上双击即可进入编辑状态。

8.重新定位没有和图形顶点重合的矢量点，我们要的就是完美（图太小了别忘了放大后再定位）。



上述步骤搞完了我们现在可以开始搞刚从忽略的弧形了。这里我们将对刚才学到的模式进行活学活用。

1.

双击

起始点，模式会由

直线模式
- Straight

改为

对称模式
- Mirrored

。

2.但是我们不是使用这个模式，切换到

不连续模式
- Disconnected

。

3.拉着右边的操作棒变换弧形。

4.拉着左边的操作棒和第二个矢量点重合，以免第一条直线变形。

5.如果第一个矢量点右边的操作棒不能完美的画出Logo对应的弧线，可以开启Logo里弧形另外一边的点，也就是倒数第二个点。

6.操作比作类似第一个矢量点的步骤，这里的目的只要把弧形调整完美即可。



这里运气比较好，RW的Logo只有一条弧线，以此类推，你可以使用更多的点来描出更多复杂的曲线。有兴趣可以去下载

Swift

的Logo来临摹。过程中可以通过使用快捷键

Tab

来快速切换每个矢量点。

结合形状

想必大家小时候都玩过七巧板，我们除了通过矢量工具，还可以通过使用基本图形的结合来创建独特的形状。

在编程中，有运算逻辑

AND

，

OR

和

XOR

，Sketch中也有类似的表达，但是叫法不同，分为

融合
- Union

，

相差
- Subtract

，

相交
- Intersect

，

差异
- Difference

。

融合 - Union

融合 - Union

就是就是两个图形加起来，使用之前的药丸和圆弄个云出来耍耍。

1.使用矩形创建一个小药丸。

2.创建一个圆。

3.移动圆，使其和药丸重合。

4.选中两个图形，点击

融合 - Union

按钮使其融合成一个图形。



这里是不是很奇怪，两个图形的边框直接就融合到一起了，这就是Sketch的神奇之处。

相差 - Subtract

相差是两个图形重合在一起，一个被另一个包含，所以大集合除去小集合还会有多余的，多余的就是相差的部分，如果不变理解，可以想象为数学减法，结果就是相减之后的部分。

虽然之前的地图标记图标看起来已经可以了，但是我们所谓社会主义的接班人，怎么可以这么轻易就完了呢，不行，还得在标记上戳个洞看起来才爽。那就利用刚才介绍的相差的知识这么干：

1.创建一个地图标记图标，这次不需要边框，直接取消掉。

2.创建一个小圆圈，并拖入到标记里面去。

3.操作左侧的图层列表，把圆圈拖动到地图标记图层重叠到一个图层下。

4.展开合并生成的新图层。

5.确保圆圈图册在地图标记图册上面。

6.这是图层列表上地图标记图册右侧会有一个可弹出菜单。

7.菜单中选择

相差 - Subtract

。

8.选中圆圈图层，使用小箭头微调位置即可。



这里总结一下知识点：

在图层列表里可以拖拽合并生成新的图层

当你合并图层的时候，你基本不用操心，Sketch会帮你搞定你想要的。

对于这些过程，你只用保证孔在最前既可以，如果图形小时，重新排列图层位置顺序即可。

填充、轮廓

这个节点，本教程为你准备了必须的

素材文件

。打开之后应该长这样：



这套包含了单个示例和矢量图标的素材方便你随时查阅，这些素材都是在教程前后使用的。

Tab Bar

的图标颜色变化是基于选中状态，但是一些图标有太多的空间，所以颜色变化太微妙。在这种情况下，

苹果的人机界面指南

推荐使用单独填充版本作为

selectedImage

。

RWDevCon

应用的样本都有各自的

Tab
Bar

独立版本。



在刚才下载的素描文件里，有一个被称为日历入门的画板，日历图标其中包含几个几何图形合并的而来的图标。就是一些简单的几何图形拼凑而已，前面已经很好的演示过来。

下面我们来创建日历图标：

1.打开刚才的Sketch文件，在左侧图层列表展开

日历入门
- Calendar Starter

画板。

2.选中

日历主体 - Calendar
Body

部分和

分割线
- Separator

部分。

3.使用

相差 - Subtract

功能。

4.按住

Shift

再选中

Right
Hole

图层，还是使用

相差
- Subtract

功能。

5.同理，再把

Left Hole

图层也重复上述步骤。

6.接着按住

Shift

再选中

Right
Ring

图层使用

融合
- Union

功能。

7.同理，

Left Ring

图层也这么照做。



通过相差和融合操作，现在的日历入门的画板上就只剩一个包含了刚才所有图层的单图层了，一切都看着泛绿。如果按照上述步骤操作之后和效果图有什么出入，可以参照画板下方的实例对照。

现在，来搞一个填充的图标。是时候重新调整一下，让其看起来像示例版本了。

1.在画布上找到

日历填充 - Calendar
Fill

。

2.在图层列表里展开

日历填充 -
Calendar Fill

。

3.再展开

日历主体 - Calendar
Body

图层，并选择

分割线
- Separator

图层。

4.把

分割线 - Separator

图层

高度

设置为

35

即可。



调整分割线高度的时候，Sketch不会有明确的高度指示，所以你可以选择直接输入数值。

圆形轮廓头像

在应用中，往往用户头像都圆形边框的。为了达到这种效果，我们将使用蒙版功能，这和相差功能很类似。但是，这不是从内掏空，而是从外延切掉。

下面我们来创建一个头像：

1.在左侧的图层列表里展开

Greg
Before

画板。

2.在画板里画个圆出来，圆要足够大，大到把整张脸都能遮住。

3.选择名为

greg

的图层和刚才创建好的圆形图层。

4.确保头像在蒙版的下面。

5.点击

Mask

按钮使用蒙版功能。

6.展开新合成的

图层组 - greg

，然后选择

蒙版图层
- Mask

。

7.给蒙版图层加上

边框

，使用四个方向键来移动蒙版位置。



跟相差功能在顶部刚刚相反，蒙版需要在图层底部。

图像导出

在Sketch窗口的右下角有

导图功能
- Make Exportable

。

如果需要导出多个图层，有以下两种方法：

组 - Group：使用组导出，会把多个图层合并成单一图层导出。

画板 - Artboard：画板同组一样，会把多个图层导出成单一图层，图片大小根据画板的画布大小确定。

在导出之前请先确定好画板的宽高，这些参数是基于1x的图片大小。

小提示：需要缩放的话可以使用缩放按钮，点击

Mask

旁边的

Scale

按钮即可，缩放功能是等比例，不用像下面这样分别调整。

PNG

Sketch可以很容易的输出各种尺寸的图片：

1.在窗口右下方使用

图层输出 -
Make Exportable

。

2.点击

加号+

增加一个@2x输出。

3.再点击

加号+

增加一个@3x输出。

4.最后点击

导出Export

按钮把三张图片导出。

PDF

虽然每个图像都可以导出@2x和@3x尺寸的图，但是我们的

Xcode

早就支持

矢量图像

，而且还是

PDF

格式的矢量图形，这就好比

带了图像的SVG

一样。

1.在窗口右下方使用

图层输出 -
Make Exportable

。

2.保持

1x

尺寸。

3.选择

PDF

格式导出。



接下来我们把PDF格式的矢量图形添加到Xcode的

素材管理分类
- Asset Catalog

里。

1.在

Xcode

里打开

Images.xcassets

。

2.创建一个新的

图片集合 - New
Image Set

。

3.在

属性检查器 - Attributes
Inspector

中，把

缩放系数
- Scale Factors

从

Multiple

改为

Single
Vector

。

4.把你的PDF扔进去即可。



有了这个矢量的PDF文件，Xcode会自动生成

@2x

和

@3x

图，这样不仅省去了PNG图片还减少了图片资源众多管理，命名的麻烦，有没有很爽的样子？

结语

Sketch的入门使用就介绍到这里，教程中所使用的工程文件可以在这里

下载

。

面对强大的Sketch，我们还有很多需要学习的地方，此后如有问题不能解决可以直接上

官方文档

。或者多看看这些

博客

和

视频

。

你要是喜欢我这里有些

矢量图标的素材

，随便下。

最后，非常感谢你们看完这边教程，要是有什么不足或者意见，欢迎大家一起留言讨论。