Sketch | The designer’s toolbox

扫一扫

大概用 Sketch 用了将近一个月，原来是一直用 Illustrator 做界面设计。
Sketch 有很多优点，但是同样的也有很多不爽的地方，大概列举一下，供参考：
优点：

• 快，用 Sketch 好像没有冷启动时间一样，这也就是为什么 AI 和 PS 需要启动画面
  
• OSX 支持好，原生全屏，原生的版本控制，支持 Retina
  
• 功能集足够，支持贝塞尔曲线，支持布尔运算，支持文字转曲，支持图层样式
  
• 功能亮点
  
  
  
  • 原生支持 @2x 图片导出
    
  • 保存切片时，可以选择导出的图层。如果在背景上画图标的话，不用像PS那么苦逼
    
  
  

• 多个图层样式叠加，一个样式可以有n个阴影，基本上用 PS，AI 做出来的效果用 Sketch 没大问题。
  
• 方便的阵列生成，有一个图形快速生成 n×n 的阵列，有内建的功能。
  
• 支持 CSS 样式复制
  
• 每个顶点的圆角半径设置 (PS内牛满面)
  

• 比 Adobe 好用的智能辅助线，不仅可以对齐，选中之后按住 option 还可以量距离
  
• Sub-pixel 的文字渲染，这个 Adobe 从来没做到过。
  

• 像素对齐，这个 PS 和 AI 也是痛点，但是 Sketch 也有小问题。
  
• 不限制大小的画布，这也是 PS 的一大痛点。
  


• 缺点
  
  
  
  • 快捷键覆蓋率不高，和 Adobe 系不一样 (比如R是矩形，Adobe系一直是M)，且不好自定义。
    
  • 像素图像编辑功能弱到爆，相当于没有。
    
  • 蒙板功能难用到爆，哪怕我只是想 Crop 一张像素图，也要画个路径，选中之后做蒙板。
    
  • 只支持 SVG 的导入，不支持 psd, ai 路径的导入，复制粘贴
    
  • 群组内编辑比较弱
    
  • 偶尔不稳定，不明原因地变慢
    
  • 文字编辑工具属于刚刚能用的状态
    
  • <del>不能设置虚线和箭头</del> Update: 可以设置，Border 那里有下拉菜单……
    
  • 最大的缺点：Sketch 文件属于没人支持的状态。你不可能永远不把原文件给别人。
    
  
  

既然一个工具能让我用将近一个月，并且有相对稳定的产出，这个工具肯定是足够一般的用途了，但是要挑战 Adobe CS 这些大块头，还是不太现实，比较适合小团队，做一些简单的界面（话说现在扁平化流行的年代，用 Sketch 倒是刚刚好）。
秀一个 Sketch 画的，并不复杂，但是比较典型的比其它工具都方便：

如果全团队是Mac的话，Sketch是非常好用且适应现在的设计趋势的。我们公司现在已经全部都用Sketch了。Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作。线框到视觉稿可以在一个软件里完成，能省去不少时间。
Sketch的用户社区也比较繁荣健康，让人挺有信心继续用下去。（Sketch的扩展开发比PS容易的样子，我看github上还有人做了自动生成iconfont之类的高级脚本……）
其他回答基本都只是在特色功能上评论，确实，这软件一开始的印象可能只有小巧便捷够用。但用多了后就会发现他最好的地方不是比PS多了什么功能，而是针对UI设计的操作、交互模式，用起来非常高效。
PS因为要考虑摄影用户的使用，并不能针对UI设计师做最优设计。有些回答中说道的切图、测距等功能，其实最新的PS CC也能胜任（其他很多功能我相信要在PS上出现也只是个时间问题。跟PS比功能是很难有核心竞争力的），但PS的基本工具的操作/交互方式从来不是对UI设计专门设计的（我想这很难改变）。而这正是Sketch的取胜之道。
UI设计时，最频繁的操作有选择/移动，整理图层、更改属性/样式。这3样东西是互相影响的，Sketch在这3方面都做得挺好，就完成了1+1+1=5的出色体验（虽然有一些是矢量软件天生的操作优势）：

