为了少改稿，我列出了 5 种原型的使用阶段和优缺点分析
@Akane_Lee：很多项目在开发过程中，会制作原型测试与验证构想。但项目开发会经过许多阶段，也有很多种制原型的方式。该如何配合项目开发进度，制作适合的 原型呢？这篇文章列出了每一个设计阶段对应的原型设计，能解决不少设计师的困惑。
原型用途
开发者对于产品一定有各式各样的想法，并尽力让用户觉得产品「好用」。但开发者该如何确定目前产品设计走向能让用户觉得好用？可透过「使用者测试」这个方法验证。我们可以透过原型测试用户想透过产品完成某项任务时，需经过哪些页面的流程；观察使用者在操作过程中是否有感到任何不顺或迟疑的地方等等。
有些文献将原型分成低保真、高保真等等。我将原型粗分成：
- 纸本 原型
- Wireframe
- Mockup
- Web
- Code
每一种 原型 用途、制作方法、成本、使用时机都不相同，各有利弊。
纸本 原型
最快速的原型制作方式，只需要纸笔即可完成，不需要经过耗时的专业训练即可上手。只要在纸上绘制简单的 Wireframe （线框图）就能进行使用者测试。
要制作纸本 原型，需先考虑用户想操作产品完成某一任务时会经过的所有页面，绘制简易 Wireframe。
使用时机
- 项目初期，已确定功能，尚未正式开始绘制 Wireframe 文件时
- 适合内部讨论。
优点
- 制作成本低
- 制作容易、速度快
- 修改方便
- 产品开发初期就能确认操作流程，在尚未投入大量人力进行开发前实时修改设计
缺点
- 失真严重，和最后上架产品落差极大
- 用户操作纸本原型和操作电子产品感受和习惯完全不同
- 使用者有可能看不懂 Wireframe
这是我最少使用的制作原型方式，虽然只要纸、笔、便利贴…等文具就可以完成，但和最终产品落差太大，主要拿来测试 Wireframe 内容版面配置、检查有没有漏页面。
或者是和 PM 或 RD 讨论过程中各执一词僵持不下时，为了说服他人而制作的简易 原型，开发团队内部讨论使用。但也和实际手机或网站上操作落差太大，效果不佳。
UI Stencils | iPhone Stencil Kit 这间公司提供很炫的金属样板，包含 iOS、Android、Web 等等，可以手绘出漂亮整齐的 Wireframe 。不见得好用，但摆在桌上看起来就很专业。我手上的是第一代，目前样板已经更新很多次版本了。
Wireframe
因为用户操作纸本 原型 和操作电子产品感受和习惯完全不同，保留快速制作 原型 的优点，改善操作落差极大的缺点，延伸出这种制作原型的方式：
- 绘制纸本 Wireframe
- 拍照
- 在照片上设定触控范围、Link
使用时机
- 项目初期，已确定功能，尚未正式开始绘制Wireframe文件时。
- 适合内部讨论，或和有经验的客户沟通。
优点
- 改善用户操作，纸本原型和操作电子产品感受和习惯完全不同
- 制作成本低、容易、速度快
- 修改还算方便
- 产品开发初期就能确认操作流程，在尚未投入大量人力进行开发前实时修改设计
缺点
- 失真严重，和最后上架产品落差极大
- 和真实使用者情境几乎不同
- 使用者有可能看不懂 Wireframe
真要拿手绘 Wireframe 制作 原型，我会使用 POP – Prototyping on Paper，可以在极短时间内将手绘纸本 Wireframe 制作成可操作的 原型。减少纸本和电子产品在操作上的落差，尽量接近实际使用情境。
我大多拿来测试「单一任务」的操作流程，不会把整个产品都做成 原型，页面太多管理不易，要修改也麻烦。
手绘 Wireframe 等级的原型我都不会当成是正式测试，顶多拿来确定「这样做用户能够顺利完成任务吗」，和最后产品落差实在太大。而且就算是信息公司，主管、老板、甚至开发团队里看不懂 Wireframe 的人也是有，看不懂也没办法拿这个和对方沟通讨论。
早期经验不足时，会依赖这种作法来验证自己的设计，几年下来会发现工具型 App 界面大同小异、操作方式就那几套。除非是游戏类、创新/找不到参考的界面设计，不然我不会制作 Wireframe 等级的原型。
Mockup
许多使用者看不懂 Wireframe，直到 Mockup 阶段才能理解。若要对外部进行使用者测试，原型尽量拿接近最终发布的产品，得到的结果较精准。
使用时机
- 已确定 Wireframe，需要测试视觉设计对用户的影响时。
- 外部测试最基本的 原型 样式。
优点
- 拟真度高，接近最终发表产品。
- 使用者容易理解
- 可测试视觉设计对用户的影响。
缺点
- 修改较麻烦
- 只能验证预期内的操作任务
- 和最终产品仍有落差
- 当使用者有预料外的操作时无法反应
现况我最常做的 原型 是这类型，用 Mockup 制作出来的 原型 不管对内或对外，使用者都看得懂。
目前业界不少人制作 Mockup 等级的 原型 时，会使用 InVision，简易快速易上手，且支持团队协作。可免费试用，对于初次接触 原型 的开发者来说，短短时间就能做出有模有样的 原型。
虽然 Mockup 等级的 原型 没办法确认程序数据面的状况、也没办法测试当使用者操作不是按照规划预期时产品如何反应，但就以视觉设计、内容排版、操作易用性来说，Mockup 等级的 原型 算是不需要动用工程师撰写程序，只需要设计师执行、成本较低的 原型 制作方式了。
Web
介于 Mockup 和程序制作间，静态 HTML，尚未套后台串数据库，使用假数据。能测试动态效果对用户的影响。
使用时机
- 已确认 Mockup
- 需确认动态效果对用户的影响
优点
- 有数值的动态效果，供开发者参考
- 比 Mockup 更精准的 原型
- 可挂 GA 让外部使用者进行封测、收集数据
缺点
- 开发时间较长
- 专业技术需求较高
- 修改不易
几乎只要动用到工程师写程序，制作成本就会提高，Hype3 能让设计师不用写程序代码就产出 HTML、CSS、JS，功能强大、容易上手、支持中文界面。是我爱用的工具软件，尤其在制作动画效果，配合时间轴和场景、对象等，可以在短时间内做出假以乱真的 原型。
如果要测试动态效果，最低限度的 原型 要做到 Web 这个等级。顺带一提，Hype3 的物理引擎非常有趣，不在意产出的程序代码和效能的话，做简单的小游戏很有意思，单纯拿来做 原型 有点大材小用了。
Code
离上架产品只差一步，已套程序数据库。到这一步再来测「好不好用」已经来不及了，真要修改劳师动众。在这阶段要测的是各种「错误」，比如使用者操作错误；GPS、Wifi 不通时产品怎么响应用户等等，还有程序 Bug。
使用时机
- 产品上架前的最后测试
优点
- 几近于最终产品，测试结果最贴近上架后的使用者反应
缺点
- 开发时间最长，成本高
- 专业技术需求较高
- 修改不易
无论是 Wireframe、Mockup、Web 产出的 原型，都没办法完整检视整个产品。只有到了程序代码阶段、工程师套好程序串数据库，才能测试产品各个面向对使用者操作上的影响。
动用人力多、成本极高，一旦发现问题要修改会烧更多钱，但每个产品上架前最好都要经过这个步骤。
结语
原型 是拿来验证、找出问题的方法，不是有做就能保平安。原型 只能告诉你问题在哪，不会告诉你问题怎么解决。
不管是什么样子的 原型、修改再多次，产品上架后一定会有更多出乎意料的各种状况。公开发布前有先做 原型 测试，起码开发团队知道问题出在哪、有机会改善它。不做 原型 就直接上架，产品的问题在哪就是由使用者透过一星评价或客诉来告诉你了。
原文地址：blog.akanelee.me
关键字：设计, 设计文章, 原型
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
