作为一个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图到本地。
你可以已创建@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，而翻译是我亲自翻译的，对原贴有什么版权问题，请联系本人。而转发这翻译贴的，请标出原贴和本贴的出处，谢谢！）
扫一扫
1701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
