WIREFRAME，PROTOTYPE，MOCKUP到底有何

Wireframe，Prototype，Mockup 三者经常被混用，很多人称三者为原型，真的是这样吗？在今天的文章中，我们将帮助您看看三者之间的区别。

Wireframe，Prototype，Mockup 三者经常被混用，很多人称三者为原型，真的是这样吗？在今天的文章中，我们将帮助您看看三者之间的区别。

先做一道选择题：

从这张图可以看出，prototype 与其他两者的区别在于是否可以互动，可以点击，prototype 是动态的；而且 wireframe 和 mockup 是静态的。wireframe 和 mockup 两者的区别在于是否高保真。

wireframe 之于 prototype 就像样板房的建筑蓝图一样。

Wireframe——不注重外观，只注重功能

wireframe 中文称「线框图」，用于表达产品的概念、产品结构、内容优先级、页面布局和操作逻辑。它专注于产品的主要功能以及如何在不同的场景中操作。因此，视觉元素应尽可能简化，甚至不需要考虑。颜色主要是黑色、白色和灰色，最多是蓝色。蓝色通常用于区分导航栏和下部块。这是最低生活保障。

可在纸上手绘：

白板上可以随意涂鸦：

也可以用软件工具制作：

它就像一个城市的地图指南。它只负责展示城市的总体框架。通过它的导航，我们可以清楚地了解整个城市的布局，但我们不能欣赏到具体的美，以及隐藏在城市各个角落的细节。

wireframe 它是一种沟通工具。主要任务是快速视觉化产品概念，让团队成员快速了解产品概念，然后进行讨论，快速收集大家的反馈。收集反馈是为了改进产品，所以它不是产品的最终版本。讨论中收集的反馈可能会极大地改变产品，这就是为什么我们不需要考虑太多的视觉细节，因为我们必须改变它。

wireframe 关键词：

Mockup——视觉细节丰富

Mockup 为「视觉稿」，用于呈现产品的整体视觉设计 wireframe(线框图)增加了更丰富的视觉元素，包括图形、排版、配色等细节的视觉呈现，基本相当于产品的最终设计稿。

和 wireframe(线框图)一样，Mockup 它也是静态的，不可操作的。它注重产品的外观，增加了丰富的视觉元素，保真度高。

Mockup 呈现丰富的细节，常用于视觉设计讨论，用于快速收集产品视觉设计的反馈并进行改进。

在 dribbble 搜了一下，长这样：

Mockup 关键词：

Prototype——可操作的原型

Prototype 中文「原型」，指可操作的原型，更真实地模拟用户和 UI 界面之间的互动，通过这种方式挖掘产品早期存在的潜在问题，并及时纠正，帮助设计师不断验证和纠正他们对产品的想法。高保真原型 vs 低保真原型

*当把多张 Mockup (视觉稿)图形制作成可操作的模型，此时 Mockup 就化为了 prototype，我们称之为高保真原型。

*当把多张 wireframe(线框图)制作成可操作的模型，此时 wireframe 就化为了 prototype。我们称之为低保真原型。

通常，制作原型不需要太多的细节，只需要澄清关键点，如用户流、内容流、页面级别之间的互动关系，最重要的是澄清事情。

Prototype最重要的特点是可操作性，判断是否 prototype 标准是否可以移动和操作。

因为原型的关键词是可动可操作的，所以就像 ps 输出稿一般不是原型，而墨刀实现的输出稿是原型，如下图所示：

prototype 关键词：

Wireframe，prototype，mockup 每个人都有自己的优缺点和不同的使用场景，无论是产品经理还是产品设计师，在正确的阶段做正确的事情都是非常重要的。在产品的不同阶段使用不同的输出草案，避免浪费时间和精力，快速输出想法，快速接受反馈，及时纠正和验证产品设计，加快产品迭代过程，减少大规模回顾修改，是合格产品经理的基本质量。