格式塔设计原则

格式塔原理可以帮助我们理解视觉信息的处理方式，从整体开始，然后逐步发展到各个部分，尝试将一个混乱的整体分解成更简单的组成部分。

在本文中，我们细分了格式塔心理学，格式塔的七项设计原则，以及如何将其应用于您的工作。

格式塔心理学是什么？

格式塔心理学是一种研究人类感知的理论。它起源于20世纪初期的奥地利和德国，与原教旨主义和结构主义心理学的原理背道而驰。Max Wertheimer，WolfgangKöhler和Kurt Koffka是格式塔心理学的先驱。

格式塔Web设计的7条原则

关于视觉刺激的解释，我们一直在寻找最简单的方式来理解事物。格式塔尔的心理学家称其为：普兰涅茨法则。

人们将模棱两可或复杂的图像解释为最简单的形式。

因此，我们没有看到奥林匹克徽标的设计是一堆剪裁的圆圈和树叶形状，而是看到了互锁环的排列。

根据《普拉纳茨法则》，我们将奥林匹克标志视为环环相扣，而不是一堆毫无意义的复杂形状。

您可以尝试查看更复杂的排列，但是需要更多的精力-您的眼睛只想返回到更简单的样式。

有7种格式塔网页设计原则：

1. 接近原理

2. 封闭原理

3. 相似原理

4. 连续性原则

5. 感知原理

6. 组织原则

7.

对称原理

现在，您已经对格式塔的七项设计原则有了一个大致的了解，现在让我们更深入地研究每一项。

格式塔接近原理

格式塔接近原则是当我们看到彼此靠近的物体比彼此远离的物体更相关时。

在视觉上，距离定义了相关性。彼此靠近的对象被视为相关，而彼此相距遥远的对象则不相关。

例如，请在下面查看Google的新闻网站。“标题”一词显然与下面卡中的所有内容有关，即使该内容未包含在卡中也是如此。

邻近关系可帮助我们保持复杂的关系在此图像中的作用。

格式塔封闭原理

格式塔的闭合原理是，当我们看到复杂的布置时，我们会寻找一个单一的，可识别的模式。

我们的目光是通过修正来做到这一点的：填充缺失的数据以使我们看到的东西有意义。

您可以在MikeErickson为OneFund设计的这个设计中看到这一点。

您的大脑对闭合的追求从无到有创造了一个F。

在这里，我们没有得到形成字母F所需的所有视觉信息，但是我们推断出阴影产生的缺失信息以创建字母。我们这样做是因为图像只是一些看似随机的黑色块，下面带有某种类型。

从根本上讲，封闭是使所有最小的徽标起作用的原因。

格式塔相似性原理

格式塔相似性原则是当我们看到共享特征的元素比不共享特征的元素更相关时。

您已经看到了一些在操作上相似的示例。请查看Designer News的以下设计：

圆形图标可帮助我们了解两个“网站设计”帖子是相关的。

在这里，带有黄色背景的网页图标用于连接两个“网站设计”帖子，从而清楚地表明它们是同一类型的帖子。相同的颜色出现在右侧的“订阅”按钮中的事实可能使您认为它也以某种方式相关，但是不同的形状和文本有助于区分它。

格式塔连续性原则

格式塔连续性原则是当我们看到在线或曲线上的元素比不在在线或曲线上的元素更相关时。

我们知道这三个点由于连续而相关。

 

如您在上面的屏幕快照中所见，很明显，该粗糙环上的点彼此之间密切相关，至少与页面其他区域中的文本相比，彼此之间的相关性更高。

格式塔感知原理

格式塔的感知原理是人们本能地将物体视为图形（焦点）或地面（背景）。

当多个对象并置时，即使没有明显的视觉提示，我们也会自然地在它们之间创建一种空间关系感。这意味着即使是非常简单的对象排列也可以用来产生一种关系感，从而甚至产生一种叙事的暗示。

我们这样做的方法之一是比较两个（或多个）对象的大小，自动判断较小的对象与人物，较大的对象为地面。您可以在上图中看到–无论其颜色是什么，我们始终会看到较小的矩形作为图形，较大的作为背景。 

在解释这种关系时，我们也往往会非常有创造力，利用过去的经验通过叙述来传达视觉内容。

您可以在网站设计中利用此优势，将焦点从较大的元素转移到较小的元素。这是在全屏图像上方放置一个“按钮”组合来引起人们对按钮注意的原因之一。

