通过本文，你将快速认识原型是什么，以及我们为什么要做原型。
本文是 UI 设计进阶系列的第 6-2 篇，系列目录：www.zcool.com.cn/article/ZNjI0MDI4.html。
我们前面所做的工作放到双钻流程中可以归为 Discover、Define 和 Develop，而接下来要做的工作就是 Deliver 了，重在建造和测试（build and test）。
我们知道做工业产品设计时会建立一系列的模型（model），来对设计进行一系列测试。而原型（prototype）则相当于数字产品的模型。你也可能会听到有人叫它 demo 版。
我们为什么要做原型？我在之前的文章中其实就有介绍，任何低保真原型都具有以下作用：
在早期检测和修复主要问题
构建起来容易、成本低
让人更有迭代的动力和意愿
得出的反馈侧重于高层次的概念而不是执行
易于携带，展开测试活动
按保真程度分，原型可以笼统地分为：
Low-fidelity Prototype（低保真原型）
High-fidelity Prototype（高保真原型）
在 GUI 设计中，高保真原型我这习惯将其归为视觉稿（即便不是最终版），而低保真原型又可以有以下这些形式：
Sketch（草图）：快速表达概念。
Storyboard（故事板）：视觉化表现产品如何工作。
Paper Prototype（纸面原型）：将页面画在一张张纸上用作演示。
Wireframe（线框图）：视觉化呈现一个个独立页面及交互逻辑。
另外，还有：
Interactive Prototype（可交互原型）：可供用户操作的原型，它可以是低保真的，也可以是高保真的。
故事板和草图我们在前面的文章都已经介绍过了（请自行查阅）。本文稍微再介绍下纸面原型、线框图以及可交互原型。
纸面原型
纸面原型制作起来非常方便，基本就是画完草图，然后将画面裁剪成「模型」就行。相比草图，它的拟真度更高，对于交互的表达也更直观。
线框图
线框图则已经非常接近最终的视觉稿了。但相比视觉，线框图允许忽视美感，只注重功能和信息的呈现。而如果绘制人员拥有基础的设计能力，那么他很可能会在这步就重视页面的布局和版式。
在国内，线框图通常由产品经理或交互设计师绘制。视情况，可能还会将其做成流程图，写上交互逻辑和开发细节。（具体我就不具体介绍了，大家可以观察下图就能发现很多特点。）
可交互原型
顾名思义，可交互原型就是可让人进行互动操作的原型。一般还是先绘制静态页面，然后添加各种操作效果，最基础的比如滑动、跳转页面等。
值得提的一点是，我们经常看到的页面细节动效，并非「可交互原型」。它们更多是为了开发某一效果而做的演示。可交互原型更像是一个正常的产品，可供人使用。因此当我们做原型测试时，可交互原型是最好的选择。
网上有很多原型设计工具，尤其是近些年新兴了许多，我们究竟如何选择适合我们的工具呢？
在做原型前，不妨先让我们回答下面几个问题：
你为什么要做这次原型设计？
你是在为什么平台做设计，手机、平板、桌面……？
你要做什么类型的原型，需要什么程度的保真度？
你有多少时间完成设计？
你需要展示多少的产品体验？
明确上面的目标后，我们再去选择设计工具。
设计咨询公司 Cooper 做了一个非常有意思的原型设计工具筛选器，大家可以上去看看都有哪些软件：www.cooper.com/prototyping-tools?
然而我们实际投入工作使用的可能就那么几款，下面是我个人推荐的：
追求速度可以用：
Marvel
InVision
Principle
墨刀
追求保真度可以用：
Origami
Framer
Webflow
在《Don’t make me think》（中译《点石成金》）一书中，令我印象最深的有两句话：
测试一个用户也比不做测试好一倍！
早测试一个用户，好过最后测试五十个用户！
虽然看着有点夸张，但用意就是告诫我们测试至关重要。在早期找三五人简单试用下，就能发现绝大多数问题。而更多关于用户测试的方法与细节，等到第 9 章再完整介绍罢，see ya~
UI 设计进阶系列目录：www.zcool.com.cn/article/ZNjI0MDI4.html。
作者：Hindy
个人主页：hindydesign.com
转载请私信授权，未经允许请勿转载，感谢您对作者版权的尊重。
