几年前，我意识到我许多IT行业中非设计师的朋友认为我的设计交付物都属于一种东西，他们无法分辨线框图、原型图和模型这三者的概念，认为只是一种代表创意的线稿展现形式。简化视图的问题在于：他们从来不知道对用户体验设计师的工作应该有什么样的期望，并为此常常感到困惑。例如在UX设计项目中常常会出现以下几个问题：“为什么这是不可点击的？” ，“嗯，我不知道我应该点击这里…” 等等将线框与原型相混淆，就像假设建筑蓝图（拟建建筑物的详细计划）和展示房一样。

把线框图和原型图的概念混淆，就好比把建筑中的设计蓝图（拟定的建筑计划）和建筑的样板间混为一谈一样。尽管用户可以尝试居住在“样板间”来感受未来可能拥有的舒适居住环境，但你不能指望用户能通过建筑设计蓝图感受到舒适的居住环境。

建筑设计蓝图和样板间是建筑中不同的表达方式：

蓝图：用作建筑计划，并应指定应如何建造建筑；
样板间：是为未来的居民提供居住体验。

建筑设计蓝图和设计图它们的共同点就是都代表最终产品 – 实际的建筑房屋。同理线框图、原型图和高保真原型也都是最终产品的表现形式，但三者之间的表现形式、沟通方式、使用目的各有目的。

线框图、原型图和高保真原型始终是我教给用户体验团队成员的第一件事，这对团队而言十分重要。

接下来我们会详细的讨论线框图、原型图和高保真原型的定义和使用场景，以便你能在工作中根据不同的使用场景熟练的运用。

目录
1.线框图
2.原型
3.模型
4.总结

1.线框图

1.1.线框图的定义

线框图是设计的低保真表示形态，它应该清楚的表示以下3点：

a.核心内容是什么（告诉用户这是什么）
b.清晰的信息结构（告诉用户自己在哪里）
c.描述界面的基本交互操作和可视化的内容（告诉用户如何操作）

线框图是设计的基础，虽然在形式上看起来都是一样的灰色的几何图形，但却代表着最终产品的每个重要部分的表示。

“表示
（代表性）“在这里是一个关键术语，它能够帮你找到一个合适的保真度。在绘制线框图的时候你不能添加过多的细节，并且不能忽视线框图中任何重要的部分。你正在为整个项目的以及与你合作的人
（其中包括开发人员、设计师、文案、项目经理等……）设置行为路径，他们的工作需要你精心打造的线框图。这就好比你在创建一座城市，虽然每条街道都会出现在地图上，但却被大大简化了，你能清晰的感受城市中每一座建筑，但你却无法感知它的美丽。线框图的创建应该是快速的，把节省的时间更多的花在产品思考和团队沟通上。线框图的绘制美观大方的即可，尽量使用黑、白、灰三色，制定链接可以使用蓝色。为了节省时间我们可以简化页面中各模块的表达形式，例如使用占位符。我们倾向于把线框图作为低保真的交付成果。切记 – 精心设计的线框图以清晰的方式表达信息，为整个团队制定方向。

1.2.何时使用线框图

线框图作为我们常用项目文档，通常是静态的，所以需要通过书面文档来解释在特定时间点与各个接口的交互。（文档包括：从简短的交互注释到复杂的技术文档）

当然也不用每次都需要撰写需求文档那么正式。线框图形式简单、创建快速，在内部沟通的时候可以通过清晰的草图来沟通需求。例如开发人员项目中某部分存在疑问，你可以通过线框图快速提供答案。

PS：UXPin是一家具有非常快速的开发周期的初创公司（每两天发布一次）。我们使用线框快速可视化任务（甚至很小的任务！）。它消除了误会，而且确实很便宜。

线框图很难用作测试材料，它在项目中能够灵活、快速的收集研究反馈，但无法去做详细的研究分析。

放置在整个设计故事背景下的线框图非常有效，尽管还存在一些缺点，但作为复杂项目的初期阶段，它们有着不可或缺的作用。

2.原型

2.1.什么是原型

原型图通常与线框混淆，是最终产品的中高保真表示形式，它模拟用户界面交互。它应允许用户：

a.能够体验与界面内容之间的交互
b.接近于最终产品的样式来测试页面内主要交互流程

原型可以模拟用户与界面的最终急交互，在页面精细程度上远超线框图，接近于设计稿。在建立交互模型的时候要谨慎处理，保证原型与最终上线产品在交互上的一致性。此时可以省去技术（接口和后端）开发成本，降低原型制作的时间成本。

2.2.何时使用原型

原型在用户测试中发挥了巨大的作用，在开发之前可以检查接口的可用性。原型需要用户付出一定的“成本”去理解页面，其次原型与界面在形式有极高的相似性。值得一提的是原型设计相对于线框图成本更高，我建议可以开发一些常用的组件
（这意味着你需要编写一些 HTML、CSS，可能还有您自己的代码），它们在一些相对简单的项目能够快速复用。正确的将原型设计与用户测试相结合，产品最终的收益将会与投入成正比。

3.模型

3.1.什么是模型

模型是高保真、静态的设计，模型可以是草图也可以实际完成的设计。模型符合特点：

a.明确的表示信息结构；可视化的内容；能够以静态的方式演示基本功能
b.鼓励人们查看实际项目的视觉

由于某些软件公司的产品名称，往往导致用户把模型与线框图的概念混淆。

3.2.何时使用模型

如果你的产品正处于寻找投资的阶段，模型可以帮你更快的获得投资者青睐。由于自身的视觉特性，比低保真模型更具说服力，并且比创建原型更加便捷，并且能够灵活的收集反馈。如果在提案中放入模型设计，让你的提案看起来更加专业。

原文地址：
designmodo

译文地址：
海盐社（公众号）

作者：Marcin Treder

译者：姜正

本页地址：https://www.moreux.cn/29219.html；所有素材与文章均来自于互联网，经网友投稿后发布，如有侵权，请联系 3147141550@qq.com。如果下载失败可提交工单哦。