宁波网页设计：样机的内容、原因和方式

在我们开始讨论如何充分利用您的模型之前，了解它们究竟是什么以及它们不是什么都是有帮助的。

正如“线框图指南”中所讨论的，模型，线框和原型可能会相互混淆，因此很难找到每个模板的准确信息。但是，所有这些都是UX设计过程中不可或缺的部分，因此应给予应有的关注。宁波网页设计

来源：UX Booth

我们将通过提供广泛的概述，讨论术语以及展示它们如何适应整个设计过程来开始我们对模型的探索。

关于措辞的一句话

回到基础知识，在网站或应用程序发布之前，大多数都经历了三个初步阶段。这些阶段允许团队（有时是少数精选用户）在发布之前测试其外观，结构和功能。理想情况下，这些初步阶段允许您在仍然很小的情况下解决任何问题，并对您的设计进行微调以最清晰地传达您的信息。

但由于这些阶段相似，它们经常相互混淆。这就是为什么我们在这里花一点时间来澄清每个术语的正确术语。Marcin Treder将UX设计过程的三个形成阶段列为线框，模型和原型。让我们深入了解每个阶段。

1.线框

线框通常是低保真，简单的蓝图，通常用灰色框和占位符表示详细内容。他们的目标是帮助建立什么样的地方，而不是在美学上花费太多时间。一个好的线框应该解释：

• 内容如何分组

• 信息的结构如何

• UI交互中涉及的最基本的视觉效果

来源：用户测试与设计

线框的目的是为整个团队具体规划网站的设计方式。如免费的线框图指南所述，线框图的主要目标是文档和设计结构，但也可以向客户和利益相关者展示，以获得反馈，而变更并非艰难。

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

2.样机

我们的样机指南的主要特征是，该模型通常是产品外观的中高保真表示，并展示了其功能的基础知识。样机填写视觉细节（例如颜色，排版等）并且通常是静态的。通过查看模型，您应该很好地了解最终产品的外观以及它如何运行的大致概念（即使功能尚未运行）。模型可以被认为是一个备受瞩目的视觉设计草案。

来源：通过UXPin的样机 

线框奠定了基础，模型增加了视觉丰富性。虽然该模型进一步推进了线框的文档化和组织团队愿景的目的，但它确实具有线框所没有的额外优势：凭借其卓越的视觉效果，模型对于利益相关者和投资者来说更令人印象深刻，因此更能产生兴趣。

虽然线框在视觉上发育不良，但是模型在外观上接近最终版本，尽管它缺乏原型的功能。通过这种方式，模型充当线框和原型之间的桥梁。

3.原型

在开始阶段结束时，原型可以是产品的低保真或高保真表示，包括功能和UI设计的更精细点。除了前两个阶段的信息结构和可视化之外，原型还为早期UI引入了更多深度，允许用户：

• 体验实际内容

• 以与最终产品类似的方式与UI交互

• 在进一步开发之前预测和解决可用性问题

在寻找原型的正确保真度时，请记住，低功耗将让您更快地进行测试和调整，而进入高保真音响将使您尽可能接近最终产品，而不会将资源投入开发。

一个常见的设计过程是从低保真原型（类似于Apple通过创建数百个早期原型所做的那样）开始，然后迭代到高保真原型。这样，由于早期测试（由着名企业家Andrew Chen建议）以及高保真度所证明的清晰规范（如SVPG Partner Marty Cagan所解释），您可以获得客户驱动设计的好处。

来源：  UXPin

高保真原型应该比最终产品低一步; 它应该看起来和功能尽可能接近最终版本。

线框与样机之间的差异

虽然每个阶段的区别都有明确的定义，但事实是即使是经验丰富的设计师有时也会混淆不同阶段的名称。就像我们在“样机指南”中讨论的那样，最常见的混淆可能是线框和模型。

毫无疑问，线框和模型是相似的：它们都是UI设计的静态阶段，它们主要处理网站的外观，并且它们都不需要功能。主要区别在于它们的质量。Libby Fisher，自由网页开发人员和设计博主，将模型描述为线框的“ 装饰”版本。

虽然线框图仅仅是形状和占位符，但是模型设计旨在让观众准确地了解最终产品的外观。为了帮助说明这些差异，我们将从我们的用户测试和设计电子书中检查每个样本的样本，该电子书记录了我们基于可用性测试改进Yelp的练习。

资料来源：UXPin Low-Fidelity Yelp Design

我们创建了上述线框作为我们想在Yelp网站上进行改进的路线图。与当前的Yelp站点相比，您可以看到线框是如何使用更大的搜索栏和简化类别的新站点的骨架。

