线框图/原型图/模型图，你真的用对了吗

这是 ThinkerD 第 55 篇原创

导读

主题：线框图/原型图/模型图，你真的用对了吗
By：马林
阅读时间：约 2600 字，预计 3 分钟
阅读收获：
线框图、原型图、模型图作为图形化设计媒介，搞清楚他们的特点和应用场景，才能把握产品设计的快准真，本文告诉你这些图形究竟该怎么用。

前言

作为产品相关的从业者，面对复杂且多步骤的产品设计过程，经常会用到线框图、原型图、模型图，借助这些输出物帮助我们呈现创意、演示流程、传递信息等等。在实际项目中，有时会对这三种图形的概念产生混淆，本篇我们讨论分析这三种图形的特点及应用场景，希望对你有帮助。

01 线框图

线框图（Wireframe）是一种用于表达产品信息的图形，以一组块（通常黑白）组合出网站或 App 元素的信息，显示按钮布局、文本区域、视觉效果、层次结构等，但线框图不能表现产品的设计理念。

如果用乐高玩具做比喻，那么安装说明图纸就是线框图，通过图纸我们可将每个微小的零件按照图纸指示位置、大小、顺序、层级安装起来，最终组成一件玩具产品。注意：此时线框图扮演的是操作指南，它还不具备产品的实际功能，但与产品愿景和技术应用能力是对应的。

|| 应用场景：

用于表现产品实际信息的场景，如：界面包含哪些内容块、内容块所在具体位置、各个块之间如何关联，用户如何触发这些块等。注意：界面上这些块通常是静态的，线框图的目的是注释尺寸、位置、关联等。

快速输出  因为是静态的界面，不需要后端系统接口服务支持；同时，借助设计工具（如：Axure、Figma、Sketch等）输出实现批量化。

建立标准  借助线框图，在团队内部建立设计或开发标准，例如：统一控件属性、界面栅格标准、尺寸规范、前端规则等。

团队沟通  在产品策划、产品设计、产品开发阶段辅助沟通讨论，或是 UI/UE、前端与后端、网页与 App 等不同细节时统一设计规则。

|| 低保真线框图

低保真线框图是创建的最简化的图形，通常是黑白色，用以直观表现界面的信息，用在团队内部进行产品设计的沟通。

注意：低保真线框图是在既定的产品框架、设计理念以内传递信息，不是展示产品特点，力图快速准确的画出产品的界面信息，因此，低保真线框图尽量不要给用户查看，如果一定要展示，那么可以完善至高保真线框图。

|| 高保真线框图

高保真线框图是一个比较全面的图形，对界面上每个元素的尺寸、位置、规则、链接进行详细的定义。

高保真线框图目的是准确对每个元素进行定义，避免产生歧义。

绘制高保准线框图成本较高，需要花费时间来详细定义每个细节逻辑，因此，建议先借助低保真线框图将尺寸、规则、逻辑讨论确认，经过详细完善后再绘制高保准线框图。

注意：线框图作为媒介的目的，不必因图形美化而浪费大量时间，保持适宜度，满足在团队内部沟通畅通即可。

02 原型图

严格来说，原型图应该叫做原型（Prototype），原型是可被点击或操作的，因此不再局限为平面的图形。

原型的目的是为了模拟产品使用过程，让用户体验实际操作过程，以此检验产品的流程、性能、辨识度、意识感受等。

原型中不需要详细标注界面上每个元素的尺寸、位置、关联关系等，反而强化的是图标、按钮、界面跳转之间的逻辑关系，力求模拟真实的使用过程。

|| 应用场景：

为更好地收集到用户的直观感受，因此，原型的设计尽量接近于真实的产品。例如：产品进入开发前的定版，产品立项前的用户调研，产品投放市场前的试用等。

需求调研  借助用户使用原型的过程，我们可以调研产品本身是否满足了用户的需求。因为原型直接面对用户，无论是原型具备的功能无法满足需求、或用户在原型之上又提出新的需求，都可以帮助我们获得第一手的用户需求。

可用性测试  当对产品的某些设计无法达成一致时，我们借助原型来统一思路。例如：说服 Boss 喜欢某种色彩、某些按钮尺寸，讨论支付流程中删减操作步骤、向投资人演示特色功能等。

改进产品设计  对某些功能和流程无法达到完美时，我们通过原型不断的试用而完善设计。例如：微调用户操作步骤担心对用户产生影响，新产品正式上线前 Beta 版预发布等。

03 模型图

互联网产品设计，大多数形态是数字产品（Web，App，小程序等），因此使用到模型（Mockup）的场景不算多，有时我们通过线框图、原型也实现了模型的目的。

互联网产品设计源于产品设计，从工业设计的角度出发，模型对任何类型的项目都可适用，通过模型我们可以直观地感受到产品的形状、大小、材质、颜色、体积等。

对于互联网产品，模型是相对完整的界面，接近真实表现产品最终形态的图形，或者说是线框图的美学版本，模型同样是静态的，不具备交互功能。

线框图用来定义注释界面元素规则、产品功能等，而模型则专注于视觉组件的细节，并展示未来产品的风格、色彩，尽量模拟真实的状态，因此，相对于线框图，模型更适合诠释产品的设计理念。

|| 应用场景：

当我们想突出表现产品的设计理念时可以用模型，尤其是创新产品。例如：iPhone 新产品发布时的模型机，问界发布时的概念模型车等。注意：模型重点是为呈现产品的形状、色彩、材质等设计特点，忽略功能、流程、逻辑等细节。

产品创新  在产品创新时，我们想通过某些设计特点来建立产品独特性，模型帮助我们完善设计理念、确认设计特点是否具备预期目标。例如：为特定用户设计产品，为细分市场设计新产品等。

产品测试  模型具备接近于真实的形状、尺寸、材质，用户借助模型直接体验产品，我们由此可获取用户对产品形状、尺寸、色彩、材质的需求，为后续分析、改进、完善、迭代提供准确参考信息。

总结

线框图、原型、模型，它们都是媒介、都是为传递设计信息、设计语言而存在，没必要严格地区分概念，只是在恰当的时候使用它们即可。

记住：面向用户（谁看）、场景（在什么情况下）、目的（做什么用），选择使用哪种图形，先搞清楚前置问题再动手。团队内部讨论用线框图（快），给投资人展示用原型（准），向客户演示用模型（真）。

目标：为定义设计规则、细节逻辑用线框图，为展示产品未来走向用模型，为梳理功能逻辑用原型。

时间和资源：如果时间和资源有限，尽量使用低保真。注意：并不是时间有限就可以忽略细节逻辑，相反应该在逻辑、规则上多花费更多的时间。

团队能力：如果团队配合默契，直接用原型可以省掉很多制作高保真线框图的时间，但也要注意把功能和逻辑列成清单避免丢失。

参考资料

https://www.eleken.co/blog-posts/the-difference-between-wireframe-mockup-and-prototype-and-their-roles-in-the-design-process

全文完。

如果觉得不错，就随手点个「赞」和「再看」吧。