[译] 快速原型设计的新手指南

• 原文地址：A Beginner’s Guide to Rapid Prototyping
• 原文做者：Anant Jain
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Ryden Sun
• 校对者：Ivocin

7分钟（甚至不到）内了解快速原型设计的一切

照片由 Denise Jans 提供于 Unsplash

从一个想法到完整的产品，过程是复杂的。每个想打造本身产品的人都应该具有原型设计的能力，经过原型得到反馈，而后不断进行迭代。这也是 UX 设计师工做中的重要一环。

原型设计有不少种形式，从纸上简单的草稿到看起来像最终产品的交互模拟，都属于原型范畴。这篇指南是写给那些想理解原型全部相关方面知识的初学者的。

咱们除了会讲到一些快速原型设计相关术语的含义以外，还会有如下这些方面：

1. 什么是快速原型设计？
2. 你须要为哪些部分设计原型？
3. 快速原型设计的流程
4. 原型须要包含哪些部分？
5. 原型的保真度是什么意思？
6. 应该如何为原型挑选合适的保真度？
7. 如何选择原型设计工具？
8. 原型设计最佳实践：作什么和不作什么

什么是快速原型设计？

快速原型设计是一个不断迭代的过程，将网页或者应用可视化，以此来得到用户，利益相关者，开发者和设计师的反馈和承认。

当使用的好时，快速原型设计能够经过增强多方沟通，避免制做出一个用户不喜欢的产品，以此来提升设计的质量。

你须要为哪些部分设计原型？

原型设计并非一个系统的完整功能性版本，它只是被用来帮助可视化最终产品的用户体验。就像谷歌 Ventures design（风险投资设计， 一种用设计入股创业公司的方式） 合伙人 Daniel Burka 说的：

一个理想的原型应该是 “Goldilocks”（金发姑娘，用来形容完美平衡，刚恰好）般的质量。若是原型的质量太差，人们不会相信这个原型是一个真正的产品。若是质量过高，会致使你没日没夜的工做，而且你完不成。你须要一个 “Goldilocks” 的质量，不须要过高，也不要太差，刚恰好就行。

你不只能够为屏幕，移动应用或者网页进行原型设计，甚至说是任何东西均可以进行原型设计。原型设计能够极好的测试如下方面（提供了案例）：

• 新功能： 在 Instagram app 中进行 Instagram Stories 模块的原型设计（在正式发布以前）。
• 流程上的改动： 在 Medium 引入付费会员以后，对其新的发布流程进行原型设计
• 新兴技术： 为自动驾驶汽车的旅程进行原型设计！
• 新的交互界面： 为 Apple Watch 交互界面进行原型设计（当它首次发布时）

因此，你如今知道快速原型设计是干什么的了。可是你怎么来作呢？咱们后续会讲到。

快速原型设计流程

快速原型设计包含了一个 3 步走的流程，根据需求屡次迭代：

1. 原型： 为你的解决方案或交互界面建立一个可视化的模型。
2. 评审： 跟用户分享原型，探索它是否知足用户需求和指望。
3. 改进： 根据用户反馈，找出须要改善或进一步明确的地方。

原型，评审，改进，迭代。

一个原型一般是从一个简单的模型开始，只涵盖关键点，随着用户反馈的数据收集，经过每一次迭代变得更加完善，复杂。

你的原型须要包含哪些部分？

集中精力在那些关键的功能，这些功能是用户最常使用的。快速原型设计的意义是，在不须要规划整个产品细节以前，展现一个功能是怎么工做的，亦或是它看起来是什么样的。谨记，咱们的目标是 “Goldilocks” 般的质量！

一次性对整个 用户流程 进行原型设计。比起一个界面一个界面的设计，原型设计应基于一个用户使用场景，这个场景包含全部你想进行原型设计的区域。经过这种方法，你会获得更精准的用户反馈，由于你的原型会切实的反应用户真实生活中的场景。好比，将“注册/登录/重置密码”一套流程进行总体原型设计。

除此以外，要记住，心中要有一个迭代计划。按经验来讲，制做迭代计划时要从全局入手，而后超更细节的解决方案版本入力。随着你不断迭代，原型的保真度和所包含的内容，都会不断增加。

可是稍等，什么是保真度？

什么是原型的保真度？

保真度是指原型与最终产品或解决方案的类似度。你能够从不一样等级的准确度中选择，根据目前流程的阶段和原型的目标来选择。

