用户体验的认知心理学：7个视觉感知的...

我们将讨论直接适用于现代设计的7个格式塔原则，并且我将分享一些如何在UI设计中使用它们的示例。

本文从常用的七个方面解释了认知心理学中视觉感知的格式塔原理在用户体验中的应用，并有设计实例举证。

前方高能干货来袭，请用心品读，必有所获！

人类的大脑是有线的，可以看到结构，逻辑和模式。它帮助我们理解世界。例如，当你看这张图片时，你看到了什么？

如果你和大多数人一样，你可能会看到一个三角形。但实际上，真正有三个白色的“大嘴”。我们看到三角形因为我们的大脑采用模糊的视觉信息并将其组织成对我们有意义的东西 - 熟悉，有序，对称，我们理解的东西。 

当这种认知过程开始时，我们的思维从将所有元素理解为个体和不相关的组成部分，从整体上看到整个形状，实现了飞跃。结果，我们感知到实际上没有创建的形式和对象。

要进一步说明此过程，请查看下面的GIF。你的大脑看到一只狗走路，但它只不过是一系列动人的点。

这些都是简单的例子，但它们展示了我们的大脑一直在做的快捷方式类型，以便快速了解世界。这些快捷方式被称为视觉感知的格式塔原则，它们详细说明了我们的大脑默认如何创建结构。但为什么理解这对网络和移动设计很重要？

为什么设计师应该关注格式塔原则

伟大的设计师理解心理学在视觉感知中扮演的重要角色。当某人的眼睛符合您的设计创作时会发生什么？他们的思想如何对你的作品分享的信息作出反应？-Laura Busche，Autodesk品牌内容策略师。

想一下那句话。当人们第一次看到你的设计，如何做他们的经验呢？为了理解UI设计的工作原理，您需要了解人类感知的心理。

管理格式塔原则的基本法则是我们倾向于以规则，有序和可识别的方式来命令我们的经验。这使我们能够在复杂而混乱的世界中创造意义。对这些原则如何运作有充分的了解将以三种方式帮助您。

它们将帮助您确定哪些设计元素在特定情况下最有效。例如，何时使用视觉层次结构，背景阴影，渐变以及如何对相似项目进行分组并区分不同的项目。

这些心理学原理具有影响我们视觉感知的能力，使设计师能够将注意力集中在特定的焦点上，让我们采取具体行动，并创造行为改变。

最后，在最高级别，格式塔原则可帮助您设计出能够解决客户问题或以美观，悦目和直观的方式满足用户需求的产品。

在本文中，我们将讨论直接适用于现代设计的7个格式塔原则，并且我将分享一些如何在UI设计中使用它们的示例。这当然不是一个详尽的清单，但你很快就会注意到许多原则之间存在重叠，并且它们都在流畅地协同工作。现在让我们开始吧。

原则＃1：图形地面

图形 - 基础原理指出人们本能地将对象视为处于前景或背景中。它们要么突出显示在前面（图中），要么后退到后面（地面）。

例如，在上图中，您的眼睛会立即看到坐在黑色背景上的白色苹果。

“在大多数情况下，这种决定会迅速而且下意识地发生。图/地让我们知道我们应该关注什么，以及我们可以在作文中安全地忽略什么。“ - Steven Bradley，网页设计师

当人们使用您的网站或移动应用程序时，他们在每个屏幕上做的第一件事就是弄清楚这个数字是什么以及它是什么。

图形 - 地面原理的例子

Basecamp主页有一堆图形，文本，表格和其他信息。而且由于图形原理，您可以立即告诉您应该关注白色前景区域中的内容。

AngelList在下面用两种方式使用了图形 - 地面原理。首先，页面左侧的文字和徽标显然是位于背景图像顶部的图形。其次，右侧菜单中的白色文字位于黑色背景的顶部。

原则＃2：相似性

