读后有感 - UI设计师必知:线框图、原型和视觉稿
读后有感 - UI设计师必知:线框图、原型和视觉稿
太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)
本文遵循“署名-非商业用途-保持一致”创作公用协议
转载请保留此句:太阳火神的美丽人生 - 本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
线框图:
草图,重点在交互的目标上,即业务如何交互完成,是不依赖于平台的,如同数据库设计中的概念模型。这一部分应该是上一层次业务流的具体化,也仅是具体化而已。
原型图:
针对效果图来说,它叫原型图,但针对草图来说,它是选择了特定平台的界面组件的,或可叫适配图或选型图,选择适当的组件来承载交互所要传递的数据。
视觉稿:
又叫效果图,这是美工所要做的事情,在保证交互需求以及承载数据的组件的选择前提下,如何美观地布局、设计、美化,产生良好的美感用户体验。
以上有否与以下转载文章内容不同之处?
当然,我是通篇拜读过的,好几天过去了,有点忘记了,
以上内容也是结合留下的记忆结合实践总结出来的,
有不妥的话,这个欢迎交流,谢谢。
UI设计师必知:线框图、原型和视觉稿
UI设计大师们常常画漂亮的线框图,原型,视觉稿,超赞,超令人感叹。
但是你分得清这3个概念,它们的用途吗?是否也常常傻傻分不清呐,今天就彻底的了解下它们吧。
前言:本文为译稿 1,对三个常见概念进行了剖析。有删节,部分段落重组。
背景:两三年以前,我发现很多搞信息技术的朋友们(非设计师)交付设计时,用着上面列出的词汇。他们以为线框图 (Wireframe)、原型 (Prototype) 和视觉稿 (Mockup) 是一个东西:表达自己创意的线框手绘设计稿。
混淆概念便带来麻烦:他们分不清用户体验设计师的作品,常常感到困惑。「这按钮他妈的怎么点不了?」「我不知道这个地方可以按啊!」类似这样的问题在用户体验的项目中屡见不鲜。误把线框图当成原型,有点像建筑里分不清蓝图(指导如何建筑施工的方案)和演示厅。你完全可以试着在演示厅里小住一会(它的妙处就在于能直观传达房间之美),但你没法舒服地躺在蓝图上;蓝图不过是一张纸罢了。
在建筑学上,演示厅和蓝图服务于不同的交流对象:
- 蓝图,即施工方案,详细描述该如何建造建筑
- 演示厅,给未来的居民提供测试和体验的机会
演示厅和蓝图的共同之处是,它们都代表着最终的产品,即建筑(房屋)。线框图、原型和视觉稿亦是如此,这些文档都是最终产品的不同展现方式。
不管你信不信,我向用户体验设计团队授课的第一件事,就是告诉他们分清这三个概念。因为,这实在太重要了。
接下来,让我们详细讨论三者的区别,以后你就懂得在什么样的场合下用什么词汇了。
线框图
1、什么是线框图?
线框图 (Wireframe) 是低保真的设计图,当明确表达:
- 内容大纲(什么东西)
- 信息结构(在哪)
- 用户的交互行为描述(怎么操作)
线框图不仅仅是无意义的线和框的集合;好吧,虽然看上去是的,囧。你可以把线框图理解为设计图的骨干与核心,它承载着最终产品所有重要的部分。
线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节,但必须表达出设计思想,不能漏掉任何重要的部分。就像给项目以及一起协作的团队成员(开发工程师、视觉设计师、文案作者和项目经理),开辟了一条辅助理解设计的通道。说得再明白点,你是在设计城市地图,地图上能展现出每一条街道,只不过绘制上做了简化。看地图能看出城市的框架,但无法一览城市的美感。
绘制线框图,重点是「快」。大多数时间请和团队成员沟通,多做思考。审美上的视觉效果则应当尽可能简化。黑白灰是经典用色,你也可以用蓝色代表超链接。如果你在准备线框图时花了大把时间(比如,选择图标、上传图片),请换个简单的方式(比如,使用占位符:一个画×的图片,再加上合适的描述文字)。我们习惯把线框图称为低保真设计图。
切记,好的线框图能像水晶一样,清晰明了地表达设计创意,在成员中无缝传达其思想。
2、何时使用线框图
线框图常常用来作项目说明。鉴于其静态设计,一次只能通过一张界面演示交互,因此,务必附上说明。(只要有必要,简短描述或附在复杂的技术文档里,都成)
也因为绘制起来快速、简单,它也经常用于非正式场合,比如团队内部交流。要是开发问起一个东西怎么做,回复时不妨附上一张迅速绘制的线框图。线框图难以充当用户测试的材料;倒也能收集些反馈,如果你更关心用户意见,而非测试方法。
虽然近些年遭人闲话,但线框图在整个设计过程中发挥着惊人的效果,在复杂项目的初始阶段必不可少。
原型
1、什么是原型
原型 (Prototype) ,常常和线框图混淆,是中等保真的设计图,代表最终产品,模拟交互设计。原型允许用户:
- 从界面上,体验内容与交互
- 像最终产品一样,测试主要交互
原型应该尽可能模拟最终产品,就算长得不是一模一样(绝对不能是灰色线框设计)。交互则应该精心模块化,尽量在体验上和最终产品保持一致。
原型背后的逻辑不要依赖交互形式。减少制作原型的成本,加快开发速度。
2、何时使用原型
原型常用于做潜在用户测试。在正式介入开发阶段前,以最接近最终产品的形式考量产品可用性。
如你所想,原型一般难以成为上好的文档;因为它得让「读者」费一些力气来理解界面。但从另一个角度来看,作为界面,原型的直观和易懂倒使它成为最高效的设计文档。
请注意,相对其它交流媒介,原型成本高、费时。我建议绘制原型后,能在接下来的开发阶段复用起来。(唔,你可能得亲自编写 HTML 和样式表代码)对于简单的项目来说,相当好用。(一旦考虑「复用」,必将增加绘制成本,偏离原型的初衷。并不建议复用。——译者注)
若设计得当,与用户测试相结合,原型是物超所值的。
视觉稿
1、什么是视觉稿
视觉稿 (Mockup) 是高保真的静态设计图。通常来说,视觉稿就是视觉设计的草稿或终稿。优秀的视觉稿:
- 表达信息框架,静态演示内容和功能
- 帮助团队成员以视觉的角度审阅项目
人们常年分不清什么是视觉稿,什么是线框图,和某些软件公司的名字不无关系。噗~
2、何时使用视觉稿
如果你想从股东手里获得认可,视觉稿尤其管用;收集用户反馈也相当好使。
把它添到设计文档里去吧,绝对是画龙点睛之笔。
总结
原文地址:http://designmodo.com/wireframing-prototyping-mockuping/
译文地址:http://cuikai-wh.com/blog/2460
读后有感 - UI设计师必知:线框图、原型和视觉稿相关推荐
- 基础的APP技术框架,UI设计师必知!
App技术框架原理,能更有效地帮助我们预判哪些方案可行和实现效果较好,来让设计方案更接地气,让我们一起来了解一下App技术框架都有哪些. 一.App技术框架的类型 1)Native App: 一种基于 ...
- UI设计师必知:link和@import引用css文件方法的区别
<link>元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法: 1 使用<link>元素链接到 ...
- 读后有感 - 残忍但诚实的忠告:您没钱,就不要掺和这事了
读后有感 - 残忍但诚实的忠告:您没钱,就不要掺和这事了 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致" ...
- 新生 语不惊人死不休 —— 《无限恐怖》读后有感
开篇声明,我博客中"小心情"这一系列,全都是日记啊随笔啊什么乱七八糟的.如果一不小心点进来了,不妨直接关掉.我自己曾经写过一段时间的日记,常常翻看,毫无疑问我的文笔是很差的,而且心 ...
- 管理95后员工,管理者必知的4条底层逻辑
95后员工普通受教育程度更高,需要的是尊重,相信的是平等,更看重价值观,追求自我实现. 这些特征决定了过去的管理手段在新生代员工身上不再适用了.在这个新时代,如何管理好95后员工? 你要能给出清晰明确 ...
- DayDayUp:2019.12.30吴晓波2020年终秀演讲《预见2020:来海边,拾起信心》读后有感
DayDayUp:2019.12.30吴晓波2020年终秀演讲<预见2020:来海边,拾起信心>读后有感 导读:2019年,过的好不好?有人豪情万丈,有人强颜欢笑. 互联网平台带来了方便快 ...
- 大道至简 读后有感
大道至简 读后有感 今天的读后感是在读完第二章之后写的,这一章的标题乍一看很有意思,题为是懒人造就了方法,其实细细一品,很是有道理.这章也分为四节,分别是"是懒人造就了方法", ...
- UI设计师必收藏的上百种配色方案专辑!
色彩搭配是设计中的重要要素之一.要营造设计对象的氛围和定位,靠的就是颜色的搭配. 无论是单色.明亮色.冷色或是补色,所有的颜色都可以发挥设计的作用. 配色方案包括: 单色系Monochromatic ...
- avue 文字点击 弹窗_经验 | UI设计师必懂的App弹窗设计方法
本文总结了App弹窗设计体系,以及不同弹窗的使用方法和误区.案例丰富,适合UI设计师进阶学习. 这一篇你将看到: 1.弹窗的定义 2.不同类型弹窗的特点及使用场景 3.常见使用误区 一.弹窗的定义: ...
最新文章
- GitHUb 代码提交遇到的问题以及解决办法
- Android AudioPolicyService和AudioPolicyManager
- ETH网络要爆炸,未来Token的最佳选择注定是BCH
- Visual C++2005库的十项突破性变化
- linux下MyEclipse 安装
- GCC 加工程序的过程
- 计算机培训专业中心架,ASEM工业电脑工业计算机全系列自动化产品-销售中心
- sonar+Jenkins 构建代码质量自动化分析平台
- 《软件工程导论》期末复习知识点总结(全)
- 高频电子线路_实验一:调谐放大器
- ex is not shell_linux下环境变量详解
- 仿照苏宁易购小程序页面
- 天道(遥远的救世主)金句,自悟自性
- 订单拆单,电商开发时 经常遇到的问题
- 使用certbot在nginx搭建HTTPS 以及 阿里云负载均衡HTTPS搭建
- vue 实现电子签名功能 支持生成图片
- JVM垃圾回收——三色标记法
- matlab图片surf图,用matlab实现SURF图像配准 算法
- posix_memalign函数详解以及使用时的注意事项
- oracle 数据跟踪软件,oracle数据库跟踪工具
热门文章
- JMETER badboy 录制脚本
- 08-08 性能测试--分布式
- 03-17 APP自动遍历测试技术
- 接口测试时,输入所有参数的参数值后,接口返回“参数错误:所有参数都不能为空”
- ajax servlet怎么接收_【百战程序员从开始到植发】之AJAX
- 关于JS中一些重要的api实现,巩固你的原生JS功底
- 前端开发基础知识整理--web综合篇
- 【干货分享】自己总结录制的web前端精讲视频,零基础入门学习资料,开发工具
- 10个最受欢迎的 JavaScript 框架,它们的主要特征和功能
- mysql的time格式化_【mysql格式化日期】