界面设计中的结构设计

标签: 设计 UI 界面设计 结构 | 发表时间:2012-06-30 21:44 | 作者:童海波
出处:http://blog.jobbole.com

构建界面视觉层级的元素有颜色的显著程度,图片、文字的尺寸大小,还有最基础的,内容的组织结构。

结构设计是指对界面内容进行分组,对界面中的信息、数据进行设计使之结构化呈现的过程。

好的结构设计能使界面信息传达更加清晰、快捷。那么,如果进行结构设计呢?

界面设计中的结构设计

结构设计———内容的分组

使用线、框、背景色来分组

这是最常见的分组方式,在UI设计中历史悠久。

使用线来分组

 

界面设计中的结构设计  

使用框来分组

 

界面设计中的结构设计 使用背景色分组

 

界面设计中的结构设计

不管是线、框,还是背景色,都是可见的边界,本来引入这些可见边界的目的就是为了使信息的呈现更加清晰,但是这些视觉元素的加入也在一定程度上增加了界面的凌乱感。所以,现在越来越多的会利用空间的远近来对界面内容进行分组。

利用空间的远近来对界面内容进行分组

 

界面设计中的结构设计 从XP到win7,变化很明显。 界面设计中的结构设计 网页设计中也是一样,越来越多的新界面采用极简主义的思路,只保留了极少的线和背景色,更多时候是通过拉大区块之间的距离来分组。

喜欢深究的人也许会问,为何没有可见边界,我们也能清楚的根据距离的远近来对信息进行分组呢?

关于这一现象,在20世纪早期,一个德国的心理学家研究小组就进行过研究,试图解释人类视觉的工作原理。他们观察了许多视觉现象,并提出了格式塔(Gestalt)原理。针对这一现象,是其中的“接近性”原理。

格式塔原理:接近性

说的是物体直接的相对距离会影响我们感知它们是否以及如何组织在一起,互相靠近的物体看起来属于一组,而那些距离较远的则不是。 界面设计中的结构设计上图中,左边的星星在水平方向比较靠近,因此我们看到的是三行星星;右边的星星在垂直方向更靠近,因此我们看到的是三列星星。

不知读者是否注意到另外一个现象,我们很自然的就把上面的星星看做是左边一组,右边一组。为什么会这样?两组之间的距离大小和右边一组列之间的距离大小是一样的啊。这其实就是格式塔原理中的另外一个原理“相似性”。

格式塔原理:相似性

相似性原理指出影响我们感知分组的另外一个因素:如果其他因素相同,那么相似的物体看起来属于一组。在上图中,区分组的因素就是排列的方向。

利用元素的相似性来对界面内容进行分组

关于这一原理的应用 界面设计中的结构设计 上图中,“文档视图”组是有着相似的图标,“显示/隐藏”组是有着一样的checkbox,两组信息区分很明显。

还有一个在验证码中的应用 界面设计中的结构设计 利用文字颜色来进行分组。

上面讲了结构设计的一个层面,内容的分组,结构设计还有另外一个层面,信息、数据的结构化呈现。

结构设计——信息、数据的结构化呈现

人们在浏览网页时,往往不是仔细阅读每一个词,而是快速的扫描,寻找目标信息。对于与目标相关的信息会非常敏感,但是对于其他的信息,即使看到了也不会被注意到。所以易于浏览、突出重点很重要。

结构化的数据能更快浏览和理解 界面设计中的结构设计 相同的数据,左边就给人凌乱、难于区分的感觉。

结构化的数字更容易阅读和记忆

银行卡的卡号设计 界面设计中的结构设计 看上图,分别报出邮政储蓄卡和工商银行卡的卡号。相信邮政储蓄卡的号码很难一次性无误的报出来,并且心里也没底报的对不对。

此外,即使不是一整个数据,分隔开的字段也能提供有用的视觉结构。

 

界面设计中的结构设计 视觉层次易于理解信息的结构

 

界面设计中的结构设计 左右两段话,右边的结构层次清晰明了。

