要为您的团队建立有效的工作流程，了解低保真线框和高保真原型之间的区别非常重要。

如果您已经在使用线框，或者只是为团队的线框和原型制作需求寻找合适的解决方案，那么您可能已经遇到过“低保真”和“高保真”这两个术语。

lo-fi 和 hi-fi 的一般含义并不难直观。但是，如果您是创始人、设计师、开发人员、业务分析师、产品经理，或跨职能团队的任何成员，深入挖掘可能会很有用。

在 UX 设计的特定背景下了解保真度可以帮助您建立更好的产品和更高效的团队。那么，让我们来看看线框图在开发中的重要性，解释低保真和高保真线框图的区别，并讨论如何将它们两者发挥到最大效果。

什么是线框图？

“线框”一词早于其在数字设计中的当前使用。Web 和应用程序设计师从 CAD（计算机辅助设计）和 CGI​​ 动画领域借用了这个术语。反过来，他们从早期的汽车建模、定格动画和雕塑领域借用了它。 

事实上，大多数人在小学时就第一次接触到线框图，并使用铁丝网为他们的纸制木偶、面具和恐龙搭建框架！

在每种情况下，线框都有相同的用途：在添加最终元素（如表面、皮肤、颜色、纹理、照明等）之前，充当最终产品的粗略近似。 

将线框视为最终设计的蓝图。在设计过程的早期尝试这种骨架是有意义的，在大量时间和金钱投入到抛光产品或最终编码开始之前。

为了了解网页设计中的线框图是什么样子，这里有一个购物车的线框图，取自我们的电子商务网站模板包。您可以看到页面的大部分重要元素已经到位。但是，线框使用通用占位符，而不是全彩、品牌图形和描述性内容：

UI设计中的保真度是什么意思？

就像“线框图”的概念是从预先存在的设计实践中得出的一样，“保真度”这个词也是从录音世界中借来的。在唱片和收音机的早期，低保真和高保真指的是音乐录制和播放的质量。

同样，在移动应用程序和网页设计中，保真度是指线框、模型或原型中的详细程度。我们经常谈论低保真和高保真，好像它们是不同的类别，但它们真正代表的是产品设计演变的起点和终点。

将保真度视为一系列细节和交互性。

在该范围的开始，您会发现模拟纸质草图以及低保真数字线框。两者都使用临时占位符来表示网页或设备屏幕的基本设计元素。在勾勒出一个想法的第一次迭代时，两者都很有用。

然后，随着每一次新的改进，产品的表现形式自然地从线框演变为模型再到原型——从低保真度向高保真度转变。占位符首先被草稿版本取代，然后最终被产品副本、内容、图形和品牌的最终再现所取代。

在频谱的末端是一个高保真、完全交互、可点击的原型，它与真实产品几乎没有区别——并​​且非常适合用户测试。

虽然，正如我们将看到的，用于描述线框图的术语都可以非常灵活，但这会让您大致了解保真度的范围：

• 线框：低保真，单色，带有占位符图像和文本。
• 样机：具有真实图像、颜色和副本的中高保真度。
• 原型：添加了高保真品牌、图像、复制和交互性。

尽管这是典型的过程，但团队通常从任何地方开始，并在低保真和高保真之间来回切换。因此，让我们来看看低保真和高保真线框，并讨论它们的优缺点。

什么是低保真线框？

低保真线框充当网页和应用程序屏幕的初始蓝图——最终产品的粗略近似。它们在产品开发的早期阶段特别有用，因为它们将重点放在纯粹的功能上，而不是美学上。

因此，它们以单色调色板呈现——故意排除特定细节，如颜色、字体、徽标和精确尺寸。相反，低保真线框使用图像占位符和基本形状来指示最终将填充页面的元素。通用的“lorem ipsum”文本或“编辑”字体代表未来的内容和副本。
这是我们的低保真线框模板之一，可让您了解这一切在实践中的样子：

低保真线框的优势

低保真线框是用户流程图和高保真原型之间的重要垫脚石。正是由于缺乏细节，它们才如此有价值——并赋予它们一系列优势：

捕捉想法：因为低保真线框可以快速创建，您可以在有价值的想法消失之前从脑海中获得灵感。只需单击几下，就可以将一个抽象的想法从概念转变为创造，为您和您的团队保持动力。

基础工作：低保真线框缺乏细节可以帮助您的团队专注于产品的基本功能及其用户体验。设计师可以在游戏的早期与利益相关者检查他们的假设，并就屏幕上需要和不需要的内容、最佳密度和间距以及他们想要收集和交流的信息达成快速共识。 

