当前位置:380元网站建设 虎网站 > 建站百科 > 正文

聊聊网站线框稿、视觉稿与原型的区别

发布日期:2015-05-26

wireframe-mockup-prototype-differeces-1

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

sy20150523

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

西安网站建设:Wireframe

西安网站建设静态的「线框图

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

sy20150523 3

这是手绘的 Wireframe。

sy20150523 2

这是用 iPad 乱撇的 Wireframe。

sy20150523 4

这是用软件画的 Wireframe。

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

西安网站建设:Mockup

静态的「视觉稿

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

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

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

西安网站建设:Prototype

可操作的「原型

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

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

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

虎网科技(西安网站建设)结论:

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

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

企业制作网站前怎样拟定一个初稿

    一个成熟的企业在做任何前都要未雨绸缪,俗话说兵马未到、粮草先行正是这个道理,如果要制作一个企业网站就像盖房子一样,需要对制作完成的样子拟定一个大概的初稿,不能直接上来就堆砖头,那样就成猪圈了,网站的会被制作的不伦不类,这样也就几乎不可能为企业创造价值了,就会沦为失败的项目。 企业制作网站前怎样拟定一个初稿   那么拟定一个初稿大概可分为以下几个部分:   一、拟定企业简介:企业的简介恐怕是企业网站...

       企业网站设计必备软件 在网站建设过程中常用到的3个工具,是Dreamweaver、Photoshop和Flash。 1、Dreamweaver Dreamweaver是集网页制作和网站管理于一身的所见即所得网页编辑器,是第一套针对专业网页设计师特别开发的视觉化网页开发工具。利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 2、Photoshop Photoshop主要处理像素构成的数字图像。使用...

       长安大学近期在网站建设和心理健康教育领域获表彰 据悉在近期,长安大学先锋家园网站获“全国高校百佳网站”称号,该校被评为陕西高校2014级新生心理健康测评优秀组织单位。 ——长安大学先锋家园网站获“全国高校百佳网站”称号。近日,由教育部思想政治工作司指导、“中国大学生在线”主办的“第七届全国高校百佳网站评选活动”评选获奖名单正式揭晓。该校团委先锋家园网站从全国29个省市区近个参评网站中脱颖而出,荣获“全国高校百佳网站”称号。 先锋家园是长安大学团...

       宝安腾舜发电子配件跟虎网站签下网站建设条款 腾舜发选用虎网站网络实用型网站案例,此案例比经济型多了些功能,如动漫广告图片、在线客服QQ/MSN等聊天工具、顶部侧部二级分类导航、走马灯等功能。腾舜发是经深圳市宝安区工商局审核的有资质公司,统一社会信用代码:9144030034274507XB。腾舜发处于深圳市宝安区沙井西环路共和安佳工业园A8栋3楼。   深圳市腾舜发科技有限公司,公司成立于2013年,是专门从事移动电源、V8数据线 micr...

       网站优化建设firefox小工具(一) 我们将在本文中介绍一些关于页面构建常用的一些小工具,大部分是基于firefox的插件,通过这些小工具可以让我们在页面构建中事半功倍.    一、页面构建必备工具 — Firebug   相信每个页面构建的同学都有这个工具吧?如果没有的话,你赶紧安装(点击此处安装),Firebug就像它的名字一样,帮你找到虫子,烧掉它!同时有一些firefox的页面调试工具也是基于Firebug的,比如Yslow...

       关于FTP上传文件时中断的几种情况 由于防火墙或者客服端网络的原因,ftp上传过程中会造成中断,大概分几种情况。 A:ftp在上传文件较大的时候,传输会中断,此时您只要续传即可,文件超过30M时,会显示中断,此时您只要续传即可。 B:ftp上传的文件列表过长时,会可能出现中断,中断后续传即可,建议上传时分步上传,不要一次性全部上传。 C:由于客户网络速度较慢,也会可能造成上传中断。您可以改善网络连接情况之后再上传。

最新模板
少儿英语培训机构网站建设 培训公司网站建设
成人自考网站建设 成人培训网站制作设计版面
智能家居摆设设计网站建设 智能家居装修企业网站建设
铜螺母,铜螺丝,螺栓,螺钉工厂网站建设
废气处理设备,如活性炭吸附箱、RTO蓄热式氧化处理设备、光氧等离子复合设备 低温等离子设备 光氧催化设备等网企业网站建设
图文阅读