Evernote使用图形/背景来吸引您注意 “注册”按钮。

您还可以使用诸如阴影之类的视觉提示来阐明不同元素之间的空间关系。

格式塔的组织原则

有五项原则属于组织范畴：统一的联系，共同区域，共同的命运，平行性和焦点。

统一的联系

当我们看到在视觉上连接的元素比没有连接的元素更相关时，就会发生统一的连接。

左边的形状似乎比右边的形状更相关-即使形状相同！

在上图中，左侧的大蓝色矩形和较小的蓝色圆圈似乎比右侧的形状更相关-尽管重复蓝色也暗示了一种联系。

请注意，连接元素（上方的小矩形）实际上不必触摸其他对象即可创建这种关联感。这就解释了为什么经常使用箭头将文本连接到图像，如下图所示。

箭头帮助我们连接复印件和图像，以更好地掌握图形的信息。

如果没有箭头，则可以将“在这里和这里看起来不错”与相应的图像连接起来，但是这需要观众做出一些推断，才能理解一个“这里”是指平板电脑，另一个是手机。箭头使文字和图像之间的连接更清晰，使整件事更容易理解。

共同区域

如果将元素视为组的一部分，如果它们被包含在同一区域中，则会发生公共区域。

您会看到网站一直在使用这种视觉技巧。实际上，随着Web设计同质性的提高，它已成为许多人设计的主要方式之一。但这并不能削弱该技术表明各种设计元素组之间的关系。

共同区域的原则有助于我们将标题，正文和图像连接到故事中。

在上图中，设计人员使用巨型卡片来帮助我们了解标题，图像和段落都是相关的。我们立即得到定义了下面图像和副本的主题，并且引入一组新的元素。

共同的命运（同步）

当我们看到在相同方向上移动的元素比在固定方向上移动或在不同方向上移动的元素相关性更高时，会发生共同的命运。

船通过共同的命运保持图像和文字的相关性。

您可以在《The Boat》中看到共同命运的原则，并以美丽的戏剧性表现出来。该图使用视差滚动来传达风暴的混乱折腾和故事讲述的前进动力。

随着所有这些动作的进行，上面屏幕中央的文本与其之间的两个前景图像有关。但是，随着船和浪潮向屏幕右侧移动，前景文本和图像之间的关系变得更加清晰-因为它们向上移动到屏幕上。

平行性

当我们认为并行元素比非并行元素更相关时，就会发生并行。

要看到实际的并行性，我想不出比意大利未来主义者FT Marinetti的经典视觉诗“自由中的假释”更好的例子。

平行文本行帮助我们理解字母的这种复杂缠结。

在混乱的文本中，Marinetti通过设置几行彼此平行的文本来提供相关性。这些平行线会给原本分散的文本带来张力，但也会通过暂时恢复动态构图的正常阅读体验而产生舒缓效果。

焦点

焦点是许多网页设计元素的关键。但是这种中心性使得有目的地应用强调和差异变得更加重要-毕竟，俗话说，“如果一切都得到强调，那就什么也没有。”

当然，可以通过多种方式来强调设计，包括：

A. 颜色变化，例如当CTA按钮或其他链接具有高对比度的颜色时

B. 大小发生戏剧性的变化，例如将标题设置为72pt

C. 印刷重点，例如粗体，斜体，全部大写等。

D. 使用空格，例如当您将焦点与其他元素完全隔离时

格式塔对称性原理

格式塔的对称性原理是人们将对称元素视为一个统一的群体的一部分。

人们倾向于在物体中寻找秩序也就不足为奇了，而对称性就是做到这一点的一种手段。这就是对称使我们如此满意的原因：这是一条简单，和谐的规则，传达了事物的秩序感和正确感。这可能就是为什么对称性在全世界的政府建筑物中如此受欢迎的原因。研究还表明，我们面部“美容”的标准在很大程度上取决于对称性。

我们对对称的热爱解释了设计的流行。

尽管对称的形状令人满意，但是由于所有的和谐，它们看起来也有些默守陈规。有时他们缺乏动感。这个问题为设计人员提供了机会：通过在不对称的设计中添加不平衡元素，可以引起人们对不平衡点的注意。

总结

以上就是格式塔设计的原理，希望大家可以理解并应用于web设计及移动端设计中，会对布局及排版产生深远影响。