从文章的题目可以看出来，这里笔者想要解决的是设计过程中怎样更高效的出图、并与上下游合作的问题。在开头我们可以先用5W2H简单看一下解决这个问题的必要性。

灵魂拷问

这样做的原因（Why）

面对同事交接过来，有时候未经整理的symbol、图层，大家也都想大声呐喊说“Don’t make me think”。其实这个问题的实质是：什么样的心理模型能够帮助大家形成关于sketch文件结构的统一认识，更好地让它为自己、为大家所用。既然注意到这个问题，我就希望能够解决它。

目的是什么（What）

对自己：提高创意思考之外，具体落地成图的效率

对大家：提高上下游协作的效率（不因为文档质量影响大家的革命友谊）

形成更专业的设计文档，保证出图质量

负责人是谁（Who）

可以是设计团队中的任何一名成员；是谁来具体执行并不重要，重要的是大家能够在统一文件格式和规范这一目标上达成一致。

什么时机最合适（When）

任何时刻，对别人交接给你的文档感到抓狂？感觉自己的页面结构不太整洁又不知道该如何入手？意识到问题的存在，那事情已经完成了一半啦。

从哪里入手（Where）

尚在设计进行中的文档、亦或是完全新建一个文档，甚至设计已经实施了，你想整理一遍，也不是不可以。把它作为一个规范来整理，从命名开始，例如 “Wireframe template v1.0”. （笔者从事的是交互设计这一阶段的工作，具体内容会更多地以线框图为导向）

怎么做（How）

Emmm…问得好，文章的剩余部分将给出答案

做到什么程度，产出如何（How much）

我们也可以建立一个MVP模型，立足自己当下的情境，设立好目标，慢慢的改善/迭代设计文档。笔者这里介绍的方法也很难说是最好，但在实际运用过程中确实能够帮助自己更好地利用sketch提供的功能，达到文档简洁易读的目的。站在我们这个岗位的角度，最明显的产出就是：改图成本下降；沟通成本下降；同事满意度提升；如果你是笔者这样的强迫症、整理癖，那还会有一点：日常工作中停下来打量打量整洁有序的文件，美滋滋（嘻嘻）。

这样一看，似乎系统性地整理文档还是很有必要的，下面是笔者建议的流程。

具体实施

1-层级和分类：建立清晰的文档结构

1.1 文档内容

Sketch文档是按照Pages-Artboards这样的层级去构建的，页面-Pages是所有界面-Artboards的容器，这一思路想必来源于纸面原型。

目前我们将Pages分为：1）线框图-Wireframes；2）页面流程图-Flows；3）组件-Symbol；4）垃圾箱-Trash can

1）页面中，我们将绘制具体界面，2）页面中，我们会梳理流程与标注并输出。

1.2 外部资源（library）

Sketch Library能够帮助大家对组件库的Symbol随取随用，且能在组件库更新时一键同步，对于加速原型图的绘制至关重要。

一个针对线框图绘制的library可以分为以下几类（分开而不是合并，更多是考虑到它们各自的使用频次）：

    1-通用icon库（中性风格的icon一套）

    2-通用颜色库（个人癖好，在绘制线框图时黑白灰都用有限的几种…）

    3-输出物格式与标注系统（版式、标注格式等）

    4-组件库

Library与Symbol的使用，也值得细细道来，笔者将另外起稿一篇文章探讨其中的细节。

2-由整体到局部，绘制具体页面

2.1 区分模块

像在白板上划分区域一样，按照主要流程划分绘图区。

2.2 界面命名-聚焦用户目标

我们习惯于将所有界面设置为Symbol，而在流程图中放入它们的instance，从此自动更新，一劳永逸。但如果流程图顺序改变呢？往往需要替换界面，这时如果界面数量众多，它们的命名就变得至关重要。

这里我通常采用这样的结构：Screens/Module-name/task。(使用斜杠后，在Symbol中同一层级的页面将被自动归类）

2.3 建立格栅系统（可选）

格栅的使用取决于个人的工作习惯，笔者是会在设计较大屏幕（平板-web）时，通过格栅帮助自己快速布局和定位。

8px vs 10px

Medium上的设计师都在推荐与Material Design类似的8px格栅系统，但据我了解，对于习惯于IOS的许多设计师来说，5px或者10px为一单元似乎更符合大家长期以来的认知。

Nudge it (Nudg.it)

如果使用8px格栅，记得使用Nudge it 插件来重设一下Sketch的移动单位。

2.4 块 - 点线面

新建完界面后，可以从深浅不同的色块+组件名开始，构建每个界面的整体布局。先想清楚界面优先级，再逐渐细化。

2.5 分组和排序 （4±1条法则）

绘制完界面细节，对界面组件进行好分组后（可以尽量将分组维持在3-5个），下一步可以借鉴Material Design中类比物理世界的思考方式(Elevation - Material Design)，按照距离远近检查群组的排序。做好这一步，能够很快帮助其他人理解界面结构和内容。

关于工作记忆，George A Miller的7±2实际上并不准确，Baddeley（1986）等人进行大量研究，表明这个数字其实是“4”——《设计师要懂心理学》

3-输出

绘制完具体界面，就可以整理输出物了。这里我们要做到的是：1-流程按照功能优先级划分主次；2-流程图有来有往，有开始有结果；3-标注尽量齐全。

总结

很荣幸大家读到这里，其实这里所运用的也不过是设计/心理学领域的通用法则。在专注于帮产品用户解决问题的同时，也可以花时间关注一下自己的需求、身边人的需求：对于我们每天投入大部分时间与之交互的文档，也可以做一下设计优化。

希望能够有所帮助。