许多设计师拥有创造性的直觉和锐利的眼光：他们将未来的网站或应用程序的布局增加了更多的创意和感性的部分作为理性思考和测量的标尺。

在很多情况下，这不是炫技，而是将所有细节整合在一起，然后重新排列组合的真正技巧。体验用户流程中可能存在的陷阱，找到最简单有效的解决方案，且不会减弱产品的体验。这样做并不是什么高级的技能：这种技能不仅基于设计师的技巧，而且还基于他们的实践经验，坚持不懈地研究技术和设备与时俱进的理论、标准和指导原则。即创造性的尝试是基于互动机制和影响因素的知识：打破规则，你必须认识他们。

Web和移动界面中的视觉层次结构属于该领域，知道哪些设计者加强了他们的创造潜力。探索人们如何看待信息并将其用于构建良好的导航，可复用并有效的颜色搭配对产品的可用性有很大的影响。所以，今天我们将回归基础：让我们开始修正Gestalt（格式塔）分组原理如何能够积极地影响用户界面。

什么是格式塔理论？

从基本角度来看，格式塔是来自德语Gestalt [ɡəʃtalt]意思是“形状，形式”的术语。它主要用于认知心理学领域，探索数据的规律，人们经常从混乱的数据中得到世界的真相。基本想法可以通过格莱塔克心理学家库尔特·科夫卡（Kurt Koffka）的着名短语来概括：“整体不是部分的总和”。当人们看到由许多元素组成的复杂对象时，它们将用有意识或潜意识地方法应用到整个系统中，它在不同层次的感知上起作用，但视觉部分似乎对UI设计师来说是最有趣的。

为什么设计师会对这个问题感兴趣？因为它有助于设计师更好地了解应用程序或网站用户的心理。当设计师知道影响视觉感知的因素时，它使得UX设计的过程更加精通，提高了交互的效率，并降低了用户的学习成本。在这种方法的各个层次中，分组的原则（或规则）可能是设计师最需要考虑的。这些原则基于人们将他们所看到的一些模式组织成五个国际通用的概念：邻近度，相似性，连续性，关闭和连接性。这是“Vertical Measures”网站提供的一个图表，它将一些核心的原则用可视化的方式描述出来。

相似原则

相似性的原则是基于共同的视觉特征出发的，如形状，大小，颜色，纹理，价值取向的东西，将被视为属于相似的观点。这意味着，如果一个人感知到一组元素，他或她倾向于将具有一个或多个特征的那些组合作为相关项目。因此，给予不同的布局元素相同或相似的视觉特征，设计师可以激发用户对界面进行适当的分组和联结的本能，以便于用户更快的了解整个系统。

相似性可以基于各种视觉参数，如颜色，形状，大小和方向。让我们来看一些Tubik团队设计的一些实例。

颜色

△以上是在简单日历应用程序中应用颜色相似度的常见示例。

在日历屏幕上将标记星期几的数字和日历网格中的数字所使用的颜色做出视觉区分。因此，快速浏览足以区分这些类型的符号 ，颜色简化了用户第一次扫描的过程。颜色相似度的下一个级别发生在数字领域：用户选择的星期几中的日期看起来更亮，而其他日期看起来更加褪色。关键的交互区域明亮地呈现，呈现更醒目，不容错过的视觉语言。因此，颜色使设计师能够通过分组原理有效地为用户创造具有视觉层级结构简

单的导航路径。

△这里还有一个例子展示了如何将颜色分组有效地应用于图形界面中。

您可以在应用程序的屏幕上看到一个待办事宜，其中标记为已完成的位置与正在进行的任务相比具有不同的颜色。它使用户能够快速扫描列表，并在几秒钟内对任务的种类进行分组。

△使用颜色分组原理更复杂的应用是在标记类别和内容区块上面，它在如博客，电子商务或教育资源等组织的各种内容的界面上表现的更好。颜色标记简化了导航并保持设计的一致性，使用户能够很容易记住颜色提示并找到他们想要的内容。

上面的示例显示了应用颜色分组原则的应用程序：各种帖子围绕全局类别进行组织，并标记了您可以在图标上看到的颜色，帖子上的彩色标签和用户个人资料中的快速统计信息。

相同的原则适用于下面所示的Moneywise App。

△这是专门用于经济学的教育应用：内容分为四大类。它的卡的背景颜色用于标记类别。所以，在互动的过程中，它可以帮助用户快速地获得应用的信息。

当然，这种颜色分组的方式还可以进一步扩展，因为它不仅在一个屏幕上组织元素，而且在所有数字产品中组织不同的屏幕或页面。然而，它也符合格式塔原则：这种方法允许设计者创建外观和感觉一致的界面，并支持从屏幕到屏幕，从一个交互到另一个交互，保持视觉感知的完整性。

尺寸

按照尺寸对元素进行相似性分类的原则是创建直观和用户友好界面的另一个准则，因为它为支持用户的可视化层次结构奠定了基础。这种方法有助于确定优先级，并使最重要的内容可见。通过这个原则对类似的内容元素进行分组设置它们之间的连接，通常比用户读取副本或查看所有细节更快。

在实践中验证这一原则的好方法是检查内容的结构组织。

△该示例展示了一家建筑公司的企业网站。通过关键词应用两个分组原则来同时支持呈现公司方向和内容类别：它们使用不同的大小和不同的文本方向。在相互作用的过程中，它们被明显地看作是相关元素。此外，扩展菜单页面还显示了按照大小分类复制元素的排版层次结构：关键字，类别和子类别。

△这是另一个按大小和颜色分组的例子。

我们可以从上图中看到标签栏的概念：

同等重要性的交互元素以相同的大小和阴影给出，而核心的交互元素加按钮通过明亮的颜色和更大的尺寸而突出。此外，通过此按钮添加内容，用户可以为不同类型的内容提供三个选项。再次，使用与父按钮相同颜色但尺寸较小的显示三个按钮进行分组，该界面导航元素的连接和层次结构能够使用户容易基于认知知觉进行典型的操作。

形状

在网页或屏幕上分组元素的另一种方式是按形状标记它们。 

△该示例显示了应用使用相同形状的卡片式来模拟与物理对象（数据卡）的交互的应用程序。该方法暗示用户将该组内容块视为相关的。

△以上显示的Homey的应用界面还提供了从一个界面到另一个界面的形状分组的示

例：被选中房间的按钮使用圆角矩形，而被选中房间界面内的各种指示器的按钮使用圆形。它定义了具有相关布局的元素和应用的全局导航之间的明确连接。

总结

虽然我们刚刚开始调整格式塔理论在设计中的理论使用，但已经明确的是，了解这些简单而有效的原则可以为用户节省大量的精力，并且可以根据用户的认知能力和心理模式调整用户界面。

接下来会跟踪检查其他分组原则的解释和示例并进行更新：邻近性、对称性、延续性和其他。