• 整理图层
  UI设计中得图层，和照片编辑时很不同的一点是，模块（or板块or分组）之间大多数不重叠，因此图层顺序也就相对不那么重要。只要对象能够被用户方便的选择到（后面讲选择功能的设计），图层的顺序很多时候是无所谓的。事实上浏览图层面板是低效的，不管缩略图还是文件名，人的读取效率都是不够理想的。Sketch通过更适宜的基本功能设计，很大程度上减少了用户对图层面板的依赖程度（不用去看），不仅直接简化了操作，也使用户可以更专注于画布上得内容。
  
  
  
  • 不要小看Forward和Backward的设计。Sketch的这个功能设计地非常好。
    首先这个功能的运作方式非常高效，它会考虑到遮罩关系，不做无意义的顺序变动。比如从上到下有a/b/c三图层，a遮着c了，但是b在其他地方，那我对c执行一次forward，c就是直接跑到a上面了（c/a/b），而不是只傻傻地提升一个级别（a/c/b）
    其次它只改变同级别内的图层，所以图层组内的东西怎么forward都不会跳出图层组。
    相比PS，图层一多，拖动来改变顺序太痛苦，用forward和backward每次只移动一层，低效，而连按太欢了又可能一不小心把分组逻辑搞乱了，必须小心翼翼
    
  • 复制、粘贴
    Sketch中复制、粘贴的操作和日常其他软件里的复制粘贴很相似。选中图层or图层组的情况下command+c复制，command+v粘贴。另外很重要的一个设计是，当前选中的对象决定粘贴出来的东西在哪个图层组里。这样大部分复制粘贴操作是不用看图层面板的。
    而PS里，ctrl+c和ctrl+v只能复制像素（选区），图层/对象的各种复制都远没有Sketch那么爽快，因为你必须通过不狗直观的图层面板来决定新图层的上下关系和包含关系。
    
  
  
• 选取、移动工具
  这个最基本、最重要的工具设计的好不好，影响是巨大的。
  
  
  
  • PS选择分为矢量的选择（A）和位图的选择（M）和图层的选择（V），略微复杂、繁琐。比如我现在要改变一个矩形矢量图层的圆角参数，我得先V切换到图层选择工具选中图层，然后A切换到矢量选择工具选中该路径，然后属性面板里才给我出现了圆角的参数。
    而Sketch里只有唯一的选择工具，一统天下。
    
  • Sketch里的选择工具，通过双击可以把选择范围的层级深入一层（也就是可以选图层组里的东西），这样即使是嵌套了很多层图层组，每层还好多个图层组的情况，也可以很方便且逻辑较清晰地进行对象的选择。这个双击使得用户更加不需要关注图层面板。
    而PS里的选择工具有两个模式，一个是选图层组，一个是选图层。图层组模式是不能选图层组里的图层；图层模式时不能直接选整个图层组。双击？那是什么？
    
  • Sketch里的默认的工具是选择/移动工具。其他工具都是画一下就切换回选择工具。你说你要连续添加很多个图形/元素？用make grid批量复制并布局吧。
    画好一个东西后接着布局，更加符合绘制UI的情况。而PS里你画好一个图形后还得按着ctrl才能移动。（PS的操作就是ctrl基本不离手）
    
  
  
• 更改属性/样式
  Sketch里的涂层样式是在右栏里常开的。而在PS里先要在图层面板里找到当前选中的涂层然后双击打开样式编辑窗口，而样式窗口的弹出位置又是不那么确定的（尤其是多屏环境时），这么多次的视线和鼠标的移动，是非常低效且烦人的。
  其实这点PS也是可以模仿的，只要开发个图层样式的面板，然后这个面板可以自定义显示哪些属性（不然会过多塞不下）就可以了。但Adobe没有，我也没搜到这样的一款扩展/插件。
  

经我这么一番叙述大家应该可以意识到了PS做UI设计是多么繁琐。sketch不仅简化了流程，还让左手（不用太多时间按着ctrl）和眼睛（不用去仔细阅读图层面板）更加轻松。它带来的隐藏的效率提升是比较可观的。至少操作体验是很好的。
Sketch还有很多人性化的设计细节。各位用着用着就能体会到。
简单明了的功能加上以上各种亲切的交互设计使得这软件的上手难度极低。我转向Sketch的时候除了个别疑点稍微搜了下文档，总体边学边用的过程都毫无阻碍。
感受到的相对的不足有：

• 团队小，软件没有Adobe的产品稳定，遇到bug时基本上就是毫无办法。也不知道什么时候会修复。
  
• 大点的项目or大尺寸位图多点，性能就很一般了。
  之前做一个web app，背景整个是个位图，结果artboard也就十几张就比PS还卡了。
  

