格式塔知觉原则-1：图形-背景关系
格式塔知觉原则-1：图形-背景关系
⼏乎所有对平⾯设计有⽤的内容都可以在被统称为格式塔知觉原则的法则和原则中到。对于设计师来说，没有⽐全⾯掌握这些原则更强⼤的⼯具。同理，那些没有很好掌握的⼈在⾯对设计项⽬时容易迷失⽅向，经常跑到设计图库⽹站上“钓鱼”，沦落为陈词滥调的主题和布局。如果你还没有掌握，下定决⼼学习格式塔的知觉原则。
为什么要学这些内容？咋听起来像深夜电视⼴告，格式塔知觉原则有助于消除设计中不确定的部分。例如，⼀旦确定了页⾯内容和交流⽬标，格式塔原则就明确了如何在页⾯上分配元素，何时和为什么使⽤线条勾勒、背景阴影、渐变，或何时和为什么在⼀个封闭空间中分组（或不分组）。⼀旦理解了格式塔原则，设计就会变得简单更加简单，⽽你的创意也会得到更有效的表达。
这个名字听起来很复杂，但格式塔原则并不难理解。事实上，每⼀条原则都可以⽤⼀句话来解释，但通常它们的定义⽅式会使⼤多数⼈眼花缭乱。Well，我打算通过Web实例来向⼤家展⽰它们与⽹页设计师⼯作直接相关的术语。本⽂是有关更好地阐释这些原则的系列⽂章中的第⼀篇。每⼀条原则将对应⼀篇⽂章。
⾸先，是对格式塔知觉原则的简单定义：
图形/背景关系 Figure Ground Relationship
图形所依据的背景或风景）。
图形（不同的焦点元素）或背景（图形
元素被视为图形
简洁法则/普腊涅茨法则  Law of Prägnanz
⼈类倾向于将模糊或复杂的图像解释为简单⽽完整的图像。
同⼀连贯性 Uniform Connectedness
通过统⼀的视觉特征连接的元素被认为⽐未连接的元素具有更强的相关性。
Good Continuation
良好延续性 Good Continuation
良好延续性
排列在直线或曲线上的元素被认为⽐不在直线或曲线上的元素具有更强的相关性。
封闭性 Closure
当观察⼀个复杂的多元素排列时，我们倾向于⾸先寻⼀个单⼀的、可识别的模式。
共同命运 Common Fate
⼈类倾向于认为同⼀⽅向上运动的元素⽐静⽌或不同⽅向上运动的元素具有更强的相关性。起好名
接近性 Proximity
互相接近的事物被认为⽐相隔较远的事物具有更强的相关性。
相似性 Similarity
相似的事物被认为⽐不相似的事物具有更强的相关性。
* * *
关系。⽽⼈类的知觉你会注意到，这些原则中的⼤多数似乎是彼此的变体，并且在其他⽅⾯密切相关。这是有充分的理由的，因为它们都涉及到关系
关系⽀配；事物如何相似或不同，它们如何相互对⽐或融合，以及事物的排列⽅式如何暗⽰层次结构和受上下⽂影响。
最伤感歌曲受关系
对于设计师⽽⾔，最后⼀句话⼏乎总结了在⼯作中要处理的⼤部分内容，因此最好要掌握这些内容。 现在让我们深⼊研究如何将格式塔原理应⽤于你的设计吧。
图形-背景关系 Figure Ground Relationship
图形所依据的背景或风景）。
电脑ip地址设置
图形（不同的焦点元素）或背景（图形
元素被视为图形
为什么重要？
⾸先要做的事；新事物进⼊视野时，我们的⼤脑需要⼀个理解判⾸先讨论这个原则是因为它可能最重要。确定图形与背景的关系也是⼈们直视时⾸先
断新事物的基准。我们必须确定哪些元素是图形（需要⽴即关注），哪些是基础背景（现在不那么重要，但确实提供了背景）。
这⼀过程对⼈类⾄关重要，⽽且在威胁检测中可能有其进化基础（我是只在树叶和杂草上⾏⾛还是要踩响尾蛇？）。当然，这也确保我们能够优先考虑⾃⼰的感知，从⽽不会意外地撞到东西，或忽略紧迫且重要的东西。我们对图形-背景关系的感知使我们能够通过观察每个对象与其他对象的关系来组织我们所看到的东西。简短⽽贴⼼的版本是：它使我们能够确定应该看到的内容以及可以放⼼忽略的内容。
在⼤多数情况下，我们会毫不费劲地⽴即完成这项⼯作，因为我们经常置⾝于熟悉的环境中，看着熟悉的事物。但是当我们被要求看⼀些不熟悉的东西时，特别是当它是⼀个设计好的页⾯时，基于图形-背景关系的线索将决定我们的体验是否成功。⽽这种成功的体验设计正是设计师的任务。具体内容：
在⼀个⽹站设计的背景下，图形-背景感知帮助我们从结构上区分内容，知觉可供性，并理解⼆维媒介中隐含的重要性或内涵。设计师可以利⽤⼤量的视觉机制和样式处理，来提供这种上下⽂和传达重要的线索以建⽴图形-背景关系。还可以利⽤常见的图形-背景感知的约定，以创造性的⽅
式“混淆”布局来增加兴趣。举⼏个栗⼦。
⼀个简单的图形-背景关系⼩栗⼦
在上⾯这个⾮常简单的例⼦中，有两个同类型的图像，尽管两个图像的构图相同。左边的图像显⽰了⼀个灰⾊物体（图形）停在⼀个⽩⾊区域（背景）上。右边的图⽚显⽰了⼀个灰⾊的物体（图形）上⾯有⼀个洞（都放在⽩⾊背景上）。这些关系是由对⽐和⼈类经验的共同约定所决定的……以及其他⼀些因素。
这个组合使区分内容和背景变得简单
Nathan Ford⽹站的图⽚，它呈现了⼀系列复杂的图形、纹理、颜⾊和形状，但它是有效的。由于对各种元素进⾏了某些处理，因此我上图是Nathan Ford
们能够快速定义什么是内容（图形）以及什么是结构和背景（背景）。
有效和⽆效导航结构的⽰例
关于上述例⼦，⼀个是成功且易于理解的，⼀个则由于过于复杂⽽失效的。这两个导航数组的组成完全相同，但是左边的导航阵列很快就被认为是⽂本内容（图形），其内容位于⼏乎没有影响的背景底纹（背景）上。⽽右边的阵列
阵列由于其结构和内容由线条构成，因此被认为就被认为是⽂本内容（图形），其内容位于⼏乎没有影响的背景
是两倍的图形。在这种情况下，线条也被认为是内容，结构就与内容竞争。这就导致效果很丑，⽽且
还让⼈分⼼。
阴影意味着深度，将背景分为两层
在“背景”元素中甚⾄可以有不同级别的层次结构。在上⾯的例⼦中，Chuck Mallott在他的⽹站主页上有效地传达了“背景深度”的级别，以及通过使⽤阴影来实现传达层次结构的级别。⽩⾊区域“在顶部”，⽽阴影区域则在较低深度。与阴影和降低的对⽐度相结合，有助于传达其在整个页⾯层次结构中重要性略有降低。
图形-背景创意 Figure ground creativity
考研政治参考书
在Web布局中建⽴清晰的图形和背景关系很重要，但清晰的轮廓并不总是最好的。可以说，模糊这些线条，也可以使设计充满有趣的特征和增强的有效性。这⾥是⼏个创造性图形-背景confusion的例⼦。
Veerle Pieters' Duoh! ⽹站
Veerle Pieters的Duoh！⽹站使⽤了⼀系列精美的图形和⽂字，这些图形和⽂字似乎在图形和背景上交织在⼀起。 此外，光标与内容的交互有时会触发从图形到背景的转换。 整体效果令⼈兴奋且有趣。 这个例⼦似乎违反了规则，但实际上它只是遵循规则中更深层的概念，并取得了很好的效果。
David Lam的⽹站
漂泊吧David Lam的主页在某些⽅⾯似乎是由⼀系列复杂的多样元素组成。但通过对⽐，并考虑到⼈们典型的图形-背景关系的确定性，David做了⼀个精⼼设计，能让我们可以快速“模糊”背景，并看到⾮常⼲
净的设计和开放式布局。这⾥巧妙的利⽤不同聚焦度机制。
Herman Miller's ThoughtPile ⽹站
<⽹站有⼀个巧妙利⽤图形-背景关系的有趣设计和交互机制。在这个⽹站上，这些关系似乎在不断变化，看似是背景元素⼜变成了交互式的图形元素。这个效果很有趣，但这类事情很容易做过头（并且经常出现在基于flash的⽹站）。在做这类设计时，必须⾮常了解你的受众和你的品牌。这个例⼦似乎做得很好。
Homework
本⽂中涉及的许多效果都是格式塔原则的其他组成部分，将在后⾯的⽂章中讨论。现在，开始有意识地区分设计和其他地⽅中图形和背景元素。开始注意你周围的环境，并思考格式塔原则。养成这个习惯会带来很⼤的好处，通过运⽤这些新发现的见解，你很快就能很容易地认识到为什么有些设计或布局是可⾏的，⽽有些则不然；⽆论是你⾃⼰的⼯作还是别⼈的。高树玛利亚作品

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。