初识Sketch：设计师的工具箱

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

 

上次去旧金山参加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凭什么改朝换代？

 

自动保存和版本管理

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

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

 

矢量编辑和像素级精确

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

 

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

 

智能辅助线

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

 

 

元素即时编辑

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

动态尺寸堪称大杀器

 

形状连接

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

 

 

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

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

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

 

向最近的像素边框边缘

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

 

 

链接样式

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

 

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

 

导出作品

对作品进行切片和导出，常常是最痛苦的一步工作，即使 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 了：

 

1.基本的位图编辑，例如剪切和删除像素（译者注：此功能最新版已包含）

2.为组合设置滤镜，例如高斯和移动模糊（译者注： Sketch 已经实现了更强大的背景模糊）

3.对组合进行 3D 变换，例如倾斜、变形、透视

4.导出/导入设置和预设值，这样团队可以共享配色方案、渐变、文字样式等

5.以不同倍率导出作品（而不仅仅是 @1x 和 @2x ）

6.实现类似 Fireworks 的符号功能，可以加快工作进程，而链接的符号效率更高。更新其中任一，将反映到其他各处。

7.改进状态管理，我至今用过最好的状态管理就是 Fireworks 。

 

相关链接

Download free trial

Buy on the Mac App Store

Meng To blog posts （特别感谢，是他把我劝上贼船）

Sketch tips & tricks blog

Sketch sources

 

原文地址 https://medium.com/design-ux/25545f6cb161

 

来源： 图灵社区