BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

线框原型(线框图)的本质及实践应用概述

线框原型(线框图)的本质及实践应用概述

家里小猫生病,从周二开始一直折腾到现在,仍在治疗与观察中。几年来经历过几次这样的状况,虽然每次都会恢复健康平安,但一旦再次置身这样的过程里,怎样也无法停止焦虑与担心。除了尽心尽力以外,能做的只有不断祈祷,期盼着一切安好平安的状态早日回来。

篇幅不长的一篇文章,也因为这样的状况而拖沓了多日;一方面没时间,一方面没有任何心力的感觉。不多说了,我们来看今次的译文。

如今的设计圈子里,线框原型(线框图)这个词正在越来越多的被提起。过去几年中,在软件和Web设计等相关行业里,线框原型得到了迅速的普及,同时也带来了很多的误解。它的概念甚至在慢慢的被扭曲,使新手在入行时往往不能正确的理解它的用途。

问题出在哪里呢?最近,我(原文作者)与一些设计专业的学生进行了交流,他们问到不少关于线框原型的问题。通过这些问题,我发现他们对于“线框原型”这个概念的心智模型与其本质相去甚远——在他们的理解中,这个概念包括很多涉及视觉设计方面的因素。更糟的是,他们甚至不愿意去做线框原型方面的事情,他们只知道这是流程中的一个需要执行环节,却不明白它的重要性。这事弄的我相当郁闷,最初,我觉得这搞不好只是个例而已,但通过对行业内的现状进行观察,我逐渐发现,线框原型在很多项目流程中的执行情况真是够惨不忍睹的;原因来自很多方面,包括客户、设计新手、产品决策者等等

实际上,线框原型的规划是Web设计中必不可少的重要步骤,设计师们应该真正了解它,并学会正确的运用它。

线框原型就是蓝图(blueprints)

设计师们通常都会明白,对于那些结构复杂的东西——比如建筑或是汽车——计划与架构设计工作是必不可少的;而涉及到互联网工业时,这些工作的重要性仿佛降低了。网站虽然不是汽车,但它本质上仍是一种复杂的综合项目。如果忽视了良好的蓝图规划,那么整个项目将会对时间、人力和金钱造成巨大的浪费。

在进一步了解线框原型的正确的实际应用方式之前,我们有必要首先了解一下它本质上究竟是什么,它的存在有哪些目的。

我个人认为,蓝图是对线框原型最恰当的比喻。人们不会将蓝图看作建筑物实际效果的渲染图,也不会通过它来制定视觉风格方面的决策。线框原型是纯粹的功能与信息的示意图。

wireframes-prototype-blueprint

对线框原型概念的误解

在实际应用中,我们还需要明白线框原型在概念上不是什么,并且最好可以对需求方、团队成员及相关合作部门进行解释说明。

线框原型不是设计

线框图应该彻底与字体字号、配色、图片等无关。多数人习惯进行形象思维,他们很容易将线框原型理解为在一定程度上表达了设计方案的设计稿。在线框图中过多的使用视觉化的元素,会干扰其对功能的呈现。始终要记住,线框图的作用是组织并呈现信息,要避免在视觉上过度的保真。

线框原型不代表最终布局结构

另外一个误解,就是人们时常觉得,视觉设计师要做的只是在线框图提供的布局结构的基础上进行美化工作;甚至在多数视觉设计师的观念中也是这样。从语义上讲,线框图所展示的布局,最主要的作用应该是描述功能与内容的逻辑关系,视觉设计师并不需要在所有的细节中受其制约。

线框原型不是交互原型

这两个概念之间的区别和联系确实容易让人混淆,从项目流程角度说,它们甚至是完全不同的两种工具。简单的说,线框图用来组织及呈现信息,而交互原型,顾名思义,用来展示及评估交互方式。多数时候,它们在形式上很相似,并且都应该避免使用那些容易造成干扰的高保真视觉元素

线框原型的实际应用

正如在前文中提到的,很多设计师并不了解制作线框原型这个步骤在项目流程中的重要性,因为他们不清楚线框原型的本质和制作它的目的是什么。实际上,线框原型在项目流程中的目的性是很强的。下面,我们来看看线框原型在实际中的几个重要应用方面。

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - UI/UX 设计布道师,设计师,译者,猫奴,音乐玩家。
评论 (13)
因为一直在学习用户体验设计,所以特别关注你的译文和经验之谈,觉得很易懂条理很清晰能真正学到东西! 针对这篇博文在线框原型不是交互原型这章节有点小问题想请教一下. 1)线框原型与交互原型最大的区别是否是(线框里交互是文字描述), 而(交互原型里的交互是用户真正可以点击得到反馈,例如Axure生成的HTML,用户可点击按钮到相关页面) 另外,博主认为交互设计师和用户体验设计师之间有区别吗? 有时候看企业招聘,工作描述都是非常相似的,但有的招聘UX Design,有的招聘Interarction Design. 谢谢!
hi,1)我自己也是同样的理解;交互原型当中同样可以包括以线框图为蓝本的“可点击”原型。也许使用“线框稿”和“高保真原型”一类的词条描述出来会更加清楚些叭。2)我自己的译文中时常会出现“用户体验设计师”这种说法,在实际当中应该可以涵盖交互、视觉、用研这三个职能领域(其中交互设计处于相对核心的位置)。我见过的不少招聘信息其实在用流行的说法做包装而已,本质还是在招交互设计师或UI设计师。
1) 感谢清晰的回复。我现在对这个流程比较了解了:) 2) 这么看来,如果在一个架构并不清晰或规模不够大的公司。用户体验设计师有可能还需要做UI视觉的设计? Anyway,谢谢!解开了我两个疑问。
客气了,多多交流的=)
为啥,图片我就没打开过,弹开好慢 = =!
貌似还好呢...是否和网络或者线路一类有关联...
功能模块图->线框图(手绘,涂鸦,草稿)->线框图(低保真,灰模图)->线框图(功能注释版)->线框图(交互UE说明)-高保真原型(UI原型,PS or 其他) 如果你的公司有足够的时间进行产品原型雕琢,请按上面这个顺序来,如果没有,按下面这个 功能模块图->线框图(低保真+功能注释+UI/UE简单说明)->开发!!!
线框图是产品流程中的一个重要环节,尤其是在大公司或分工协作的环境中,这是必须有的。不过,我过去10年的个人站长经历中,所有现在已经变得非常庞大的互联网产品流程,实际上全部都是在脑袋中构思的。 我讲讲我的流程:产品流程,全部大脑构思 -> 构思产品过程中,后端开发零星展开 -> 部分功能模块出来雏形后,前端开始零星开发 -> 产品设计,后端,前端三者同时进行,寻求平衡与协调 。 最后是测试和完工。最最后,正式运营。
赞! 文章毕竟是教科书或者乐谱性质的东西,以最理想化的情景为依托,个人以为。学习了;多多交流=)
有必要分的那么清楚吗。只要能够实现原型的功能就可以了。
仁者见仁了我以为;理论上琢磨细腻些,实际执行中就未必了。欢迎多交流!
在我看来,线框图、低保真原型和高保真原型图,需要严格区分。文章里所述的「线框原型」作为最初级的蓝图样本,确实不与视觉和交互设计关联不大。
平时工作里能接触到的实际情况来看,线框图和低保真原型的区分确实太模糊了。