格式塔原则在设计中的应用

网页设计师就像其他艺术家和工匠一样，把结构强加在环境上。我们把秩序和美强加在我们空白的电脑屏幕上。我们用不同的方式来做——首先创建一个有组织的布局，首先编写文本和内容，甚至基于一个图像，一个调色板，或一些视觉上触发你的设计概念，无论是日落还是宋朝的绘画。

无论你在哪里获得灵感通常，激发你艺术冲动的不只是特定元素;这是一个元素及其周围环境的总和。贪婪的,整体的概念-个体元素和整体元素都是重要的，无论是单独的还是一起-是理解完形主义如何影响我们的设计选择的必要条件。我们将讨论6原则与格式塔相关的，在设计的背景下，它们是:

• 接近
• 相似
• Pragnanz(图形-背景)
• 对称
• “共同的命运”
• 关闭

完形主义:感知的问题

我认为我们必须在设计中更多地使用心理技巧。我并不是说设计应该是完全科学或数学的，但我确实认为，当经过验证的理论与艺术相协调时，最好的设计就会出现。“格式塔”是一个相当古老的想法，起源于20世纪早期的哲学家基督教冯Ehrenfels和他同时代的精神病学家马克斯·沃什米等等。

在其最简单的,格式塔理论描述了大脑如何组织视觉数据。形式越清晰，设计越有效。让我们从一个例子开始。

这就是所谓的“主观三角”。当你看到下图时，你看到了什么?来源:博士。

Russ杜威。如果你说“一个汉堡”，那就去吃午饭，然后回来。如果你说“三个吃豆人模样的东西咬一个三角形”，那么你就正中目标了。

除了三角形在哪里?三角形是隐含的。它不存在，除了as空格．

但是看着它，告诉我三角形不在那里。是的，它是。他是完形主义的天才之一，库尔特Koffka他说过一句著名的话:“整体不是部分之和。”他的这句话经常被误译为更为人所熟悉的“整体大于部分之和”。先生。

考夫卡不喜欢这种翻译，他指出，在他的声明中，他指的是整体的存在独立从组成部分。著名的“狗的照片”，如下所示，说明了一个达尔马提亚狗嗅在一棵树下。当你眯着眼睛看它一会儿，你会看到这只狗从图片上不同的黑白斑点“聚集在一起”。

来源:何塞·佩德罗·戈麦斯．你不会说，“哦，我看到脚了，还有腿，还有头，还有树，好了，现在我看到了整个画面。”你看了它一会儿，然后说:“我看到了，一只斑点狗在树旁嗅着地面。”你从最初的“搞什么鬼?”，直接变成“啊，树下有一只斑点狗”——不要停下来列出项目，并从清单中推断你一定是在树附近嗅地面的狗。这是一张整体的概念-在担心细节之前，你掌握了事物的“整体”。

作为互动电讯教授Clay Shirky他说:“你不可能通过单独研究水的组成原子来理解水的所有性质。”因此，“整体大于部分之和”的错误表述是错误的。整个是没有更大的而不是各部分之和。我们已经见过这个概念很多次了，那些执行得很漂亮的网站都有一个明显的缺陷——糟糕的图形或排版选择，糟糕的间距使用，JavaScript的功能失调，CSS文件中的一个大括号使得整体效果不理想，有时甚至到了没有功能的地步。

整个是不同的比它各部分的总和更重要;不是大于，也不是小于，只是不同而已。我们也一次又一次地看到，用简单的设计选择构建的网站和谐而美丽地结合在一起。整体很重要。

整体的各个部分都很重要。由各个部分组成的整体是重要的，它是独立于其他两个部分的。在我开始像尤达大师那样说话之前，让我停下来。

接近

邻近性概念背后的概念是分组。当我们有一组物体时，我们倾向于把它们看成一组。

站点导航的邻近性

在网页设计中，分组的一个基本概念是导航链接，我们不仅要把导航链接放在一起，而且要在内部对它们进行分组，把指向相似页面的链接放在一起，将它们分类为子类别，等等。下面的例子来自太浩湖滑雪场。和大多数下拉菜单一样，它第一眼看上去相当简单，由一行7个主要导航链接项组成(屏幕截图中显示了4个)。

地点来源:高山草甸。将鼠标悬停在主导航链接项上可以显示更多的子导航链接。当用户将鼠标悬停在或单击一个主要导航链接项上，并看到它显示了一个下拉子导航菜单时，他将期待同样的事情发生在下一项。

