上次去旧金山参加WWDC 2013时,我有幸会见了来自世界各地的大牛,他们热心致力于创建更好的工具,为设计师们提供更多方便。

Sketch(仅Mac版)在一年前刚刚发布的时候我就试用了。因为它当时功能还不完善,加上难以改变的工作习惯,让我又回到了Photoshop。尽管如此,在设计师社区里仍然可见对这款软件的狂热。这促使我安排专门的时间,一本正经地研究它,我自学了Sketch基本操作。我想要评估一下,Sketch是否能够在某些方面有效地代替Photoshop。

今天,我80%的设计工作是在Sketch里完成的。切换软件所花的时间不到一个月,而至今我仍然觉得切换对了。下面就是我的理由:

Photoshop,朽木之用

Photoshop有什么不好呢?当我们对品质、效率和协作的要求越来越高时,就越来越会发现,我们用着残缺的工具。

出于诸多原因,本文不再讨论Fireworks(主要是因为Adobe自己都砍掉了这个产品)。

并非为我们打造

最初开发Photoshop,是用来做数字图像处理的。贝塞尔(Béziers)曲线和矢量工具在第二版才开始出现。如果仔细看看它的版本升级记录以及最近的更新,UI设计师明显地没有列入这款软件的目标用户。我们已经忘了,人们其实是在“破解”着用它,我们在它主要用途之外进行着操作。我们其实需要一款更简单的软件,完成更简单的事情。Photoshop是高射炮打蚊子了。

不适合移动时代

如果需要将图形导出为多种分辨率,你就遇到麻烦了。即使采用sprite技术,你也不得不花大量的时间,把所有的图形都对齐网格。有很多节约时间的工具都来自第三方插件,iOS屏幕和图标模板、网格布局和符号。

老气的引擎

因为Photoshop悠久的历史和面向图像处理的传统,它内部的运算引擎要消耗大量的资源。即使在Adobe工程师团队已经做了惊人的努力来对性能进行优化,各项功能还是慢到让我们心烦。即使是“同时移动多个组合”这样基本的功能,每次也都要等沙漏。这也不能怪工程师,他们要做跨平台支持已经够累了。

年事已高

你还记得视网膜屏幕发布之后,大家盼望Photoshop更新,等了多久么?还有虚线笔触、动态圆角?太久了。我都能理解,不是挑刺儿。巨型团队通常动作缓慢。但这不能改变事实,我们对那些还不存在的功能的急切期待:良好的文本渲染、多重混合选项、实用的智能辅助线,等等。

Skech凭什么改朝换代?

自动保存和版本管理

你也是 ⌘+s 存盘强迫症患者?现在有治了!Sketch能够自动存盘,而且允许你恢复文件以前的历史版本。(译者注:这是现代Mac OS X的系统内置功能,很多Mac软件都支持。)

这里的“浏览所有版本…”可以进入时间机器界面查看文件以前的存盘记录。

矢量编辑和像素级精确

矢量意味着可缩放。也就是说,你不用再浪费时间分别做一个大图一个小图了。Sketch替你完成这部分工作,而且能做到像素级精确。在进行图标和插画设计时,能够切换“矢量”和“像素”两种视图也是非常实用的功能。

可以按下 ^P 来进行“矢量”和“像素”两种视图切换

智能辅助线

你是喜欢用xScope软件,还是用选区工具来测量尺寸?“智能辅助线”可以帮你处理所有元素的对齐、调好内外边距,非常方便,帮我省了很多时间,让我心情大好。这是对我来说最实用的功能之一。

选中你的形状或组合,按下 ⌥  同时让鼠标光标悬停在其他形状或组合上。

元素即时编辑

动态修改图像的圆角半径、宽度、高度?是的我们能!这个功能对我用处多多,而且说实话,当我切换到Sketch的时候,这个功能让我如释重负。我喜欢的一个功能是,可以在输入框内输入精确数值来得到完美的形状尺寸和者圆角半径。这样做顺理成章,没有它我不知道日子要怎么过了。

动态尺寸堪称大杀器

形状连接

可以方便地对不同的形状进行合并,来产生新的形状,并选用联合、相减、相交、差异运算。这些都在意料之中,但你要知道,真正牛的在于,所有参见运算的子形状都可以即时编辑。你可以单独选中他们,进行修改层次等操作,而不会造成麻烦。不用为图形前后次序纠结了。这就为创建和管理更复杂的形状提供了可能。

