值得庆幸的是，这里有一些简单而有力的指导方针，可以用来创建和破坏统一的设计。这要感谢完形心理学家。

如果你不熟悉，理解一下会有帮助完形意思是:

一种物理、生物或心理现象的结构、形态或模式，以致构成一个功能单元，其特性不能由各部分的总和推导出来

(听起来有点像网站，对吧?)

基本上，格式塔心理学家正在寻找一种方法来解释人类如何在一个混乱的世界中获得有意义(和/或错觉)的感知。通过这些努力，他们确定了4个描述人类如何解读视觉数据的核心概念。

这4条基本原则可以扩展为13条关于视觉体验的经验法则，我们可以牢记这些原则来创造更好的设计。

格式塔理论的四个核心原则

1.出现

涌现原理表明，在我们开始识别其部分之前，我们试图弄清整体的意义。

当我们看到一个物体时，我们首先试着了解它的轮廓，然后将其轮廓与我们之前见过的其他物体进行比较。如果我们找到一个匹配的，我们假设我们知道它是什么，然后我们可能开始分析它的组成部分。如果我们不找到一个匹配，我们就可以开始分析各个部分，以追求整体。

突现对设计意味着什么?

我不想打断你，但涌现性原则建议我们应该坚持熟悉的、容易识别的模式。

所以，尽管你可能想为你的下一个表单设计疯狂，但最好还是坚持人们以前见过的样式。与更“有创意”的设计相比，清晰的框架图和标签框以及结尾的“发送”按钮会更快地被识别为表单。

但举起。这并不意味着你应该停止阅读——或者停止创造性设计。

这就是它变得复杂的地方。突现表明了视觉解读的层次:我们从整体开始，然后放大到部分。这意味着你可以在单个表单元素上要有创意，只要整个东西能立即被识别出来作为一个形式．

涌现为极简主义提供了一个令人信服的论据:简单的形式比复杂的形式更容易识别。所以保持简单，朋友们。

2.具体化

物化的原理表明，我们的大脑填补视觉信息的空白，以识别物体。这意味着你不必看到某物的整体来理解它是什么，尽管整个物体越简单或被更广泛地识别，就越容易通过部分来识别它。

这意味着你应该可以毫不费力地识别这个符号的含义:

那么具体化对设计意味着什么呢?

具体化意味着您不必包含对象的所有内容以使其具有可识别性。你可以使用这个原则来节省版面，在旋转木马中提示下一张幻灯片的内容，使你的“即将到来”的页面更清晰，更吸引人，等等。

3.多稳定性

这一点让你在寝室里有点夜深，但我们继续:多重稳定性解释了为什么在著名的光学错觉中，你只能看到脸或花瓶，但不能同时看到两者。

你看，人类的大脑并不挖掘不确定性，所以它专注于看待事物的一种方式，而排除了其他可能的选择。

迷人的,对吧?这让你想到了政治。让我们继续。

多稳定性对设计意味着什么?

多重稳定性很难在设计中有效地应用，因为它往往导致混乱多于理解(当然，这是我们通常的设计目标)。

但是，正如多年来许多强大的logo所证明的那样，你可以使用多重稳定性来做出真正令人难忘和惊喜的设计，比如联邦快递的logo。一旦你看到了这个箭头(在E和X之间)，你就很难忘记它。

4.不变性

不变性原则表明我们非常善于识别相似点和不同点。这意味着要从一群相似的物体中脱颖而出是很容易的。

记得那位穿红衣服的女士吗矩阵？那个穿红夹克的小女孩呢辛德勒的名单？这两幅画如此引人注目——并一直令人难忘——因为它们明亮的色彩几乎在我们看到的黑白背景中尖叫。它标志着它们是有意义的，值得我们关注。

不变性对设计意味着什么?

在设计领域中，当在同质元素组中引入一个不同的元素时，不变性可以产生强大的结果。

在产品的定价页面上，您经常会看到这种方法的应用，其中一列通过颜色或尺寸从价目表的其他部分中脱颖而出。欧宝体育在线首页

Echo的定价页面利用不变性使“自定义”选项脱颖而出，并以一种截然不同的颜色吸引眼球。虽然其他列都使用了不同的蓝色阴影，但它们足够相似，在定制列的明亮色调面前消失。

你也会在一些网站的主导航系统中看到这一点，设计师用更明亮的颜色或不同的设计让一个链接从人群中脱颖而出。

这让用户知道网站希望你采取什么行动，明确用户体验。在MailChimp的示例中，两个主要cta中相同的设计和语言也清楚地表明，任何一个链接都将将您带到相同的地方。

感觉自己已经是核心原则方面的专家了吗?太棒了。让我们再深入一点。

