【交互】法则的力量(二):格式塔原则① 综述

格式塔可以讲的点实在是太多了,因此会分成多篇内容,目前定在3篇内,如果超了。。。那我就回来改这段话(手动狗头保命)

本篇共分为三大部分:前言 + 格式塔心理学 + 格式塔原则


前言

但凡涉及视觉,都逃不过格式塔感知原理。掌握这些理论,对于一个设计师来说的非常必要的,不管你是做平面设计、界面设计还是交互设计,这些理论都能为你的设计提供强有力的支撑。反之,如果你没有把握好这些理论,就很容易在设计项目中迷失方向,最后通过各种素材网站东拼西凑,呈现出一堆主旨模糊的页面,然后进入改改改的无限循环。直到后来,你变秃了也没有变强。

格式塔的感知原理有助消除设计中的”猜测“。一旦定义了页面中要呈现的内容,并且确定了目标人群,格式塔就能够帮助你高效的确定如何在页面上分布元素、如何使用线条、平衡背景阴影、是否使用渐变、元素该如何分组等等等等问题。
掌握了格式塔原则,设计就会变得更简单,创意也会变得更加有效。不变秃,也能变强。

如果你还没有学习过这些理论,那么是时候下决心好好学习了。让格式塔成为你的强有力武器,为你冲锋陷阵。

关于格式塔,我写了很多内容,希望对你所有帮助,深刻的理解这些理论,才能灵活运用。
请耐心认真看完,绝对不虚此行。



格式塔心理学

讲格式塔原则之前,必须先讲一下格式塔心理学,毕竟格式塔原则来源于格式塔心理学

格式塔心理学诞生于1912年,是西方现代心理学的主要学派之一,最初在德国被创建,后来在美国得到进一步发展,其创始人是韦特海墨,代表人物还有考夫卡、苛勒

格式塔最初试图解释人类视觉工作原理。他们观察了许多重要的视觉现象并对它们进行了分析整理。其中最基础的发现是人类视觉是整体的,即:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。将这种整体特性运用到心理学研究中,就产生了格式塔心理学。

格式塔系德文“Gestalt”的音译,主要指”完形“,即具有不同部分分离特性的有机整体,因此这些理论也称做视觉感知的格式塔原理,格式塔心理学又称之为完形心理学

虽然格式塔这个术语起始于视觉领域的研究,但它又不限于视觉领域,甚至不限于整个感觉领域,其应用范围远远超过感觉经验的限度。

苛勒认为,形状意义上的“格式塔”已不再是格式塔心理学家们的注意中心,根据这个概念的功能定义,它可以包括学习、回忆、志向、情绪、思维、运动等等过程。

广义地说,格式塔心理学家们用格式塔这个术语研究心理学的整个领域。

格式塔学派既反对美国构造主义心理学的元素主义,也反对行为主义心理学的刺激-反应公式,主张研究直接经验(即意识)和行为,强调经验和行为的整体性,认为整体不等于并且大于部分之和,主张以整体的动力结构观来研究心理现象。

格式塔心理学的理论核心是整体决定部分的性质,部分依从于整体
基本原则是:人们会用一种更为简单的方式,来感知和解释含糊不清或复杂的图像

构成格式塔心理学的4个关键法则:Emergence 出现、Reification 物化、Multistability 多稳定性、Invariance 恒定性

1、Emergence 出现 :整体比部分更先被识别

有些地方称为”整体性、简单性“。

  • 我们的视觉倾向于把复杂的物象解析为简单的物象;
  • 当我们试图识别一个对象的时候,首先会确定这个对象的轮廓,之后才会注意到组成部分。也就是先看到整体,再看到部分。

例如当你看到下图,第一印象会是:这是一条狗子,之后才会开始注意这是条斑点狗、有头、腿不全、没尾巴等细节部分:


这是由于大脑的”节能“性质,说白了就是”懒“。相对于一个细节复杂的物象,大脑会更快、更容易接受简单明确的物象,或者说倾向于复杂问题简单化。因此在我们看到上图的时候,大脑会更快的接受这是一条狗这个简单信息,之后才开始接受其他信息。(所以,我懒不怪我,怪脑子?)

应用到设计中:人类首先会通过他们的一般认知形式来确定元素,简单明确的对象比复杂模糊的对象传递信息速度更快,也就是更容易辨认。这也就是为什么设计中经常使用对称构图、三角形构图、圆形构图等方法,目的就是为了在复杂的信息环境中,构建更易懂的整体,以便快速获得受众注意力。