在网页环境中,结构化的信息和数据非常有必要,当用户在快速浏览的过程中,能够快速的找到需要的信息。

在界面设计的三大元素中,结构是基础,值得深入研究,再配合颜色和尺寸的运用,才能设计出友好的界面。

相关文章

相关 [界面 设计 结构] 推荐:

界面设计中的结构设计

- - 博客 - 伯乐在线
构建界面视觉层级的元素有颜色的显著程度,图片、文字的尺寸大小,还有最基础的,内容的组织结构. 结构设计是指对界面内容进行分组,对界面中的信息、数据进行设计使之结构化呈现的过程. 好的结构设计能使界面信息传达更加清晰、快捷. 这是最常见的分组方式,在UI设计中历史悠久. 不管是线、框,还是背景色,都是可见的边界,本来引入这些可见边界的目的就是为了使信息的呈现更加清晰,但是这些视觉元素的加入也在一定程度上增加了界面的凌乱感.

命令行界面设计

- 海洋 - 笨兔兔
虽然已存在大量关于图形用户界面(GUIs)设计的文章,可是介绍命令行界面(CLIs)设计的却很少. 本文尝试介绍几个关于CLI设计最重要的准则. 本文假设该命令行工具用语 *nix 系统(例如 GUN/Linux、BSD、Mac OS X,UNIX),并且会频繁地参考这些系统中的常用工具. 非交互式程序在调用后不再需要任何用户干预.

Android 应用界面设计

- - 互联网的那点事...
与 iOS 相比,Android 系统界面存在各种不协调,应用界面本身缺乏统一的规范. 虽然 Android 的开放性为应用的自主发挥带来了最大的可能性,但如果系统本身能够提供标准的范例,也未必是一件坏事,毕竟许多应用并不一定需要独创的界面. 从 Android 4.0 开始,系统界面在一致性上有了许多改善,那么 Android 应用的界面应该如何设计.

导航设计中的信息结构

- 蕗 - 互联网的那点事
在进入今天的主题之前,我们先来探讨导航的重要性,并分析一下门户网站中导航的表现. 导航直接影响到公司的财政收入. 导航不光只是提供信息获取的途径,它的设计优劣会直接影响到整个公司财政收入. 下面我们看一个例子(以下内容来自alibaba李凡的《设计师的商业意识》):. alibaba大致的广告价格.

移动界面隐喻设计

- 星空无语 - 优涩控
是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务. 但最近一些认知却让我对这个问题有了新的回答:界面就是软件应用它本身. 它不是一份对软件应用功能的图形化说明书,不是对软件应用功能与任务的图形化翻译,它就是软件应用本身,并且与之浑然天成.

浅析网页界面设计-首页

- 多二度 - 所有文章 - UCD大社区
开宗明义,无论是对于一篇文章、一场会议或一部专题片,还是对于一个网站 来说,都是必不可少的. 那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述、副标题),而能够为Title和 Description提供进一步诠释的就是网站的首页. 页面的重要性是建立在它所呈现信息的基础之上,反过来说,页面要向用户展示哪些信息是决定其重要与否的首要指标.

界面设计中的小细节

- - IconMoon
来自知乎上的一个问题: 界面设计包括哪些细节、如何深入. ,以一个苦逼死美工的角度补充了一些小细节:. 界面元素的对齐,我见过很多同学对齐是永远靠眼睛的. 确实在布局的时候经常需要做到视觉上的对齐,而不是机械的对齐,但这不是界面元素可以随意拜访的借口,该对齐的内容需要对齐,有时候只是举手之劳,养成好习惯很重要,有点强迫症也不是坏事情.

【原创】Jason Wu 界面设计

- - 爱午茶 创意烘培坊
Jason Wu, UI设计师,目前工作于Zendesk. 居住在San Francisco. 版权所有, 爱午茶 创意烘培坊 如果您喜欢爱午茶,请前往官方站点支持. 【界面设计】Eddit UI 作品欣赏. 【界面设计】一组创意UI设计. 【界面设计】Mathieu White UI 作品欣赏.