2.4　Sketch工具一览

（1）插入工具

插入工具右下方的向下箭头代表它有二级菜单，单击Insert后，我们可以选择插入不同的内容到Artboard上，如图2-4-1所示。

（2）钢笔工具

使用钢笔工具可以灵活地勾勒出各种矢量形状，钢笔工具的具体用法将在下文中详述。

（3）铅笔工具

铅笔工具可以让我们像使用真实的铅笔一样在画布上随意画出各种线条，拖动鼠标的轨迹即可形成线条。

（4）文本工具

选择后单击即可在Artboard上输入文字。

（5）图片工具

可以插入一张现有的位图图片到Sketch中。

（6）切片工具

可以将设计稿的选中部分单独导出，是导出设计稿素材的常用工具。

（7）Artboard（绘图板）

Sketch在工作区域的任何地方都可以随意放置任何元素。但Artboard是Sketch中非常独特的存在，我们可以在工作区域中随意建立多个Artboard，然后在Artboard中进行设计，这一点类似于画布，但不同的是在Photoshop中，我们无法在一个屏幕中建多个画布，必须进行窗口切换来操作，这对于上下屏逻辑关联非常强的移动应用来说非常不方便，使用Artboard在工作区域中可以建立多个画布，方便我们从整体上对设计进行调整，减少切换窗口花费的时间成本，在一个屏幕中即可完成所有界面的设计，图2-4-2为Artboard中的画布展现形式。

（8）线条工具

选中并拖动鼠标即可画一条直线。

（9）箭头工具

选中并拖动鼠标即可画出箭头。

（10）形状工具

形状工具是一系列图形的集合，其中包含着各种常用的形状，包括圆形、矩形、圆角矩形、星形、多边形等。

当然我们还可以单独添加以下图形到工具栏，如图2-4-3 所示。

图形工具的使用方法基本相似，选择图形后拖动即可画出相应形状，在右侧属性栏中，可以调节图形的大小、坐标、颜色等属性，方法很简单，选中某个元素，在右侧的属性栏中即可调节。

（11）元件工具

元件是指具有某种可以复用属性的元素，比如我们定义了一个元件在设计稿中使用，当我们修改一个元件的属性（比如颜色由蓝色变为绿色）时，那么设计稿中使用此元件的位置的效果均会发生变化，只需要做一处修改即可改变所有使用此元件的元素。元件有它方便的地方，比如复用率较高的返回按钮，但也有不方便的地方，依然是返回按钮，在某个特殊位置需要变成白色，那么这个时候使用元件就不合适了，因为所有用到这个元件的地方的颜色都会发生变化。Sketch内置了标准的iOS8元件，使用方便，不需要再重新设计即可随时使用。

（12）格式化的文本

当某种大小和颜色的文字样式使用特别频繁时，我们可以将其定义为一种样式，需要时选择样式即可一键设定文本的属性，不需要烦琐地对每个文本单独设置。

（13）组合/解组工具

可以把多个分散的元素组合到一个“文件夹”内，方便管理。选中你想要建立群组的元素，使用Group或者按快捷键Command+G即可。图层中群组会以蓝色文件夹标识，如图2-4-4所示。

与组合工具相反的是解组工具 ，快捷键为Command+Shift+G。

（14）路径结合工具

与上边的组合工具不同，路径结合工具是针对路径进行操作，不会建立组的文件夹，使用路径结合工具后，分属于两个图层的路径将合成为一个图形。

路径结合工具有四种选项，如图2-4-5所示。

Union——联合

Subtract——减去

Intersect——相交

Difference——消减重合

初学者看起来会有些难懂，下面我们举例来说明，首先在Sketch中画一个圆与一个正方形，并让其重合一部分，如图2-4-6所示。

接着选中这两个元素，分别使用Union、Subtract、Intersect、Difference，效果如图2-4-7所示。

我们在设计过程中可以活用这几种模式，画出不同的路径。

（15）图层上移/下移工具

使用这两个工具可以将图层向上一层或者向下一层移动，实现不同的层次效果。

（16）路径工具组

内含多种路径编辑工具，如图2-4-8所示。

（17）形变工具

拖动节点可以使一个形状变形。

（18）路径编辑工具