将格式塔原则应用于网页设计

一般来说，格式塔原则帮助我们理解我们如何通过以下两种方式处理视觉信息:

1. 先从整体开始，再从部分开始，或者
2. 试图将一个混乱的整体分解成简单的组成部分

换句话说，当我们对视觉刺激进行解读时，我们总是在寻找理解事物的最简单的方法。格式塔心理学家称之为

Prägnanz法则(又名“好数字”或“简单法则”)

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

所以，我们看到的不是一堆裁剪的圆和叶子形状的奥运标志设计，而是环环相扣的排列。

请注意，根据多稳定性原则，您可以这样做试一试看到更复杂的排列，但这需要更多的努力-你的眼睛只想回到更简单的模式。

这对你的设计意味着什么?这意味着你可以创造简单形状的复杂排列，只要它们组合在一起形成一个容易理解的整体。这基本上就是乔治·修拉(Georges Seurat)在他的点彩派绘画中所做的:

这就很好地引出了闭合原理。

关闭

当我们看到一个复杂的排列时，我们会寻找一个单一的、可识别的模式。

我们总是试图给毫无意义的混乱带来意义和秩序(我们不是在谈论你的上一段感情)，我们的眼睛通过物化来做到这一点:填补缺失的数据，让我们看到的东西有意义。

你可以在Mike Erickson为OneFund设计的这个(不幸被拒绝)中看到这一点，Logomotive．(更不用说你看到的绝大多数简约的logo设计了。)

在这里，我们没有得到形成字母F所需的所有视觉信息，但我们推断阴影提供的缺失信息来创建字母。我们这样做是因为，否则，图像只是几个看起来随机的黑色块下面有一些类型。

闭包基本上是使所有最小的logo工作的东西。

对称和秩序

人们倾向于在物体中寻找秩序，这应该是不足为奇的，而对称就是这样做的一种方式。这就是为什么对称让我们如此满意:它是一个简单、和谐的规则，传达了事物的秩序感和正义感。

这可能就是为什么对称在世界各地的政府建筑中如此流行的原因。以及为什么三柱设计风靡一时。研究还表明，我们对面部“美”的标准很大程度上取决于对称。

虽然对称的形状令人满意，但由于所有的和谐，它们也可能显得有点静态或陈旧。有时它们缺乏运动感或活力。

这个问题给设计师提供了一个机会:通过在对称设计中添加不平衡元素，你可以将注意力吸引到不平衡点上。也许是你呼吁行动的最佳地点，不是吗?

图/地面

人们看到的物体不是图形(焦点)就是地面(背景)。

当几个物体并置时，即使没有明显的视觉线索，我们也会自然地在它们之间创造出一种空间关系的感觉。这意味着即使是非常简单的物品排列也可以用来创造一种关系感，因此，甚至是一种叙事的暗示。

其中一种方法是通过比较两个(或多个)物体的大小，自动判断较小的物体是图形，较大的物体是地面。你可以在上面的图片中看到——无论它的颜色是什么，我们总是把较小的矩形作为图形，较大的矩形作为背景。

我们也倾向于创造性地解释这种关系，利用过去的经验将视觉内容与叙述内容融合在一起。举个例子，在上面的图片中，我忍不住把小矩形看成一个人，向外看着逐渐变暗的天空。

你可以在你的网站设计中利用这一点，把注意力从较大的元素转移到较小的元素上。这就是为什么在完整的图像上放置一个复制+按钮组合会吸引人们对按钮的注意。

你也可以使用像阴影这样的视觉线索来明确不同元素之间的空间关系。这就是为什么你会在谷歌的材料设计指南中发现这么多阴影。

统一的连通性

我们认为视觉上有联系的元素比没有联系的元素更相关。

在上面的图像中，左边的蓝色大矩形和左边的蓝色小圆似乎比右边的形状更相关——尽管蓝色的重复也表明了它们之间的联系。

注意，连接元素(上面的小矩形)并不需要实际接触其他对象来创建这种关系。这就解释了为什么箭头经常被用来连接文本和图像，就像你在下面的图片中看到的那样。

如果没有箭头，我们便能够将“这里和这里看起来都不错”与相应的图像联系起来，但这便需要观众做出一些推断去理解“这里”指的是平板电脑，而另一个则是手机。箭头使拷贝和图像之间的联系更清晰，使整个东西更容易理解。

常见的地区

如果元素被封闭在同一区域内，则将它们视为组的一部分。

你可以看到网站一直在使用这种视觉技巧。事实上，它已经成为许多人谴责的日益同质化的网页设计的标志之一。但这并不会削弱该技术在明确不同设计元素组之间关系方面的力量。

