产品设计教程：wireframe，prototype，mockup到底有何不同？

wireframe,prototype,mockup 三者经常被混用，很多人把三者都叫原型，真的是这样吗？

我们来看看三者到底有何不同。先来做一道选择题：

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

 

wireframe 之于 prototype 就像建筑蓝图之于样板房。
对比图

 

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

wireframe

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

可以在纸上手绘