对格式塔原则的认知 1 —— 图底关系

作者 ：Andy Rutledge  (2008/12/9) 

翻译 ：醉小帅 （2015/8/29）

这次的作品希望大家多多点赞！！！以后我还会奉上更多的作品分享给大家！

      制作的几乎所有图形设计作品都能够在我们所知道的格式塔原则的认知中找到一些列的方式和原则。在一个设计师的图形处理中没有比全方面的掌握这些原则更有效的方法了。由此类推，对于那些没有很好的掌握这些原则的人，当他们面对一一个个设计项目和去设计画廊网站浏览的时候就会理解不透彻，因为只能做出过时的陈腐的主题和布局。但是客户相比我们（对设计）模糊的理解，他们值得更好的对待。如果你没有准备好，那就得下定决心学习“对格式塔原则的认知”吧！

      为什么我们要学习这个原则呢？冒着像听深夜电视广告的风险，对格式塔原则的认知其实能够帮助我们从设计中提取出我们脑海里猜想的那些东西。例如，一旦网页内容被定义好了，那么沟通目的也就清楚了。格式塔原则使得怎样将元素分配到页面上显得清晰，什么时候以及为什么要使用线条描绘，背景阴影，一定的倾斜角度，或则什么时候以及为什么要在一个框栏里将元素进行编组（或则不编组）。一旦你理解了格式塔原则，设计就将会变得更加简单，而你所产生的想法得到的效果将会好得多。

     （格式塔原则）的名字使得它听起来稍显复杂，但是其实格式塔原则并不比你摇头晃脑难多少！事实上，这些原则中的每一条都能被解释成一条简短的句子。但是通常情况下，它们都被在某些方面都被定义成使得大多数人会愣住（看到这些原则的时候，因为不理解）。好了，在这儿，我想要通过网页的实际例子来支持我以一种直接关联到网页设计师做什么的方式来将它们呈现给你。这篇文章是“更好的解释格式塔原则”的一系列相关文章的第一篇！

       首先，在这儿有一些对于格式塔原则的认知的定义：

图底关系

      元素被理解成不是图形（视线聚焦的明显的元素）就是背景（除了中心图形以外的背景或则图片）。

普雷格郎茨原则

      人倾向于将模糊的、复杂的图片清晰的解释成简单的和完整的图片。（描述了离散的感觉输入被知觉为整体的方式和原因）

      1923年，韦特海默发表了一篇关于知觉组织的论文，提出了关于知觉组织的“普雷格郎茨原则”（prinCiple of Prägnanz），描述了离散的感觉输入被知觉为整体的方式和原因。他描述的这个原则包括几条子原则：（1）相似原则，即感觉域中的一部分和其他部分的属性相似；（2）接近原则，即感觉域中的一部分和其他部分接近；（3）闭合原则，即感觉域中的一部分构成闭合的形状；（4）共同命运原则，即感觉域中的一部分和其他部分变化的方式相同，比如同时运动。这些原则在当代的心理学教科书中作为认知神经科学和感觉心理生理学的活跃话题依然在被探讨。

一致的连通性

具有统一的视觉特征的元素被理解为比那些具有离散的视觉特征的元素更具有相关性。

良好的延续性

排成一条直线或者曲线的元素比那些没有排成直线或者曲线的元素有更好的相关性。

封闭性

当人看着一个孤立的元素以复杂的方式排列的时候，第一感觉就是这是一个单独的，可辨识的图案。

亲密性

彼此相互靠近的元素比那些彼此隔得很远的元素被认为关联性更强。

相似性

相似的元素被认为比那些不相似的元素更具关联性。

…

你会注意到这些原则中的大多数都似乎不是彼此有变化就是彼此联系紧密。对此，有更好的解释是，因为所有的这些原则都依赖于关系。人的认知受关系主导；事物是怎样相似的和不相似的，他们是怎样彼此对立或者混杂的，事物是怎样排列来展示层次的和受上下文内容影响的。对于设计师而言，最后的句子已经做出了相当棒的总结，那就是在工作中，你通过做什么来使得你的设计漂亮以及在设计中可以掌控自己的设计。让我们都加入进来吧!来学学怎样让格式塔原则在你的工作中服务于你的设计。

图底关系

       元素被理解成不是图形（视线聚焦的明显的元素）就是背景（除了中心图形以外的背景或则图片）。