编辑矢量形状或者路径的一个或多个节点，配合右侧属性栏中的项目，可以进行更复杂的路径编辑，路径功能我们将在“3.3 钢笔、铅笔尖工具”中详细讲解。

（19）平面化工具

当我们使用上文提到的路径结合工具对多个形状进行联合、减去、相交、消减重合等操作后，会发现Sketch默认还是将这两个形状分属于两个图层，如图2-4-9所示。

在某些情况下，我们需要将这些形状合并为一个路径，这个时候，选中刚才操作过的形状，选择Flatten工具即可实现，此时图层会发生改变。请注意，这里的Flatten工具并不是将矢量图形位图化，仅仅将多个路径合并为一个路径。

（20）剪刀工具

使用剪刀工具可以将某段路径删除。如图2-4-10所示的圆形由四段路径组成，使用剪刀工具移动到某段路径，这段路径变为虚线，单击即可将路径“剪掉”。

（21）旋转工具

将某个图形沿着轴心旋转。轴心位置可以根据需要调整，实现不同的旋转效果，如图2-4-11所示。

（22）旋转拷贝工具

将一个图形按照一个圆心复制并均分，可以设定复制的份数，并通过调节杆实现不同的重复效果。多加利用，可以玩出很多奇妙的效果，如图2-4-12、图2-4-13所示。

（23）轮廓工具

轮廓工具可以将文本转化为矢量路径。当需要对字体重新设计的时候，Outline功能会派上大用场。文本使用Outlines功能后，将失去文本编辑功能，也就是说，文本转化为了矢量图形。图2-4-14是转化后的文字效果，每个路径都可以单独编辑。

（24）路径描边

将一段路径转化为一段节点围绕的封闭图形。举例说明，使用钢笔工具画一条曲线，这个时候曲线是一条单一路径。先将这条曲线调粗，然后使用路径描边工具，这时会发现它成为一段封闭并由颜色填充的图形，可以对每个节点单独调节，如图2-4-15、图2-4-16所示。

（25）缩放工具

通常情况下，我们可以通过选中某个图形，调节图形四个角的调节杆来缩放图形。这里的缩放工具为我们提供的是通过数值来缩放的功能，通过输入长宽值或者缩放百分比实现图形缩放，如图2-4-17所示。

（26）遮罩工具

遮罩工具大家一定不会陌生。Sketch中的遮罩同样分为两种，一种为轮廓遮罩（Outline Mask），另一种为通道遮罩（Alpha Mask）。先来看轮廓遮罩，例如我们要将图2-4-18中的狗狗头像做成圆形，只需要画一个矢量圆形，然后将圆置于位图上方，选中两个图层，然后单击Mask工具即可实现。

（27）标尺工具

单击可以显示标尺，再次单击可以隐藏标尺。Sketch的标尺与参考线的操作方式与Photoshop稍有不同。参考线的拖动只能在标尺区域操作，并不能在工作区操作。在标尺区域单击即可出现红色参考线，要移动某条参考线，也必须在标尺区域拖动。删除参考线需要拖动到标尺区域外，此时鼠标形状会发生变化（上下拖动水平参考线到标尺区域外侧，左右拖动垂直参考线到标尺区域外侧）。直接在标尺区域拖动标尺，可以移动标尺，如图2-4-19所示。

（28）网格工具

网格的密度、颜色等可以通过Grid Settings来进行设置，如图2-4-20所示。

（29）栅格化工具

栅格化工具可以将工作区域通过阴阳色均分，便于我们进行栅格化设计。同样，栅格化工具的相关属性也可以通过Layout Settings来调节，如图2-4-21所示。

（30）显示/关闭像素

有时候我们需要放大图形来微调某些细节，这个时候可以打开显示像素功能，方便我们查看。当Sketch的缩放大于100%时，这项功能才能看到差异。图2-4-22为打开和关闭显示像素功能的位图效果。我们发现打开显示像素后，图像的颗粒感增加了。

（31）导出

顾名思义，将做好的设计稿导出为其他的位图或者矢量文件。

（32）创建元件

将一些可以复用的元素定义成元件，可以提高工作效率。修改元件后，所有使用这个元件的位置的样式都会发生变化，比如我们经常使用返回按钮，可以将这个按钮设置为元件，当需要修改这个按钮的颜色等属性时，只需修改这个元件，所有使用这个返回按钮的位置的属性都会发生变化。定义元件后，图层中将使用紫色文件夹表示。

