原文标题：How to Improve Your UI Design Workflow in Sketch
原文作者：Tom Kershaw
原文链接：https://medium.com/@kernism/ui-design-in-sketch-eef33bf3e69b
无意看到一个朋友分享的Sketch使用经验的文章。无奈英语太差看不太懂。只好自己使用翻译软件慢慢看。现在分享出来，作为记录，也希望和大家共同进步。翻译得比较水，希望谅解。
---------------------------------------------------------------
让我们去游泳
我开始学习游泳的时候是以狗刨姿势开始的。尽管我努力尝试并游了4个来回，但是这并不优雅。后来我学习了自由泳，可以轻松的在水中滑行。同样，在设计过程中也有一些提高效率的方法。
回到2009年，我写了一篇文章关于如何改善Photoshop工作方法。我认为，基于我和团的的项目工作经验为Sketch做同样的改进也会很有趣。如同大多数交互设计师，我现在已经用这个软件完成了数个项目。最新的版本（Sketch3.3以上）已经解决了很多BUG。改进的性能，集成的实用插件，使他成为了我最喜欢的软件。Sketch几乎成为了行业的标准。
让工作流更加容易-特别是与团队合作的时候，更多的能量用于解决设计问题，而不是工具本身产生的问题。
一个主要的Sketch文档
我们喜欢Sketch的一个主要原因是因为他的专注性（难以置信的快）。他可以在一个文档中处理大量的图形元素。允许我在一个单独的Sketch文件中将多个画板（Artboards）全部放在一屏之中。
图片原作者：Tom Kershaw
Sketch也允许你在一个图层文件中创建一个独立的页面，但是我发现在于团队合作时，子图层常常被忽视。我决定把子图层用来放置旧的迭代页面或者有用的组件。主图层用来放置当前所有的设计。Sketch3看得见的提升就在于所有画板都在一个文件中。但是如果你的机器很卡，那么将你的设计分为几个文件还是比较好，确保你能精心管理文本样式（Text styles）、共享样式（Shared styles）和符号（Symblos）。稍后我会解释。
迭代
当你的设计不断的迭代，尝试新方向的时候。Sktech可复制画板和页面组件的特性，使这一过程变得简单。我喜欢把迭代过的页面放在整个文件的子图层中。最新和最重要的迭代以及其他设计组合为主图层。通常我明确的将这页命名为“主布局（Master Layout）”
同步你的画板
当你有了站点图（Sitemap），你可以在Sketch文件中将画板设置为与之相符。我喜欢使用数字来命名我的画板。例如，我以00_Home做为主页，类似还有01_AboutUS，02a_Products.02b_Products等等。
图片原作者：Tom Kershaw
可以使用空白的画板为要设计的页面占位。观察缺失部分有助于识别出你的设计缺陷，以及帮助你将所有东西契合在一起。当层次结构改变时，所有一切都很容易拖拽和重新调整。最后要记住,保持你画板也按照左栏层次结构排序。
图层结构
相比用PS做设计，Sketch做设计更简洁。基于你的页面层次结构来命名你的图层，群组。想想你的页面如何用div，用代码组织。如果页面的最顶部有个头部（Header），就群组他，确保他在你画板图层的顶部。一个页面结构的例子，如下：
图片原作者：Tom Kershaw
正确的分组页面控件和组织他们是和重要的。原因如下：
1.你可以轻松的拖拽和调整他们位置。你可能想要测试一个页面的排版用不同的方式。
2.其他设计师拿到这个文件时，可以快速找到他想要的，不用为了找到一个相关的模块，查找所有相关图层。
3.如果你在用Framer Studio做原型，为了引用组件，你必须保持页面中每个组件群组在一个图层中。
4.最后，开发者在构建你的设计时，会因为你有逻辑的文件而感谢你。
文本样式，共享样式和符号
这些特点令人难以置信的强大和节约时间，但是如果管理不善，会非常另人沮丧。我所面临的最常见的问题是，我们的设计师使用各自独立的Sketch文件工作，当需要合并他们的设计的时候，命名相同已调整的或者创建的文字样式，符号等会彼此覆盖造成混淆。你最不情愿的事就是检查设计来确保字体的正确性或者把UI元素的样式改为到他本来应该的样子。了解了这些，你就可以有所计划。在项目刚开始，你和你团队成员从不同方向迭代时，先不必使用共享样式。一旦有了一个明确的方向时，再创建样式和符号，然后将Sketch文档分发给你的团队成员，让他们以此开始。
图片原作者：Tom Kershaw
当创建文本样式的时候使用一个每个人都认同的命名方式，我最近使用的格式是： - ( , ) - ( , ) - ( , ) - ( , )
<样式名称>-<字体名><样式><大小>(<颜色>,<对齐方式>)
看起来就像这样：
H1-Gotham Bold 24px(black,left)
拥有这些信息会帮助我们在项目后确定一个样式规范。
Photoshop和Illustrator
许多Photoshop和Illustrator能做的事，Sketch不能做。如果你想创建一个Illustrator的矢量图，确保保留所有的锚点（不要断开），然后再导入Sketch前，先输出为SVG格式。这样做将减少很多Sketch解码的问题。
通常我有一个资源文件夹存放我的 Sketch 文件，包括SVG文件和PNG文件夹。我所有的文件都输出到这里，并且确保我的 AI和PSD文件随时可用。我希望 Sketch 能用的一项功能是与外部文件的连接，就如 InDesign ,或者是和一些智能对象文件的连接,如 Creative Cloud 。在此之前，我们将不得不手动输出。
图片原作者：Tom Kershaw
在Photoshop里我更喜欢处理图片效果而不是设计。在导入Sketch前将图片缩放到尽可能小是一个好的主意，但是也会造成Sktech文件包含大量的缩小分辨率的图像，导致文件臃肿。所以不管缩放，剪切还是输出图片，保持源文件在你的资源文件夹里。
开始投入前
最重要的是要记住：如果你从项目开始就设计的整洁有组织，在长周期中会节约你很多时间。也会有助于你们团队的工作流。这让你有更多的时间去创造...或者在沙滩上。
网友评论