它们看起来一样，而且聚在一起——它们的行为应该是一样的。如果我们完成了任务，他们会的。我知道这不是什么新鲜事，但这是我们经常用的东西，我们不需要知道离得近就能搞定。

但是现在我们可能知道了更多关于为什么这个设计模式如此有效的原因。

图像分组的接近度

2002年欧洲音乐奖网站展示了分组的另一种用法。MTV和欧洲音乐大奖的标志在左上角形成一个单独的小组，而赞助商的标志在右下角形成一个小组。来源:马德斯Soegaar。

留白有助于形成两组，就像在角落里的两个蓝色三角形一样。注意，三角形并不出现在“未占据”的角落中，因此它们强化了两个组的概念。还需要注意的是，这两个组织标识较大，并且位于左上角，因此相对于右下角的一堆较小标识，它们的重要性有所增加。

这两组标识不仅是为了设计的目的，也是为了语义的目的。

Web表单的接近性

下一个例子是来自Yahoo!的一个相当简单的Web表单。请注意表单是如何被分为三个部分的:个人信息、ID生成和备用ID提供。这种形式意味着第一组字段是最重要的，第三组是最不重要的。

它们按标题分组(它们自己按数字排序，并按颜色分开)，字段本身是垂直排列的，字段的左侧彼此对齐。所有这些都加强了按重要性排序的三组信息之间的关系。亲近度用来表示分组和重要性。

邻近的图标

邻近性的另一个方面是，人们倾向于认为排列在直线或曲线上的物品彼此之间是相关的。网页设计师斯图·尼科尔斯在2008年创造了一个漂亮的(尽管不是传统的)圆形菜单。来源:斯图尼科尔斯．因为所有八个图标都在一个圆圈上，因为浅灰色的圆圈组成了菜单的“背景”，这些图标被认为是一个相似的组的一部分。

它还有助于图标的主题相似—具有相似的颜色、大小和样式。在Nicholls的实时菜单中，鼠标悬停在一个图标上，会在内圈中弹出菜单描述。你的分组正确吗?

你是否用亲近来暗示重要性和关系?

相似

我们在上面已经看到了这个例子——一个整体的部分(整体)一起工作以实现一个特定的目标的例子。如果事物看起来相似，我们就会感知地将它们归类。这也是为什么这么多的设计师喜欢使用蓝色的带下划线的链接，或者至少让所有的链接看起来不同，彼此相同。

相似的外观就等于相似的功能。在Opera浏览器旧的Preferences对话框窗口的截图中，菜单项按颜色分组。来源:马德斯Soegaard。

前四个菜单项的灰色背景将它们分组在一起，并将它们与其他菜单项区分开来。它们还由每组第一项旁边的图标突出显示。

无意的不同

就像生活中的所有事情一样，错误地应用相似性原则会导致不必要的后果。2008年美国总统大选期间，《人物》杂志刊登了一张麦凯恩一家的封面照片，中间是当时的总统候选人约翰·麦凯恩。来源:梅丽莎·麦克尤恩．

麦凯恩夫妇的养女布里吉特是一名来自孟加拉国的年轻女子，她显然被“推到了角落里”，占据了杂志封面的左下角。这张照片结合封面文字的顶部一行的效果——如果延伸到左边，本质上就是把布里吉特从图片中“剪掉”了——这张照片让一些观察者认为麦凯恩(或者更确切地说，麦凯恩竞选团队)试图将布里吉特与其他同质得多的家庭群体“隔离”。一位名叫梅丽莎·麦克尤恩的博主指出在她参观的商店里，商店里陈列的杂志塑料支架挡住了布丽奇特的视线。

说实话，我不是约翰·麦凯恩的粉丝，但我没有理由相信他除了爱和支持他的女儿之外还会做其他事情。我敢肯定，麦凯恩和他的家人(他们在摄像机的另一边，直到太晚才看到这个安排的效果)没有意识到这个安排的效果。但由于摄影师、艺术指导和参与封面设计的各种编辑选择的构图，这张照片让观众觉得麦凯恩夫妇试图隐藏他们家庭中唯一一个长得不像的成员，这让约翰·麦凯恩、布里吉特·麦凯恩和其他家庭成员莫名其妙地感到悲伤。

