作为一个iOS开发人员，我（原作者，下同）在没有设计师的情况下已做了几个项目，不过我要告诉你---这可能很不容易！

不过从这些项目里我学到了：就算你没有设计师，不代表设计不重要---尤其是在迭代的过程中！

得承认，客户不会总知道他们实际上想要什么，如果不管三七二十一打开XCode直接敲码，最后只会失望的发现有大量的“好代码”要删掉！那什么才是较理想一点的步骤呢？答案就是先迭代着把原型做出来！

问题又来了：没有设计师，怎么做设计呢？那，答案就 是Sketch啦！

Sketch是一个建logo和图标的强大工具。它是以矢量图为基础的，所以理论上你怎么缩放你的图都不会失真。因为它带有iOS设备的Artboard（这里统一叫“艺术板”，网上也很多这样叫)并内置了UIKit的样版，你可以在迭代里用Sketch来建模型。另外，它也是开发者很容易上手的一个工具。

在这个教程里，你将学会：

1。用它的UIKIT样版来建模型。

2。用它的矢量工具来建图标。

3。通过组合基本的形状来建图标。

4。导出图片到XCode的项目里的assets里。

这上面最让人难已抗拒的是，作为一个开发人员的你将依然很容易跟上这些内容，提高你的设计水平!

开始，

首先你要有Sketch,你可以到官网www.sketchapp.com下载一个试用版，或者花99刀买个许可证。

而当你安装好Sketch，在下面的各部分，我将为你展开一个各种UI原素之旅，并让你试做各种组件。当然你做的这些只是用于练习，过后你可以把它们都删掉！

让我们开始吧！

模版

这些iOS UI设计的模版是那些UIKit组件做成矢量格式后集中在一起的，它里面有Tab bar,Nav Bar,Table View等等。。。你可以用这些做为跳板来做模型。

试打开File\New From Tamplate\iOS UI Design，你将看到下面这样的图（依版本大同小异）：

可以看到上面还有为android开发UI的菜单项。

选了iOS UI Design后，你将看到一 个有各种iOS组件组成的大模版库。你可以在画布上选定位置或点击再拖放，或按着command再控制鼠标的转轮来缩放。

艺术板

你可以在Sketch的画布的任何地方画东西，但如果你要为有多个页面的应用做模型，你将会使用艺术板来画。艺术板管理着各固定框里的所有层。当你导出艺术板时，这些层将组合成一个单一的文件。这对应着View Controller场景里的一个Storyboard.

试一下下面这些步骤来建立一个艺术板：

1。按下空格键，把上面打开的模板库拖到一边，在画布上空出一些地方来。

2。点Insert按钮然后在下拉菜单里选Artboard。

3。在空白的地方画上一个框，然后点选iPhone 6（版本不一样，可选的不一样，在4.0是iPhone7）。

如上图，你将看到一个空的艺术板在上面，需要注意的是它默认会把它位置范围内的元素都包进去。所以你要在空白的地方添加艺术板，你可以在这画布上加上你想要的多个或多种艺术板，包括iPhone,iPad或其他任意大小的。。。

拷贝和粘贴

现在你建好艺术板后，可以拖放一些样板上去，开始加上Nav bar,Tab bar和Table View Cell等。

然后，你可以⌘C 和 ⌘V来建新的元素，但这样新建的元素的位置比较难得到想要的效果，这时你可以用Option键加拖放来做这个拷贝工作，这样出来的新组件会放在你松开鼠标的位置。

基本的型状

首先，Insert\Artboard并在画布空白处画四方形来建一个新的艺术板。

再点Insert\Shape，可以看到一个可选的基本图形列表。

在实践中可以用快捷键操作起来更方便。按O可以用鼠标在屏幕上拖出一个圆，同样用R可以拖出一个四方形。。。如上面

L：线

O：圆

T：文本

R：四方形

看你可不可以偿试做出下面的机器人（提示，可以通过改变字体设置来达到相同效果）。

建立图形的样式

这些基本图形可以做出不错的效果，但达不到客户的要求。你可以通过在右边的观察窗口改变这些图层的属性，比如颜色和边界半径。这和XCode里的Attributes Inspector很相似。

这里有些选项将会用到：

Position/Size：当用鼠标拖放组件时，很难准确定位，这时可以通过输入准确数字来达到目的。通过LOCK图标来确保比例不变。

Radius：这用来调整四边形的圆角的半径。

Opacity：设置透明度。用来跟踪图片时很有用。

Fills：用颜色拾取器来改变图层的填充色，或者是去掉Fill上的多选框来用透明填充。

Borders：设置边界的厚度和颜色，或者是取消边界。

这里有个小技巧：按下Control+C来为当前的对象设置颜色。

这教程里的两个图标用丸状来当筑建区，请你试试自已用四方形来做一个：