Sketch如果功能上能满足团队需求，是目前的不二之选。它决不是简单地针对UI设计开发特别的功能、去掉不太用的功能，而是在基本的操作层次上给UI设计师带来了得更好地体验。

经过几个月在工作上的实际使用，上手容易，产出不错，在Ui设计上基本可以完全替代photoshop，目前已成为我的主力设计工具。它的优点其实就两个：一是提高工作效率，二是增加鼠标寿命。缺点也很明显，位图处理不能。

------------------------------------------------------------------------------------------------------------
2014.2.27日补充
目前sketch已经更新到3.0版本，估计不久的将来会正式发布，各种功能加强，例如导出功能支持多种缩放尺寸，切片路径作为单独的文件可管理，Greate Symbol（虽然还搞不清怎么用但看起来很厉害的样子）等等...,着实的更加方便。

------------------------------------------------------------------------------------------------------------

有图有真相。
界面：

图标：

文档：

Sketch的优点：

自动保存
为了减少photoshop的崩溃的损失，每一个Ui设计师都会不停的command＋s，这其实是一件很残忍的事，你可以打开自动保存，但你无法预估它的保存时间，但随着文件越做越大，它来这么一下，你就得停下不动，这事尤其的蛋疼。sketch可以自动保存并且最关键的事，它不会打断你，你不必神经质的每隔几分钟手便抽动一次。
矢量图形
在sketch创建的图形全部是矢量的，在放大缩小就很方便，不需要调整太多，还有一个很好的小功能，就是可以一键把0.几的像素变成整数，而且可以很方便的在矢量视图和像素视图之间进行切换。
可以很方便的创建一些重复形状构成的图形。
测量工具
我们在用photoshop做界面设计时，为了元素位置的精确，需要用蚂蚁线或者切片工具来测量元素与元素之间的距离，画完蚂蚁线或切片如果有变动，你还得再量一遍。在sketch在这点就会节省你很多时间，并且让我们的设计更加精确，只要选中这个元素，按住alt键，然后再把鼠标点选其他元素或者移动就可以实时的显示上下左右之间的距离，这是我认为sketch的一个最棒的功能。
圆角矩形
sketch对圆角矩形的创建是很方便的，既可以控制四个角圆角大小，也可以双击，对单个圆角进行调整，并且可以随意调圆角矩形，圆角也不会变形，当然photoshopcc也解决了这个问题，但它的操作很笨重。还有一个好处是，你可以点击右边的数值，并拖动鼠标，可以实时看到图形的变化。
方便的选择元素
左侧图层和分组栏，可以看到矢量图形的的缩略图。
当用鼠标掠过画布上的各个元素的时候，左侧会出现一个蓝色框对对焦到我们选中的元素。
另外如果你是一个分层分组科学合理，命名规范的设计师的话，那sketch的搜索会让你寻找界面元素的时候更加方便，并且随着上下点击会对焦到你选中的元素。
图层样式
sketch的图层样式和photoshop一样，渐变，描边，内外阴影，不同的是sketch可以在一个图形上添加最多四层完全不同的渐变，添加无限的描边和内外阴影。我们创建比较复杂的图形质感的时候也就更加方便。
文字的样式也可以单独的保存起来，方便对多个的文本进行调整。
无论图层样式还是文字样式都可以用alt＋command＋c或v进行粘贴。
钢笔工具
sketch的钢笔工具也比photoshop好用，具体表现在可以方便控制像素对齐或半个像素对齐，而在photoshop中虽然也可以对一个像素对齐，但设置和切换很麻烦。
最棒的是，它可以画完美的弧线，只要按住atl键拖动鼠标即可。
网格工具
又是一个photoshop比较渣的点，photoshop不用第三方的网格插件基本就不可用，在sketch可以很方便的对网格进行编辑，有传统的方格，也有横向和纵向组成的长方形。
文字渲染
这个点其实说的是sketch支持sub-pixel渲染，翻译成中文可以说是次级像素，我随便截图给大家看一下，这种渲染方式是以前的旧技术，为低分辨率的显示器而生，现在绝大多数的系统和屏幕都是有的，当然有的同学要抬杠了，iOS的屏幕上没有，实际上是有的，只是Apple默认关闭，为什么关闭？1是iOS的现在的屏幕的像素密度不需要，刚才也说说了这是一个旧的技术，2是由于底层技术上的原因所以不支持。
导出切图
画切片和输出切图对设计师是最痛苦的一件事，痛苦程度随着切图数量和设备屏幕的多少不断递增。sketch输出切图很方便，等待时候比photoshop真是短太久了，因为是完全的矢量，可以无限缩放，并且可以同时输出一倍和二倍图。
还可以自动画出切片大小。
甚至可以直接把切图直接拖到指定的位置。
效果图镜像
sketch是原生支持在iOS设备上查看设计稿的，可以下载iOS的App，就可以在iPhone，iPad实时查看设计稿了。
稳定和效率
sketch可以添加无限的画布，可以把界面全部在一个文件内完成，有点像ppt，每页都可以建立多个画布，把多个界面平铺，即便设计很多界面也不会觉得运行效率上有所降低，由于都是矢量，所以文件体积也比photoshop小很多。所以最关键的一点就是稳定，彻底把你从不停的command＋s解放出来，也不用在一个psd固定的1136X640内只建几个界面。
更新勤快
sketch工具是一个年轻小团队，更新比较勤奋，对于用户的反馈也很及时。售价448元，安装包不到10m，学习也是方便，但建议差钱的和不差钱的购买正版，拿出人民币真正的支持这些能够切实的解决问题的人。
支持eps和svg的导入
可以把psd内的矢量文件转成eps或svg格式，可以在sketch内打开。

