相对于 Adobe Illustrator 、Axure 时代， 如今我们有了更多 fancy 的设计工具帮助我们 更快更简单的绘制精细的设计稿。 我们可以不去辩论「工具决定思维」的对错，但 我们却不得不承认「工具影响我们行为」的现状。
原型图（prototype）既是设计方法，也是设计产物。原型图帮助我们探索产品形态，辅助项目内沟通以及用户测试。相对于Adobe Illustrator 、Axure 时代，如今我们有了更多 fancy 的设计工具帮助我们更快更简单的绘制精细的设计稿。我们可以不去辩论「工具决定思维」的对错，但我们却不得不承认「工具影响我们行为」的现状。
如果你上一次拿到需求之后，第一件事情是打开 Sketch ，新建一个 Artboard，那么请允许老司机在此多唠叨几句…
01. 不要着急出原型图
很多不习惯手绘的设计师，通常会在软件中去构思设计的概念和整体框架。但过程中却不自觉得受到对齐、布局、字号、字体等等的影响，花了部分时间调整细节。但其实当前应该聚焦在 high level 的问题上，比如交互模型定义、用户操作流程定义等等问题。
🤔怎么做到？
- 不要马上深入第一直觉的方案，尝试探索更多的可能性。
- 试一试白板。当你有了初步的设计想法之后，可以在白板上演练一次。白板笔画不了细节的局限性反而让我们更聚焦在框架上，而非细节，同时白板也非常适合其他成员介入，是交流的好助手。
- 白板之后，把方案在纸上演练一次，规划好页面布局和 CTA 即可，并且聚焦在核心流程的核心页面，而不是每一个页面。
- 找 stakeholders 确认目前的产物，保证在概念层面大家是达成一致的，这个之后所有设计的基础。
02. 先理清页面的关系
不要从第一个页面开始设计，因为你很可能不知道整个项目到底涉及多少页面以及有多少页面是可复用的，有多少页面是全新的。在开始画原型图之前，理清页面的关系，抽象出页面的形式，比如「列表页、详情页、促销页」等等。然后找到每一种形式的关键页面着手干活。
🤔怎么做到？
- 可以借助类似 mindnode 这样的信息整理工具，先把可能涉及到的页面做个 sitemap 。这个sitemap 既可以帮助梳理范围，也可以作为自检checklist。
- 标记出页面的优先级，并按照优先级来合理分配自己的有限的时间。
- 如果项目过程中有需求变动，也需要及时更新到 sitemap 中，以便后期回顾。
03. 明确每次原型图的保真程度
交互设计过程中，会有很多次和项目成员或需求方的沟通和确认。沟通的目的不同，设计稿的保真程度也应当不同，所以设计师需要明确每一次交付的目的。但很多设计师总是习惯用自己习惯的工具，提供该工具擅长的保真程度的设计稿。
原型图的保真程度：
低保证：黑白线框，仅表现页面间跳转关系及页面内 layout 。
中保真：在低保真基础上，明确每个页面内的具体设计。
高保真：在中保真基础上，适当增加视觉表现效果。
🤔怎么做到？
- 开始设计之前，一定要明确下一次交付物是为了什么目的。是跟对方探索设计可能性，还是为了获得对方的建议；是为了可用性测试，还是为了跟相关方同步设计进度；是跟开发沟通设计细节，还是跟上级汇报设计内容，或者是别的。总之一定要根据目的需要，去交付不同保真程度的设计稿。
- 综合考虑时间限制。如果项目着急，请一定确保低保真沟通之后，再进入视觉设计。
04. 确保他人理解原型图保真度差异的意义
做用户体验的设计师都能充分理解，我们会根据目标的不同提供不同保真程度的原型图。但项目组其他的成员或者客户就不一定那么了解了。他们有的会觉得低保真的没意义、不想看，又或者会在低保真上挑细节、抱怨太难看。这些都会严重影响沟通质量和效率。
🤔怎么做到？
- 在开始你的工作之前，先给项目成员大致介绍下你的工作流程以及过程中的交付物。在每次沟通的时候，也有必要重复申明下本次沟通的目的。
- 演示原型图之前，也需要明确申明哪些是伪造内容，哪部分信息先不深究等等。
总结一下
开始动手画设计稿之前，一定确保自己对本次项目有了最宏观的理解，并且有了完整的工作计划。确保项目其他成员或客户也非常清楚你的计划，并理解和愿意配合。最后的交付物需要精心设计，确保可读性，确保信息传递准确。
Anyway, design first, then prototype according to a plan. ✿✿ヽ(°▽°)ノ✿
