简要：原型制作是交互设计过程中不可或缺的一环，最近几年原型制作的工具从原来的屈指可数变成了现在的遍地开花的状态。在这么多工具中，如何选择一款合适自己的呢？这个问题引发了我关于原型设计的进一步的思考。这篇文章将会从原型设计的目的说起，接着介绍我对不同类型原型设计的一个分类框架，然后我们再回到工具的选择上来。

原型制作的目的

原型制作的目的简单来说就是输出一个看得见摸得着的实体来获得反馈改进设计。而其中，反馈可以包含以下几个维度：

信息架构

页面布局

关于交互模件的选择

交互规则

视觉细节

交互的细节，如动效和过渡效果

原型制作的目的将直接决定原型设计的具体方法。所以在动手做原型之前，首先要想清楚自己想得到关于哪方面的反馈。

原型制作的分类框架

以下是我根据视觉丰富度和可互动性两个维度做的一个分类：

横轴的手绘线框图，电子线框图和视觉效果图相信大家都不陌生，我就不介绍了。下面来解释一下纵轴的三个类别：“不可互动”，“有限互动”和“无限互动”。

“不可互动”就是指静态的设计图稿。“有限互动”指的是面向过程(process-based) 的一种系统组织方法，是通过列举所有可能出现的状态并将这些状态互相连接来定义一套系统的方法。“无限互动”指的是面向对象(object-based) 的一种系统组织方法，是通过定义每一个物件(object)行为的规则而定义一套系统的方法。其实这两个概念是编程的两种不同的基本思想，大家可以自行搜索了解更多。下面来简单对比一下用两种方法来定义一个简单的系统：

假设在这个界面上有两个按钮，一个按钮让正方形变大20%， 一个按钮让正方形变淡20%。

用面向过程的方法，要模拟3次点击的操作的话，要做15个状态，14个链接。

而面向对象的方法，只需定义初始状态和2个规则。

面向过程的优点在于易学上手快，缺点是不能模拟比较复杂的操作。而面向对象的原型制作则相反，需要懂一点编程语言，学习曲线陡峭，能模拟不同的动态组合。

我的工作流程

以上对原型的分类可以作为一个框架让大家思考在什么情况下选择哪些相应的原型制作的方法。我自己一般是用手绘线框图来尝试和对比不同的页面布局和交互模件的选择，用视觉效果图来丰富细节，用有动效和过渡效果的互动原型来做一些需要突出的微交互设计。过程如下图展示这样：

关于工具选择

对于视觉效果我用的是sketch，原因是插件多功能强大。

而对于制作有互动性的原型，市面上很多原型制作的产品都是面向过程的，包括Invision, Adobe Experience Design, UXpin, Atomic, Flinto等。面向对象的有Axure 和Framer.js（我只知道这两个，如果大家知道还有其他请指出）。Axure互动性功能挺强的可惜动效和过渡效果方面强差人意。因此，最近我在学习Framer.js。另外也可以参考这个网站：Compare UX Tools。

一句话总结：如果要做一些复杂互动的产品原型，设计师们还是要静下心来学一学编程。