视觉感知和格式塔原理
哈喽，大家好。北京5PLUS学院为了帮助更多的小伙伴提高设计ui水平和设计意识，会整理一些比较细致且有实际案例的设计知识分享给大家。5PLUS是一所专业ui设计学校、ui设计 培训机构，有很多出色的ui设计师学习在这里学有所成。如果觉得好，就分享给更多人吧。
本文是有关设计原理的新系列的一部分，这些原理既可以作为经验丰富的设计师的复习内容，也可以作为业界的新手参考。希望这里介绍的内容不是太明显和不言自明，但是总是时不时地有一个不错的快速复习总是很棒的，不是吗？
在1910年，心理学家 Max Wertheimer就观察发现在一个铁路口一系列灯光闪烁和关闭的现象，就类似于在环绕影院开启灯光和字母出现的情况。
对于观察者，会感觉每个灯泡的周围的一个范围都在运动，从一个灯泡到另一个灯泡，可实际上这只是一系列灯泡的开启和关闭，灯并没有移动。
这一个观察将会引导我们在视觉感知上的认识，并定义其基本原则，而这些原则几乎是我们设计师作为图形设计的核心基础。
对于这一系列有关设计原则的探索开始，它也是格式塔原则的基础，因为我们很多的设计原理都源自于格式塔原则。在这篇文章中，我将通过一些理论来带你一点点认识格式塔原则基本定义。
在这篇文章之后的系列还会谈到设计空间、视觉平衡及层次关系。而接下来的内容中，将会谈论在设计方面是如何应用格式塔原理，并会结合大量的实际案例，以及在网页设计中我们应该如何应用这些原理。
在格式塔之前的主要观点看法
“部分之和大于整体”— Kurt Koffka
上面这句话很言简意骇。当我们看到一组对象的整体之前，会首先看到各个部分对象，当看到一个部分或者是零件超过其他部分之和的时候，就会把这部分看成一个独立的整体，那现在我们就看看它们背后之间的基本规律吧！
显现（未看到整体，只看到部分时）
显现是从简单图案到复杂图案的形成过程。当试图确定一个对象的时候，我们会首先设法辨别其大致轮廓，然后对自己已经知道的形状和对象从大脑中进行搜索匹配。只有当全部出现的时候，我们的大脑就会进行相关的补全图案的活动。
请记住在设计中，人们首先会通过自己的常识来确定元素，一个简单明确的对像相比于一个详细的对象，沟通将更加的快捷，轮廓也很容易辩论。
物化（大脑填补缺失的信息）
物化是感知的一个方面，其中感知的对象相对于实际的会存在更多的空间信息。当我们试图在大脑中搜索存在的对象模式时，会对感知的进行匹配，但实际上并不是会一直完全匹配。相反我们会找到很多的相识的地方，然后会按照自己熟悉的模式寻找彼此之间的差距。
物化现象表明我们有时候并不需要显示完整的轮廓以便让观众看到，可以只展示部分的轮廓，只要我们提供一个足够近似接近的模式进行匹配。下面可以看到一个封闭环如何利用负空间进一步说明的例子。
稳定（寻求稳定性避免不确定性）
稳定性是不明确的，根据自己的经验感知在不稳定之间来回移动，并替代这种不稳定性。某些感知中，是一种向上的形式，例如在下面案例中很经典的一张花瓶的图片，里面就是使用负空间的实例。
你看不到两者但是又能感知两者之间的存在。例如，弹跳的小球在前面来回迅速弹跳。还有就是如果一件东西很清楚其作用和一些看法，之后看的越久，就会越来越难看到其他的想法了，这时我们就形成习惯了。
从设计的角度看，如果想要改变一个人的观点看法，请不要尝试一下子就改变这一切，而是让其看到彼此之间的选择，然后强化另一方的观点，这样就会间接地削弱对方原来的观点。
易变性（我们善于识别异同）
易变性在知觉属性中，就是简单的对象可以独立的旋转、平移、缩放。因为经常会从不同的角度看待一件事物，我们不管从其他的角度来看，都足以识别它们。
试想一下，如果要识别一个人，我们可以从他直接站在你的面前，面对着你。但是一旦他们转向侧面，也可能不认识。尽管从不同的角度看，我们也还是会认出对方是谁。
从接下来的原则中来看看到上面思想起到的作用。其原则是：对于视觉上了解事物需要从不同的的角度看待，这就是格式塔原则 ，也是在视觉语言中的核心内容。
格式塔原则
大部分的原则是比较容易理解的，这也是共识。
“其他所有条件都相同,用X相关的元素会由感知单元分组成更高阶单元。”——斯蒂芬·帕尔默
下面的许多原则将会遵循这个模式。这些原则是关于变量，并对更高阶感知的结果。
普雷格郎茨定律（简明的规则和完美的比例）
人们通常很容易察觉那些解释不清或复杂的图像最简单的形式，这也是格式塔的基本原则，我们都喜欢很简单、清晰、有序的事物。因为对于我们的本能而言，这些都是安全的。所以希望花费更少的时间来处理和面对当前的那些危险与惊异。
当面对具有复杂的形状时，我们更加倾向于重新进行组织成一个更加简单的组件或是组成一个简单的整体。就像我们看到上面图片中由简单的圆圈、矩形、三角形组成一样，而不是复杂的模糊的形状，如右图可以看到。
在这种情况下，可以看到三个不同的形状相对于左边的更加简单，因此也就能更加简单明晰的理解这个对象。
封闭
“当看到元素的排列很复杂时，我们更加倾向于寻找单一的，可识别的模式。”
与普雷格郎茨定律相同之处也是力求简洁。在上面的例子中提到的图像，其中的三个对象相对于比较是简单的并且不是封闭的。可是随着封闭，我们也不能让三者之间很好的衔接起来，形成一个简单的整体。这在我们的眼中充满了缺失的信息以至于无法形成完整的图像。
在上面的图片中，我们可以看到图像是由三个小精灵组成，其中每个都是一个简单的白色三角形。而相对于右边的图像，尽管也是使用简单的任意形状组成的一只熊猫，但它并不看起来显得那么的简单。
封闭环可以被认为是一种维持元素之间的粘合剂。这也是人类更加倾向于去寻找和探索的一种模式。
关键之处在于隐藏那些真正需要提供的足够信息，而是让眼睛来进行自动的填写。如果这个过程中元素缺失的很多，那么将会被视为独立的部分，而不是一个整体。如果提供的信息太多又不会发生这种效果。
对称和秩序
“人们往往更加倾向于接受那些围绕其中心为对称的形状。”
对称性为我们提供了一种坚固和秩序的感觉，这也是我们更加倾向于发现探索。而自身的本性又会对混乱的情况强加秩序。这个原则也就导致我们希望在一系列的元素组合中保持平衡。哪怕这系列的元素组合中并不需要完全的对称来维持平衡。
在上图中有3对开关闭合的大括号。根据就近原则，在这里或许会优先看到其他的事物而不是简单的大括号。这就表明，对称性的优先级高于就近原则。
因为我们的眼球会优先更快的发现彼此之间的对称性和秩序性，所以利用这些原则可以更加迅速有效的传递信息。
图形与背景
“元素会被视为图中的焦点元素，而背景则会被忽略。”
图形和背景是指主要元素和负空间之间的关系。这个结论是，眼睛会分开背景和图形。以了解区分什么是被强调突出的，人们第一眼看到的就是它的组成部分。
图形与背景的关系，可以从上图看到主要是两者之间的哪个更容易确定和更加稳定。上面左图就是一个很好关于不稳定的例子，你要么只会看到一个花瓶，相对于白色地面，其实也会看到黑色部分是两个人的侧脸，反之亦然。我们可以在两者之间轻松的来回切换，看到这种不稳定性关系。
在相对于稳定的环境中，我们可以利用它希望用户更好的专注于我们想要突出的元素，这两个原则可以帮助我们：
（1）面积：两个重叠的形状，更小的会被视为图形，较大的会被认为是背景（地面）。就像右图上面的图片展示的一样。
（2）凹凸感：凸出来的往往会被认为是元素而不是凹进去的部分。
统一连贯性
“视觉元素之间的连接，会视为与元素没有关系的。”
在下面图片中，线与线之间彼此连接着其他元素。这种连接会让我们感觉到，连接的元素是以某种方式彼此相关的。
这就表明元素之间存在着相关性原则，最突出的是彼此连接均衡。例如上图中的两个正方形和两个圆，尽管它们是紧密相关的，但是从视觉上感知到方圆才是对的。注意：线不需要接触到元素就能被感知。
共有区域
“如果元素都处于同一个区域，那么它们就会被视为一组。”
另一种显示元素之间连接就是以某种形式包围它们。在包围区域内就被视为是相关的，反之则是单独的。下面的圆都是一样的，但是我们却能看到两种不同的群体。以某种方式排列在各个箱子中。
而显示一个共同区域的典型方式就是在相关联的元素外围画一个框，就像上图所做的那样。当然相对于当前放置在不同的背景颜色的区域也是可行的。
就近原则
被紧密的结合在一起，将会更加进一步区分对象。
就近原则和共有区域类似，但是却是使用共有空间作为背景。当元素被彼此定位在一起时，就会被看成一个整体，而不是单独的元素，这一点在元素之间越接近时尤其明显的，这种形式下就越是能区分出其他。
而彼此不太靠近的被分开的区域的分组，会被视为与之有某种间接的关系。
延展性
将元素安排在一条直线或是曲线上 ，被视为更有相关性的是线上的元素，而不是排列的方式曲线或直线。
这种原理的另一种解释是，我们将会继续看着这些元素而不是停止在最后一个点上的图形。在上面的图形中我们可以看到一条直线和曲线交叉，而不是只停留在四个不同点的线段上。
同步性
元素在同一个方向上移动的，将被视为比静止的或其他形式移动的元素更加有相关性。
无论元素之间相隔有多远，它们之间的移动或改变的方向是一致的就会认为是正相关的。而那些不被运动的元素也会认为是存在相关性的。例如如果四个人聚集在一起，其中有两个人都走向右侧，那么它们就是具有相关性的。哪怕只是方向相同，不考虑速度距离，也是有相关性的。
在上图中，箭头代表着运动方向就足以表明之间的相关性。而对于运动的变化情况的本身这不是重点。只要箭头方向一致，那么它们之间还是有相关性的，这也就意味着运动有强烈的指示性。
平行性
相互平行的元素相对于其他的元素是相互平行的。
原理类似于上面的共同性一样，线路会被认为指向或某种方向。而平行线就会被视为任何指向移动或相同方向的元素，因此也是有相关性的。
应当指出的是，平行也是被感知的，这些线也可以是曲线或形状，只是之后的元素也要对应着相应的形状，以便保持平行。
相似性
特征相似的元素会被认为是更有相关性的元素，相对于其它元素是没有这种特征的。
可以是任何的特征，类似于：颜色、形状、尺寸、纹理等，当一个观察者看到这些相似的特征时，就能感知到这些元素之间的相关性。
下面图片中，红色的圆点相对于黑色的就是存在相关性的，就是它们存在相同的元素。由此红色和黑色就被视为不同的元素。
有一个很明显的例子就是网页中的链接颜色。在通常情况下，内容中的链接颜色是一致的，往往是蓝色下划线。这也是为区分内容文字与链接中有其他内容，而又能被发现以及传达出这是一个链接。
焦点
有一处元素会相对于其他的元素有很突出和明显的差异，用于吸引并保持观众的注意力。
这个原则表明我们的注意力会寻找相反的元素，即被不同的元素吸引，在下面图片中，眼睛很快被红色的方块吸引，而且还加了一个阴影，使得更加容易区分。
焦点原则会出现在需要我们快速识别未知危险的地方，来提醒我们注意潜在的危险。相似性和焦点原理，重点在于看不见相似的元素，而来突出不相似的元素。
以往经验
元素往往会根据观察者过去的经验所感知。
以往经验也许是最不靠谱的原则。可是与其他的原则相结合，它们也会影响到以往经验的原则。以往经验也是独一无二的个体，所以也被视为最难以假设的。不过有着共同的经历就会有相似之处，例如很多的颜色就被过去的经验赋予一些意义。
我们在生活中我们看到的红绿灯，红色预示着停止，绿色意味着走。我们可以看到以上的图像是由三种常见色作为其一侧的红绿灯，而这就是以往经验的结果。
我们的许多共同的经历往往源于文化，颜色又提供了范例。在一些国家，白色被认为是纯真无邪和，而在其他国家这些解释是相反的。尽管可能出现的约定习俗通常是共同所有的，但要记住，我们并不都有着相同的经历，这一点很重要。
总结
格式塔原则是很重要的原则。他们指引我们视觉上一切设计的基础。描述了每个人都是如何直观地感知对象。
上述原则应该是比较容易理解。对大部分初级设计者而言，定义和图像可能是我们需要明白的一个基本道理。同时，需要了解这些原则的基本思路，并以不一样角度来理解它们，以及在设计中如何影响设计。
在接下来几篇文章中，我们将看到更多的格式塔原理如何影响设计。也将看到如何运用对称性帮助我们平衡的组成，以及如何结合焦点和相似性使我们能够在设计中营造视觉层次感。在那之后，我们还将深入图像/背景关系，并考虑元素之间的空间关系。这是正是接下来要写下的。
https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/
作者：Steven Bradley
相关文章
本页面最后更新于 2020年12月27日 10:11
