河源做网站：设计原则之视觉感知和格式塔原理

1910年，心理学家马克斯·韦特海默（Max Wertheimer）在铁路道口观察到一系列灯光闪烁时发现了一个洞察力。这类似于环绕电影院大门的灯光如何闪烁。

对于观察者来说，似乎一个灯光在挡板周围移动，从灯泡到灯泡，实际上它是一系列灯泡打开和关闭，灯光不会移动。河源做网站

这种观察导致了一套关于我们如何在视觉上感知物体的描述性原则。这些原则是我们作为设计师以图形方式进行的几乎所有事情的核心。

这是关于设计原则的一系列帖子的开始。它始于格式塔的这些原则，因为我们遵循的许多设计原则都源于格式塔理论。在这篇文章中，我将向您介绍一些理论，并提供格式塔原理的一些基本定义。

本系列的后续文章将考虑空间，平衡和视觉层次等设计方面。在即将发布的帖子中，我将指出哪些格式塔原则会影响正在讨论的设计方面，并且我将提供更多实际用途以及如何在网页设计中使用格式塔原则的示例。

格式塔理论背后的关键思想

“整体不是各部分的总和。” - Kurt Koffka

上面引用的是格式塔。当人类看到一组物体时，我们会在看到各个物体之前感知它们。我们认为整体不仅仅是各个部分的总和，即使这些部分是完全独立的实体，我们也会将它们归为一些整体。格式塔和格式塔治疗背后有几个关键的想法。

出现（整体在部分之前确定）

出现是从简单规则形成复杂模式的过程。在尝试识别物体时，我们首先寻求识别其轮廓。然后，我们将此轮廓图案与我们已知的形状和对象进行匹配，以找到匹配项。只有在整体通过这种轮廓模式匹配出现之后，我们才能开始识别构成整体的部分。

在设计时，请记住，人们将首先通过其一般形式识别元素。一个简单明确定义的对象将比具有难以识别的轮廓的详细对象更快地进行通信。

具体化（我们的思想填补了空白）

物化是感知的一个方面，其中被感知的对象包含比实际存在的更多的空间信息。当我们尝试将我们看到的内容与我们存储在内存中的熟悉模式相匹配时，并不总是完全匹配。相反，我们发现一个接近匹配，然后填补我们认为应该看到的差距。

具体化表明我们不需要按照观众的顺序呈现完整的轮廓。只要我们提供足够的轮廓以允许足够接近的模式匹配，我们可以省略轮廓的一部分。你可以在闭合原则下进一步看到这个例子。

多稳定性（思想力求避免不确定性）

多重稳定性是模糊的感知体验在不同的解释之间来回不稳定的趋势。有些对象可以通过多种方式被感知。图/地面部分下面的一个例子是你以前见过的。图像可以看作是轮廓中的两个面或花瓶。

你不能同时看到这两个。相反，你会在两个稳定的替代品之间快速反弹。一个人往往会成为你的主导观念，而你开始的时间越长，没有开始能够看到另一个人，就越难以看到其他感知。

从设计的角度来看，如果你想改变别人的看法，不要试图一次改变它。找到一种方法让他们看到另一种选择。然后努力加强那种替代观点，同时削弱原始观点。

不变性（我们擅长识别相似点和不同点）

不变性是一种感知属性，其中简单对象的识别与其旋转，平移和缩放无关。由于我们经常从不同的角度遇到物体，我们已经开发出一种能够识别它们的能力，尽管它们的外观不同。

想象一下，如果你只能认出一个你认识的人，如果他们直接站在你面前并面对你，但是一旦他们进入个人档案你就无法识别他们。尽管视觉观点不同，我们仍然可以认出人。

您可以在以下原则中看到这些想法。主要思想是格式塔原则是关于感知以及物体在视觉上传达的内容。这些原则讲述了我们工作的视觉语言的核心。

格式塔原则

大多数原则都比较容易理解。有一个共同的主题贯穿其中许多。

“在其他条件相同的情况下，与X相关的元素往往会在感知上分组为更高阶的单位。” - Stephen Palmer

以下许多原则将遵循这种模式。原则要么定义X，要么定义更高的顺序。

PRÄGNANZ法（良好的形象，简单的法则）

“人们会将模糊或复杂的图像视为最简单的形式。”