无痛迭代：在任何特定外观投入太多时间和精力之前进行试验总是更好。低保真线框最好的一点是它们很容易改变——甚至丢弃。由于它们很容易创建，跨职能团队中的任何人都可以模拟他们自己的变体，或者提出一种新方法。倾听所有声音——尤其是在设计和开发的早期阶段——是建立共识和优化用户体验的最佳方式之一。 

简化的工作流程：没有什么比浪费精力和不必要的回溯更能破坏动力了。低保真线框可让您的团队在致力于像素完美的数字原型之前解决有关内容、布局和产品要求的基本问题。通过建立在可靠决策的基础上，团队成员可以避免事后对精心渲染的资产进行返工。而且由于 lo-fi 不是很耗时，团队可以快速模拟整个用户流。通过确定项目的范围及其信息架构，您的团队可以及早获得利益相关者的认可，并防止后来因预期不一致而失望。

低保真线框的缺点

低保真线框有很多优点，但只有在正确的时间和正确的目的部署它们。由于它们缺乏细化和细节，它们也有一些你需要考虑的缺点：

低视觉冲击：如果目标是传达您未来成品的外观和感觉，那么低保真线框可能不是正确的选择。它们未经修饰的性质使它们不如高保真线框令人印象深刻。这使得它们不适合某些类型的投资者推销和客户演示——特别是如果您的利益相关者不熟悉设计过程。在这些情况下，高保真原型可以通过模仿产品的最终视觉设计来提供更多“惊喜”因素。

测试不足：在开发过程中，UX设计师经常会使用低保真线框，通过添加交互来创建一个粗略的、可点击的原型。低保真原型可以很好地用于内部实验，但通常不足以进行公共用户测试。这是因为低保真原型缺乏一整套视觉线索（形状、颜色、文本、间距）。因此，用户浏览 UI 的速度可能会很慢——这会导致难以准确评估产品的可用性。

在我们将注意力转向高保真之前，这里简要总结一下低保真的优缺点：

低保真专业人士

• 快速构建，易于迭代
• 注重功能而非美学
• 尽早建立共识
• 在昂贵的内容之前解决流程

低保真缺点

• 没有高保真音响那么鼓舞人心

• 缺乏完整的交互性

• 不足以进行无节制的测试

• 不适合投资者推销

什么是高保真线框？

高保真线框令人兴奋，因为它们在实际开发之前模仿了应用程序或网站的外观和感觉。它们通常包括将成为最终产品一部分的所有品牌、副本、颜色、徽标、字体和图形。

高保真线框在设计过程的最后阶段最有用，在完成初始用户研究并做出有关布局和内容的基本决策之后。 

具有高保真元素但没有交互性的线框通常被称为模型。一旦添加了交互、过渡或动画，模型就会成为高保真原型。通过可点击的菜单和按钮，高保真原型提供了用户体验的发自内心的感觉。这允许团队在最终设计批准、测试和移交给开发人员之前调整可用性。

如果您准备好您的高保真内容，这里有一个您可以快速自定义的高保真线框模板。只需交换您的副本、图像、图形、品牌和颜色：

高保真线框的优势

凭借其细节和交互性，高保真线框可以有效预览您的产品，并为您的团队提供许多重要优势：

激发热情：从低保真到高保真的飞跃对于所有参与其中的人来说都是鼓舞人心的。在灰度打好基础之后，团队看到他们的努力以全彩和细节呈现会令人耳目一新。并且，从一个真实的原型中，利益相关者、客户和投资者可以更好地掌握产品的真正吸引力。事实上，由于它们具有很高的视觉冲击力，创始人有时会在设计过程的一开始就创建高保真线框——通常使用借用的情绪板元素——只是为了让团队成员尽早了解他们的愿景。

精致的反馈：由于高保真线框捕捉产品的完整外观和感觉，它们为视觉设计高级阶段的反馈提供了必不可少的机会。团队有机会审查从品牌和用户流程等大局问题到字体易读性和精确间距等较小细节问题的所有内容。合作者可以直接对设计发表评论，甚至可以与平面设计师、插画家、文案和开发人员进行实时编辑会议。高度详细的线框图上的精确反馈让团队可以在移交给开发团队之前进行最后的调整——并就项目的可交付成果达成最终共识。 

身临其境的体验：添加交互可以将设计变成可点击的原型，从而使设计栩栩如生。交互性可以在您的线框图的任何阶段添加，但在您的团队可能想要评估和改进产品的可用性时，在设计过程结束时最有效。通过活动按钮和可点击菜单，高保真原型可以模仿您的实际应用程序或网站，并让利益相关者对最终的用户体验有真实的感觉。 