在上面的截图(来自短期项目谷歌Now)中，设计师使用了巨大的卡片来帮助我们理解标题、图像和段落都是相关的。我们马上就会明白，“在正确的时间获得正确的信息”定义了这幅图片和下面这幅图片的主题而且“24小时援助”将引入一组新的元素。

接近

我们认为彼此靠近的物体比相距遥远的物体更有关联。

视觉上，距离定义了亲近感。距离较近的物体被视为相关的，而距离较远的物体则不是。

例如，看看下面谷歌's Now网站上的另一个例子。文本“Spotify”显然与下面卡片中的所有内容相关——尽管它没有被包含在卡片中——因为它比文本“OpenTable”更接近卡片。

您还可以结合邻近性和公共区域来创建更复杂的效果。查看如何进入杂志型图书这是Tim Noah为创意机构设计的免费Webflow模板。

在这里，Tim使用邻近性和共同区域来明确“我们的工作”和“发现我们为他人做了什么”是相关的。同样的道理也适用于“Strategy”单位，body copy和下图。

延续

我们认为在直线或曲线上的元素比不在直线或曲线上的元素更相关。

正如斯巴鲁的零垃圾填埋场所说明的那样，线条和曲线也帮助我们理解关系。正如你在上面的截图中所看到的，很明显，粗糙环上的点彼此之间是密切相关的——至少，它们与页面其他区域的文本之间的关系更密切。

共同的命运(同步)

我们认为向同一方向移动的元素比静止或向不同方向移动的元素更相关。

你可以看到共同命运的原则发挥了美丽的戏剧这艘船，它使用视差滚动来传达风暴的混乱和故事的前进势头。

随着所有这些运动的进行，你可能会忽略一个事实，即屏幕中央的文本与它位于中间的两个前景图像相关。但是，当船只和暴风雨掀起的海浪一般都移动到屏幕的右侧时，前景文字和图像之间的关系就变得更清晰了——因为它们移动到屏幕的上方。(不过，设计师通过让文本和图像在滚动时发生倾斜和移动，增加了戏剧性。)

并行性

我们认为平行元素比非平行元素更相关。

要了解这种平行性的作用，我想不出比意大利未来主义者F.T.马里内蒂的经典视觉诗《自由的语言》(“自由的语言”或“自由的语言”)更好的例子了。

在这杂乱无章的文本中，马里内蒂通过设置几行相互平行的字体，偶尔提供了(相对)清晰和关联的喘息。这些平行线给原本分散的文本带来了紧张感，但同时也通过暂时恢复动态构图的正常阅读体验来缓解压力。

相似

我们认为具有相同特征的元素比不具有相同特征的元素更具关联性。

您已经看到了一些相似的例子(请参阅统一连接部分，以及MailChimp的设计中的不变性部分)。但要放大一点，看看这张来自《设计师新闻》的设计:

在这里，黄色背景的网页图标用来连接两个网站设计帖子，表明它们是同一类型的帖子。右边的订阅按钮出现了相同的颜色，这可能会让你认为它们也有某种联系，但不同的形状和文本有助于区分它们。

焦点

兴趣点、重点或不同点吸引并保持我们的注意力。

焦点是网页设计中如此多元素的关键，以至于把它指出来几乎感觉很奇怪。但是，这种中心地位使得明智地、有目的地运用强调和区别变得更加重要——毕竟，正如俗话所说，“如果一切都被强调了，那么就什么都不强调了。”

当然，在设计中创造强调的方法有很多种，包括:

• 引人注目的颜色变化例如当CTA按钮或其他链接被赋予强烈对比的颜色时
• 戏剧性的大小变化，例如将英雄标题设置为72pt
• 排版的强调，如粗体、斜体、全大写等。
• 戏剧性的空白就像你把一个焦点与其他元素完全隔离

还有更多。

过去的经验

我们根据过去的经历来感知事物。

好吧，这是一个非常棘手的问题。与我们在此讨论的所有其他视觉设计原则不同的是，我们无法控制一个人过去的经历。

你能做的最好的事情就是吸引平均过去的经历吧。例如，大多数人把冰淇淋与各种温暖、模糊的感觉联系在一起——更不用说它的美味带来的基本乐趣了。一个冰淇淋蛋筒的形象可能会勾起人们对童年无尽夏日的怀旧之情，或者在家庭晚餐后享用传统冰淇淋碗带来的一种团聚感。

或者，一个人可能患有乳糖不耐症。让冰淇淋的形象永远带着不愉快的联想。

你还必须记住你的受众的变化。如果你为国际受众设计网站或产品——甚至是不同年龄的受欧宝体育在线首页众——你需要记住，某些图像或设计元素的情感和体验共鸣可能在不同人群中有所不同。