产品设计教程:wireframe,prototype,mockup到底有何不同?

2023-03-18,,

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

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

从这张图可以看出,prototype 和其他两者的不同之处在于是否可交互,可点击,prototype 是动态的;而 wireframe 和 mockup 则是静态的。wireframe 和 mockup 之间的区别则在于是否高保真。
 
wireframe 之于 prototype 就像建筑蓝图之于样板房。
对比图
 

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

wireframe

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

可以在纸上手绘

产品设计教程:wireframe,prototype,mockup到底有何不同?的相关教程结束。

《产品设计教程:wireframe,prototype,mockup到底有何不同?.doc》

下载本文的Word格式文档,以方便收藏与打印。