一篇文章搞懂「低保真原型与高保真原型」

在当今快速成长的产品行业中，用户体验(UX)设计变得越来越重要。很明显，以设计为导向的公司相对于其他公司更有竞争力。“原型”对创造成功的用户体验至关重要。 但是对许多产品团队来说，原型仍然是UX设计过程中最令人困惑的部分之一。毫无疑问，原型可以是任何东西，从一系列代表app的不同界面或状态的纸质草图，到功能齐全、像素完美的app。

在本文中，我将回答以下与原型开发相关的问题:

• 什么是原型，什么时候需要设计原型？
• 什么是“原型保真度” ?
• 低保真原型和高保真原型的区别是什么？ 哪些技术支持原型制作？

什么是“原型”？

我们经常在不同的背景里看到“原型”这个词。 由此，我们很可能已经混淆它的真正含义。

它最基本的含义：原型是设计想法的表达。原型让设计师们得以展现他们的设计，以及模拟真实的使用场景。

在数字化的背景下，原型能够模拟用户与界面之间的最终交互行为。根据产品团队的需求，原型可以模拟整个app或仅单个交互行为。

原型也可以模拟最终产品的运作方式。它支持产品团队测试其设计的可用性和可行性。也有很多人将原型与草图，线框图和模型混淆，实际上它们不同于原型。

“交互性”这个概念是原型的根本，因此这就是为什么草图，线框图和模型不能被视为“原型”的理由。

为什么我们需要原型？

做原型主要是为了在做实际产品之前测试设计（和产品创意）。 是否进行测试与产品的成功直接相关。 不用想，当产品在市场上上市，人们开始使用它时，你的设计将被用户测试。如果这是首次测试，则很有可能会有来自用户的负面反馈。因此，在低风险的研究阶段和公开发布之前收集产品反馈，总是更好。

以下是需要原型的两种情况：

• 确保设计理念按预期进行。 在大多数情况下，让实际用户测试产品概念是相对容易的。一旦用户拿到一个可以交互的产品原型，产品团队就能够看到目标受众是如何使用该产品。 根据这些反馈，可以调整初始理念。

• 确定用户能够顺利地使用产品。 原型的必要性是在产品发布前发现和解决可行性问题。它能测试出产品需要改进的地方。 这也是之所以那么多产品团队创建原型，让用户测试它们，并迭代设计直到它足够好的原因。

什么是“保真度”？

原型不一定要看起来像最终产品——它们可以有不同保真度。 原型的保真度指的是它如何传达最终产品的外观（也就是指它的细节和真实感级别）。

保真度可以在以下方面有所不同：

• 视觉设计
• 内容
• 交互性

原型的类型有很多，基本介于这两种类型之间。

• 低保真
• 高保真

产品团队根据原型设计的目的、设计完整性和可用资源来选择原型的保真度。

低保真原型

低保真（lo-fi）原型设计是将高级设计概念转换为有形的、可测试物的简便快捷方法。它首要的也是最重要的作用是——检查和测试产品功能，而不是产品的视觉外观。

以下是低保真原型的基本特征：

• 视觉设计：仅呈现最终产品的一部分视觉属性（例如元素的形状，基本视觉层次等）。
• 内容：仅包含内容的关键元素。
• 交互性：原型可以由真人模拟。 在测试期间，熟悉页面流程的设计师就相当于一个“计算机”，实时手动呈现设计页面。此外，也可以给线框图制作交互效果，这种称为“交互线框图”。

优点

• 便宜。 低保真原型制作的明显优势在于其极低的成本。
• 快速。 可以在五到十分钟内创建一个低保真纸原型。 让产品团队可以毫不费力地探索不同的想法。
• 协作。 这种原型设计刺激了小组协作。它的设计不需要什么特殊技能，因此更多人可以参与到设计过程。 即使是非设计师也可以在创意过程中发挥积极作用。
• 清晰。 团队成员和利益相关者对将来的项目有了更清晰的期望

缺点

• 测试期间的不确定性。 使用低保真原型，对于测试者来说，容易不清楚到底什么本来是有效的，什么不是。另外，低保真原型需要用户充分的想象力，也限制了用户测试的效果。
• 有限的交互性。 使用这种类型的原型想要传达复杂的动画或转场效果是不可能的。

热门技术：

纸质原型和可点击的线框是两种流行的低保真原型制作技术。它们都致力于以最快的迭代设计思路，直到项目团队和利益相关者都对产品的基础模型感到满意为止。

纸质原型设计

纸质原型设计允许设计师在不使用数码软件的情况下对产品界面进行原型设计，即手绘产品的不同界面。

虽然这是一种相对简单的技术，但当产品团队需要探索不同的想法并快速优化设计时，它会非常有用（尤其是在设计早期阶段产品团队尝试不同的想法时）。

使用此技术的好处包括：

• 充分利用基础设计技能。 产品团队中的每个人都可以画草图（即使是那些说“不能”的人），每个人都能参与纸制原型设计。
• 支持早期测试。 可以让产品团队在产品 - 例如信息结构不清晰。
• 支持快速实验。 不同的用户界面元素可以画出来，剪切，复印等，然后组装在新的纸上。 使用纸质原型，还可以模仿复杂的交互，如滚动效果。
• 方便调整。 使用纸质原型，可以在测试期间就进行更改。 如果设计人员更改原型，可以快速绘制出来或擦除部分设计。

