产品设计团队的规模和形式各不相同，并非所有团队在整个设计过程中都使用相同的设计工具。因此，虽然线框图、模型和原型都是基本的产品设计工具，但设计师对这三种设计类型中的一两种不太熟悉的情况并不罕见。如果您曾与大型团队合作开发过非常复杂的产品和用户界面，那么您很可能比在团队和流程更精简的小型公司工作过的人更熟悉高保真和低保真原型之类的东西。

无论您是新手设计师还是经验丰富的设计师，都可能因为各种原因混淆原型、线框图和模型。不用担心——我们已经为您列出了所有您需要了解的信息。

在我们深入了解每种产品设计的细节之前，我们先来快速了解一下这三种产品的基本元素：

• 线框：产品布局的基本草图，带有代表视觉元素的形状和占位符
• 模型：产品用户界面的高保真表示，包含稍后将用于构建产品的实际设计组件
• 原型：一种交互式、可点击的设计版本，使用过渡和动画来说明用户如何与产品的 UI 进行交互

线框图是产品基本结构及其功能的低保真草图。它使用占位符形状来指示按钮、菜单、图片、文案和其他组件在设计中的位置。

线框图通常是产品 UI 的早期草图，用于制定广泛的 UX 设计决策，并确定产品将如何实现其主要功能。它们主要用于展示 UI 的空间布局，而非视觉风格。

纸笔线框图

在设计流程的早期阶段，设计师会使用纸笔线框图快速勾勒出各种不同的设计理念和解决方案。纸笔线框图比数字线框图速度更快，但也更简单、更混乱，因此非常适合用于初稿，但并不适合长期的用户体验 (UX) 和用户界面 (UI) 工作。

数字线框

设计概念获得批准后，设计师会将纸质草图转化为数字线框图——产品 UI 的详细灰度蓝图。纸质线框图以粗略的笔触展现设计概念，而数字线框图则使用详细的占位符来表示图像、按钮，并复制和绘制出不同产品组件的实际尺寸、形状和位置。

数字线框图比纸质草稿更耗时，但它们也是产品团队大多数利益相关者的关键资源。创建它们所花费的额外时间是确保产品设计流程顺畅的必要投入。在设计师开始设计实际用户界面之前，用户体验团队会使用详细的线框图来决定产品的用户体验设计。用户体验撰写人员可以使用线框图开始起草产品文案，工程师可以查看线框图用户流程，以了解未来项目的范围和技术可行性。

模型是产品 UI 的完整设计。这是线框图绘制流程中自然而然的下一步，占位符会被替换成它们所代表的实际组件。有些团队甚至将模型称为“高保真线框图”。

模型涵盖了 UI 视觉设计的所有风格细节，例如颜色、字体、排版、图标和图片。它们还展现了每个屏幕的信息架构——如何组织、格式化和呈现文案，从而引导用户直观地实现目标。

根据团队和产品的不同，设计师可能会将模型和相关文档交给开发人员进行开发。如果设计比较复杂，或者产品是全新的，设计师可能会选择将模型转化为原型。

原型是具有可点击功能的模型，用于展示用户如何在模型屏幕之间移动。原型无需使用任何代码——Figma、Adobe XD 或 Axure 等原型设计工具允许设计师添加基本功能，例如悬停状态、可点击的按钮和菜单，以及复制 UI 如何响应用户操作的动画。

交互式原型允许设计师通过预览屏幕转换和组件状态等基本功能来对产品的用户界面进行可用性测试。产品经理还可以邀请小组成员进行早期用户测试，并收集用户对产品界面的体验反馈。

低保真原型 vs. 高保真原型

一般来说，当人们提到原型时，他们指的是高保真原型。高保真原型是基于最终确定的 UI 模型创建的。

然而，在某些情况下，在开始 UI 的视觉设计之前，测试产品的可用性是有意义的。如果产品的布局特别独特或复杂，UX 设计师可能需要预览其基本架构和导航，并进行可能影响 UI 设计决策的更改。

在这些情况下，设计师可能会创建低保真原型，即数字线框图的可点击版本。与线框图一样，占位符代表按钮和菜单等 UI 组件。但在低保真原型中，这些占位符的行为也与它们所代表的组件相同——按钮占位符可点击，菜单占位符会触发屏幕转换等。原型还可以包含实际的产品文案（而不是线框图中更常见的占位符文本），以便测试人员能够就产品的信息架构以及整体用户体验提供反馈。

确保产品设计流程顺畅的关键在于创建稳固可靠的高质量设计成果，供整个团队在整个产品周期内使用。在创建团队所需的所有资源和管理项目时间和资源限制之间取得平衡并非易事。了解线框、模型和原型之间的差异，以及它们各自的高保真迭代和低保真迭代之间的差异，可以帮助您找到最高效、最有成效的方式来装备您的团队，打造高质量的产品，并按时完成所有截止日期。