当您创建几乎任何东西时，通常的做法是从草稿开始。草稿可以帮助您在将您的作品发送到世界之前解决问题。
如果您起草了一个设计或从事过一个产品，您可能听说过术语 线框图、模型 或 原型。您可能认为它们听起来非常相似——但有一些重要的区别。在本文中，我们将比较线框图 vs 模型 vs 原型，它们的不同之处以及何时使用它们。
线框图 vs 模型 vs 原型
在我们详细比较线框图、模型和原型之前，让我们看一下这三者的基本定义。
线框图：线框图是蓝图或示意图，有助于向相关利益相关者传达您的应用程序或网站的结构。
模型：模型是您设计的高保真渲染，展示了最终产品的外观。
原型：原型是产品的早期模型，侧重于功能，并让您的利益相关者体验最终版本。
在此旅游应用程序的示例中，我们可以看到线框图（左）、模型（中）和原型（右）之间的相似之处和不同之处。
换句话说，每种都有非常不同的用途。线框图从低保真度的角度传达结构，模型从高保真度的角度突出产品的设计，而原型则侧重于产品的功能以及设计。但最终，它们都是起草您的最终产品的不同方式——显示不同的页面和屏幕。
比较
| 线框图 | 模型 | 原型 | |
|---|---|---|---|
| 目的 | 沟通结构并获得早期反馈 | 展示设计 | 展示设计和功能 |
| 保真度 | 低 | 高 | 高 |
| 功能 | 否 | 否 | 是 |
| 技能要求 | 低 | 高 | 高 |
| 资源 | 最小 | 设计工具 | 设计工具 |
| 所需时间 | 非常低 | 中等 | 高 |
| 产品周期阶段 | 发现 | 设计 | 原型设计和测试 |
线框图
线框图是基本的设计布局，呈现有关您的产品和您想要显示的内容的关键信息。它们还显示您的应用程序或网站的页面结构，同时提供有关 UI 中元素的基本信息。
您应该何时使用线框图？
通过以简约的结构设计来构建您的设计概念，您可以进行快速调整。此外，您可以让每个人了解您未来的设计的外观。最重要的是，这意味着您可以尽早分享您的想法，而无需担心更复杂的设计元素，例如颜色、阴影或复杂的菜单。
让我们看一下线框图的几个用例
- 沟通结构：线框图的主要目的是分享有关产品设计的关键信息。
- 快速设计：线框图应该快速、简单且易于修改。
- 产品发现：设计师和利益相关者使用线框图来确定业务需求，确定产品的范围等等。
在您的团队编写任何代码或分配大量资源来构建项目之前，重要的是每个人都对他们正在构建的内容达成一致。使用线框图有助于每个人理解您想要实现的目标。
模型
模型是您的产品设计的高保真渲染，展示了最终产品的外观。模型可以采用图像或产品模型的形状，您通常使用 数字设计工具 创建它们。
也是模型的高保真移动应用程序线框图的示例。
您应该何时使用模型？
现在我们知道了什么是模型，我们可以更深入地研究您可以对它们做什么。
- 产品发现：您也可以在开始项目之前使用模型，并测试您潜在产品的不同方法。
- 保持利益相关者的一致：设计和构建产品涉及很多人——在流程的每个阶段。模型可以帮助每个人对最终产品保持一致，甚至给潜在的投资者留下深刻印象。
- 设计的最后一步：设计模型是产品开发周期中的重要组成部分——通常发生在设计阶段。
无论您如何使用它们，模型都可以帮助您沟通您希望最终产品的外观。它们是您设计武器库中必不可少的工具——因为在设计方面，过度沟通总是比不足更好。
原型
原型是您项目的模型，可以承担不同的目的。最常见的用例是侧重于功能的设计——这有助于将它们与线框图 和 模型 区分开来。让我们看看您可能想何时使用原型。
原型设计可以帮助您确定您的用户流程是否正确。
您应该何时使用原型？
原型是设计过程的关键部分。它们可以帮助
- 可用性测试：原型非常适合将您的产品的有效版本交到用户手中，并在发布之前检查您的设计是否可用。
- 想法验证：您可以在设计过程的早期使用原型设计来分享您的想法。它将帮助您和您的团队准确地找出您想要实现的目标。
- 协作设计：由于原型可以帮助您测试设计，您可以并且应该尽可能多地让利益相关者参与进来。UX 文案 可以帮助验证导航，开发人员可以测试功能，产品经理可以帮助您专注于用户流程。
- 吸引投资者和更新利益相关者：有时您需要一个原型来向利益相关者证明一个想法值得采取下一步行动。
即使我们比较了线框图 vs 模型 vs 原型，您也可以看到它们非常相似。由于它们的相似之处，您可以在整个设计过程中将一个发展成下一个。线框图可以是模型的轮廓，并且向您的模型添加功能可以使其成为原型。不要将自己局限于这三者之一——花时间弄清楚您需要什么，并找到最适合您的组合。