麦克尤恩在谈到《人物》杂志时写道:“他们是否有意贬低布里吉特的封面形象，或者只是没有考虑到这样做会传递出什么信息，这并不重要。不管怎样，都是一团糟。”而对相似性的理解本可以避免这种混乱。在你的设计中，有哪些元素因为滥用相似性原则而被你无意中过度或低估了?

Pragnanz(图形-背景)

我们对图形-背景关系的感知使我们能够根据每个物体与其他物体的关系来组织我们所看到的东西。——安迪·拉特里奇

的“图形-背景”的原则与背景描绘的物体有关。这就是为什么在1998年的某个时候，设计大师们开始告诉我们停止使用繁复的平铺图形作为背景的原因——因为它们把前景的物体移开了。

这是设计101。前景物体应该比背景更突出。还有更多的图形背景原则，而不仅仅是使用适当的不显眼的背景。人物(前景物体)和背景(背景)之间的对比和视觉张力使图形和标识变得有趣。

“图形-背景”原则的例子

以下图所示的“挪威之旅”的旧标志为例。来源:马德斯Soegaard。设计师利用前景和背景，创造了三个不规则形状的物体(海浪、树枝和鸟肚子里的一个肿块——好吧，我不会发誓最后一个)，结合起来形成一个人的轮廓，他或她的手臂张开。

看不出吗?想想上面画的三角形，再看一遍。如果你仍然看不到它，那么你一定和我一样，在看那些“魔眼”插图时遇到了同样的麻烦;这些东西都是关于图形背景的，就像许多视觉错觉一样。

或者你可以在下面找到非洲儿童希望计划的标志上的两个人。提示:一个孩子正在抬头看一个女人，可能是他的母亲。(这就是为什么纳米比亚似乎在其西部海岸线上种植了一些房地产。)Linux用户会很快认出旧的Gnome桌面环境标志。

这是一个G，没错，但这也是一个脚印。麦金塔的粉丝们都知道，麦金塔的logo展示的不仅仅是一张开心的脸，而是一张开心的侧面脸，大概是在开心地看着他们的电脑屏幕。另一方面，我们可以看到图形背景原则在这里是如何被严重违反的驯马的网站．

通常我不会举网站出错的例子，但自从文森特·弗兰德斯和“糟糕的网页”一段时间后揭露了这个网站尽管如此，业主还是保留了这个有问题的设计，我在这里表现得克制一点也不感到内疚。对于那些在点击链接时犹豫不决的人来说，网站设计者使用了一个闪电击中的动画背景图像，覆盖了整个页面。嘿!

这并不需要复杂的网页设计师要知道像这样一个突兀的，视觉上有侵略性的图像，因为你的背景远离了前景对象。要么这些物体消失在背景中——这几乎违背了前景中有任何东西的目的——要么前景物体必须“大声叫喊”，以便在背景“噪音”中被“听到”，通常是通过非常大的和明亮的颜色来克服背景主导设计的企图。在为初高中学生教授网页设计和构建的两年中，这是我遇到的最大的挑战;“戒掉”他们使用极其“响亮”和突兀的背景设计。

他们中的许多人会喜欢那个闪电，几乎就像他们喜欢那些“背景”图像一样和歌Flocka火焰．我不骗你。我责怪MySpace。

拉特里奇指出，带有渐变或其他非纯色背景的圆形按钮对于将它们作为行动的召唤非常重要。这是Jacob Gube的光滑干净的文字-动作按钮作为一个例子。圆角、边框、渐变配色方案以及由此产生的3D“深度”错觉将按钮与周围环境区分开来，使用户将其视为背景之外的东西，并使其容易识别为可以激活的东西。

去掉圆角、边框，尤其是渐变颜色，按钮就失去了一些让它从背景中脱颖而出的东西

我最近看到的一些最具视觉刺激的设计实际上模糊了图形和地面元素之间的界限，甚至将两者交织在一起。这是理解规则复杂性的经典例子;基本上，一旦你完全理解了规则，你就有了打破它的许可。——in.house.media

你的前景对象与背景一起工作，创造一个可爱的，和谐的整体吗?

你的前景是否在争夺用户的注意力?背景作为一个美学和功能上可行的背景来包含和衬托你的前景元素吗?

对称

