UI设计

认知心理学与交互设计(3)--格式塔原理

作者:口袋使者 2016-10-26 我要评论

格式塔一词是德语Gestalt的音译,意思是形状和图形。格式塔原理是德国心理学家在研究人类视觉工作原理时观察到的一些现象,即:人类视觉是整体的,我们的视觉系...

“格式塔”一词是德语“Gestalt”的音译,意思是“形状”和“图形”。格式塔原理是德国心理学家在研究人类视觉工作原理时观察到的一些现象,即:人类视觉是整体的,我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。举个例子,我们看到一个三角形,不会说这是三条线段,而是将其看作一个整体。

从上面的解释也可以看出,格式塔是一种描述性的框架,是心理学家对观察到的现象的描述,没有涉及背后的理论,没有对这个现象做出解释。但这并不妨碍其为图形和用户界面设计准则提供有用的基础。格式塔原理包括:接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理、主体/背景原理和共同命运原理。下面一一进行介绍。

接近性原理

物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。互相靠近(相对于其他物体)的物体看起来属于一组,而那些距离较远的就不是。

比如下面这张图,我们会认为左边是三行,右边是三列。

接近性原理的应用是,不必使用分隔线或者分组框对内容进行归来整理,可以直接通过不同对象之间的距离来达到同样的效果,而且界面更整洁,开发难度也相对较低。

同样的,在设计界面控件的位置时,要考虑好它们之间的相对位置,不要引起错误的感知。比如下面这张图,本来应该是一行一行的,但是现在看起来是不同的列,操作与内容之间的关联被打破。用户需要仔细分辨才能弄明白。

相似性原理

也是一种影响分组的因素。相似的物体看起来应该属于同一组。

我们会把下图中空心的五角星看作一组,其他实心的看作一组。对比接近性,相似性的特征更强,如果两个物体距离不是很接近,但是其有相似的属性,我们也会将其看作是相关的。

连续性原理

我们的视觉倾向于感知连续的形式而不是离散的碎片。

与前面不同,这个原理与对象分组无关,而是用于感知整个物体的情况。如下图,我们会认为左边是一根红线和蓝线交叉在一起,然后被一个圆形挡住,而不会认为是一个圆和四条线段组成。右边的图也是这样,三段分开的物体,但是在我们看来就是一条完整的蛇。

一个连续性方面很经典的例子是IBM的标志。人们能够一样就看出三个字母,不会受到非连续线段的影响,就像你透过百叶窗看到的一样。

用户界面上也有很多利用连续性的例子,比如下面所示的滑动条。我们不会认为这是由两个部分以及中间的一个控制器组成的东西。即使上下两部分的颜色反差很大。我们还是会倾向于将其看作一整条滑动条。

封闭性原理

我们的视觉系统会自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

这个原理和连续性很相似,但主要是指封闭的图形方面。比如下面这两个。
特别是右边的图形。中间的空白区域什么都没有,但我们还是将其视作一个三角形,一个没有边框没有内容的三角形。


封闭原理在界面中的应用很广泛,比如几张图片叠加在一起表示“相册”的意思,我们看不见被挡住的其他图片,只有一角可以感知,但我们就是知道这些都是图片。

对称性原理

相比于连续性和封闭性,对称性倾向于将整体的东西进行分解,以便更好地理解。分解有多种方式,对称是比较常用的。

下面这张图,对于第一个图形的分解有多张方法,我们更倾向于选择第一种,也就是将其看作是两个矩形叠加在一起。一是因为这样更简单,二是因为这样更对称。

主体/背景原理

我们的大脑会将视觉区域分为主体和背景,然后主体会占据我们主要的注意力。

这个原理也说明了场景的特点会影响视觉系统对场景中主体和背景的解析。例如下面这个图形,我们会认为三角形是主体,而圆形是背景,尽管圆形的面积更大,颜色更鲜艳。

但有时候,主体与背景并不由场景所决定,而是依赖于观看者的注意力的焦点,下面这种是很经典的例子。主体和背景的二义性。

主体/背景原理在用户界面中主要用来传达信息,可以是用户当前的位置,内容的主题等。比如在网页中增加背景图案,我们会将其视作背景而不会花费太多的精力去注意,从而能专注于当前任务。但同时背景图案传递出来的情感,信息等都会对我们有所影响。

共同命运原理

共同命运是涉及运动的物体,一起运动的物体会被感知为一组或者有较大的相关性。

在一堆图形中,如果有几个做同样的运动,不管位置和形状是否相同,我们都会倾向于将其视为同一组。

在实际使用中,格式塔原理的各个部分不是孤立的,而是一起产生作用。同一个设计会涉及到多个原理的使用。
格式塔原理的另外一个应用,就是用来检测设计结果是否合理。有时候会无意使用了某些原理,从而带来一些错误的信息表达,最好就是能用每个格式塔原理对其进行考量,看是否符合设计的初衷。



阅读原文 本文来自:口袋知识网 news.papocket.com

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 没灵感?这里是最全的15个设计风格总结

    没灵感?这里是最全的15个设计风格总结

  • 淘宝刚发布的新版本,可能会引领2017年

    淘宝刚发布的新版本,可能会引领2017年

  • 学会这个教程,可以把任何一张人物照都

    学会这个教程,可以把任何一张人物照都