可逐层设置的多种混合模式

那种一层一层叠加加效果的 Photoshop 式炫技可以结束了。在Sketch种,你可以在单一形状上加入任何想要的东西。这意味着4层纯色或渐变的填充,以及无限的边框、外阴影、内阴影,等等。

多达4层填充,无限的边框和阴影。

向最近的像素边框边缘

“向最近的像素边缘取整”功能可以让图形或图层靠拢最近的边缘,例如一个某形状的尺寸是5.3px,可以取整为5px,不会再有小数值。我为这个功能设置了快捷键,确保我所有的形状都是像素级精确。比起将矢量点逐个对齐到网格的操作,这种方法快速而有效。

我使用 ⌥ ⌘ x 作为快捷键。这是我最常用的功能之一。

链接样式

当设计中包含大量文字时。“链接样式”可以让你设置一个特定的样式,来为任何文字套用。如果你在任何一处指定了链接样式的文字上进行了修改,它会反映到所有链接了同样样式的文字上。最好的一点是,这对形状同样有效。

使用链接样式,你可以方便快速地修改所有的文字效果。

导出作品

对作品进行切片和导出,常常是最痛苦的一步工作,即使 Photoshop 有专门的切片工具。 Sketch 支持矢量图像,而且对导出功能进行了精心设计,可以一键导出多种不同的尺寸,并支持不同的格式( pdf 、 eps 、 svg 、 png 、 jpg 、 tiff )。当然这用不着插件和第三方应用程序,而是内置功能。

一键导出

分配间距

当你在做的设计包含丰富的内容例如多个图像,而需要漂亮的布局时,这一功能可以帮你举手之间快速测试不同的布局。

在处理内容布局,例如排列图像时非常有用

网格

网格(Grid)是由一组水平、垂直轴交叉组成二维结构,用来对内容进行结构化。使用网格,设计师可以将文字和图像以一种合理的、吸引人的方式组织到一起。

你一定要用用网格,它是伟大的工具。

即时网格

文本渲染

使用它本身的高级文本渲染,Sketch对文字和字体的显示效果极佳。又可以抛开Photoshop的反锯齿算法大包袱了。

文本以最佳方式进行渲染

CSS 样式

如果你的工作是网站开发,或者与网站工程师一起工作,这个功能将会把你的混合选项转换为 CSS 代码。

只需将代码粘贴到任意位置即可(粘贴到 CSS 文件中是不错的主意)

目前还不支持边框渐变

旋转副本

一个小工具,又可以大量节省你的时间。

旋转副本如此简单

Sketch Play

Sketch相关的iOS镜像工具正在开发中。本文写作的时候还是beta版,不过我已经在每天工作中使用了,非常方便。(译者注:Sketch Mirror已经在App Store上架。)这次也不是插件,而是内建功能。

灵活制胜

Sketch出自一家快速成长和前进的小团队。从他们的 changelog 可以看出,每一次更新都带来新的功能。

我建议你 使用 beta 测试版 ,自己经历频繁的版本更新。

有赖于聆听用户的声音,Sketch正在变得越来越好。要报告问题和提交新功能, 他们的 tenderapp 是一处极佳的场所。

开发方向

当然 Sketch 远未完美,如果能加上这些我喜欢的功能,我就永远不必再打开 Photoshop 了:

  • 基本的位图编辑,例如剪切和删除像素(译者注:此功能最新版已包含)
  • 为组合设置滤镜,例如高斯和移动模糊(译者注: Sketch 已经实现了更强大的背景模糊)
  • 对组合进行 3D 变换,例如倾斜、变形、透视
  • 导出/导入设置和预设值,这样团队可以共享配色方案、渐变、文字样式等
  • 以不同倍率导出作品(而不仅仅是 @1x 和 @2x )
  • 实现类似 Fireworks 的符号功能,可以加快工作进程,而链接的符号效率更高。更新其中任一,将反映到其他各处。
  • 改进状态管理,我至今用过最好的状态管理就是 Fireworks 。

相关链接

作者简介

本文作者 Jean-Marc Denis 是 Mac/iOS 电子邮件客户端 Sparrow 的产品设计师,目前为 Google 工作。

原文地址

https://medium.com/design-ux/25545f6cb161