UI设计师你不会Sketch？
为什么要使用sketch？
今天我确实要向你强烈推荐sketch，这款超轻量软件，再也不用担心设计卡顿，矢量设计堪称完美！ps以后就作为你的辅助工具吧。
作为一名UI设计师，而不是平面设计师，你选择sketch的几率应该远大于ps。
对于sketch我们刚开始可能最疑惑的是怎么切图，没有psd我怎么给前端？关于切图，我前面有一篇文章介绍了，不懂的可以去看看【设计教程】UI设计切图你了解多少？
这里要讲一下规范导出，就是sketch可以导出一个html，前端开发ios开发安卓开发可以清楚查看，自己去下载使用图片和查看文字大小颜色等。这里要强调的是sketch可以针对不同的终端设备导出不同的尺寸，简直省心省力。sketch可以一键自动生成html页面，离线下检查所有设计细节，包括css样式。这就是它的强大之一。
如何使用sketch做UI设计？
『 基本操作 』
创建画布
按住键盘 A 快捷键，可以创建画布。 Sketch 已经默认设置了各种设备尺寸，可以选择手机端和网页端等等，也可以点击下面的创建自定义尺寸。对于已经创建的自定义尺寸如果下次还想再用，直接选择自定义就可以看到，不用重复创建了。
sketch的作图区域是无限大的，你可以创建n个画板。画板复制是按住alt键拖动即可，如果你需要复制的有很多，可以在按住alt复制完一个后按快捷键cmd+d快速批量复制。
创建好画布，你就可以随意操作它啦
这里需要注意的一点是，sketch中移动端默认的是一倍图，有的人看到375667有点奇怪，注意这里的单位是开发所用的pt，不是px。乘2就是7501334px啦。为什么用一倍图来作图呢？原因很简单，一来占用文件资源要小，切图方便，二来对于开发来说1pt=1px，他们就不用再去换算了，直接使用，完美还原设计稿。
sketch图层
图层列表在pages（页面）下，而sketch又可以有多个pages（页面），可以说非常强大了。项目更改历史在一个sketch就可以搞定了，不用怕旧稿弄丢了。老板再说还是用上一稿吧，你就在那嘻嘻嘻了，哈哈。
当我们的图层过多时，可以使用页面下方的搜索功能，也是很强大了。
对于新手来说，用sketch还是有些不习惯，比如当一个页面图层非常多，我要精准选择某一个细线条，很难选到，比如我要选中这个蓝色线段
这里有个快捷键，按住cmd鼠标单击，你会发现线段会出现一个中轴线，非常方便点击选择。文字也是，按住cmd鼠标经过时文字会变成浅蓝色，表示你已经选中了它。再看看鼠标直接单击，不按cmd键对比一下。怎么样，sketch是不是非常强大！更多强大之处等待你来挖掘！
sketch工具
有时候你的sketch界面一片空白，无从下手，在显示里有显示工具栏可以打开sketch工具。
工具栏是一些常用的工具，你还可以点击左上角加号来创建。sketch是一款轻量级软件，不熟悉的人可能会觉得界面太简单，没有什么用。其实sketch中有很多隐藏功能。
比如，这里你可以在工具栏右键，有一个自定义工具栏，点击打开
你会发现，哇塞，原来sketch有那么多隐藏工具呀，还可以自定义操作，简直太棒了！
sketch形状
随意画一个矩形，画布右侧是它的检查器，可以查看矩形的位置大小颜色等等，可以自由更改变换，这些文字应该都能看得懂，自己多试试就知道了。
默认矩形是可以自由缩放
双击矩形，你会发现矩形四周变成了四个圆圈，这是可编辑状态，有点像c4d里转化为可编辑对象。可以任意改变矩形的形状，再双击圆圈可以将直线转化为曲线。
工具栏除了工具外还有很多功能，如对形状进行旋转变换，形状之间进行布尔运算获得新的形状，可以一一去试一下。这里要讲的是旋转中的重复工具，在工具栏默认是没有的，需要打开自定义工具有一个旋转副本
将它拖拽到工具栏，点击完成即可
先画一个圆，然后点击旋转副本工具设置副本数量，就得到了这样的图形啦，可以用它来做loading，是不是很强大很便捷？你慢慢就会爱上sketch啦～
很多人会很关心蒙版，我们知道在ps里做蒙版非常方便。那么sketch中的蒙版在哪？怎么使用？
在sketch默认工具栏里就有蒙版，前提是你先得选中形状或图片，蒙版才会被激活。
我们要将图片嵌入到形状里，在sketch里图片要放在上方，而ai里是将图片放在形状下方。选中图片和形状点击蒙版工具，此时观察图层发现形状和图片已经打组，这里我将它重命名了。这里就完成了蒙版，很简单！
sketch颜色
sketch填充里可以直接更改图形的颜色，也可以用吸管吸取你想要的颜色。可以说很强大了！
值得关注的是，sketch不仅可以吸取软件里已经设置好的颜色，而且可以吸取软件之外的颜色。
当然sketch不仅仅强大于此，它的复用功能才是真正的贴心！打开显示-显示颜色，为你的项目新建颜色规范方便重复使用，界面颜色也不会混乱。
在颜色面板里也给你提供了这些颜色，例如web安全色，供你参考使用！
为项目产品创建颜色规范，主要有这几个 默认字体颜色、减淡字体颜色、强调色、边框颜色、辅助色、背景色
这里需要特别说明一下阴影颜色，Material Design 建议使用 #000 全黑，然后减弱 opacity 不透明度，而不是直接设置灰度颜色。因为这样可以保证阴影不论在亮色还是暗色背景下都有一个良好的视觉效果。
sketch文本
选择字体工具，在画布点击就会出现默认文字Type something，双击修改成你想要的文字，右侧检查器可以更改字体自重颜色等等。文本段落，则是在画布中拖拽即可。这些都是基本的操作没什么特别，接下来就要展示sketch的独特之处啦！
sketch的颜色可以存储复用，得到漂亮的颜色规范，那么字体呢？当然可以！可以提前设计好各个字体的数值，利用 Sketch 的 Style Text 功能进行保存，方便以后频繁使用。
选择你已经设置好的文本，在检查器创建新的文本样式，并给它命好名，例如“如苹方/常规/12/100%黑”注意必须是反斜杠。
当然，你还可以管理你的文本样式
对于已经按照规则创建好的文本，在插入-文档里可以查看复用
是不是爱死sketch啦，接下来要放大招啦～
『 好用功能 』
Symbol
第一眼看到这个单词肯定会很陌生，Symbol中文翻译为符号标记
前面我们讲到了很多规范性的东西，形状规范文字规范，感受到了sketch做UI大大的好处，这个Symbol同样是规范，它的作用是保持设计的一致性，从而有利于规范UI，同时可以大大提高我们的工作效率。
接下来看看它到底如何使用。很多人都做过后台系统，以出现头像图标的页面为例。用一下我们之前用蒙版创建的头像，然后右键点击头像，选择Create Symbol（创建组件），在弹出的框中输入Symbol的名称即可。
第一个Symbol的命名为“头像/非纯色”，分在“头像”组
再创建个“头像/纯色”，分在“头像”组
文字组：文字/黑色；文字/蓝色；文字/灰色；
背景组：背景/纯色背景；背景/非纯色背景；
时间关系，这里文字组和背景组就不画了，可以自己任意组合。
Symbol创建好了不是重要的，重要的是如何复用和维护Symbol。
把创建好的Symbol组合，就完成了Symbol的复用，使用相同的方式，可以在多个页面复用。
有人会想，这跟复制粘贴不一样吗？有什么神奇的？别急，见证奇迹的时刻马上到了。如果要将纯色头像组合变为非纯色头像组合，还用上面的方式组合一遍？如果只替换其中的头像/背景呢？这个时候，我们要用到Symbol分组了。
右键选中纯色头像后，依次选中“Replace With”（替换）→“头像”→“非纯色头像”即可，可以看出，利用“/”规范命名后，Symbol自动分好组了，更方便进行复用替换操作。
维护Symbol
Symbol如何编辑？
1.在画布双击已经创建好的Symbol即可跳转到Symbol页面
2.点击页面pages下的Symbol也可直接进入
在里面对Symbol进行更改即可，所有更改会生效在复用的页面用。注意：是选择组里面的图层修改，组是无法修改的，也不要取消组，选择图层后才会出现右边层的属性，修改后，回到页面，自然修改了。
Symbol知识不止于此，需要反复实践，会发现能大大提高工作效率。在大公司经常会有n个页面，大于100个页面，突然遇到版本更新，某个功能需要改一下，如果你一张一张页面去改，真的很费时间，而在Symbol中进行修改，所有页面同步生效。能真正做到一次设计，循环使用，把宝贵的时间用在创意设计上，而不是这些重复组件上。
sketch删栏
通过 Layout settings 设置栅栏（布局参考线），可以根据需要自主选择每列宽度（列宽），间隔宽度（装订线宽度）以及最外侧 margin 宽度（偏移）
此时画布上就出现了栅栏参考线，文字段落的宽度，按钮的宽度，图片的宽度都可以根据栅栏进行合理设置。通过栅栏布局可以极大的统一页面的布局设置，给人一种和谐美，Ctrl + L 可以快捷键显示/隐藏栅栏。
前面讲到的sketch文本，这里可以用到删栏。确定文本的行高方便确定控件上下 margin, 左右 margin 可以通过栅栏进行确定。
比如你确定默认字体大小为 20px, 行距为 1.5，则行高 = 20px * 1.5 = 30. 那么控件之间的上下间距则可以设为 30px 的倍数，比如 30px, 60px, 90px, 以此类推。间距和行高相同可以使页面看起来更加和谐美观。
sketch小tips
最后再讲一下还有一个小tips，sketch中自带的组件不能整体等比例放大如何解决？
现在是37564，需要改为750128，改完大小之后
解决办法：
点缩放
结果
sketch插件
sketch插件有很多，这里我只介绍一款超好用的--- Craft
1：Craft是一套插件
可让您在设计时充分考虑真实数据。通过新的Craft Manager管理它们，实现极其简单的更新。
首先在官网下载CraftManager