它为什么重要？

       我首先讲到的是这个原则那是因为很有可能这是（格式塔原则）最为重要的一个原则。当人们直接注视页面的时候，确定图底关系也是人们要做的第一件事。新的元素进入视线，我们的大脑就需要有一个理解的基础。我们就不得不确定哪一个元素是图（马上要求关注和注意力）和哪一个元素是底（现在正确并不是那么重要，但是确实提供了背景）。

       这个过程对人来说是至关重要的，并且在一定程度上能避免一些不必要的麻烦！（我仅仅是走在叶子和杂草上或是我即将遇到一条响尾蛇呢？）——这句话我的理解是我的理解是正确的呢？还是有了误解？当然，这也能够确保我们更加优化我们的认知，因此我们并不是突然地遇到一些元素或者忽视一些紧邻的东西和重要性。我们对于格式塔原则的认知赋予我们通过每一个彼此联系的目标来组织我们看到的事物的能力。这个简短而亲切的说法是 ：它能够让我们确定我们被认为看到了什么和我们可能忽视了什么。

`      在大多数其情况下，我们立刻做这些根本没有任何效果，就像我们经常在相似的环境看着相似的东西。但是当我们试着去看一些不相似的东西的时候，特别是当它是一个设计过的网页的时候，图底关系的线索决定着我们的经验是否是有效的。这个的 成功是印证设计师的管理能力的。

特殊的 ：

       在一张网页设计的上下文之间我们的图底关系的认知帮助我们去辨别结构和内容，理解功能可见性，并且理解在二维介质层面关于深度的微妙性和重要性。一名设计师能够使用大量的视觉技巧和造型设计去得到这样的环境，通过结合重要的思路去建立图底关系。一种就是能够利用普遍的图底关系认知惯例和创造性的方式“使布局让人迷糊”，为的就是增加兴趣点。让我们看看一些例子吧。

例子 ：

                               图底关系的简单例子

       在上面的非常简单的例子中，有两张不同的图片，尽管这两张图片都有着各自鲜明的布局。左边的图片表现的是在白色背景上显示一块灰色的图片；右边的图片表现的则是带有一个白色色块的灰色图片（两者都是位于白色背景上表现出来的）。这两种关系都是由形成对照和人的经验的普遍惯例所确定的…当然，也依靠一些别的东西。

     这个略显复杂的例子的就是为了确定什么是内容？  and 什么是背景？

      上面这张摘自Nathan Ford’s 网页的图片，向我们展示的是一个复杂的包括图片，文本，颜色和形状的组合。但是，这样一张图确实很奏效！因为接触这些不同的元素能够让我们快速的定义什么是连续的内容（图）以及什么是连续的结构和背景（底）。

                  有效的和没效的导航结构的例子

                依靠于图底关系的“功能可见性”

       上面的例子中，我们必须确定好图底关系就是为了展示“功能可见性”。这两个部件都是确认按钮，但是在左边的这个按钮看上去就像它仅仅是整个页面结构的另外一部分或者是背景阴影。而在右边的这个按钮则是给我们按或者点击的提示。其中的阴影和高光使得图底关系更加清晰，明确。

                      阴影表明深度并将背景划分成两个层次

       在“底”元素上存在有多种层次的层级。在上面的例子中，Chuck Mallott 在他的网页的主页上有效的联系了“底的深度”的层次关系，因此，层级的层次感也通过一个下阴影的使用得到体现。白色的区域是“在顶部”，而这个阴影区域是在更低的层次。阴影和更低层次的组合形成对比，使得阴影在整个页面层级上略微次要的重要性得到了很好的联系。

图底创意 ：

Veerle Pieters’ Duoh! Site

       Veerle Pieters’ Duoh! Site做了一个图片和文本的精彩组合，似乎就像图和底交叉表现！而且，带有内容的光标的交互有时候会引起图和底的转换。整个的效果都是刺激和有趣的。这是一个似乎打破了规则（图底关系）的例子，但是，确切的讲，这仅仅是遵循了更深层次的图底关系原则，并且收到了好的效果。

                               David Lam’s site

       David Lam’ main page 似乎在某些方面是带有大量元素的复杂组合。但是通过对比和考虑到人们惯有的图底关系的理解。David有精心制作了一个设计，我们能够快速“模糊”背景然后看到一个非常干净的设计和开放式的布局。采用焦点聚焦的方法是在这里所使用的一个技巧。  

                       Hernab Miller’s ThoughtPile site

      Thoughtpile.org site 有一个有趣的设计和运用图底关系的交互技巧。在这个网页中，这些关系似乎都在不断的变化着，似乎底元素转变成了交互性的图元素。效果很有趣，但是这种做法很夸张（频繁的变动是基于Flash网页的）。当正进行这种变化的时候，你就会更加清楚的知道你的观众和品牌。这个特别的例子似乎表现得非常好！

原文地址

http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php