线框图

目录

  • 1 什么是线框图
  • 2 线框图的内容
  • 3 线框图的作用
  • 4 线框图和原型的不同

什么是线框图

  线框图是指软件或者网站设计过程中非常重要的一个环节。

线框图的内容

  线框图是整合在结构层的全部三种要素的方法:通过安排和选择界面元素来整合界面设计;通过识别和定义核心导航系统来整合导航设计;通过放置和排列信息组成部分的优先级来整合信息设计。通过把这三者放到一个文档中,线框图可以确定一个建立在基本概念结构上的架构,同时指出了视觉设计应该前进的方向。

  线框图在正式建立网站的视觉设计的流程中,是必要的第一步,但是几乎每一个参与这个开发过程的人都会在一些任务点中使用它。负责战略层、范围层和结构层的设计者可以借助线框图来保证最终产品能满足他们的期望。真正负责建设这个网站的人,则使用线框图来回答关于网站应该如何运作的问题。随着用户体验领域的不断成熟和发展,线框图的责任有时还成为企业内部某种口水战的主题。一些网站研发团队很鲜明地把这部分工作分成两个部分,由两个独立的角色(有时候是整个部门)“信息架构师”和“设计师”来承担。

  线框图就像是设计图框架与承载,它代表最终产品最核心的部分。在保真度与速度之间,线框图可以保持一个很微妙的平衡,虽然绘图时不用最求细节的完美,但必须表达出设计思想,完整的表达其中所有重要的部分。线框图不仅仅是无意义的线和框的集合;好吧,虽然看上去是的,囧。你可以把线框图理解为设计图的骨干与核心,它承载着最终产品所有重要的部分。线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节,但必须表达出设计思想,不能漏掉任何重要的部分。就像给项目以及一起协作的团队成员(开发工程师、视觉设计师、文案作者和项目经理),开辟了一条辅助理解设计的通道。说得再明白点,你是在设计城市地图,地图上能展现出每一条街道,只不过绘制上做了简化。看地图能看出城市的框架,但无法一览城市的美感。

线框图的作用

  线框图常常用来作项目说明。鉴于其静态设计,一次只能通过一张界面演示交互,因此,务必附上说明。(只要有必要,简短描述或附在复杂的技术文档里,都成),也因为绘制起来快速、简单,它也经常用于非正式场合,比如团队内部交流。要是开发问起一个东西怎么做,回复时不妨附上一张迅速绘制的线框图。线框图难以充当用户测试的材料;倒也能收集些反馈,如果你更关心用户意见,而非测试方法。

线框图和原型的不同

  线框图是原型图的一种:可以把原型图想象成一个大类,他下面按照阶段或者精细程度可分为:

  1. 草图或者手稿:一般指前期具有了一个大致的想法,为了记录,快速的从纸上或者小黑板上勾勒出来的。
  2. 线框图:开始考虑大致的布局以及元素定义了。一般只用黑白灰的面、线、字表示,可用axure或者其他设计软件完成。大部分的产品到这一步就可以了,直接交给设计师去完成界面设计。
  3. 高保真原型:完成效果跟真实的产品基本无异,而且还带有动态交互效果的。一般由UI设计师或者交互设计师完成。

  从功能上来说,原型代表了最终产品,常用于潜在用户测试;线框图常用于项目初期,展示布局和功能,用于讨论和反馈。

  原型可以在线框图的基础上进行设细化和设计。原型常用于做潜在用户测试。在正式介入开发阶段前,以最接近最终产品的形式考量产品可用性。

阅读数:156