大产品中的小细节,带你了解格式塔原则

更新时间:2017-10-31

本文系转载或参考,原文链接》

一. 什么是格式塔原则

格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。

格式塔原理是设计心理学里具备纲领性和指导性的设计法则,我们非常熟悉的设计4原则「对齐、重复、对比、亲密」其实就是格式塔原理的另一种总结。从某种程度上说,自从图形用户界面的计算机问世以来,格式塔原理一直被广泛运用在设计领域,并且已经深入人心。

首先我想简单介绍一下格式塔原则,格式塔原则分成五个部分:

  • 相近(Proximity):距离相近的各部分趋于组成整体。
  • 相似(Similarity):在某一方面相似的各部分趋于组成整体。
  • 封闭(Closure):彼此相属、构成封闭实体的各部分趋于组成整体。
  • 连续(Continuity):我们倾向于完整地连接一个图形,而不是观察残缺的线条或形状。
  • 简单(Simplicity):具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。

二. 格式塔原则的应用

相近(Proximity)

当物体彼此靠近时,它们倾向于被默认感知在同一个组织中。 具体来说,物体之间的相对距离会影响我们感知它们是否或者以何种规则组织在一起。互相靠近(相对于其它物体)的物体看起来属于一组,而那些距离较远的则自动被划分到组外。

人们通常把位置相对靠近的事物当成一个整体。我用一幅图来说明一下:

同样都是16个圆形,你会把左图的16个圆形当成一个整体;但是右边那幅图,上面8个圆形和下面8个圆形分别靠近,所以你会把上面8个圆形当成一个整体,下面8个当成另外一个整体。

这里需要注意的是,相近性作为第一条原则,它的「权重」非常大,大到可以抵消其他原则,比如为上面的圆形添加颜色,甚至改变其形状,人们也会把相近的事物当成一个整体:

那么相近性原则的实际应用,又有哪些呢?最常见的地方就在一些功能列表页面,比如设置,或者像微信的「发现」页面那样的功能列表页面。大家会把「扫一扫」和「摇一摇」、「购物」和「游戏」当成一个整体,这样可以使界面显得更加清晰,同时还能突出重点,这个列表的两头实际上是最突出的,像「朋友圈」和「小程序」。如果没有使用格式塔的相近原则,界面就会显得非常杂乱了。

相似(Similarity)

如果元素彼此相似,则元素倾向于被感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素,则应在视觉上保持统一匹配。

人们会把那些明显具有共同特性(如形状、大小、共同运动、方向、颜色等)的事物当成一个整体。比如下方第一幅图,大家会把同行的正方形当成一个整体,其他圆形当成一个整体。第二幅图,人们就会把大正方形当成整体,小正方形当成另一个整体。

而这里需要注意的一点是人们对形状、大小、共同运动、方向、颜色的「感受权重」是不一样的,在这里颜色属性会覆盖其他属性的影响,如下图:

左边这幅图,大家会把正方形当成一个整体,加了颜色后的右图,就变成竖列圆形+方形是个整体了。

封闭(Closure)

视觉会自动尝试将空出/残缺的图形闭合(或脑补)起来,从而将其感知为完整的物体而不是破碎的物体。简单点说,当图形是一个残缺图形,但主体有一种使其闭合的倾向,即主体能自行填补缺口从而将其感知为一个整体。

人会将不完全封闭的东西当成一个统一的整体,所以有些时候完全闭合是没有必要的。比如世界自然基金会的 Logo,就是一个典型地用到封闭原则的设计:

熊猫的头部和背部并没有明显的封闭界限,但是我们依然会把它当成一只完整的熊猫。

这一原则其实很多地方都用到,不过我们一般不叫其为封闭性原则,而是叫截断式设计。为了让用户感知到还有内容,一般我们会使用截断式设计。像微信的钱包页面,底部因为屏幕大小的关系被截掉了部分内容,但是用户可以通过残留的部分,“脑补”出下方仍然有个完整的整体:

连续(Continuity)

我们的思想更喜欢阻力最小的道路。连续性帮助我们通过构图来解释方向和运动。它在对齐元素时发生,它可以帮助我们的眼睛顺利地穿过页面,有助于提高易读性。连续性原则加强了对分组信息的感知,创建了秩序并引导用户通过不同的内容细分。

我们倾向于完整地连接一个图形,而不是观察残缺的线条或形状。首先请大家看看这幅图片:

大家觉得图里的是两个圆形呢?还是两个残缺圆和一个两圆相交的重合?

按照格式塔原则,我猜大家看到的应该是上方左边的两个圆形吧。

这个法则我们在交互设计上用得比较少,但是在视觉设计中会用得多一点,比如某些应用就喜欢把 App Store 上的应用截图做成连续的图片。

简单(Simplicity)

人的眼睛喜欢在复杂的形状中找到简单而有序的对象,当我们在一个设计中看到复杂的物体时,眼睛更愿意将它们转换为单一统一形状,并尝试从这些形状中移除无关的细节来简化这些物体。

具有对称、规则、平滑的简单图形特征的各部分趋于组成整体。给大家看看一个例子:

左边的界面就是个对称页面,所以我们会觉得左边的各个卡片是个整体,下方还有一个新的卡片。但是右边的卡片就不是了,因为整个页面不是对称的,用户可能会疑惑右边是不是还有卡片。

三. 总结

看了这几个例子,估计各位也发现,不论是格式塔原理还是尼尔森系列还是交互7大定律,其实这些基本法则的应用并不是相互独立的,相反它们之间具有高度的关联性,是相辅相成的关系,我们需要根据不同的需求类型和用户场景,运用这些基本法则打出组合拳。

原则不是一成不变的,熟练使用这些理论后,可以尝试「打破」这些原则,说不定可以创造出更棒的效果!