Sketch设计教室！从零开始学APP设计利器Sketch（一）

对于sketch，静电的第一印象是Google的Sketch up，一款3d建模草图软件。 那么这次静电提到的Sketch，则是一款全新的设计软件。一听到设计软件，大家的反应必须是Adobe家的Photoshop，Illustrator等等等等。那么今天静电要为大家介绍的，则是这款Sketch。这款软件的定位非常精准，首先，它是一款矢量制图软件；其次，这款软件的目标用户是APP设计师（当然用来设计网页也是可以的）。到这里大家伙可能有点不解，既然Photoshop这样的工具已经可以满足我们设计App效果图的需求，那么这款软件又有什么与众不同之处以至于我们非要用呢？ 别着急，听静电慢慢往下讲。

Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，我们同样添加了一些基本的位图工具，比如模糊和色彩校正。我们尽力让 Sketch容易理解并上手简单，有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用。对于绝大多数的数字产品设计，Sketch 都能替代Adobe Photoshop，Illustrator 和 Fireworks。

——摘自《sketch用户手册》

踏破铁鞋无觅处——初识效率之王Sketch

在sketch用户手册中，编者毫不掩饰sketch的强大功能，甚至说：对于绝大多数的数字产品的设计，sketch可以完全替代photoshop，illustrator和fireworks。 最初看到这些句子的时候，静电有点不以为然，但好奇心还是驱使静电将这个程序下载下来，打开这个钻石形状的图标，静电看到一排看起来很简单的图标，在上边 可以拖动来画各种形状，但并没有感受到更特别的地方。 由于工作忙，静电在打开后没多久便关闭了程序开始忙其他的事情。 就这样大概十几天时间就过去了。这段时间内，正值静电负责设计的app改版后期，工作非常忙，而且要负责安卓和iphone两个平台的同时开发，工作量非常大。光是切图，就有三四套，其中还不包括细节的调整工作。 静电之前一直没有标注效果图的习惯，一来工作时间所迫，二来是偷懒。效果图作完在手机上预览感觉良好，就直接给到开发工程师，告知一些细节如何处理然后将切图交付。然后等工程师完成后就坐在他们跟前来调整界面。

这是一个漫长而且非常磨人的过程，由于细节非常多，所以即使使用之前静电讲述的fireworks批量切图法，依然可以把人搞的头昏脑涨。而且由于没有标注设计稿的字号，图片尺寸，前端工程师全凭感觉开发。所以到他们认为可以交付的程度，其实整个界面还是惨不忍睹的，在以前，静电会搬个小椅子坐在他们跟 前，与他们一起“目测”调整字号，图片大小。 但，在这个过程中，静电越来越发现，这种方式效率是及其低下的，一来浪费了双方大量的时间来调整，二来由于都是目测调整，所以最终效果不太理想。

之前静电一直认为，标注效果图是一件非常无意义的事情，但，这件事促使我开始反省，也许我是错的。 在与开发工程师沟通后，静电认为设计稿标注是有章可循的，使用px标注的字号可以与安卓和ios平台通过一定规律进行转换为dp或者sp，大多数其他间距也可以实现较为精确的匹配。 所以静电决定开始标记一些主界面的效果图做尝试。

标注效果图是一项很繁琐的工作，虽然我们可以尝试使用一些标记软件（静电寻找的标记软件是一款名为markman的基于air开发的程序，这款软件在初期为我的标注工作带来了很大帮助），但大部分标记软件充其量就是一个标尺和取色器的结合体，可以满足一部分的工作，但对于字号的标注一样无能为力，我需要在设计软件中先查看字体属性，然后再现打字到标注软件中，效率啊效率，实在是让人抓狂。最终，静电看到了这款躺在我dock上已经十来天没打开过的sketch。

首先静电先去度娘了一下，发现已经有一些讨论组和文章存在，但大部分是外文翻译过来的。借助这些文章，我了解到skech的独特之处。

还在用Photoshop切图的童鞋，推荐一款神器给你们！《MAC下的切图神器！SLICY使用说明》

效果图智能标记

sketch实现了软件内的智能标记！这比用标记软件还要方便好多倍。抛弃那些效果图标记软件吧，至于如何标记，静电将在以后的文章中详细讲解。

智能切片工具

第二点吸引静电的，是他的切图工具，借助sketch的切片工具，我们可以轻松将一个图标导出为适用于ios和安卓的各种尺寸，你甚至不用理解大部分的原理（当然了解切图尺寸的关系还是非常有用的），就可以顺利的切出没有毛刺，精确适配xxhdpi，xhdpi，hdpi，ios下一倍和两倍的切片。

先进的对齐工具

虽然photoshop cc 2014版本改进了一些辅助对齐功能，但对比skech简直就是小巫见大巫。sketch的对齐工具可以帮我们更轻松的对齐大部分的元素，丝毫不差。

artboard——轻松完成整个设计

sketch中没有画布的概念，整个空白区域都可进行创作，因为他是基于矢量的。 但我们在某些时候需要一个“框”，来具象化我们的设计。在ps及其他设计软件中，他叫画布，但在skech中，他被赋予了一个新词，artboard。我们可以在一张画布上创建无数张artboard。这对于app的连贯性来说，是非常有帮助的，我们可以将一个app界面看做一个artboard，然后在一个界面中，对比和查看他们的不同之处，或者将他们的交互过程串联起来。一切都非常方便。然后我们可以将这些artboard分别导出为pdf或者分为一个个的图片文件，方便产品经理或开发者查看。一切只需要一到两步的操作。

丰富的组件库

有时候我们需要在设计稿中调用安卓或者ios系统自带的控件，比如弹出的提示框，浮动键盘。但我们一定要自己再画一次吗？不必，sketch有丰富的素材库，我们可以直接将需要的部分拖进来即可，这节省了我们大部分的时间，使我们可以将腾出来的时间用于更加核心的产品设计思考上。

设计稿可以在移动设备上即时预览

sketch中自带了一个mirror的功能，可以像psplay和photoshop的远程连接工具一样，将你的设计稿在移动设备上即时预览查看，非常方便。

产品经理也可以轻松转移到sketch

对于产品经理，sketch完全适用，用他来画原型图简直轻而易举，他丰富的组件库和精确的尺寸控制让我们的原型图更逼真。更有利于交流和前期的展示。你甚至可以考虑将Axure 抛弃了。

下载Sketch，准备开启新旅程

好的，介绍了几点sketch最引人注目的特性。那么静电在这里先放出他的下载地址（静电写文时，sketch的最新版本为3.0.4）。下边两款软件，大家一并先下载并安装好。

Sketch软件下载地址：http://www.bohemiancoding.com/sketch/

Sketch toolbox 下载地址：http://pan.baidu.com/s/1dD3VeUX

最后，静电差点忘了，Sketch现在还没有windows版，想要体验sketch的魅力，请大家买一台Mac设备吧。下期，我们来认识一下skech的基本操作。

同时欢迎关注静电的微信 Jingdesign91

想深入探索 Sketch？来这儿就对啦！

先看看还有哪些贴心功能！
《UI设计师新宠！聊聊sketch那些方便好用的贴心功能》

帮你迅速上手Sketch的10个技巧！
《UI小课堂！帮你迅速上手sketch的10个技巧》

上手了就来创造吧！Sketch超详细教程一枚！
《设计师新宠！教你利用SKETCH创建彩色开关（上）》

原文地址：ui
作者：@JingDesign

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量76万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：