Photoshop的槽点：
不适合UI设计师
在photoshop诞生时到现在，无论从官方的宣传，还是迄今为止的的版本更新点，都可以看到，photoshop的定位就是图像处理软件，Ui设计师从来都不是目标受众，我们使用的只是刚好能够提供界面设计功能的photoshop，但绝对谈不上就是给ui设计师准备的界面设计工具，打个比方，photoshop是全能，臃肿，笨重的工具箱，里面有钳子扳手改锥锤子等等工具，但我们需要只是一把用来削苹果的小刀。
不适合Ui设计
Ui设计很重要的一个点就是要求精确，同一个界面，你还得适配多种尺寸屏幕，这个过程在photoshop会花去你大量的时间去调整，像素，图标，文字，距离等等，因为photoshop从来没说它是个专业的排版工具。
Ui设计对“对齐”这个词格外敏感，所以你需要对齐像素，对齐文字，对齐图形等等。对齐这些元素需要辅助线，网格等，但在photoshop这些原生工具真心难用，以至于我们必须下载第三方插件解决这个问题。
在设计的最后，画切片，输出切图的时候往往是是很痛苦的。photoshop一直没有一个好的解决方式，只能第三方来了。
我们还需要一个能实时在手机屏幕上查看效果图的工具，我们可以依赖photoshop第三方插件，但毕竟是第三方，总会有些问题，比如为了实时预览你的psd画板大小始终是640X1136，并且时不时的卡死等等。
运行速度慢
photoshop的年龄大概将近30来岁，第一个正式的版本是1990年发布在mac上的，当时只有800多k，发展到目前的photoshopcc，有1个多g。从安装包大小，启动速度，处理文件时的等待时间，即便优化重新写过，在最新的photoshopcc还是让人感到慢，卡。我们不能抱怨，因为photoshop的产品定位就是图像处理，静态的动态甚至3D的，什么都可以做。
更新速度慢
当时买了retina本子是没办法用photoshop的，过了几个月adobe才发布更新。不会随着拖拽变化的圆角矩形又等了多久，字体渲染要等多久，是因为产品庞大，尾大不掉，响应速度特别慢。photoshop有着广泛的用户群体，UI设计师只是其中的一点点，我们的需求不会被第一时间得到响应。
弹出框
我相信这是设计师最难以接受的情景就是各种各样的假死或真死的对话框，绝对菊花一紧，如果运气好话也保存过重新打开photoshop就好了，就怕一打开是几个小时前的成果，或者更惨点儿打不开了，文件没有备份，只有一份，遇到这种情况真就除了卧槽没别的辙，只有重新来过。
UI设计师在Photoshop生存要点

• 每5分钟按一次command＋s。
  
• Psd文件不能大于30M。
  
• Psd内不能超过6个界面。
  
• 安装Psd缩略图补丁。
  
• 使用智能对象。
  
• 打开Psd，保存，或者输出切片要控制情绪。
  
• ... ...
  

工具并不是最重要的，但时间很重要。

