从文章的题目可以看出来，这里笔者想要解决的是设计过程中怎样更高效的出图、并与上下游合作的问题。在开头我们可以先用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-标注尽量齐全。
总结
很荣幸大家读到这里，其实这里所运用的也不过是设计/心理学领域的通用法则。在专注于帮产品用户解决问题的同时，也可以花时间关注一下自己的需求、身边人的需求：对于我们每天投入大部分时间与之交互的文档，也可以做一下设计优化。
希望能够有所帮助。
网友评论