牛先生（MR.New）微信号：mrnewchina，专注全球市场研究创新方法、行业趋势，发布最前沿的消费者洞察、创新案例与深度访谈。

关键词：Prototype 交互原型 高效性 同理心 代入感 全局观 合理化 指导性 及时性 同步化 舞台感

　　做交互原型的工具越来越多了，已经由当年的僧多粥少变成了现在的眼花缭乱。

　　选择工具之前，首先需要知道制作 prototype（设计原型）的目的是什么，然后再选择合适的方法和工具。

　　为什么我们要做原型 ？

对于设计师，它可以帮助我们整理设计思路，推敲概念；

对于工作团队，它可以用来交流，陈述方案，收集不同团队成员对于设计的反馈，提高团队协作效率；

对于用户，它可以帮助用户更容易地理解设计方案，有效地采集洞察，收集反馈，迭代方案；

　　交互原型的使用贯穿整个设计流程：

　　1. 设计调研阶段

　　关键词：高效性，同理心，代入感

　　在调研阶段，我们可以制作一些简单的原型让用户理解我们在做什么，激发用户的同理心，实现对用户现有使用行为的还原，以及与用户 co-creation（共同创造），从而达到研究的目标。

　　在以下的案例中，设计师需要为老年人看护员设计一款软件，但是设计师对于这个工作并不是很了解，所以在这里我们快速地制作了相关人物，地点和事件的纸质模型：

　　以及结合纸质的界面模型去与我们的最终用户——老人看护员进行头脑风暴，让他们能够更加具象地表达现有的工作流程与思考这款新软件的功能。纸质模型能够帮助终端用户更具象地思考与表达，让设计师能够快速获得同理心，发掘现存的痛点与设计的机会点。

　　2. 分析阶段

　　关键词：全局观，合理化，指导性

　　在交互设计项目中，这个阶段需要分析调研结果，并制作信息架构、交互模型以及流程线框图来梳理产品的结构，分析现有产品的不足，并与客户一起快速地改进，做出新的信息架构雏形，引导下一步的操作。

　　在整理现有的信息架构时，我们可以把每一个页面的信息写到一张小卡片上，然后再打乱他们，与客户一起去重新排序，过滤掉不必要的页面，整合近似的页面：

　　最后与客户一起整理出理想的信息架构雏形：

　　在项目过程中还需要不断完善和修改信息架构，用于指导下一步的交互模型和流程线框图的制作。

　　3. 创造阶段

　　关键词：激发性，迭代化，系统化

　　无论是产品设计、服务设计还是交互设计，头脑风暴都是在创造阶段非常重要的环节。一些有趣的工具能够帮助我们在头脑风暴中快速地制作。比如用乐高制作模型，搭建场景，既有玩玩具的愉悦感，也能帮助设计师进入场景，思考用户的使用流程，激发灵感：

　　除了乐高以外，我们还可以收集身边能找到的各种工具，通过不同材质和形态的碰撞激发灵感：

　　在研究物理空间与虚拟空间的连接与互动时，Arduino 也是一款对设计师非常友好的工具：

　　在界面交互设计项目中，我们会制作大量的 wireframes（线框图）去展示产品的雏形，用线框图制作的原型也几乎是每个项目必备的环节。基于定义好的信息架构，我们从 low fidelity（低保真度）的线框图开始，定义页面的数量、逻辑，内容和框架结构。这个时候我们可以用与屏幕相同尺寸的纸，笔去画一些草稿，做一些快速的迭代，理清页面的交互行为与逻辑：

　　在线框图的逻辑梳理清楚之后，就要推荐系统性，操作性都很强的 Sketch 作为制作 high fidelity（高保真度）线框图的工具了。这个时候，我们需要有系统性的思维，确保线框图能够顺利地向 UI 和开发过渡。Sketch 可以帮助我们快速建立一个设计语言系统，无论是在做线框图还是 UI 设计，都非常实用。

　　用 Sketch 建立 Document Colors（颜色库）：

　　用 Sketch 建立 Text Style（文本样式）：

　　在制作 symbol（界面元素）时，Sketch 有一个非常赞的 override 功能，比如可以保留一个按键的样式，但是改变按键里的文字内容：