视觉 (草图 vs. 设计稿)

布局和设计是原型保真度中最显眼的部分。若是一个原型从开始就保持高视觉保真度的产出，用户会倾向集中于视觉，而不是功能细节，这会偏离早期阶段原型的主要目标。

静态原型有两种保真度 - 草图（低保真）和设计稿（高保真）

功能性 (静态 vs. 可交互)

原型是静态仍是必需要看起来支持全部功能（可交互）？两个版本都有好处和坏处：静态原型能够更简单快捷的实现，然而可交互版本后续可被用来作可用性测试和用户培训。

一个高保真的可交互的原型。 (来源)

内容 (固定文本 vs. 实际内容)

原型的早期阶段，使用统一的固定文本内容能够有效的避免用户从提供功能性反馈中偏离，而不是对文本内容进行评论。

然而，随着原型设计的流程递进，用实际内容来替代冗余的文本，这样用户能够感受到总体设计的影响。

使用实际的标签也是一个很好的机会来测试你“复制的内容”的工做效果。复制对于文本空间和屏幕中信息是一个美妙的术语，就像咱们把“发布”按钮叫作“发布”，“发表”，“发送”，“完成”或者其余的叫法。

都存在哪些保真度？

• 低保真： 低保真度就像“笔和纸”，草图会生成静态的原型图，包含较低的视觉和内容保真度，以此来支持快捷的改动。这会强制用户集中于功能以及他们如何使用这个系统，而不是系统看起来怎么样。
• 中保真 电脑端的工具好比 Visio 所产出的原型咱们叫作中度保真原型，由界面框架和工做流组成。这个程度的保真是用来展现系统的表现行为，来判断用户的需求是否被知足，以及来评估用户体验。
• 高保真 高保真原型有时候会太真实，以致于常常与实际产品搞混。它们的产出也更耗费时间。一些工具像 nVision, Sketch, Figma, Adobe XD, Framer 等容许非技术用户来创造高保真原型。虽然它们不能被转换成可用的代码，可是能够很顺手的被用来作可用性测试和用户培训。

从低保真，到中保真再到高保真 (Source)

如何选择合适的原型保真度？

大多数时间，设计方案的最佳探索方式是从粗略的草图开始，而后根据系统的复杂度和需求，迁移到更高的保真度。

有些时候，你的选择多是由客户需求或所关注的领域所指引。好比，若是你想评估一个界面改动所形成的视觉影像，相对于粗略的草图，你可能会选择一个视觉设计稿。或者若是你的解决方案时关注于消息的，你可能会决定使用真实的内容而不是统一的固定文本。

如何选择原型设计工具？

根据你的需求和方式有不少可用的原型设计工具。选择工具以前，你要问清楚这些问题：

• 学习使用这个工具要耗费多长时间？
• 工具是否支持产品原型的需求（网页，应用程序，手机 apps，新科技等等）？
• 工具是否支持分享原型给其余人而且收集反馈？
• 对原型进行改动是否方便？
• 工具是否支持预约义的模板？

纸笔，Sketch, Figma, Framer, Photoshop, Illustrator, XD, Origami 等等

原型设计最佳实践：作什么和不作什么

作什么：

• 和用户与利益相关者交流工做，得到最多的反馈，而且培养他们对于最终产品的主人翁意识。
• 尽早设立指望目标，以确保用户和利益相关者知道原型设计是一种寻找问题解决方案的方式，并且并不表明最终的产品。
• 让高保真尽可能真实（包含相应延迟），这样用户和利益相关者将原型和最终产品比较时不会失望。
• 保存好模板，能够在之后的项目中复用。

不作什么：

• 不要给那些不会出如今最终产品的功能作原型设计。
• 不要作完美主义者，足够好就能够了。快速原型设计的目的是给每一个人达成一致。
• 不要任何事情都作原型设计！

若是你好奇应该如何测试你的原型，能够阅读个人另外一篇可用性测试的文章：

**极致 UX 体验背后的秘密：可用性测试 **：不管是一个原型仍是一个彻底成熟的产品，进行几个月的长时间可用性测试都是很好的选择

感谢阅读这篇指南。这篇文章最初是做为 Commonlounge 上的 UX 设计课程其中一部分发布的，这个平台有不少小型课程，话题从 Django 涵盖到 Machine Learning，可让付出的时间获得最大的回报。

经过在真实世界的项目上工做进行学习，而且从产业导师身上得到反馈，尽在 commonlounge！

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。