Gestalt 和 可视化设计

2,002 阅读6分钟

介绍

格式塔,是德语'Gestalt'的译文,它并不是德语中“模式”等相似词语,它是指事物的形式、轮廓、外观或主体的意思。

格式塔心理学兴起于20世纪初的德国,又称为完形心理学。由韦特海默、苛勒和考夫卡三位德国心理学家在研究似动现象的基础上创立。强调经验和行为的整体性,认为整体不等于并且大于部分之和,主张以整体的动力结构观来研究心理现象。

概念总是有点难以理解的,接下来举几个例子就会豁然开朗了。

似动现象

是指客观上静止的物体看成是运动的,或者把客观上不连续的位移看成是连续运动的一种现象。

我们应该经常见到下面这样的图,小时候在杂志上用来测试你压力是不是太大,你是什么性格的人,你上辈子是不是折翼的天使等等。这就是似动现象。

在格式塔学说中,似动现象是一种现象,是一个整体或者完形。整体不同于其部件的总和。也就是说,人在看事物的时候,眼睛和大脑并不是注意在各个单一的组成部分上,而是将各部分组合在一起,使之变成更易理解的主体。

那么怎么理解整体不同于其部件的总和?作家Clive Edwards这样解释:“椅子有几条腿、椅背、坐垫等等部分,但是当人看见一把椅子时,并不是意识到这些部分,而仅仅意识到它是一把椅子。即使我们看到了组成部分,它们也不那么重要“ 。下面放张图。

你看到了什么?你看到三个三角形,而不是三角形的内部是什么组成的。你是从整体这个概念去理解这三个图的。

在可视化中的应用。

为了减少使用者的搜索、大脑处理数据的时间和突显出重要的数据,可视化设计中经常采用格式塔法则。用来提升视觉感知。下面介绍一些主要的法则。

接近(Proximity)

空间接近是一种强大的感知组织原理,也是设计中最有用的方法之一。因为我们在感知上会将元素密度相似的区域分组。

例如下图,图a你看到是一些行组成的矩阵,图b你看到是一些列组成的矩阵,他们就是通过点之间细微的差距造成的视觉变化。图c你下意识就会认为是两个集合,而不是7个点。

但是接近不是预测感知群体的唯一因素。下面这个图就很有意思了,标记为x的点被认为是集合a的一部分,而不是集合b的一部分。既是它对与集合b来说也非常接近。

相似(Similarity)

相似的元素倾向于分为一组。这个相似性可以多种维度描述,例如形状,颜色,大小等等。

连接(Connectedness)

连接性一种比相似相近更加强大的分组原则。通过连线,将相同关系的元素分组,是关系表达中一个常用的手段。

连续(Connectedness)

我们更有可能从光滑连续的线段中构造出视觉实体,而不是方向骤变的线条。

图a 被认为是一条曲线和一个矩阵的重叠,也就是图b的组合,而不是图c的组合。大脑更容易把光滑连续的认为是一个整体。

如果我们想更轻松的看到线条的源头和结尾,就应该用光滑连续的曲线。图a很轻松的就能看到哪两个圆圈连在一起,图b看的我头疼。

对称性(Symmetry)

对称性可以提供强大的感知、对比能力。比平行分布更好理解一些。例如下图,第一种布局没有后两种感觉舒服。

还有我们常用的柱状图,用作对比的话,对称分布更容易看出差距和相似性。

封闭性(Closure)

闭合轮廓倾向于被视为集合。如果有间隙的话,我们的大脑会修复它。闭合会强烈的分割元素。要强于相似、相近原则。

这个图够乱吧,但是还是能够准确的分出ABCD,四个集合的范围。

相对大小(Relative Size)

相对大小的不同可以用来表示距离,因为习惯上近点的物体看起来大。可以通改变一个元素周围环境的表达,也就是相对大小,来改变我们对它的认知。例如艾宾浩斯错觉(Ebbinghaus illusion)。两个橙色圆的大小其实是一致的。但是通过改变了周围环境相对大小,就误导了我们的感知。

图和背景(Figure and Ground)

我们在感知图的时候,总是下意识的将图分层次。分为背景和主体。一旦图像中的某个部分符合作为背景特征的话,我们的视觉感知就不会把它们作为主体焦点。可以通过一些处理将图像中的某些部分变成背景,这样可以显示更多的信息或者将用户的焦点转移。

我们来看一下经典的鲁宾花瓶图,你是看到了两个鼻子对鼻子的面孔还是中间的一个花瓶?这是这两者的区别就是你把哪一部分看作背景了。 image-20200726200450447.png

共同命运

共同命运与接近性、相似永生原理相关,都影响我们感知的物体是否成集合。指出一起运动的物体被感知为属于一组或者是彼此相关的。这样说有点笼统,应该是与往不同方向移动或静止的元素相比,向同一方向移动的元素会让人感觉到元素间的相关性更强。

不一定非得是运动,应该是动画性质,例如闪烁,形状变化等动画,也可以很好的区分集合。

总结

  • 可视化本身就是通过眼睛这个高带宽信息处理器,去接收大量的输入信号,并由大脑处理出你要传达的信息,从而使的人达到快速理解数据的目的。要做到更好的可视化设计,关于感知方面一定得有一定的研究,格式塔就是一个非常好的例子。
  • 科林·瓦雷的书非常值得推荐,经典的书不怕出版的早。
  • 格式塔学派的顿悟学习实验很有趣,下次再介绍。

引用以及参考

  • Information Visualization: Perception for Design (Interactive Technologies)【科林·瓦雷】
  • 格式塔心理学理论(MBA智库)
  • 你对格式塔设计,其实一无所知【知乎先生.b】

扫一扫,大家一起学习可视化呀。