六个点两两挨在一起时,我们看到的不是六个点,而是三对点。用断断续续的线画出的圆,我们也会毫不犹豫地认作圆。眼睛先抓住的是整体的形状,而不是一个个碎片,总结这种知觉规律的,正是格式塔原理(Gestalt Principles of Perception)。
简单来说,格式塔原理是指“人不会把分散的视觉元素一个个分开来看,而是根据接近、相似、连续等线索把它们归为一组,当作一个整体来认知的倾向”。格式塔(Gestalt)是德语,意为“形态”或“组织结构”,如今已成为整理屏幕和版面的设计基本语法。
本文将依次介绍格式塔原理诞生的背景和代表性原理、在标志和屏幕中的应用实例,以及设计师需要注意的地方。

眼睛率先整理的画面秩序
什么是格式塔原理?

格式塔心理学是20世纪初在德国由马克斯·韦特海默(Max Wertheimer)、库尔特·考夫卡(Kurt Koffka)和沃尔夫冈·苛勒(Wolfgang Köhler)创立的。它的起点是韦特海默在1912年发表的一项实验。观看两束交替亮起的光的人,尽管实际上并没有移动的物体,却感觉光从一边移到了另一边。他把这一现象称为似动现象(Phi Phenomenon)。
当时心理学的主流试图把经验拆分成最小的感觉单位来分析。格式塔学者则相反,主张整体先被知觉,部分的意义是在整体之中确定的。考夫卡把这一点表述为:“整体不同于部分之和。”
1923年,韦特海默在论文中整理了人们把知觉元素归组的法则,这成为今天格式塔原理的根源。贯穿所有原理的基础是简洁律(Law of Prägnanz),意思是人们倾向于把看到的东西尽可能理解为简单、规则而有序的形态。
格式塔原理的五大代表性法则

格式塔原理有多种归纳方式,但在设计中最常用的是以下五种。
(1)接近性(Proximity)
彼此靠近的元素即使形状不同,也会被看成一组。只要调整间距,就能告诉人们哪些东西属于一边。
(2)相似性(Similarity)
颜色、形状、大小相似的元素会被看作同一群。看到颜色相同的按钮,人们会推测它们属于同一类功能。
(3)连续性(Continuity)
比起突然转折的路径,人们更倾向于沿着平滑延续的线条看下去。即使两条线交叉,也会把它们各自看成一条没有中断的线。
(4)闭合性(Closure)
即使轮廓有一部分是空缺的,大脑也会填补空白,把它认作一个完整的图形。
(5)图形与背景(Figure-Ground)
眼睛会把画面分成凸显在前面的图形和铺在后面的背景。丹麦心理学家埃德加·鲁宾(Edgar Rubin)在1915年前后用既可以看成两个人的侧脸、也可以看成白色花瓶的“鲁宾花瓶(Rubin Vase)”展示了这一原理。
通过通俗例子理解格式塔原理

格式塔原理隐藏在我们每天看到的标志和屏幕的各个角落。
【案例】藏在字母之间的箭头:联邦快递标志
1994年由朗涛设计顾问公司(Landor Associates)的林登·里德(Lindon Leader)设计的联邦快递(FedEx)标志,在大写字母E和x之间的空白处藏着一个指向右边的箭头。起初人们只看到字母,可一旦发现了箭头,之后每次都会一眼看到它。这是巧妙运用图形与背景原理、让原本作为背景的空白变成图形的例子。
- 输入表单(Form Layout):把项目名称紧贴在输入框正上方,项目之间留出充足的间隔,借助接近性,就不会搞混哪个名称属于哪个输入框。
- 导航菜单(Navigation Menu):形状和颜色统一的菜单项,会依据相似性被看作一个集合。
- 横向滚动列表(Horizontal Scroll List):故意把最右边的卡片截掉一半显示,人们就会依据连续性和闭合性推测后面还有更多卡片,从而试着滑动屏幕。
运用格式塔原理时需要注意的地方

格式塔原理虽然强大,但并不是万能公式。简洁律之类的概念很难精确定义,它也曾被批评只描述了现象,却无法解释大脑中的机制。因此,后来美国心理学家斯蒂芬·帕尔默(Stephen Palmer)等人又补充了把被线条或方框围起来的元素看作一组的共同区域(Common Region)原理,相关研究不断延续。
- 原理之间的冲突(Principle Conflict):像彼此靠近但颜色不同的元素那样,两个原理相互矛盾时,用户会犹豫该怎样归组。同一组的线索要指向同一个方向。
- 过度省略(Excessive Omission):如果仗着闭合性把轮廓删得太多,人们就认不出形状了。在小屏幕上尤其要小心。
- 用户确认(User Testing):设计师眼中自然的分组,对用户来说是否同样自然,必须实际展示给他们看才能确认。
格式塔原理是一条知觉规律,说的是人的眼睛会依据接近、相似、连续、闭合以及图形与背景,把分散的元素归组并作为整体来读取。这个始于一百多年前心理学实验室的想法,如今已成为构建标志、网页、地图和指示牌秩序的基础。
在逐一装饰每个元素之前,先想一想眼睛会如何把它们归在一起——这正是易读设计的第一步。