格式塔原则指导人们如何在视觉上感知世界-包括数字接口。具体来说，这些原则解释了人们如何决定几个单独的元素是否属于同一组，从而在某种程度上相互关联。这些知识帮助他们理解世界，与世界互动，也适用于屏幕上的控件和内容。

最初的格式塔原则是在20世纪上半叶被发现的，包括接近性、相似性和封闭性。后来在20世纪末的研究中，又增加了一些最初由格式塔心理学家发现的分组原则。其中，可能与用户体验最相关的是公共区域。

定义:共同区域原则表示边界内的项是被视为一个群体和假设共享一些共同的特性或功能．

显示一个5乘3的点网格的图形，中间一行3个点包含在一个彩色框中。
在这个图形中，围绕中间三个圆的边界使它们看起来是相关的，并且是同一组的一部分。

在上面的图形中，中间三个圆周围的边界使它们作为一组出现，并将它们与其他相关较少的周围圆分开。在用户界面中，使用为相关项创建容器的边框或背景颜色帮助用户快速有效地理解UI的结构以及连接哪些元素。

例如，在传统的打印在下面的对话框中，用边框将许多详细的选项组织成三组:在哪里打印(选择打印机)，打印什么(页面范围)，以及打印多少(数量的副本）.分组清楚地表明，左下角的数字“1”是页码，而右下角相同的字符指定要打印的副本数量。

在Microsoft Windows上打印对话框的截图
Microsoft Windows上的打印对话框，包含由边框指示的3个分组。

构建清晰的结构

当用户登陆一个网页或打开一个应用程序时，他们会快,自动判断去哪里完成任务。具有独特的、有组织的部分的设计可以很容易地识别界面的基本结构，并确定与UI的哪些区域进行交互。

使用背景颜色来指定页眉、页脚、左侧导航面板或其他UI区域，通常用于创建视觉上分离的公共区域铬从内容。例如，在Slack应用程序中，深色背景色将所有的UI控件组合在一起。在这个黑色的背景中，线条进一步创建了其他的公共子区域，这些子区域表示各种控件的分组(顶部的搜索和导航，最左边的工作区，以及工作区中的通道)。

Slack for Mac应用的截图
Slack应用:菜单区域使用一种常见的背景色来将chrome与内容分开。

使用固定或“粘性”页眉的网站可以特别受益于使用有区别的背景颜色或清晰的边框，从而有效地将页眉与下面滚动的页面内容分开。此外，单一统一的背景色大的页脚用于有效地表明该区域的所有链接属于一个组。

同步网站的截图显示了固定的标题区域与蓝色背景和深灰色背景的页脚区域，与白色的主要内容区域相比
同步银行:页眉和页脚区域都包含在一个彩色的公共区域中，以区别于页面的主要内容。

容器的沟通关系

人们依靠页面主体中的可见边界来理解哪些信息或UI元素是相关的。例如，在文章的网页上，图片通常与标题在一个边界内组合在一起，以确保它们的关系是清楚的，并将它们与文章的其他内容分开。一旦你开始寻找这些可见的分组，你就会看到在任何地方建立关系的边界的例子。

例如，选项卡和手风琴通常利用一个公共区域来进行分组。在与相关内容相同的边界内显示标签或手风琴标签，可以在视觉上连接两个区域并建立它们之间的关系。这种视觉技巧适用于无数的情况:策略性地将物品放置在共享的背景上，会让它们更容易被认为是相关的。

使用公共区域进行分组的2个UI设计的截图
(左)Athleta移动应用:打开时，手风琴菜单中的子类别出现在与相关的顶级标题相同的容器中。这个设计清楚地传达了导航内部的分组和层次。(右)Backcountry.com:文章类型(例如:指南,故事)与下面的标题通过白色背景清晰地分组，这创建了一个使用共享背景颜色的公共区域。

共同区域凌驾于其他分组之上

建立一个清晰的界限是强烈的视觉提示，可以压倒其他分组原则例如接近或相似。因此，当需要包含几种不同类型的UI元素，或者无法调整对象之间的空白数量时，它是一个强大的工具。

图形显示两行4个点，中间的2个点比外面的点更接近。在底部一行中，将前2个点和后2个点组成一个公共区域。
在第一行中，由于接近，中间的两个圆出现在一起。在底部一行中，添加边界改变了对分组的看法，将中间的两个圆圈分开，而不管它们是否接近。

在UI设计中，为相关元素建立一个公共区域有助于人们快速准确地理解分组。例如，在Food Network平板电脑应用的旧版本中，与同一食谱相关的元素之间存在很大的差异。每个配方名称下面的额外空格可能是为了容纳配方标题中的多行文本，但结果是很难区分哪个署名和评级与哪个配方有关——评级的上面还是下面?这个问题的一个简单的解决方案是将所有相关的内容包含在一个边界内——即卡布局，就像在该应用的后续版本中使用的一样。

Food Network平板iOS应用的2张截图:1张来自之前的版本，存在邻近问题，1张来自后来的版本，通过使用卡片布局来分组相关信息，解决了这个问题。
Food Network平板电脑应用程序:该应用程序的一个较老版本的网格布局(左图)存在邻近性问题——允许长标题折页成多行，在大多数标题下造成了多余的空白，让人很难区分哪个署名和哪个评分与哪个食谱相配。后来的版本(右)通过使用卡片布局样式为每个菜谱的图像、标题和细节创建一个公共区域来纠正了这个问题。

显示一个公共区域也有助于同时感知多个分组。例如，在比较表中，区分列(针对每个产品或服务)和行(针对每个特征)是很重要的。“斑马”条纹，其中交替的行有一个彩色的背景，是统一水平元素的常用方法，而空白或另一个边界区分每一列。

图形显示3柱的形状:3个正方形，3个圆圈，和3个三角形。包含正方形、圆形和三角形的中间行在一个彩色容器中分组。
有颜色的公共区域将中间一行的项目分组在一起，而接近性和相似性(形状的类型)创建三个单独的列。

注意:过度使用会造成混乱

如果可能的话，单独使用空格来创建清晰的分组可以降低设计的视觉复杂性。为了确保分组清晰，通常会谨慎地添加边界;然而，这种方法可能导致繁忙、混乱的设计，在许多情况下，依赖邻近性分组就足够了。

例如，在Backcountry.com的移动版本中，过滤菜单中的每个过滤设置都包含在一个框中。这些边界虽然不可怕，但并不是必须的——接近就足以表明有组织。

2个手机网站的过滤菜单截图，展示了有和没有边界分割每个过滤组的UI看起来是什么样的。
Backcountry.com手机网站的过滤菜单显示每个过滤类别在一个有边框的框内(左)。然而，在移除边界后，这些分组仍然是清晰的(右)，所以可以省略它们，以节省视觉处理并为更多内容留出空间。

除了不必要的视觉元素，将页面分割成不同的部分也会产生效果假地板，可能会阻止用户向下滚动页面，因为他们认为他们已经到了最后。当边框扩展整个屏幕宽度时，这个问题尤其常见。如果你已经读完了，为什么还要继续滚动呢?

更好的家和花园主页的截图，显示了全宽彩色背景的几个部分的内容，打破了页面。
具有明显边框和对比色背景的全宽度内容块可以阻止用户继续向下滚动页面，因为新颜色创建了一个停止点。

在添加更多的边界和背景到一个设计之前，考虑:它们是必要的理解分组吗?我可以简单地通过添加或删除空格来传达这个分组吗?我是否需要表明这些元素彼此相关，但与相邻元素无关?在可用性测试中，当边界没有出现时，用户是否感到困惑?

结论

公共区域原则在UI设计中无处不在，它可以在视觉上统一相关的UI组件。在容器中对元素进行分组是一种强烈的视觉提示，可以在仅使用空格不够用时使用。然而，过多的边界和彩色框的存在纯粹是为了装饰添加杂乱的界面。

在我们的培训课程中了解更多关于视觉感知和其他影响设计的心理学原理人类思维和可用性．

参考

帕尔默S.E.(1992)。共同区域:知觉分组的新原则。认知心理学, 24(3), 436 - 447。https://doi.org/10.1016/0010 - 0285 (92) 90014 - s