2、Reification 物化:大脑会自动填补空缺

又称为”具象化、具体化“。

  • 物化是对外貌感知的构建或生成,并且视觉系统在物化过程中,更倾向于根据已有经验,将其感知为空间信息更明确的物象,而不是物理真实的物象;
  • 即使一个图像有部分缺失,大脑也会根据已有经验,将所看到的物象与记忆中熟悉的模式相匹配,自动“填补”缺失部分。

这条原则四舍五入= 脑补。

看下图两个例子就很容易理解了 ↓

第一张图中严格物理来说并没有三角形,但是你会更先辨认出三角形,因为对比缺了一块的三个圆形,三角形更简单;右边的熊猫图案并不是完整的,但依然不影响你认出这是个熊猫。

应用到设计中:具象化表明我们不需要呈现一个完整的轮廓,以便用户看到它。可以在设计中省去部分的轮廓,以及未必要使用线条来进行版块的切割,只需适当留白,用户一样可以感知到这些区块的不同。利用这条原则能够让界面更加简洁,减少信息干扰。比如最近风很大的卡片式设计。

3、Multistability 多稳定性:大脑力图避免不确定性

又称为“多稳态知觉、组织性”。

  • 我们常常会用不止一种方式来解读模棱两可的事物,大脑会在寻找确定性的选择之间来回穿梭,但在同一个时间点,却只能给予一种解读的方式 ,而不是同时具有两种以上的解读方式。也就是说,我们不会同时看到两种解读结果;
  • 当一种视角变得更加主导,另一种视角将变得更难看到。

左图,可以看成是一个花瓶,也可以看成两个人的侧脸,但你却不能同时看到花瓶和侧脸;右图的立方体到底朝向哪?

应用到设计中:必须要思考,你最希望受众看到什么样的信息? 信息传递要精准,避免模陵两可的图片或文字,因为你永远无法知道,受众看到的跟你想传达的是不是一样。

换个角度来想,如果你想改变受众的认知,最好不要使用剧烈的方式,容易引起用户反感。通过巧妙的设计来模糊他们的认知,然后不断引导、加强呈现你想表达的信息,从而让受众在不自觉中做出改变。

4、Invariance 恒定性:大脑擅长辨别异同

又称为“恒常性、不变性”。

  • 人们在识别物象时,不会受到它旋转、缩放、变形的干扰;
  • 大脑可以从不同的角度感知物体,尽管它们的外观不同。

就像对于一个熟悉的人,不管这人是蹲着、站着、坐着,你都能认出是他。

对于图中几何体,我们更倾向于认知为成这是一个几何体的不同角度,而不是不同多个的几何体。 而且你能轻易将上下两组辨认成是不同的两个几何体。

应用到设计中:可以利用人类的这种视觉特性增加设计的趣味性,比如一些动效设计,因为即使一个icon进行动态变化,用户也不会觉得这不是同一个icon了;

另一个最常见的应用场景就是验证码,[证明你不是机器人]这种设计你肯定见过。这也是目前人类在视觉上胜过计算机的优势,当然这样的优势也即将被计算机取代。当然有时候也会遇到反人类验证码,恒常性失效。没错,说的就是你!12306!抢不到票超生气╰(‵□′)╯

以上就是格式塔心理学的4个关键法则,也是格式塔的四大基础。这些法则既适用于空间也适用于时间,既适用于知觉也适用于其他心理现象。其中许多法则不仅适用于人类,也适用于动物。

开胃菜吃太多会吃不下么?所以,下面才是真正的格式塔原则

免责声明:撑到概不负责哦。


格式塔原则

设计中运用的格式塔原则,依然是由韦恩海默率先提出,考夫卡和科勒依然紧随其后对其进行了丰富。

考夫卡的两大理论:心物场 (Psycho-physical)和同型论(Isomorphism),对格式塔在视觉设计中的应用影响深远。以心物场和同型论为总纲,由此派生出若干亚原则,称作Gestalt Laws of Organization,译为:组织律 /组织法则 /完形法则,是格式塔原则鼻祖级原则。

在格式塔心理学家看来,完形趋向就是趋向于良好、完善,或完形是组织完形的一条总法则,其他法则是这一总法则的不同表现形式