相似性原则指出，当事物看起来彼此相似时，我们将它们组合在一起。我们也倾向于认为它们具有相同的功能。

例如，在该图像中，基于形状似乎存在两个独立且不同的组：圆形和正方形。

各种设计元素，如颜色和组织，可用于建立类似的组。例如，在下图中，即使所有形状都相同，但很明显每列代表一个不同的组：

相似性原则的例子

GitHub在下面的页面中以两种方式使用相似性原理。首先，他们用它来区分不同的部分。您可以立即告诉我们顶部的灰色部分与黑色部分的用途不同，黑色部分也与蓝色部分分开并且不同。

其次，他们还使用蓝色来区分常规文本的链接，并传达所有蓝色文本共享一个共同的功能。

原则＃3：接近度

接近原则表明，靠近在一起的东西似乎比间隔得更远的东西更相关。

接近是如此强大，它超越了颜色，形状和可能区分一组对象的其他因素的相似性。

注意上面有三组黑点和红点？对象的相对接近度对分组的影响比对颜色的影响更大。

接近原则的例子

每个图像及其相应文本的接近程度表明它们彼此相关。

Vice使用它来区分每个故事的图像，标题，描述和其他信息。

原则＃4：共同区域

共同区域的原则与接近度高度相关。它指出，当物体位于同一个封闭区域内时，我们将它们视为分组在一起。

添加边框或其他可见障碍是在对象组之间创建感知分离的好方法 - 即使它们具有相同的接近度，形状，颜色等。

共同区域原则的例子

在下面的Pinterest示例中，公共区域原理用于将每个引脚（包括其照片，标题，描述，贡献者和其他详细信息）与其周围的所有其他引脚分开。

并且它在下面的Facebook示例中用于表示评论，喜欢和交互与此特定帖子相关联，而不是与其相关的其他帖子。

原则＃5：连续性

连续性原理指出，排列在一条线或曲线上的元素被认为与不在线或曲线上的元素更相关。

在上图中，例如，曲线中的红点似乎与曲线上的黑点比直线水平线上的红点更相关。这是因为你的眼睛自然地沿着一条线或一条曲线，使得延续成为比颜色相似性更强的相关性信号。

连续性原则的例子

亚马逊使用连续性来传达以下每个产品相似且相互关联的信息。

Sprig使用它来解释使用他们的应用程序的三个步骤。

Credit Karma使用它来说明其服务所带来的好处。

原则＃6：关闭

闭合原理指出，当我们观察视觉元素的复杂排列时，我们倾向于寻找单一的，可识别的模式。

换句话说，当您看到一个缺少部分的图像时，您的大脑将填充空白并制作完整的图像，这样您仍然可以识别该图案。

例如，当您查看上面的图像时，即使图像只是黑色形状的集合，您也很可能会看到斑马。您的大脑会根据您过去的经验填写缺失的信息，以创建可识别的模式。

闭合原理的例子

封闭原则通常用于各种公司的徽标设计，包括IBM，NBC，Zendesk和Funding Circle。

原则＃7：焦点

焦点原则指出，无论什么东西在视觉上突出，都会首先捕获并保持观众的注意力。

例如，当您查看上面的图像时，您首先注意到的是红色方块，因为它与周围的所有黑色圆圈不同。这是吸引注意力的第一个兴趣点，从那里你的注意力转移到图像的其他部分。

焦点原则的例子

Twilio使用焦点原则来吸引他们注意他们的号召性用语按钮。

在下面的示例中，Instacart将焦点原理与图形 - 地面原理结合起来，引人注目的是白色前景，然后是绿色的“查找商店”按钮。

最后的想法

如果你了解人类的思维是如何运作的，那么将人们的注意力引向正确的地方会更容易。将这些原则放在首位将有助于您将用户置于设计过程的中心。如果您想了解更多关于视觉感知的格式塔原则，我们建议您关注我们公众号“设计摄影”查看这方面的资源。