格式塔原理是在20世纪上半叶由格式塔心理学家发现的，他们试图弄清楚人们如何从视觉上感知世界，特别是人们如何决定某些元素是否属于同一组。这些原则包括接近性、相似性和封闭性——这些在数字界面的视觉设计中都很重要。稍后，更多的分组原则(例如常见的地区)被添加到原始格式塔列表中。

UI设计在很大程度上依赖于邻近性和其他分组原则，因为正确解释哪些元素是相关的是成功与界面交互的关键。

定义:邻近原则物品挨得很近的状态可能被认为是同一组的一部分——共享相似的功能或特征。

将相关元素放在彼此附近

接近性是最重要的分组原则之一，可以压倒竞争的视觉线索，如颜色或形状的相似性。的做法把相关的元素放在一起和分离不相关的元素在UI设计中几乎随处可见。

图中显示了一个5乘3的网格，由点和三角形组成，第三列后有空白，以创建两个独立组的感觉。
空格通过接近的原则将形状分成两个不同的组。即使在每个组中包含不同的形状，这两个组仍然是清晰的。

使用不同数量的空白来统一或分离元素是沟通有意义分组的关键。例如，在惠灵顿市议会网站的标题区搜索当在大屏幕上浏览时，功能与网站的主导航位于同一行。但是，主导航和搜索表示它们属于不同的组，因此具有不同的功能。这个空格对于生成搜索功能从主菜单中脱颖而出。

惠灵顿市议会的网站截图，在桌面浏览器上看到。
惠灵顿市议会网站，正如在桌面显示器上看到的:额外的空白左边搜索按钮将其从主导航的其余部分中分离出来，并将其标识为一种不同类型的功能，尽管它与导航菜单中的主要类别共享相同的字体处理。

然而，在较小的屏幕上，保持这种间距是不可能的。为了避免这些区域被认为是一个单一的群体搜索向上移动，完全远离主导航。(是的，这个设计的其他方面还可以进一步改进，比如分组搜索标签和相应的图标使用接近或公共区域。)

在平板电脑上看到的惠灵顿市议会网站截图。
在平板电脑上，没有足够的屏幕空间来保持这种分离，所以，为了避免搜索似乎是主导航的一部分，它被向上移动，与其他实用菜单项分组。

即使在呈现基本的文本内容时，利用邻近性来创建有意义的组也得到了体现:句子被分组在上下用空格分隔的段落中。此外，设计良好的标题周围的空白表明它们与哪个段落相关联——来自相应段落的文本通常比来自前一节的文本更靠近标题。

文本内容的截屏(1个标题，一段文字，接着是一个副标题和2个短段落)，以及显示相同布局的图形，其中文本被灰色框覆盖。
(左)Proximity定义了一组相关的文本(段落和节)并帮助扫描。(右)即使不看实际文本，这些分组也能被识别出来。

组块适用于表单设计此外:当相关字段出现在一起时，表单似乎更容易浏览，完成时也不那么令人生畏。例如，一个包含12个字段的表单可能显得太费力而难以填写，而一个包含4个字段的3块表单相比之下似乎很简单。(接近原则在好的形式设计中有很多应用。例如，与下一个标签-字段对之前的较大间距相比，顶部对齐的标签与其对应的表单字段之间的最小间距使这种关系更加明显。)

1 .单个大的表单字段分组，而不是将字段分组为3个部分。
12个表单字段组成一个大组(左)比同样数量的字段分成三个组(右)显得更令人生畏。(显然，假设组是有意义的——例如，在一个组中发送信息，在另一个组中支付信息。)

另一方面，将不相关的元素组合在一起可能会掩盖它们从用户。例如，在加州EDD网站上添加列出表单所需的雇主信息的按钮隐藏在不相关的按钮中，以移动到下一个过程的步骤，保存为草稿,取消．当浏览页面时，用户可能会只看一个感知组中的一个项目，并用它来判断这个组中的其他项目是什么．(相比之下,以前的和下一个都是相关的，所以将它们分组将提高可用性。)

CA EDD索赔表格中步骤3的截图。
CA.gov:添加按钮被放置在不相关的按钮附近，远离窗体的主要区域，这使得很难找到。

遥远的元素看起来不相关，很容易被忽视

当用户完全忽略了一个链接、按钮或一条信息，即使它就在他们面前，接近(或者更确切地说，缺少它)往往是罪魁祸首。因为用空格分隔的元素被认为不太相关，遥远的东西容易被忽视以任务为中心的用户他们希望所有相关信息和交互元素都能紧密地放在一起。这种行为有时被描述为“井蛙之见“当用户完成任务时，他们会选择性地关注屏幕上的特定区域，而忽略“显而易见”的东西，因为他们不在这个焦点区域。

例如，在我们的移动可用性研究中，当应用程序要求参与者在访问内容之前创建一个账户时，他们经常会感到沮丧。然而，在许多这样的设计中，创建帐户是可以被跳过的——这个选项很难找到，因为它被放在页面的顶部，远离主要的行动呼吁。

Kayak手机应用登录界面截图
Kayak移动应用程序:跳过链接出现在屏幕的左上角，远离主要内容和最突出的行动呼吁。这种设置很容易让用户忽略和欺骗用户，认为他们必须登录。

同样，苹果电视上的Hulu应用程序在屏幕右下角显示了如何与当前屏幕上的内容互动的说明，而不是相关内容。此外,文字被照片遮住了所选显示的背景。这种距离的缺失让我丈夫相信没有办法接近细节屏幕(这一季中列出的其他剧集)——幸运的是，他有我在那里纠正他!

图片的葫芦苹果电视应用程序。
苹果电视上的Hulu:说明点击并按住:(对)细节显示在屏幕右下角，远离下一集要看的信息。特别是在大的电视屏幕上，这种位置很难被注意到。

在响应式设计中，邻近性可能发生变化

在设计响应式布局时，注意元素的邻近性尤其重要分组可能会随着屏幕尺寸的变化而改变．缩小到更小的设备可以最小化元素之间的空间，或者将元素推得更远，破坏分组关系。

例如，在桌面的“伦敦驾驶交通”页面上，链接到关于超低排放区和低排放区并排出现在两个不同的列中。近距离呈现这两个链接可以让用户很容易地看到并比较它们，以决定他们想要点击哪一个。然而，在小屏幕上，这些链接看起来相隔很远，因为这两列是堆叠在一起的，而不是并排的。这种不幸的位置可能会导致手机用户永远无法发现第二种类型的排放区。

在桌面屏幕和移动设备上看到的伦敦交通驾驶页面截图。
伦敦交通:两种低排放区的信息在大屏幕上显示得很近(左图)。在移动设备上(右)，由于响应式布局中的列是如何堆叠的，对应于两个区域的部分相差甚远。

结论

将相关的元素放置在接近的位置，并使用空格来创建有意义的组是视觉设计的基本原则。用户以任务为中心，可能会快速浏览页面，所以让这些分组在视觉上明显，可以帮助用户快速找到和关注与当前任务最相关的UI元素，从而提高可用性。

在我们的培训课程中了解更多关于视觉感知，如何将其应用于UI设计，以及其他心理学原理人类思维和可用性．