　　一个完整的命名系统也很重要。如果我们把 Sketch 源文件用 InVision Sync 同步到 InVision 的网页端，可以通过文件名能够更加高效地找到相对应的页面进行编辑：

　　在进行网页设计的项目时，我们还要考虑界面在不同尺寸屏幕上的表现，这时需要定义界面变化的规整，附上 Material Design 的 breakpoint 划分方法：

　　在制作线框流程图的时候，也可以考虑 Axure，这是款制作线框图的资深软件，功能非常强大，能够完成复杂的交互逻辑，只是操作比较死板，界面不是很人性化，与 Sketch 这类的新工具也不是能够很好地结合起来使用：

　　Flinto 是另外一款能够与 Sketch 良好结合的工具，在做对于流程图的可视化，交互效果的定制化都有较好的表现，感兴趣的朋友可以试试：

　　4. 交流阶段

　　关键词：及时性，同步化，舞台感

　　对于设计概念的交流会发生在项目的各个时期，在运用原型交流设计方案时，需要保证项目相关成员能够及时地给予反馈。InVision 可以帮助我们做到与团队的实时交流，包括直接在界面上留言与回复，并且能够很方便地管理不同的项目，对于在异地工作的团队来讲非常有效：

　　但在团队协作时，要慎用 InVision Sync 同步 Sketch 源文件。在网络不好的状况下会出现同步延迟，你的旧版本 Sketch 文件有可能会覆盖其他人上传的新版本。

　　Figma 是第一款可以允许多人同时在线设计界面的工具，也可以导入 Sketch 文件，如果稳定性够好的话，会解决很多团队合作与交流的痛点，很有潜力：

　　在交流阶段，还需要把设计概念的闪光点展示给别人，所以我们制作的原型还要有舞台感。在产品设计项目中，我们会制作 1 比 1 的模型：

　　在界面设计中，我们会通过 Keynote、After Effects 等工具去模拟界面交互的动效，去展示设计的最终效果：

　　5. 精进阶段

　　关键词：愉悦感，审美感，完成度

　　不断完善设计，也是设计师的乐趣所在。在精进阶段，我们要完善整个设计，给用户带去更多的愉悦，也为世界增添一点美。以下三点在精进阶段值得注意：

　　a. 文本内容：通常是我们做 prototype 时容易忽略的一块，但其实是非常重要的一个环节，文字内容要做到简明扼要，并且亲切友好；

　　b. 转场效果：转场效果可以不用很华丽，但是一定要有意义，要去引导用户理解界面的逻辑，从而更加容易地去完成操作；

　　c. Micro Interaction（微交互）: 在用户与界面的交互过程中，如何激发（点击，滑动或者语音？），如何反馈（动画，声音，震动，还是灯光？），甚至藏在界面中的彩蛋，都是需要设计师去反复琢磨的；

　　Framer 能够精确地定义激发与反馈的行为，是出色的设计微交互的工具。它也能够方便地导入 Sketch 源文件，识别出已经定义好的图层：

　　Framer 的缺点就是很难管理大量的线框流程图，而且需要学习不是所有设计师都感兴趣的程序语言。Origami Studio 在不需要程序语言的情况下，对于微交互也有非常好的掌控性，如果对编程不感兴趣的朋友可以尝试一下：

　　6. 测试阶段

　　关键词：目的性，可用性，互动性

　　在测试阶段，设计师首先要知道测试的目的是什么，并不是界面完成度越高，测试效果越好，如果要测试整个交互的逻辑，黑白的线框图反而能让用户更加地专注于操作的逻辑，也会更轻松地表达自己的看法：

　　在有的项目中甚至可以把整个 context（用户环境）都做成一个原型，让用户有一个加沉浸式的体验：

　　从项目一开始，到产品真正上线前，我们都在不断地做原型，还是像文章刚开始说的那样，我们要先明白做原型的目的，以及项目所处的阶段，再选择合适的工具。

　　原文转载：frog 交互设计师肖又歌（ID:frog_China)

　　转载原文版权归frog公众号所有。我们尊重版权，除非确实无法确认，都会注明作者和来源。部分文章推送时未能与原作者取得联系，十分抱歉。如有标注来源错误，烦请联系我们协商解决，直接在本微信号后台留言即可。

如需转载请与牛先生联系，或注明来源于牛先生微信公众号（ID：mrnewchina）