基本上，对称原理告诉我们，当我们看某些物体时，我们看到的是围绕中心形成的对称形状。你不需要进入高级设计领域就能知道人类喜欢对称，并且觉得它很有美感。当你的设计不对称时，你知道你最好有一个让你的设计“歪斜”的好理由。对称性存在于自然界，数学中，分子中，无处不在。

通常，对于普通观众来说，对称意味着一个物体是由两个互补的部分组成的。设计师有时没有意识到的是，当观众看到两个不相关的对称元素时，他们会下意识地将它们整合成一个连贯的整体。芬兰的CSC(美国科学技术中心)有一个非常简单的标志，说明了设计中对称的概念。

虽然logo采用了两个独立的元素，指向不同的方向，拥有不同的颜色，但由于对称，商标很容易被视为一个整体。不像大多数故意在他们的设计美学中使用对称的图形和设计(这几乎是他们的全部)，即使是最肮脏和不平衡的网站也意识到这一原则;如果只是最低限度地使用它来对比他们作品中所有的不对称)，这一个几乎完美地反映了它的两个元素。唯一真正不同的是使用的颜色。

大多数设计师至少会使用少量的不对称来赋予他们的设计一些特色。一些使用更多的，以达到戏剧和美丽的效果。

百事可乐著名的2000年代中期标志

百事可乐的旧标志在美国已经不再使用，它是一个近乎完美对称的绝佳例子。除了艺术上“随机”的冰晶，该标志在水平和垂直方向上都是完美对称的，一条波浪形的“轴线”将上下两半分开。即使是3D喷枪的“光影”效果也几乎是完美对称的，变化刚好给图像一个逼真的深度外观。

“冰”和喷枪是不对称的“流行”如何活跃了一个很大程度上对称的设计的绝佳例子。

百事可乐的不对称设计

百事可乐在2008年重新设计了它的标志，使用了旧标志的变体(本身是更早的一个变体)，一些人觉得与早期产品的对称性偏离太大，倾斜的，可变宽度轴和红色区域远远大于蓝色。你觉得新的设计怎么样?

对称=成功?

bizcover在2007年做了一篇关于10个对称的(并且成功的)公司标志的专题。这篇文章提出了一个问题，“所有的东西都是对称的，也许这与它们的有效性有关?”你觉得呢?

勒索信设计中的不对称

一个更加极端的不对称例子是经典的“勒索信”，传统上是由从杂志上剪下的信件，粘贴在一张纸上，在雷雨中在不祥的背景音乐中交给受害者。这整件事代表着混乱和一种可能，犯罪者并不关心把格特鲁德阿姨安全送回家。由赎金Note生成器生成的图像。

注意到这些字母有对称的地方吗?大多数人都能很好地排成一行，这对于没有平衡感和形态感的疯狂绑匪来说是不寻常的。我认为Ransom Note Generator的工作人员让他们的内部设计师在他们的工作中强加了一些不必要的对称。

勒索信之所以被认为“可怕”，部分原因在于它随机、混乱的本质;不对称意味着行动，字母极度不对称的性质意味着行动升级为暴力。在你的网站上对称和不对称的平衡是怎样的?

“共同的命运”

我想我在电视上看太多犯罪节目了，因为我第一次看到这个概念的时候，一个画面突然出现在我的脑海里老练的纽约警察他用拳头重重地砸在桌子上，喊道:“如果你不告发你哥哥，你就会遭受和他一样的命运!这就是你想要的吗，你们两个在阿提卡蹲20年?共同的命运?!?”如果这个想法让你感到不安，那么你可能会和我看同样的节目，你不应该担心，你不会因为使用“共同命运”的原则而坐牢。“共同命运”的概念很简单:我们感知到物体或物体以相同的方向移动(或看起来在移动)，而不是静止或看起来在不同方向移动的元素。

这些相关的物品有着共同的“命运”。下面照片中的汽车形成了两股“流”，左边的“流”从上到下移动(本质上是“朝向”观众)，右边的“流”从下到上移动，“远离”观众。来源:图像时虽然这是一个完全静态的图像，但运动是隐含的，关系立即形成。在我们的设计中，相互“移动”的元素相互关联，而抵制共同运动或朝着不同方向移动的元素则没有关联。

这是人类一种强大而原始的感觉线索。只要想想当一辆车沿着与其他所有人相反的方向行驶时，司机的反应就知道了。惊慌和混乱接踵而至。

下拉菜单中的共同命运