看到这里,你大概也就能理解为什么网上流传的有关格式塔的法则,有4条、5条、6条、还有7条、8条...其实都是一样的东西,格式塔如果终极简化,1条也够用,下面汇总一下网上流传的各种版本,对比一下就能明显看出,有的法则是包含关系,根本不用太多条。

网传版本终极汇总:

  • 千言万语1条版:完形法则 /组织法则

  • 稍微多点2条版:心物场同型论

  • 再多一点5条版:邻近法则(相近法则/接近法则/亲密法则)、延续法则(连续法则)、相似法则封闭法则(闭合法则)、简单法则(对称法则/良形法则);

  • 还能再多6条版:接近法则相似法则封闭法则良形法则连续法则共同命运法则(共同区域法则);

  • 继续增加7条版:接近法则连续法则相似法则封闭法则简单法则主体-背景法则共同命运法则

  • 目前最多8条版:接近法则连续法则相似法则封闭法则主体-背景法则熟悉法则知觉恒常法则(包括明度/颜色/大小/形状的恒常)、共同命运法则

  • 必须亲生8条版:接近法则、相似法则、封闭法则、简单法则、共同命运法则、连续法则、良形法则、熟悉法则

不管有几条,都离不开格式塔的核心——完形,可能是为了写报告的时候能写更多字?才衍生出了更多条?

这些法则的名字听起来挺唬人的,其实每一条都特别好理解,都可以用非常简短的语言来解释。

所谓万变不离其宗,不要被这些衍生法则唬晕了。我之所以翻遍全网做汇总,不就是为了给可爱的你缕清思路的么!我这么好,赶快关注叭~

经过本仙八万年思考,最终决定使用7条版,来详细分析:

1、Law of Figure Ground Relationship 主体背景关系

  • 元素会被识别成主体(视觉焦点)或(主体所处的背景或风景)
    摸着良心问问自己,你是怎么区别这俩的主体背景关系的?

2、Law of Prägnanz 简单法则

Prägnanz这货是个德文,本意为简洁、精确,用在设计中英语解释为Good Figure,有完形、良形的意思。
The Law of Prägnanz,也被称为The law of good figure 良形律 或The law of simplicity 简单律。

  • 人类倾向于,将模糊或复杂的图像解释为简单而完整的图像。
你会把此图看作五环,而不是好多根连在一起的曲线或多个异形

3、Law of Similarity 相似法则

  • 与不具有相似视觉特征的元素相比,具有相似视觉特征的元素被认为更加相关;
  • 形状、大小、颜色、强度等物理属性方面比较相似时,就容易被组织起来而构成一个整体;

说人话就是:长得像的,容易被认为是一伙的。

4、Law of Good Continuation 连续法则

  • 排列在直线或曲线上的元素,会被识别成平滑的”线“,自动连结在一起。
图中的点会被识别为是一条”线“,而不是线段和角

5、Law of Closure 闭合法则

  • 当看到复杂排列的多个元素时,通常被识别成单个可识别的形式或图形。
  • "闭合“也发生在对象不完整或部分不封闭的时候。就是前面的说过的”脑补“功能。
想想你是怎么辨认图上部分的括号的?又是怎么辨认下面这些图形的?

6、Law of Common Fate 共同命运法则

人类倾向于认为,同一方向运动的元素比静止或不同方向运动的元素更相关。

想想你刚刚在“相似”部分是怎么分组的?现在呢?

7、Law of Proximity 接近法则

  • 相互接近的事物被认为比相隔较远的事物更加相关。

这些原则的英文名称虽然使用Laws(定律)这个单词,但更准确的术语应该是Principles(法则/原则),这些法则更像是Heuristic(启发式),是一种解决问题的捷径。

如果你坚持不懈、认真仔细的看到了这里,那么不用我说你也应该发现了一个事实:

这些法则几乎都是彼此的变体,并且在多方面密切相关。



关于这个事实,有个很合理的解释:因为他们都涉及到”关系“。人类的感知是由关系决定的,事物如何相似或不同、彼此之间如何对立或混合,以及事物的排列如何暗示层级关系、如何受环境影响等。

我们常说,没有对比就没有伤害,不也是因为”关系“么?

格式塔能说的点实在是太多了,就先到这里叭,剩下的实例应用,我寻思着还得好多内容。一次性说太多我寻思着体验不太好?所以我寻思着....那就下次见 叭!



以上,Over💗


Reference:


合法原创内容,禁止以任何形式私自盗用!

图片也不行!图片也是我画的!

盗文盗图者秃头!

推荐阅读更多精彩内容