这是格式塔的基本原则。我们更喜欢简单，清晰和有序的东西。本能地这些东西更安全。他们花费更少的时间来处理并呈现不那么危险的惊喜。

当面对复杂的形状时，我们倾向于将它们重新组织成更简单的组件或更简单的整体。您更有可能看到上面的左图像由您在右侧看到的简单圆形，正方形和三角形组成，而不是整个形状的复杂和模糊形状。

在这种情况下，查看三个不同的对象比查看一个复杂对象更简单。在其他情况下，查看单个对象更简单，这将我们带到......

关闭

“当看到复杂的元素排列时，我们倾向于寻找一种可识别的模式。”

与Prägnanz一样，封闭寻求简单。封闭与我们在上面的Prägnanz图像中看到的相反，其中三个对象比一个更简单。通过闭合，我们将零件组合起来形成一个更简单的整体。我们的眼睛填补了缺失的信息，形成了完整的形象。

在上图左图中，您应该看到一个白色三角形，即使图像实际上由三个类似黑色Pac-Man的形状组成。在右图中，即使图形是几个随机形状，您也会看到一只熊猫。看到三角形和熊猫比试图理解各个部分更简单。

闭合可以被认为是胶粘保持元件在一起。这是关于寻找和发现模式的人类倾向。

关闭的关键是提供足够的信息，以便眼睛可以填补其余部分。如果缺少太多，元素将被视为单独的部分而不是整体。如果提供的信息太多，则无需关闭。

对称与秩序

“人们倾向于将物体视为围绕其中心形成的对称形状。”

对称性给了我们一种稳固和有序的感觉，这是我们倾向于寻求的。在混乱中强加秩序是我们的本性。这个原则使我们想要在构图上保持平衡，尽管我们的构图不需要完全对称以保持平衡。

在上图中，您应该看到三对开合括号。我们将在本文稍后介绍的接近原则可能暗示我们应该看到别的东西。这表明对称性优先于接近度。

由于我们的眼睛很快就会找到对称性和有序性，因此这些原则可用于快速有效地传达信息。

图/地面

“元素被视为图形（焦点中的元素）或地面（图形所在的背景）。”

图/地指正元素与负空间之间的关系。这个想法是，眼睛将整个人物与他们的背景分开，以便了解所看到的是什么。这是人们在查看任何作品时会做的第一件事。

图形/地面关系可以是稳定的，也可以是不稳定的，这取决于确定哪个是多么容易。关系不稳定的典型例子是上面的左图。您可以看到一个花瓶或两个面，具体取决于您是将黑色视为图形而白色视为地面，反之亦然。您可以轻松地在两种感知之间来回反弹，这表明了不稳定的关系。

关系越稳定，我们就能越好地引导观众专注于我们希望他们看到的内容。两个相关原则可以帮助我们：

• 面积。两个重叠对象中较小的一个被视为图。较大的被视为地面。您可以在上面的右图中看到这一点。无论颜色如何，较小的形状都是数字。

• 凸性。凹凸而非凹凸的图案往往被视为人物。

统一连接

“视觉上连接的元素被认为与没有连接的元素更相关。”

在下图中，线条连接两对元素。这种联系使我们认识到连接的元素以某种方式彼此相关。

在建议物体相关的所有原则中，均匀连通性是最强的。在上图中，即使我们看到两个正方形和两个圆形，我们也看到方形圆形对具有更强的相关性，因为它们在视觉上是相互连接的。

请注意，线条不需要触摸元素以便感知连接。

共同区域

“如果元素位于同一个封闭区域内，则元素被视为一个群体的一部分。”

显示元素之间连接的另一种方法是以某种方式将它们包含在内。机箱内的所有内容都被视为相关内容。封闭器外的所有东西都被视为独立的。下图中的圆圈都是相同的，但我们看到两个不同的组，每个机箱中的圆圈以某种方式相关。

显示公共区域的典型方法是在相关元素周围绘制一个框，就像我上面所做的那样。将元素放置在与其周围环境不同的背景颜色上也将起作用。

接近

“距离更近的物体被认为与相距更远的物体更相关。”

接近度与常见区域类似，但使用空间作为外壳。当元素彼此靠近时，它们被视为一个组的一部分而不是单个元素。当组中的元素彼此更接近而不是组外的任何元素时，尤其如此。

除了在空间中彼此靠近分组之外，对象不需要以任何其他方式相似，以便被视为具有邻近关系。

延续

