wireframe，prototype，mockup有何不同-经验/观点-UICN用户体验设计平台

恭喜你成为UI中国推荐设计师（详情）

快速搭建网站

查看全部热门榜单

全部

常用搜索：作品集 AE ui设计 aigc icon logo app

您的意见是我们 UI 中国进步的动力！

点击立即反馈按钮，发表您的意见！

立即反馈

QQ群反馈

您也可以加入UI中国官方反馈群进行反馈！

群号：302892100

备注：反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作，请填写需求表单，我们会在第一时间与您联系！

0/20

0/200

设计大赛

设计大赛
发布广告
发布招聘
其它需求

取消发送需求

提交完成
感谢您对UI中国的支持和信赖！

我知道了

wireframe，prototype，mockup有何不同

0.0°

2016-09-08 原创文章 经验/观点 举报 5191 2 10 0

MockingBot墨刀关注

有人把他们都叫原型，真的是这样吗？

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

Image title

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

Image title

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

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

Image title

对比图

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

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

可以在纸上手绘

更新：2016-09-08

2人已收藏

MockingBot墨刀

10

作品
10

粉丝
0

关注

猜你喜欢

2016-09-08 原创文章 经验/观点 举报 5191 2 10 0

wireframe，prototype，mockup有何不同

0.0°

添加收藏！

您还可以进行分类收藏

您确认要推荐？

该作品发布时间：2016年09月08日

评分

完整度

启发性

勤奋性

排版布局

提交需求

猜你喜欢

举报理由:

您确认要推荐？

评分

推荐心得