教程：wireframe，prototype，mockup有何不同

wireframe,prototype,mockup 三者经常被混用，很多人把三者都叫原型，真的是这样吗？我们来看看三者到底有何不同。先来做一道选择题：

wireframe——不关注外观，只关注功能

1、wireframe 中文称「线框图」，用来表达产品的概念、产品架构、内容优先级、页面布局和操作逻辑。它专注于产品的主要功能和在不同的场景中该如何操作，因此视觉元素应尽量简化，甚至不需要考虑，用色以黑白灰为主，最多再加上蓝色，蓝色通常用于导航栏与下方区块的区分。它是低保真的。可以在纸上手绘（Source:galynbunnell）

3、也可以用软件工具制作（用「墨刀」制作的线框图）

4、它就像是一个城市的地图导览，只负责展示这个城市的大体框架，用它导航，可以清楚整个城市的布局，但无法鲇膣纫犀领略具体的美，那些深藏在城市各个角落中的细节之美。wireframe 是一种沟通工具，主要任务是快速视觉化产品概念，让团队成员快速了解产品概念，进而展开讨论，迅速搜集到来自大家的反馈。搜集反馈是为了改进产品，因此它不是产品的最终版本，讨论中搜集到的反馈可能会让产品改动很大，这也是为什么不需要太多考虑视觉细节部分的原因，因为反正还要改的。wireframe 关键词：

2、Mockup 关键词：

2、prototype 关键词：