初试Sketch

本文是翻译,版权归原作者所有


原文地址(source):http://nagarjun.co/post/105572899840/moving-to-sketch

在设计过程中,我用过大量工具。一般地,我用Evernote记录研究,并在那里形成想法。一旦做完了,我就尽量用纸和笔画成粗糙的线框图。如果对于纸上的总体布局觉得满意,我就把该线框图迁移到工具里,如果是web应用,就用Balsamiq之类的工具;如果设计移动app,我就用Adobe Photoshop创建像素级匹配的原型。有些情况,我甚至使用Adobe AfterEffects制作UI动画,因此开发人员能够像素对像素地再现某个想法。

我已经使用这些工具有多年了。Balsamiq相当易于学习,但是非常基础。我用了两年才能驾驭Photoshop。Photoshop不是专门做UI原型设计的,人们只是用到了它们的部分功能。我通常对于被折衷的工具感到不舒服,尽管我已经习惯好多年了,但是,在我听了有关它的情况之后,我决定本周公平地尝试一下Sketch。我知道有些晚了,但是乐于最后搞定它。

Sketch截图

如果我使用Photoshop的时间不够长,可能就不会如此地感激Sketch了。用Sketch的前两天里,我90%相信,我将再也不会使用Photoshop来设计接口。Sketch就是为UI设计而生。它综合了Balsamiq的简单和Photoshop的强大。我只用了几个小时就习惯了它的text,我甚至重建了布局,之前我用Balsamiq做线框、并用前端技术开发的。这个过程觉得非常自然。

下面是我推崇Sketch的地方:

简单

不管怎样,在使用Sketch时,你会时不时地感到舒服。我发现自己能够轻松地在UI之间跳转,我甚至只用几个小时就记住了所有的快捷键。如果你以前使用Photoshop,你将喜欢上Sketch组织图层的方式。做为一名Mac用户,Inspector给我的感觉也是非常自然的。

Sketch里的画布(Artboard)与Photoshop里的画板(canvases)类似,除了你在窗口里可以有多个画板。Sketch甚至提供了预定义模板,用来设计响应式web应用、iOS app、Android app(Material Design)和icon。

速度

Sketch的界面有着相当完美的布局。Photoshop做不到这一点,因为使用它本身就需要一堆其它的理由。当你用Photoshop设计UI时,你发现自己将忽略了半数的菜单项,因为它们只是不能应用到UI设计过程。

Sketch就不是这样,它是量身定制的。你将使用它提供的每一个特性。不是因为它在那里,而是因为它刚好是你需要的。这意味着从想法到UI,你将得到3倍速度提升(至少根据我的体会)。

Sketch还提供了方便的第三方插件,使之更快地设计UI。Content Generator是我特别喜欢的一个插件。它已经为我节省了数个小时的工作,你能够下载数百个插件来配置Sketch,只要你喜欢。

社区

貌似Sketch是可以与Photoshop在社区支持方面竞争的唯一app。数以千计的Sketch用户做了数以百计的免费插件,还有Framer之类的第三方插件,可以直接导入Sketch文件。我敢肯定,如果我掌握了Framer,我根本就不必使用Adobe AfterEffects。

定做的特性

我记不清有多少次,为了保持UI的一致性,拷贝Photoshop图层样式,应用到布局的其它部分。我不想再为自定义配色烦恼,因为它们创建和维护起来太费时了。我只是拷贝颜色、样式和整个图层。有了Sketch,再也不用这么麻烦了。

在Sketch里,你只需把UI组件定义成“符号(Symbol)”就可以复用了。你甚至能够定义自定义的文本样式,并用在整个UI。当你修改一个文本域的样式,所有使用相同样式的其它的文本域都会相应发生变化。太神奇了!

其它方面,你甚至能够针对Sketch文件里的任何元素去拷贝生成的CSS样式,并轻松地导出图片,方便用于web、iOS和Android app里。

结论

我坚信Sketch是UI设计的神器。它简单,而且强大。当你用不到100美元就可以在合适的package里找到你所需的一切,为什么还要为Photoshop支付700美元呢?我甚至连Sketch都没有入门。我再用一段时间,随后给大家反馈。

译文:初试Sketch 》| 腊八粥