下拉和滑动菜单，如从红砖健康如下所示——尤其是那些“滑动”而不是仅仅在眨眼间出现的——诉诸于“共同命运”原则。这个主菜单项有一个滑出子菜单，其他菜单项也是如此。因此，这两件事在我们心中是相关的。

工具提示中的共同命运

工具提示也形成了重要的信息关系。如果你的工具提示总是包含次要但相关的信息，那么网站用户很快就会下意识地将光标移动/悬停与新信息之间的关系组合在一起。正如拉特利奇所指出的，“ointer-plus—所有信息一起移动是一个有用的联想。”

共同命运的反例

这不仅适用于移动元素，也适用于设计的方向。在我早期的时候，我设计了一个网站，两个背景颜色渐变在不经意间“打架”。头部渐变从亮到暗，从左到右;下面的导航条从亮到暗，从上到下。

他们各自工作得很好，但在一起就会发生冲突。头部梯度的水平“移动”与底部梯度的垂直“移动”不太协调。两种梯度的“运动”相互对抗。

影响违反风水和“共同的命运”都有。你的作品中是否存在相互冲突的设计元素?

关闭

关闭意味着我们“关闭”本身不完整的对象;不仅在我们的感知中完成图形，而且感知图形具有额外的美学设计元素;我们要找一个简单，可识别的图案。看看IBM的旧标志。你可以认出字母I, B和M，没问题。

但它们根本不是字母;整件事是一组明亮的蓝色水平线排列，创造出一组字母的感觉。它是否让你想起了在70年代和80年代非常流行的旧ASCII艺术?确实我。

这是1975年的一幅西班牙征服者的画像，用穿孔卡片制作而成，并在1978年的多米尼加报纸上重印:资料来源:维基百科。我最喜欢的一个例子是在Paul Thagard的书的封面上画的，叫做思想和行动的一致性．它是一个漂亮的三维立方体，隐藏在浅红色的“聚光灯”中。

实际上，它们是24个不同的红色形状，在较深的红色背景上。我们的感知填补了空白。另一个例子出现在20世纪90年代末的报纸上火星上的“面子”激起了公众的想象。

有些人想到的是巨石2001太空漫游，想知道外星人是否给我们留下了一些独眼神器供我们使用，如果我们能找到一种方法到达它，而其他人则在考虑世界大战并在掩体中储存了弹药和mre。来源:维基百科．仔细一看，那张“脸”只是一种地貌。

看来我们根本不需要那些mre。

拉在一起

本文只是简要介绍完形原则在设计中的应用。这个话题的内容远比这里所能讨论的多得多。但是，请记住，我们在文章的开头介绍了“整体”的概念。

记住这个概念，回想一下我们描述的6条原则。他们没有一个分开站立的。每一个都采用了其他的原则，并且独立存在。例如，尼科尔斯的圆形菜单不仅依赖于邻近性，也依赖于相似性和对称性定律。

例如，如果图标之间差别太大，菜单就会失去很多功能和美感。与“不存在的三角形”一样——它既依赖于图形背景，也依赖于闭合的原则。本文介绍的红砖健康菜单不仅在下拉菜单中采用了“共同命运”的原则，而且在颜色选择上也采用了相似原则。

这些原则没有一个是单独存在的，它们都是相互“总体”作用的。这些概念相互配合，以实现整体的功能、优雅和审美诉求。世界上一些最好的设计师对格式塔原则一无所知。

他们凭直觉使用它们;当设计看起来和感觉都不错的时候，通常会融入格式塔原则，不管设计师是否知道术语。格式塔原则不是人们捏造出来用于设计的人工构造;它们试图描述和描述我们自然感知事物的方式。有争议的是，至少在某种意义上，“设计天赋”是一种天生的——甚至可能是无意识的——理解人类感知如何工作的能力，以及如何通过吸引它来为网站、绘画或婚纱设计出艺术美感和功能高效的设计。

不管你是出于本能还是深思熟虑使用这些原则;重要的是它们如何帮助你做出更好的设计。这些都是客户在寻找的东西选择一个网页设计机构，他们是否是大学一个在线汽车配件零售商，所以了解他们很重要。

来源和进一步阅读

• 格式塔原则:你的设计如何被感知?
• 形式知觉的格式塔原则
• 知觉格式塔原则
• 设计原则

相关内容

• 浅谈网页设计中的色彩理论
• 网页设计中的还原论
• 网页设计的演变
• 相关类别：网页设计