如果选择纸质原型进行可用性测试，它的局限性不能被忽略！

• 至少需要两人测试产品。一个人作为协调者（“计算机”）跟进测试人员完成测试，而另一个人将实际测试app。
• 很难传达复杂的操作。 纸质原型不太适合用于视觉复杂或高度交互的界面。

综合考虑，建议仅在设计的早期阶段，项目在抽象阶段或形成阶段时，才使用纸张原型。团队进入设计过程越深入，纸质原型与最终产品之间的差距就越大。

可点击的线框图

线框图是产品页面的可视化表示形式，设计人员可以使用它来排列页面元素。 线框可以作为低保真原型的基础。 可点击的线框是最简单的交互式原型 - 即连接起静态线框页面。

与纸质原型一样，可点击线框图通常看起来不像成品，但它们确实比纸质原型具有一个显着的优势 - 它们在测试期间不需要单独的人员跟进。

使用此技术的好处包括:

• 可以复用现有设计交付成果。在设计过程的特定阶段，你将获得代表产品 UI 设计的线框图或草图。在大多数情况下，可以使用它们创建可点击的页面流程。

• 可轻松更改布局。设计人员可以轻松地根据用户反馈调整线框图，并重复测试过程。 使用合适的工具，可以轻松创建或修改点击原型，而无需花费大量额外时间。

可以使用专门的原型设计工具，比如墨刀，这些工具有一个关键的优势: 无需切换，即可做完从低保真到高保真的全部原型。

通过墨刀做的一个低保真原型示例

高保真 (Hi-fi) 原型

高保真 (Hi-fi) 原型的呈现和功能，尽可能类似于发布的实际产品。 当团队能深入了解产品的预期，需要与真实用户一起测试，或获得利益相关者的最终设计批准时，通常会创建高保真原型，

高保真原型的基本特征包括:

• 视觉设计：逼真细致的设计 – 所有界面元素、间距和图形看起来就像一个真正的app或网站。
• 内容：设计人员使用真实或类似于真实内容。原型包括最终设计中显示的大部分或全部内容。
• 交互性：原型在交互层面非常逼真。

优点

• 可用性测试期间获取有意义的反馈。对于用户来说，高保真原型通常看起来像真正的产品。这意味着，在可用性测试会话中，测试参与者将更有可能自然地表现——就好像他们正在与真实产品交互一样。
• 对特定 UI 元素或交互的测试。借助高保真交互性，可以测试平面元素，或特定交互, 比如动画过渡和微交互。
• 轻松获得客户和利益相关者的认同。这种类型的原型也适合向利益相关者演示。它使客户和潜在投资者清楚地了解产品应该如何工作。一个优秀的高保真原型让人们对你的设计感到兴奋，但低保真的原型则不然。

缺点

• 成本较高。 与低保真原型相比，创建高保真原型意味着更高的时间成本和财务成本。

热门技术

使用专业软件创建的数字原型
数字原型是最常见的高保真原型形式。如今，各种专业软件使设计人员能够创建充满互动效果和复杂动画的视觉丰富、功能强大的原型。

一个高保真交互式原型, 通过墨刀制作

使用这类工具的好处包括:

• 为不同设备优化。专业化的软件允许设计人员在 Web 浏览器或任何桌面或移动设备上预览原型。这有助于 UX 和 UI 设计人员在不同类型的设备上实现最佳布局。
• 可用性测试期间少做解释。高保真交互性使设计人员不必在测试过程中澄清概念，从而使设计人员能够专注于观察。

编码原型

高保真编码原型是一种非常接近即可发布版本产品的解决方案。 这种原型就像一个丰富的交互式沙盒，允许测试参与者探索产品的不同功能。 对于对自己的编码技能充满信心的设计人员,建议使用此类原型设计。

使用此技术的好处包括:

• 熟悉平台的局限。会编码使设计人员能够了解他们产品所处的平台真正能实现什么，局限又有哪些。
• 效率。编码的原型可以成为功能齐全的app的良好基础。 假设你不是在做一次性原型，那么你做的原型将为最终产品打下基础。如果可以在最终产品中使用原型代码，那你将节省大量的时间和精力。

同时，了解原型设计主要与产品研发速度有关—目标不是创建可重用代码，而是尽快落地一个可交互的设计。

结论

如果提供良好的用户体验是项目的目标(而且应该是)，那么原型设计必须是UX设计过程的一部分。根据产品需求，选择最有效的原型设计方法至关重要，因为这种方法可以最大限度地减少工作，最大限度地提高学习效率。 最终结果将是基于原型测试的整体改进设计。

本文转载自由墨刀翻译自Nick Babich 的 The Difference between Low-Fidelity and High-Fidelity Prototypes and When to Use Each

墨刀作为一款在线原型设计与协同工具，已经帮助众多产品经理和设计师们轻松做出交互原型，展现和验证设计想法，还支持多人协作编辑，分享和评论。新注册用户即可获得墨刀高级企业版的15天免费试用！开始体验一下吧！