为什么Sketch是网页设计师的理想选择

在我们的初创公司Typeform，我们刚刚将整个网页/UI设计过程从Photoshop和Fireworks转移到草图．根据我们的集体第一手经验，我们想讨论一些应用程序的功能，帮助我们更有效地完成我们的设计工作。

它得到CSS

在我们公司，我们主要使用视觉设计软件进行网页/UI设计。

这意味着我们几乎总是需要能够将静态设计原型转换为HTML和CSS。使用Sketch，我们发现这个过程非常简单。Sketch的开发人员在创建应用程序时就考虑到了CSS。

你可以在应用程序中做的所有事情都可以使用当前的CSS规范进行复制。在Sketch中，没有什么疯狂的、可撤销的视觉效果会让前端开发人员讨厌你，只有那些你实际上可以使用CSS编写的视觉效果。同样，获取特定元素的样式规则，例如登录按钮，很简单，只需右键单击它并选择“复制CSS属性”。

矢量图形

在Sketch中创建的所有东西都是向量元素。正因为如此，你可以缩放它们而不用担心像素化。这在为@2x显示器导出资产时特别方便，比如苹果的Retina屏幕，以及在使用SVG时。

事实上，这个数字设计工具是基于矢量的，这对响应式设计也很有帮助。

精确的字体渲染Web

当你在Photoshop中设计了一个很棒的界面，将它移植到CSS/HTML中，然后发现字体看起来与PS展示给你的完全不同，这是很烦人的。排版是用户体验的关键，因此在你的网页设计工具中正确的表达在设计过程中是很重要的。

我们在Sketch中发现的一件事是，字体渲染非常接近于web/移动浏览器，这意味着我们很快就能知道所有东西是如何组合在一起的，而不必拼凑一个高保真的原型。

iOS设计测试

在设计我们的新网站时，我们知道它需要在手机上看起来很棒。我们都做过在不同视口大小下测试设计的标准技巧，比如手动调整浏览器窗口大小，或者使用Chrome扩展来调整视口大小以匹配iPhone或Nexus。

但是对于这些响应式设计测试场合，Sketch有一些特别的东西:一个名为Sketch Mirror的配套应用程序。Sketch Mirror可以在iOS设备上运行，并将你在Mac上的画布上看到的内容精确地镜像到附近所有打开该应用程序的设备上。它非常适合同时在一系列设备上测试你的设计。

(如果有Android版本的Sketch Mirror就更好了。)

符号

如果你重复使用一个设计元素，那么让它成为一个符号会更有效，并提高整个项目的一致性。符号将一个设计元素的所有实例链接在一起。如果您更改了该符号的一个实例，则可以更新您所做的所有实例以反映该更改。

这个功能最终意味着你不再需要在所有的设计文件和图层中搜索你想要调整的“共享”按钮。符号与Photoshop中的智能对象非常相似，这并非巧合。符号功能最初是作为应用程序的插件创建的，目的是为Sketch带来类似智能对象的功能。

随着Sketch 3.0的发布，Symbols被引入核心应用。

画板和页面

过去，每次设计新屏幕或组件时，我们的共享文件夹里都会有几十个文件。由于我们已经迁移到Sketch，我们可以将与相同设计或功能相关的所有内容保存在同一个文件中。

你可以将Sketch的无限画布分割成更小的画板，每个画板都有独特的大小。我们发现这在为不同尺寸的设备设计时很有用，比如当我们需要知道我们的网站在1080p显示器和iPhone上的效果时。除了画板，您还可以向Sketch文件添加页面。

我们使用这个功能将新网站的每个屏幕设计拆分到一个新页面上，使所有内容整齐地组织起来。

网格和智能导览

如果没有Sketch的网格和智能指南，我们怎么生活?首先，我们来谈谈网格。

我们都知道我们应该使用它们来帮助我们排列我们的设计元素，并获得一致的间距，但在我们之前的软件中设置它们是如此痛苦。然而，在Sketch中，设置自定义网格线是一件微不足道的事情。自定义网格设置很简单，只需转到“视图”菜单。

现在你没有理由不使用网格了。那么智能指南呢?它们使对准物体变得毫不费力。

如果您曾经使用过Keynote，就会对它们很熟悉。当一个物体与另一个物体对齐时，它们会告诉你，你的物体在移动时就会被它们夹住。值得注意的是，最近的更新增强了智能指南功能在Photoshop中也是如此。

文件大小小

对于那些习惯了我们在Photoshop中看到的千兆字节文件大小的人来说，当我们发现我们的大多数设计都在100MB以下时，这绝对是一个惊喜。单是我们在文件存储上节省的钱就让它值得转换!

热情的社区

Sketch的工作人员都非常出色;他们总是会推出一些新的东西来增强应用程序，或者教你一些你不知道的东西。

和Photoshop一样，Sketch社区也创建了一些很棒的插件和工具。我们用的一个是Sketch.app的动态按钮插件当你需要制作许多UI按钮时，这很有用;当您编辑按钮的文本时，其他属性会自动调整以保持文本周围的一致边框、圆角等。看看这个开源Sketch插件列表了解目前社区开发的插件有哪些。

社区也热衷于分享关于Sketch的知识。有大量关于如何从Sketch中获得更多内容的视频教程和指南，这在我们进行转换时非常有价值。

Sketch的缺点

对于许多数字设计师来说，Sketch是一款以苹果为中心的应用:它只能在Mac OS X上运行(而Sketch Mirror只能在iOS上运行)。

我们的设计团队主要使用Mac OS，所以这对我们来说不是问题。但对许多人来说，这将是最终的交易破坏者。

你用Sketch吗?

如果你已经在使用Sketch，或者正在考虑切换，请在评论中分享你的经验和想法。

相关内容

• 如何使用iPad进行真正的设计工作
• 关于JPEG的速成课程指南
• Web设计师Firebug指南