1。用R键做一个四方形。

2。设置它的边角半径为100。

你也可以试着改一些上面提到的属性。

图层列表

这左面板里的图层列表包含这文件里所有的图层。列表里的图层高层的可折叠打开低层的，这有点象Storyboard里的View层结构。

分组从逻辑上来管理层，你可以把同一组的多个图层当作一个组件来移动，也可以把它们一起导出到一个单一图片文件里。在图层列表里，分组相当于一个目录图标。

下面是一个管理图层列表的常用快捷方式列表：

1。⌘G：将多个形状合到一组，用⌘-Shift-G来取消分组。

2。⌘R：重命名当前组件，命名在整个过程中都是很重要的，所以让每个名字有意义可区分。

3。⌘-Option-Up/Down：在列表里把当前组件位置移上或下。

4。⌘-Shift-L:给一个图层加锁，从而不可再点击。这在下面部分内容里很有用。

尽量对你的模型里的图层分好组，并给好有意义可描述区分的名字。

矢量工具

画圆，方形和线很过瘾，但很有限。不过用了矢量工具后，你可以做出你想要的形状。

直线组成的形状

你可以通过点击来建立多边形：你点击的点将成这个形状的拐角。

让我们来做一个多边形：

1。按V来激活矢量工具。

2。开始点击不规则四边形的四个角。

3。以最后点击开始的角所在点来结束。

4。点Edit按钮，并拖动各个矢量点（角）来重定位这个形状。

5。点选右边的属性栏里Fills下的多选项，加填充色。

6。去掉边界.

感恩的是，因为Sketch允许改变各个矢量点的位置，所以不需要很高的画画水平来使用它。鼠标在拖动时会瞬变成红色来表示拖动。

旋转拷贝

一个不规则四边形可能不怎么好看，不过你可以用它旋转拷贝来衍生出其他图形。这样可以产生多个沿圆圈放的拷贝，象是花瓣一样。我们试操作一下：

1。选Layer\Paths\Rotate Copies.

2。输入要增加的拷贝数，比如3，这样加上本体就有四份了。

3。拖动圆中心的白点，可以产生好几种图形：银行LOGO，手里剑，转轮。

Sketch自动将你的多个图组合成一个，教程后面部分有说到。

剪刀

在Rotate Copies的上面有另一菜单Scissors（剪刀），这有一个用它来建一个表活动环的小技巧：

1。建一个圆（记得用O键和按着SHIFT来拖出一个圆）。

2。去掉属性里的Fill。

3。所边界的厚度改到25。

4。选Layer\Paths\Scissors。

5。在圆的左上方点击，剪开这个圆。

6。在Borders这个属性里，点那设置图标。

7。点选圆尾的选项。

注意这个圆只是一个由四个点的矢量路径做出来的，而这矢量路径可以打开象一圆的弧线。

还有一小技巧就是你可以在剪开之前先加一些点，来得到不同长度或弧度的结果。

风格和手柄

你画一个圆后再点选工具栏里的修改按钮可以看出：Sketch用四个矢量点来表示一个圆。

不过等一下：一个四边形也有四个点，那这有什么不同呢？答案就是Bezier曲线。这是一种可以通过调整控制点来使线弯曲而生成的线。Sketch叫这种控制点为手柄(handles)。每个矢量点有两个手柄在两边。这表示曲线由它本身两端的手柄决定它的弯曲情况。这听起来也许有点复杂，但你简单的在它两端拖动一下那些手柄后就发现操作很简单。

Sketch根椐矢量点上两个手柄的相对位置定义了四种风格（或样式---MODE).

1。Straight：直线，手柄缩回到点里面去了，就象没有手柄一样。这里就是不弯曲，是直线。

2。Mirrored：对称，这时手柄在同一条线上，长度一样，但反方向。这时点两边的曲线也是对称的。

3。Asymmetric：不对称，这时和2不一样的就是两手柄长度不一样。

4。Disconnnected：断开，其实这时不要误会两手柄离得很远，它们还是在同一个矢量点上，只是两者没更多的共性或关联，主要是方向和长度没什么相关。

这大家实际操作体会一下。

Bezier曲线原理

你不用真的懂得Bezier曲线的原理，才能用这些矢量工具。不过用非数学知识的类比一下它是怎么在屏幕上画出来的，可能也有一些帮助。

想象在一个大满惯的棒球赛里，裁判不在看着，而冲垒的人快切入边角位。把眼光放在红路径上。

左上：绿色的人奔向本垒。

右上：蓝色的人追着绿色的。

左下：红色的人追着蓝色的。

右下：这样，就是一条Bezier曲线。

一垒和本垒都是矢量点，第二和第三表示手柄，从一垒到本垒的路径就是一Bezier曲线。

