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

许多设计师可以拥有创造性的直觉和锐利的眼光：他们将未来网站或应用程序的布局增加了更多的激情和感觉作为理性思考和测量。在很多情况下，这不是吹牛，而是将所有细节整合在一起的真正技能，感受用户流程的可能陷阱，找到原始解决方案不会破坏可用性。然而，这种方式没有任何魔法：这种技能不仅基于人才，而且还基于实践经验，坚持不懈地研究与技术和设备一起快速变化的理论，标准和指导原则。即使创造性的实验也是基于互动机制和影响因素的知识：打破规则，你必须认识他们。

Web和移动界面中的视觉层次结构属于领域，知道哪些设计者加强了他们的创造潜力。探索人们如何看待信息并将其用于建立良好的导航，可消化的副本和有效的颜色选择的方式对产品的可用性（可扫描性）作为其重要部分有很大的影响。所以，今天我们将回到基础：让我们开始修改Gestalt分组原理如何积极地影响用户界面。

什么是格式塔理论？

基本上，格式塔是来自德语Gestalt [ɡtalt]意思是“形状，形式”的术语。它主要用于认知心理学领域，探索人们不断从世界获得的数据，这些数据似乎主要是混乱的。这个运动背后的基本想法可以通过格莱塔克心理学家库尔特·科夫卡（Kurt Koffka）的着名短语来捕捉：“ 整体不是部分的总和”。当人们看到由许多元素组成的复杂对象时，它们将有意识的或潜意识的方法应用到整个有组织的系统中，而不仅仅是一组简单的对象。它在不同层次的感知上起作用，但视觉部分似乎是设计者创建界面最有趣的部分。

为什么设计师可以对这个问题感兴趣？因为它有助于更好地了解应用程序或网站用户的心理学。当您了解影响视觉感知的因素时，它使得UX设计的过程更加精通，提高了成功互动的速度，并降低了用户可以通过这种方式获得的误解。在这种方法的各个层次中，分组的原则（或法律）可能是设计师考虑最重要的。这些原则是基于人们将他们所看到的一些模式组织成五个全球类别的概念：邻近，相似性，连续性，关闭和连接。这是“垂直度量”博客提供的图表之一，可视化一些原则的核心描述。

在用户界面中，分组应用原则周到地使布局元素的感知更快更容易，并在不同层次的交互中建立优先级。今天我们将考虑广泛应用于设计实践中的分组的相似原理。

相似原则

相似性的原则是基于共享视觉特征的东西，如形状，大小，颜色，纹理，价值或方向的东西将被视为属于一起。这意味着，如果一个人感知到这些元素，他或她倾向于将具有一个或几个特征的那些组合作为相关项目。因此，给予不同的布局元素相同或相似的视觉特征，设计人员刺激用户设置适当的连接并更快地了解整个方案。

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

颜色

以下是在简单日历应用程序中应用颜色相似度的常见示例。在日历屏幕上标记星期几的字母可视地分组为与日历网格中的数字所使用的颜色不同的一种颜色。因此，快速浏览足以分离这些类型的符号 - 颜色简化了第一次扫描的过程。颜色相似度的下一个级别发生在数字领域：用户选择的星期几中的日期看起来更亮，而其他日期看起来更加褪色。关键的互动区域明亮地呈现，呈现出立即引人注意的不可错过的视觉口音。因此，颜色使设计人员能够通过分组原理为具有有效视觉分层结构的用户创建简单的导航路径。

这里还有一个例子显示了如何通过颜色分组可以有效地应用于图形界面中的副本。您可以看到待处理应用程序的屏幕，其中已经标记为已完成的位置与正在进行的任务相比具有不同的颜色。它使用户能够快速扫描列表，并在几秒钟内对任务的种类进行分组。

通过颜色分组原理的更复杂的应用是标记内容的类别和块。它可以在各种各样的内容，如博客，电子商务或教育资源等组织的各种内容的界面上运行得很好。颜色标记简化了导航并保持了设计的一致性，使用户能够记住颜色提示并找到他们想要的内容很容易。上面的示例显示了应用此原则的博客应用程序：各种帖子围绕全局类别进行组织，并以颜色标记，您可以在图标上看到颜色，帖子上的彩色标签和用户个人资料中帖子的快速统计信息。相同的原则适用于以下所示的Moneywise App。

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

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

尺寸

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

提出这一原则的好方法是检查复制内容的组织。

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

这是另一个按大小和颜色进行分组的例子。我们可以看到标签栏的概念，其中相同重要性的交互元素以相同的大小和褪色的阴影给出，而核心的交互元素加按钮通过明亮的颜色和更大的尺寸而突出。此外，尝试通过此按钮添加内容，为用户提供三种不同类型内容的选项。再次，使用与父按钮相同颜色的出现的三个按钮进行分组，但尺寸较小，该界面使用户能够基于认知感知的典型操作轻松设置导航元素的连接和层次。

形状

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

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

如上所示的Homey应用程序的界面还提供了从一个屏幕到另一个屏幕的形状分组的示例：标记房间的按钮使用四舍五入形状，而特定房间屏幕内各种指示器的按钮使用圆形。它设置相关布局元素之间的明确连接以及应用程序中的全局导航。

虽然我们刚刚开始修改格式塔在设计中的理论使用，但已经明白的是，知道这些简单而有效的原则可以为用户节省大量的精力，并且可以根据人的认知能力和心理模式来支持用户界面。按照更新检查其他分组原则的说明和示例：接近度，对称性，延续性等。