注意低保真度和缺乏细节 - 在这个阶段不需要繁荣。将线框图看作是繁重的工作，并保存模型的精细度。我们的目标是首先修改可用性测试的定性见解和定量见解所表明的站点结构。编号的红点是我们的评论，解释了变化，因此每个人都在同一页面上。此线框后来通过添加来自动画库的交互变成了lo-fi原型。

来源：  UXPin

这是我们的模型。显然，关键的区别在于图形细节 - 颜色，图标，照片等。这些视觉效果不仅仅是装饰性的，它们还可以让您了解功能的工作原理。例如，即使它不是原型，您也可以改变一些元素，让利益相关者了解交互状态（看看我们对“食物”类别做了什么，以显示点击时的样子）。将这个模型与线框进行比较：各个部分都是相同的，并且都在相同的位置，但是模型的外观和感觉更像是最终产品 - 这是线框和模型之间的根本区别。

不要模拟样机

虽然一些设计人员认为模型不是必需的（特别是对于精益UX的快速原型设计），但是在您需要接受代码的后果之前，模型对于探索视觉设计决策非常有帮助。因为模型是线框和原型之间的过渡阶段，所以它们是用于视觉实验的沙箱。在UX设计和开发过程中有很多细节要跟踪，忽略模型阶段会导致低于视觉效果。

来源： UXPorn

UX Movement的主编Anthony Tseng 相信模型和线框的强大功能。在他看来，设计是“形式和内容的综合。”线框概述了内容的基本结构，而模型呈现了形式的愿景。因此，熟练的设计师将花费适当的时间来完善两者，这意味着使用线框和模型。

模型的重要性值得详述。碧蚂Arafah，自由职业者网页设计师和设计的作者， 解释了为什么样机是过程的一个重要组成部分。据他说，模型是值得的，原因有以下几点：

• 细节的组织-样机可以帮助以反映最终设计的方式显示任何冲突的视觉元素。正如Web UI最佳设计实践中所讨论的，应该在模型阶段（可以轻松更改它们）确定诸如颜色，对比度和可视层次结构等精细细节，并在开发阶段进行固化。

• 设计实施 -您的初始设计如何执行？从可用性的角度来看，模型可以让您测试视觉细节并在它提交代码之前对其进行更改。

• 沉浸在用户的视角中 -当您向线框添加细节（或者您可能直接跳到模型中）时，您会不断地查看和更改更接近最终状态的设计。这是一个微妙的差异，但却是一个重要的差异，因为高保真的思维模式可以帮助您从用户的角度做出设计决策。

• 灵活性 -线框图带来的修改可以很快堆积起来，但与CSS或HTML相比，在模型中制作它们相对容易。

许多对模型的批评来自于创建最终需要在HTML或CSS中重建的东西所需的时间和精力。但是，随着模型工具的可用性，如Moqups的低保真度或UXPin的所有类型的保真度，设计师可以使用预制元素库更快地创建模型。

样机的上下文

通过对模型的好处的讨论，有必要提一下需要注意的一些缺陷，即它如何打开产品以达到不公正的批评。

卢克莱夫斯基，产品设计师对于谷歌，介绍了如何一个样机的演示文稿会影响它接收到的反馈。模型是静态的，但最终产品是丰富的和交互式的。当向利益相关者展示模型时，由于模型目前存在于真空中，因此您本身处于劣势。这就是为什么你应该在产品设计正在解决什么问题的背景下构建演示文稿 - 否则利益相关者可能只是因为他们专注于树而无法看到森林而请求功能。

来源：通过UXPin进行协作 

请记住，模型仍然是设计可交付成果，只是最终设计的一种手段。这将更多地指导反馈如何实现其目标，而不是对模型本身的批评。

您也不希望让利益相关者在模型决策中拥有最终发言权，因为这会导致委员会设计的可怕设计，或至少在利益相关者眼中降低设计师的价值。找到合适的模型工具以获得正确的保真度（中或高），进行可用性测试以备份您的决策，并在呈现模型时始终提供上下文。

带走

作为线框和原型之间的中间阶段，模型不仅是设计团队的关键组件，也是利益相关者的关键组件。它有助于在流程成本过高之前找到并修复流程中的视觉不一致性。

到现在为止，您了解了模型是什么（而不是），它如何适应开发过程，以及为什么不应该忽略它。同样重要的是，您还希望在呈现模型时创建上下文，因为设计不是最终的，并且无法体验功能。

有关不同类型的模型的更实用的建议，请下载免费的样机指南。UI专家提供了一些提示以及Photoshop和Sketch的最佳实践。

宁波网页设计