wireframe-mockup-prototype-differeces-1

@Akane_Lee :我和群里设计师聊,发现 Prototype、Wireframe、Mockup 因为翻译有时候皆统称为「原型」的关系,导致大混淆,所以来说明下这三者的不同,不清楚这三个术语有什么区别的同学来涨姿势咯 >>>

sy20150523

这是最简单的分法。(拟真=模拟真实最后产出,不是拟物风。)

Wireframe

静态的「线框图」

Wireframe 是线框图,除去各种视觉影响元素,只用线条和方块来绘制,可以专注在功能和操作上。不管是用手绘或是软件绘图都可以。

sy20150523 3

这是手绘的 Wireframe。

sy20150523 2

这是用 iPad 乱撇的 Wireframe。

sy20150523 4

这是用软件画的 Wireframe。

Wireframe 通通是静态的,不会动、不能被操作,就只是图片。

Mockup

静态的「视觉稿」

用 Photoshop、Sketch 制作的视觉稿,下一步就是切图交给 RD 套版的成品。视觉上和最终可操作的产出一样,就差 Mockup 是单张图片(档案)而已。

sy20150523 5

很像最终产出的 Web 设计,是 Mockup。

sy20150523 6

很像最终产出的 App 设计,Dribbble上有很多都类似长这样,叫 Mockup,Mockup 也是静态的,不会动、不能被操作。(会不会动不是指动画,而是指有没有串后台资料。)

Prototype

可操作的「原型」

要被称为 Prototype 最重要的一点就是「它会动」也就是它可以被操作、有反应。有人会把 Prototype 分成低保真原型、高保真原型等等,不要想得那么复杂,只要会动的、可操作的、还没正式发布上线的,都能被称为 Prototype 。

sy20150523 7

参考《无代码动效神器!教你用Hype3做APP原型的基础过场(附神器)》 一文,这里的 Prototype 是用 Mockup 做的。

低保真原型 = Wireframe + 可操作
高保真原型 = Mockup + 可操作。
已经切图交给RD 套版、尚未套后台资料(先用假资料)的也会被称为高保真原型。

Prototype 最重要的就是「可以被操作」。所以手绘撇一撇数张 Wireframe,做成可以被操作的模式,就能叫它做 Prototype。像上图所示,几张 Mockup 串一串设定操作范围,可以被操作,也是 Prototype。

结论

中国有很多奇怪的简中译文,如果跟着把 Wireframe、Mockup、Prototype 通通喊做原型的时候,就分不出来对方讲的原型指的是哪一种。硬要翻成中文不如称它是线框稿、视觉稿、原型,当然最好的情况下还是使用英文吧。

如果沟通的对象、尤其是交办工作的人开口就是「原型」,请一定要问清楚是哪一种, Wireframe?Mockup?还是 Prototype?不然鸡同鸭讲之后的下场绝对让项目小组鸡飞狗跳。

【优设指南类好文人气榜!】

Top 1:作者自学成功的亲身经验,实用性高!
《超赞!设计师完全自学指南》

Top 2:从新手技巧到高手教程都在这儿了!
《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》

Top 3:集合多位交互大牛的经验合集!
《交互设计师修炼指南!教你从零开始成为优秀交互设计师》

原文地址:blog.akanelee.me
作者:@Akane_Lee

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量95万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

点赞
收藏 11
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