界面设计工具 Sketch 的使用体验如何?

关注者
2799
被浏览
192212

36 个回答

大概用 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设计师带来了得更好地体验。
为什么?