Tips：有时候我们需要单独修改某个按钮的颜色，但这时候这个按钮恰好是一个元件，没关系，只需要在紫色图层上单击鼠标右键，选择 Detach from Symbol，此时它就不属于一个元件了。

（33）Mirror功能

Mirror功能可以让我们的设计稿在手机上实时预览，不需要数据线即可操作。需在手机上安装Mirror客户端，此功能将在后边的章节中详细讲解。此功能为我们预览设计稿带来极大的方便。

（34）缩放按钮

这是我们最常用的功能，缩放视图区域。通常我们会使用快捷键操作。快捷键有两种：1.使用快捷键Command+减号/加号；2.按住Command滚动鼠标滚轮。选中你需要缩放的元素，再使用缩放功能，可以保证缩放的元素始终在工作区的中央。

（35）复制并均分元素

这里的英文用了Make Grid，这里为了便于大家理解，我翻译为“复制并均分元素”。在设计过程中，很多时候我们需要把一个元素复制很多份并均匀分布，这个时候Make Grid功能就派上用场了。看看实例：

首先画一个矩形，然后选中Make Grid。

在弹出的菜单中，设置我们需要让这个矩形复制多少行（Rows）、多少列（Columns），这些矩形的行距（Margin）和列间距（Margin）是多少。

同时我们也可以设定Boxed，这里Boxed指单个要平铺的图形所占的面积有多大。

我们不勾选Boxed，设置这个矩形复制五行五列，如图2-4-23和图2-4-24所示。

接着我们重复操作一次，看看指定Boxed后，效果如何？ 如图2-4-25所示。

设置后如图2-4-26所示。为了方便理解，将Box的区域标为灰色。经过测量，Box（灰色区域）的宽高分别为80px，同时每个Box之间间隔10px。

（36）颜色按钮

单击颜色按钮后会打开调色板。在这里我们可以将自己常用的颜色加入到备选颜色中方便使用。首先使用滴管工具取色或者使用调色板调出合适的颜色，这个颜色会在左下角显示，接着我们使用鼠标将这个颜色直接拖动到备选颜色框中即可添加完成，如图2-4-27所示。

（37）字体按钮

单击字体按钮会打开字体选择框。当然，我们也可以先选中文本后使用右侧的属性栏设置字体、字号等属性，但Sketch对中文支持并不完美，右侧属性栏并不能显示中文字体名称，所以推荐大家在设置字体时单击字体按钮，在这种方式下中文字体名称可以正常显示，如图2-4-28所示。

熟悉了以上内容，Sketch的各项工具的功能相信大家已经了解了。将自己常用的按钮放在工具栏上，打造舒适的工作界面吧。当然，有的朋友会觉得这些都会用到，但按钮实在太多无法全部放在工具栏上，这个时候我们就有必要了解一些快捷键了，快捷键列表已经列在书的附录中，有需要的朋友可以随时查看。快捷键慢慢熟悉即可，饭要一口一口吃，Sketch要一步一步学，没有必要刻意地死记硬背，多用几次就记住了。

STORY TIME

“移动UI设计需要注意的地方还真是多，各种元素的尺寸、专有名词需要了解，不过这些都是小Case啦。有Sketch的帮助，这一切掌握起来易如反掌。”

经过一段时间的努力学习，小P已经逐渐入门了。加上他勤学好问，设计水平突飞猛进，同事都对他刮目相看。昔日的网页设计师，华丽转型为移动UI设计师。

“透露个小秘密，做完设计稿后， 一定要放到手机上看效果！只有这样才能更快找到设计的感觉。”小P悄悄地告诉同一组的同事。

“喂喂喂，还在用Photoshop作图啊？快来试试Sketch吧，有了它，保证你工作效率更高、设计效果更好，切图也特别方便。强烈推荐！”

在小P的影响下，身边越来越多的同事开始使用Sketch工作，小P打算把它推广到全公司，产品经理甚至开发工程师用这个也很合适，整个团队的协作也变得高效快捷。 J1Q7KQLmtnxq6UKc6Iz3tcKg512kUZXGQzxvfoDcjTWV9/HOtuEObz/K3gQ7dsr/