千言万语汇成两个字：效率。
Sketch的前世今生
自从2010 年 Bohemian Coding公司推出了 Sketch，Sketch如今已经到了39.1版本。Sketch 一开始只是小型矢量画图工具，后来才优化成界面设计软件。当年的Sketch 2是拿过苹果设计奖的。

Sketch的定位
Sketch如其是说是一款超越PS的绘图软件或者有点夸张。其实我使用时第一感觉是，这软件太像keynote了吧。Mac软件经典的布局，数据表单式的检查器，并没有什么特别。但上手一周后，才发现Sketch作为UI设计软件的首选，实在当之无愧。

Sketch的定位并不是超越Photoshop。Photoshop涉及了太多领域，摄影后期、手绘插图、平面设计和界面设计等，它已经是变成一款大而全甚至有点臃肿的设计软件了。
而视觉设计师用它作为UI设计软件时，存在什么痛点呢？如果你曾设计过界面，发现设计界面花了1个小时，而切图、标注等工作需要同样花你1个小时，你会发现一些批量和非设计的工作也占有工作时间的几乎一半；当设计稿越来越多，即使改一个字体，都得牵一发而动全身，每份设计稿都得一个一个字段调整，当时可能自杀的心都有。
Sketch的定位便是为了解决这些问题。它是一款只在UI设计领域，有效率和便于协作的矢量绘图软件。

• 它减免设计师花在批量式的非设计工作的时间；
  
• 它帮助设计师聚焦他们真正需要关心的：页面效果、扩展性、控件库、逻辑层次等；
  
• 它提高设计师与其他协作人员沟通的效率：产品经理、交互设计师、开发工程师等。
  

Sketch的优势
1、提高非设计部分工作的效率。可快速输出1倍、2倍甚至自定义尺寸的切图，可智能标注任何元素。把一天需要做的任务，变成一分钟的事。甚至连设计师不得不经常按的Command+S都不需要按了，自动给你保存好。

2、帮助设计师聚焦他们真正关心的事情。UI设计师做设计稿的核心其实是：定义颜色、控件样式、页面结构、字体和图标样式等。每次的调整稿件，设计师最常经历的也是，把全局的颜色、字体、图标和控件再更新一次。

Sketch也是站在设计师的角度，把这些核心作为首要考虑的重点。比如全局控制的颜色库、标志库、字体样式等。只要你更新一个，全局运用到的便会同步更新。

还有一个很有意思的点是，Sketch一份文件其实更多是一个项目的概念，而非一份设计稿。打开一份Sketch文件，其实是一系列稿件的汇总。

这种使用软件的方式也会利于设计师转换思维。例如同时看到多画板，可以培养设计师的全局观，观察页面的统一性和跳转逻辑；全局控制字体、颜色和控件，可以培养设计师对拓展性和统一性的把控度。
3、不得不提的插件。Sketch开放了插件，让众多出色的插件也不停再完善Sketch。帮你批量命名图层、智能标注页面、智能填充头像和文字等，让Sketch越来越能满足不同人群的设计需求。

Sketch的劣势
1、路径绘图。路径描点的选择，操作与路径的修改，Sketch一直逊色于Photoshop。特别是对线段的选择删除，描点的切换、删除和添加，还有单独调整某个句柄，都还没有Photoshop或Illustrator便捷。这导致我在绘制复杂图形时，会在AI中绘制完毕后再粘贴到Sketch中。

2、不稳定。Sketch并不算上是非常稳定的软件。经常会出现莫名其妙的BUG。例如不同版本保存的源文件无法打开。调整Symbol宽高后，具体又在设计稿又不会更新等。但考虑到Bohemian开发人员一直很少，而绘图软件使用情景又很复杂，一百个人用可能会遇到一百个不同的 bug，尽管 Sketch 改进速度很快，依然会给人感觉问题多多。
3、一些高级功能的缺失。比如画布背景的调整（这关系到你判断某些颜色的感觉）、查看颜色的LAB值、清除参考线等。

4、文档的内存管理。一旦文档中稿件一多，打开Sketch便会有卡顿，操作也断断续续的，非常吃内存。希望Sketch日后可以优化这一点。
总之，以后的设计工作中，不涉及手绘和插画，应该会更多倾向使用Sketch。

只拿sketch和ps对比的人，多半是不会用ai的。为什么用sketch，因为它比ps简单。为什么用ps，因为它比ai简单。