再说一下，你不用明白Bezier曲线是怎么工作的，如果你真有兴趣，你还可以看一下Visualization tool(https://www.jasondavies.com/animated-bezier/)这个站点。

矢量手柄实战

说够了数学，我们来一点实战。用学的技巧建一个地图标记：

1。建一个圆。

2。把圆的边界宽度改为15。

3。点Edit按钮，再选底部的矢量点。

4。改变手柄的风格：同对称改为直线。

5。把下面这点再往下拖离。

6。把风格里的Corners滑动条拖到35，让它看起来圆滑一点。

这图就是一个改变一矢量点的拐角的圆，是不是很容易？

建一个用户图标

有了一个LOGO的想法时，很容易先用纸笔或网上图片来起来原型，然后，你可以用矢量工具沿图（画下的或网上的）描出图标。

在这例子里，你将重做出Ray Wenderlich的logo.

1。在网上拿一个低分版的logo,地址是：http://i1.wp.com/www.raywenderlich.com/wp-content/themes/raywenderlich/images/global/rw-logo_250.png

2。把这logo拖进Sketch。

3。选了这图后，在右边的属性栏里把Opacity改到20%，这样好临摹一些。

4。用Command-Shift-L把它锁定了。（你会看到这图层会有一把锁）

5。输入V来激活矢量工具。

6。在这图上的所有转角上点击。你不用在R的曲线上点，只需在最后点击开始时的那点，闭合这生成的矢量路径。

7。双击这路径上任何地方进入“修改”状态。

8。把没点对的标记点修正，必要时可以放大来修改。

下面来生成R的曲线部分，这将让你更好的理解矢量点的风格的用法。

1。双击左上方的拐角点，直线风格将改为对称。

2。把它再改为断开（Disconnected）。

3。把左边的手柄收到矢量点里去。（这里的3，4点按动画来说明，原作者文字的顺序和动画第3和4点是反过来的）。

4。把右边的手柄往右调，把曲面撑大一些。

5。找到R曲线的另一个矢量点，并双击。

6。象上面那样，也是改为“断开”风格，把朝下的手柄收到点里，调另一手柄让线更似“R”，这时可能要在两个矢量点之间来回调整，才达到你想要的效果。

比效好运的是，这图只有一条曲线，你可以用一样的工具和方法，试做Swift的logo。如下面：

小技巧：可以用TAB键来变动当前选的点。

复合形状

不知你有没有玩过一个Tangoes的游戏，那里可用塑料三角形组成一个免子的形状。而上面，我们学了用矢量工具做图标，下面将进入将基本图形复合成想要的图形的阶段。

在编程的时候，你会用到与，或，与或这些逻辑操作。Sketch也有相同的布尔操作，不过用了不用的术语：Union(联合),Subtract(裁减),Intersect(交叉)和Difference(相异)。

联合

联合将形状合在一起。让我们联合一个丸状和圆成为一个云的图标。

1。建一个四边形，改变四边形的直径设置变成一个丸状。

2。建一个圆。

3。移动这个圆盖到丸状上。

4。选了两个图再点“Union”按钮。

注意两个形状是怎么融在一起的。

裁减

裁减用一个形状剪去别一个来生成新的图形。

我们上面的地图标看起来还不错，不过现在潮人都放一个圆洞在里面。你用了裁减后，也可以做到一个一样的。

1。建一个地图标，不过这次确保Border没有选上。

2。在旁边建一个小圆，并拖到地图标上。

3。在图层列表，拖这个小圆的层到地图标的层里去。

4。展开新生成的合成层。

5。确保小圆的层在地图标层的上面。

6。点击小圆图层的名字右边的布尔操作的小图标，出现了一个弹出菜单。

7。点选Subtract(裁减)。

8。选上这个新的小圆洞的子图层，并用上下左右键来移它到最终的们置。

裁减是有点复杂，不过这例子还是有一些概念可拙出来：

1。你可以在图层列表里拖图层来合并图层，新生新图层。

2。当你组合形状时，Sketch学习着猜想你要用的操作。如果你选了None选项，它将自动选一个来操作，比如裁减，或者联合。

3。对于裁减来说，顺序是很重要的，如果你的图在裁减中不见了，试着重排他们的顺序。

填充 对比  轮廓

在教程的这部分，你将需要一个初学者例子文件（https://koenig-media.raywenderlich.com/uploads/2015/10/RWDevConArtboards.zip），请下载后打开。你将看到：

这初学者文件包括一页模型和一些个性化的矢量图---请随意复习它们是怎么做出来的。然后还有一些之前之后的艺术板，其中有几个TAB BAR的图标是在这部分用到的。

Tab Bar图标会因选中的状态不同颜色会有不同，然后有些图标有好大的空白空间，所以颜色的改变只是很细微。在这情况下，AHIG建议用分隔有填的图标来做选中的图标。这RWDevCon应用的模型既有填允版的也有轮廓版来做Tab bar图标的。

在上面这个下载的Sketch项目文件里，有一个艺术板叫Calendar Starter的，它包含有几个积木块用来组合到calendar图标里。这些积木块只是一些你已知道怎么做出来的四边形或丸形等。

下面步骤搭建日历图标：

1。打开这个项目文件，展开图层列表里的Calendar Starter艺术板。

2。选上Calendar Body和Separator这两个图层。

3。按“裁减”操作。

4。按SHIFT点选Right Hole图层，再把它从上面的图形中裁减去。

5。同样的操作Left Hole图层。

6。按SHIFT点选Right Ring图层并做“联合”操作。

7。再用“联合”把Left Ring图层合并进来。

你最终得到一个包含所有这些了图层的一个日历图形。除了被裁减部分，其它部分都应该是绿色。如果你有什么问题，可以打我下载的版本，对比一下。

现在你有了一个填充版的图标，下面我们来一起通过改变子图层的大小做一个轮廓版的：

1。在画布上找到Calendar Fill这个艺术板。

2。展开图层列表里的Calendar Fill这个艺术板。

3。展开Calendar Body这个图层并选上Separator这图层。

4。把Separator图层的高度改到35。

这个轮廓版的日历主要就是把分隔线改成一个四方形。如果不能用拖拉达到你想要的高度，你可以在属性栏里直接输入数字来达到效果。

圆框住的头像

这个RWDevCon应用模型有每个演讲者的圆形头像。要想达到这种效果，你要Mask特性，这有点象“裁减”。不过和做一个洞不一样的是，Mask（蒙蔽）是把圈外面的内容去掉了。下面做这种头像：

1。在图层列表里展开Greg Before艺术板。

2。在艺术板里建一个足于盖住他的脸那么大的圆。

3。选上greg图层和这个oval图层。

4。确保这oval图层在下面（这是作为一个mask 图层）。

5。点“Mask”按钮。

6。展开第5步新建成的greg图层，里面有一个Mask图层，点选它。

7。加上边框，然后调整它的位置，使它刚才框着头像。

操作中请确保朦版(masking layer)图层在下面，这是和之前部分的“裁减“相反的。

导出图片

你可以点南右下方的“Make Exportable”来让单一个图层变得可以导出。

如果你想导出多个图层，那就有多种方法来达到这结果：

1。分组：当各个图层放到同一个分组里，你可以导出这个分组成为一张图片。

2。艺术板：所有在同一个艺术板里的图层可以导出为一张图片。而图片的大小为艺术板决定。

在你导出前，检查一下在属性栏里的宽和高。这些设置决定了你导出的1倍大的图的大小。

小技巧：在改变图层等大小时，不用右下角拖动，而用Scale按钮。这样做出来的缩放会让边界宽度和拐角半径等保等不变的比例。

PNG

Sketch让导出不同密度的图片变得容易：

1。在右下放点”Make Exportable”。

2。点+按钮加@2x的拷贝。

3。点+按钮再加@3x的拷贝。

4。点Export按钮然后保存PNG图到本地。

PDF

你可以已创建@2x和@3x的各版图片，但Sketch是基于矢量的，所以可以充分利用它。XCode接受pdf格式的矢量图，它是包含有大小信息的SVG文件。

1。点“Make Exportable”。

2。保持只有@1x。

3。选PDF格式，然后导出。

你可以把这个PDF文件导出Asset类别。

1。在XCode里打开Images.xcassets。

2。建新的Image Set。

3。在属性栏里改Scale Factors的值Multiple为Single Vector。

4。把你的PDF图标拖进All这个图标位里。

XCode将在编译生成的时候生成你需要的@2x和@3x文件。结果是一样的，也是有相应的PNG文件，但这有个好处就是你要管理的文件就比较少。

学到这里之后我们还可以怎么样？

这上面就是我们这教程的全部，你可以从下面这链接下载这个项目文件：

https://koenig-media.raywenderlich.com/uploads/2015/10/RWDevConArtboards.zip

Sketch很强大，除了这里介绍到的功能，还有其他很多功能。如果想学多一些可以看官方文档：

http://static-download.s3-website-us-east-1.amazonaws.com/manual.pdf

也可以到网上看多一些博客或视频。

最后，你也可以下载下面这些图标集或矢量图，用到iOS设备上：

http://www.sketchappsources.com/category/icon.html

我希望你喜欢这个教程，欢迎你登入进来提问题，在下面一起来讨论。

（原贴出自https://www.raywenderlich.com/117609/sketch-indie-developers，而翻译是我亲自翻译的，对原贴有什么版权问题，请联系本人。而转发这翻译贴的，请标出原贴和本贴的出处，谢谢！）