什么，为什么，和怎样的网站建设模型

在我们讨论如何充分利用你的模型之前，它帮助你了解它们到底是什么——以及它们不是什么。

在线框图、模型、线框图和原型的指南中，我们可以相互混淆，从而很难在每个模型中找到准确的信息。但是，所有这些都是UX设计过程的组成部分，因此每个都应该得到应有的关注。

设计漏斗

来源:用户体验展位

我们将通过提供一个广泛的概述，讨论术语，并展示它们如何融入整个设计过程，从而开始我们对模型的探索。

一个字关于措辞

回到基础，在一个网站或应用发布之前，他们大多数都经历了三个初步阶段。这些阶段允许团队(有时是少数选择用户)在发布之前测试其外观、结构和功能。理想情况下，这些初始阶段允许您在它们仍然很小的时候修复任何问题，并对您的设计进行微调，以最清晰地传达您的信息。

但是因为这些相位是相似的，所以它们经常被混淆。这就是为什么我们在这里花点时间来澄清每个术语的专有名词。Marcin Treder列出了用户体验设计过程的三个阶段，如线框图、模型和原型。让我们更深入地了解每个阶段。

1。线框图

线框图通常是一种低保真度的、裸露的蓝图，通常用灰色的盒子和占位符来表示详细的内容。他们的目标是帮助确定什么是在哪里，而不是花费太多时间在美学上。一个好的线框应该解释:



内容是如何分组的?
信息是如何构成的?
UI交互中最基本的视觉效果。
线框图

来源:用户测试与设计。

wireframe的目的是为整个团队详细规划网站应该如何设计。正如在线框图的免费指南中所描述的，线框图的主要目标是文档和设计结构，但也可以向客户和利益相关方展示，以获得反馈，而更改并不是非常困难的。

要了解高保真设计如何以线框图开始，请查看UXPorn并在每个设计上悬停，以查看转换。

2。模型

我们的模型指南的主要特征是，模型通常是产品外观的中至高保真表示，并展示了其功能的基础。模型填充了视觉细节(比如颜色、字体等)，通常是静态的。通过查看一个模型，您应该了解最终产品的外观，以及它如何运行的大致概念(即使功能还没有工作)。一个模型可以被认为是一个引人注目的视觉设计草图。

模型

来源:通过UXPin模型

wireframe奠定了基础，而实体模型增加了视觉的丰富性。虽然实体模型的目的是文档化和组织团队的愿景，但它确实有一个额外的优势:wireframe没有:在它的高级视觉效果下，实体模型对利益相关者和投资者来说更令人印象深刻，并且能够更好地产生兴趣。

虽然wireframe在视觉上受到了阻碍，但它在外观上接近最终版本，尽管它缺少原型的功能。这样，模型就成为了线框和原型之间的桥梁。

3所示。原型

开始阶段的结束，原型可以是产品的低或高保真表示，包括功能和UI设计的细节。除了前两个阶段的信息结构和可视化之外，原型引入了更深入的早期UI，使用户可以:

经验的实际内容
以类似于最终产品的方式与UI交互。
在进一步开发之前预测和解决可用性问题。
当涉及到为原型找到正确的保真度时，请记住，低fi会让你更快地测试和调整，而高保真度将使你尽可能接近最终产品，而不会将资源投入开发。

一个常见的设计过程是从一个低fi的原型开始(类似于苹果通过创建数百个早期的原型所做的)，然后迭代到高保真的原型。通过这种方式，您可以从客户驱动的设计中获益，因为早期测试(正如著名企业家Andrew Chen所建议的)以及高保真的清晰规范(正如SVPG合作伙伴Marty Cagan所解释的)。

原型

来源:UXPin

高保真的原型应该是最终产品的一个步骤;它应该尽可能接近最终版本的外观和功能。

线框和模型之间的区别。

虽然每个阶段的区别都很明确，但事实是，即使是经验丰富的设计师有时也会混淆不同阶段的名字。就像我们在模型的指南中讨论的那样，也许最常见的混淆发生在.