准确的测试： Hi-fi 原型可以成为有价值的评估工具，特别是如果您有资源执行未经审核的用户测试。当然，团队可以使用从纸质线框到高保真模型的任何东西进行指导测试。但是，如果您的目标是收集有关用户交互和响应时间的真实数据，或者测试特定的 UI 组件，那么您将需要运行未经审核的测试。为此，您需要一个高保真原型。完全交互式、可点击的原型将最大限度地减少人为错误并提供更准确的结果。

高保真线框的缺点

凭借其精致、细节和交互性，高保真线框和原型有很多值得推荐的地方。但是由于团队经常犯错误，在错误的时间构建它们，因此值得回顾一下它们的一些缺点和缺点：

资源密集型：如果您准备投入大量专业知识，则只有在 hi-fi 中工作才有意义。一个可信的高保真原型需要用户体验设计师、图形艺术家和文案的参与。它可能还需要与负责照片和视频等元素的无数外部合作者进行协调。创建详细的高保真资产——并将它们整合到精美的设计中——需要时间和金钱。这可能意味着更长、更昂贵的交付时间表。

抗修订：在每个人都针对特定设计进行测试之前，进行实验要容易得多。因为高保真原型需要花费大量精力来创建，所以团队很容易对特定方法进行深入投资。到那时，改变方向可能会很痛苦。改变 Hi-Fi 资产可能会让团队成员觉得他们“回到原点”，或者做了很多“浪费的工作”。尽管在这个过程中可能学到了很多东西，但这仍然会导致动力丧失和士气低落。一个相关的问题是，一旦利益相关者看到了鼓舞人心的高保真演绎，他们可能会对部署感到不耐烦。这两个因素的结合可以阻止经常需要的那种激进的修改——并导致沉没成本谬误。

以下是高保真原型的优缺点的简要总结：

高保真专业人士

• 提供最终产品的外观和感觉
• 可点击和互动
• 更准确的用户测试
• 为开发人员提供设计要求

高保真缺点

• 需要更长的时间线
• 需要图形和内容
• 迭代需要时间和精力
• 精致的工作不利于反馈

什么时候走高，什么时候走低？

高保真和低保真线框实际上只是整个保真范围的书挡。在实践中，随着项目的发展，大多数团队在该范围内流畅地移动，并结合了高保真和低保真元素。

例如，如果您正在为已建立的网站开发新页面，或者为现有应用程序开发新功能，您的团队可能会通过调整现有设计来启动他们的线框图。他们将在高保真屏幕截图上叠加低保真元素以制定新配置。更接近开发时，他们可能会改进那些低保真元素，或者干脆交出工作，因为他们知道开发团队已经熟悉品牌需求。

高保真/低保真混合的另一个例子是撰稿人在游戏早期就进入设计过程。书面内容的范围和性质在很大程度上取决于用户流程、页面布局和可用空间。因此，为了在文案和用户体验/设计之间建立更好的整体凝聚力，文案通常直接在低保真线框上进行创作。在这些情况下，副本在图形元素之前就已经成为高保真，并且通常决定了设计，而不是相反。

Nielsen Norman Group 有一种很好的方式来思考线框或原型中的保真度问题。他们指出，保真度可以在三个方面有所不同：交互性、视觉效果和内容。换句话说，随着项目的发展，您的团队可能会根据工作流程的性质混合和匹配来自这些领域的高保真和低保真元素。

了解保真度很重要，但选择的自由也很重要。因此，问题不在于是低保真还是高保真，而在于如何根据团队的资源、时间线和期望来部署正确的保真度。 

在 Moqups，我们明白任何面向世界的工作流程都将不可避免地比任何预定义的描述都更加混乱和有机。这就是为什么我们的应用程序旨在为您的团队提供最大的灵活性。使用 Moqups，您可以从任何地方开始，选择低保真或高保真，然后根据您的要求来回跳跃。 

我们的应用程序使用简单，并且有一个庞大的模板库——因此很容易上手。由于 Moqups 是一个一体化协作平台，您的团队可以超越线框和原型，在数字白板、图表、流程图和战略框架上进行实时协作——所有这些都在同一个应用程序和创意环境中。

无论您的团队如何在他们的工作流程中加入保真度，也无论您在产品设计过程中处于什么位置，Moqups 都可以让您的团队实时协作，听取所有利益相关者的意见，并就设计留下反馈。

欢迎您使用Moqups！