设计师基础知识,线框图、原型和视觉稿的区别

2018-02-28  5600 分类:设计资讯

设计师基础知识,线框图、原型和视觉稿的区别


本文为大家介绍的是设计师的基础知识,即线框图、原型、视觉稿的区别,希望大家在了解这些线稿的时候能够更好地将之区分开来。让我们详细讨论三者的区别,以后你就懂得在什么样的场合下用什么词汇了。


线框图


设计师基础知识,线框图、原型和视觉稿的区别.jpg


线框图 (Wireframe)是低保真的设计图,当明确表达:


内容大纲(什么东西)

信息结构(在哪)

用户的交互行为描述(怎么操作)

线框图不仅仅是无意义的线和框的集合;好吧,虽然看上去是的,囧。你可以把线框图理解为设计图的骨干与核心,它承载着最终产品所有重要的部分。


线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节,但必须表达出设计思想,不能漏掉任何重要的部分。就像给项目以及一起协作的团队成员(开发工程师、视觉设计师、文案作者和项目经理),开辟了一条辅助理解设计的通道。说得再明白点,你是在设计城市地图,地图上能展现出每一条街道,只不过绘制上做了简化。看地图能看出城市的框架,但无法一览城市的美感。


绘制线框图,重点是「快」。大多数时间请和团队成员沟通,多做思考。审美上的视觉效果则应当尽可能简化。黑白灰是经典用色,你也可以用蓝色代表超链接。如果你在准备线框图时花了大把时间(比如,选择图标、上传图片),请换个简单的方式(比如,使用占位符:一个画×的图片,再加上合适的描述文字)。我们习惯把线框图称为低保真设计图。


原型


设计师基础知识,线框图、原型和视觉稿的区别2.jpg


原型(Prototype),常常和线框图混淆,是中等保真的设计图,代表最终产品,模拟交互设计。原型当允许用户:


从界面上,体验内容与交互

像最终产品一样,测试主要交互

原型应该尽可能模拟最终产品,就算长得不是一模一样(绝对不能是灰色线框设计)。交互则应该精心模块化,尽量在体验上和最终产品保持一致。


原型背后的逻辑不要依赖交互形式。减少制作原型的成本,加快开发速度。


原型常用于做潜在用户测试。在正式介入开发阶段前,以最接近最终产品的形式考量产品可用性。


如你所想,原型一般难以成为上好的文档;因为它得让「读者」费一些力气来理解界面。但从另一个角度来看,作为界面,原型的直观和易懂倒使它成为最高效的设计文档。


视觉稿


设计师基础知识,线框图、原型和视觉稿的区别3.jpg


视觉稿(Mockup)是高保真的静态设计图。通常来说,视觉稿就是视觉设计的草稿或终稿。


表达信息框架,静态演示内容和功能,帮助团队成员以视觉的角度审阅项目,这就是视觉稿。如果你想从股东手里获得认可,视觉稿尤其管用;收集用户反馈也相当好使。把它添到设计文档里去吧,绝对是画龙点睛之笔。


猜你喜欢