“排列在一条直线或曲线上的元素被认为与不在线条或曲线上的元素更相关。”

它本能地遵循河流，路径或围栏线。一旦你沿着一个特定的方向观察或移动，你就会继续向那个方向看或向前移动，直到你看到一些重要的东西，或者你确定没有什么重要的东西可以看到。

对这个原则的另一种解释是，我们将继续超越其终点对形状的感知。在上图中，我们看到了一条直线和曲线交叉，而不是在一个点上相遇的四个不同的线和曲线段。

共同命运（同步）

“在相同方向上移动的元素被认为与静止或在不同方向上移动的元素更相关。”

无论元素的放置距离多远或者它们看起来有多么不同，如果它们被视为移动或一起变化，它们将被视为相关。

为了存在共同命运的原则，这些要素不需要移动。更多的是他们被视为拥有共同的目的地。例如，如果四个人聚集在一起，但观察到两个人向右移动，他们将被视为具有共同的命运。即使两个只寻找在同一个方向，他们会被视为具有共同的命运。

在上图中，箭头足以表明元素共同的命运。虽然没有必要进行移动或改变，但两者仍然是一个比箭头或朝向同一方向仅仅意味着运动的东西更强烈的共同命运。

排比

“彼此平行的元素被认为与不相互平行的元素相关。”

这个原则类似于上面的共同命运原则。线通常被解释为指向或朝某个方向移动。平行线被视为指向或沿相同方向移动，因此是相关的。

应该注意的是，为了感知平行度，线也可以是曲线或形状，但是后者的形状应该是线状的，以使它们看起来平行。

相似

“具有相似特征的元素被认为与不具备这些特征的元素更相关。”

任何数量的特征都可以是相似的：颜色，形状，大小，纹理等。当观看者看到这些相似的特征时，由于共享的特征，他们将元素视为相关的。

在下图中，由于颜色的相似性，红色圆圈被视为与其他红色圆圈相关，黑色圆圈与黑色圆圈相关。红色和黑色圆圈看起来彼此不同，即使它们都是圆圈。

在线找到相似性的一个显而易见的地方是链接的颜色。通常，内容中的链接将以相同的方式设置样式，通常为蓝色和带下划线。这使观众知道不同的文本片段是相关的。一旦发现一个链接，它就会传达其他链接。

联络点

“具有兴趣点，重点或差异的元素将捕捉并吸引观众的注意力。”

这个原则表明我们的注意力将集中在对比度上，以某种方式与其他元素不同。在下图中，您的眼睛应该被吸引到正方形。它与其他元素的形状和颜色不同。我还给它一个阴影，以进一步强调它。

焦点的原则可能是因为我们需要快速识别未知物以提醒我们潜在的危险。

相似性和焦点的原则是相互关联的，如果没有其他元素之间的相似性，就不能看到焦点。

过往的经验

“元素倾向于根据观察者过去的经验来感知。”

过去的经验可能是最薄弱的格式塔原则。结合任何其他原则，另一个原则将主导过去的经验原则。

过去的经历对于个人而言是独一无二的，因此很难对其如何被感知做出假设。但是，我们都有共同的经验。例如，过去的经验产生了很多颜色含义。

在我们的生活中看过红绿灯，我们希望红色意味着停止，绿色意味着去。由于三种常见颜色，您可能会将上图显示为侧面的交通信号灯。那是过去的工作经历。

我们的许多共同经历也倾向于文化。颜色再次提供示例。在一些国家，白人被视为纯洁无辜，黑人被视为邪恶和死亡。在其他国家，这些解释是相反的。当经验被共享时，可能会出现约定，但重要的是要记住，我们并非所有人都有相同的经历。

格式塔概述

格式塔原则对于理解很重要。他们坐在我们作为设计师视觉上所做的一切的基础上。它们描述了每个人如何在视觉上感知对象

上述原则应该相对容易理解。对于他们中的大多数人来说，定义和图像可能都是理解原理所需要的。同时，理解这些原理的基本思想与理解它们如何影响设计并不相同。

在接下来的几周里，我们将更多地关注格式塔影响设计的方式。我们将看到对称性如何帮助我们平衡构图以及如何结合焦点和相似性使我们能够在设计中创建视觉层次结构。

然而，在我们开始之前，我们将深入研究图形/地面关系并考虑我们放置元素的空间。这就是我将收集系列的地方。

河源做网站