格塞伦特的心理学家在20世纪上半叶被发现的格式塔原则,他们试图了解人们如何在视觉上察觉世界 - 特别是人们如何决定某些元素是否是同一组的一部分。这些原则包括接近,相似性和关闭 - 这在数字接口的可视化设计中都很重要。后来,更多的分组原则(如公共区域)被添加到原始的GeStalt列表中。

UI设计依赖于邻近和其他分组原则,因为正确解释哪些元素与界面成功交互至关重要。

定义接近原则指出,封闭的项目可能被认为是同一组的一部分 - 共享类似的功能或特征。

将相关元素放在彼此附近

接近是最重要的分组原则之一,并且可以通过竞争视觉提示来抑制颜色或形状的相似性。练习将相关元素放在一起分离无关的元素可以在UI设计中几乎可以看。

图形显示了一个点和三角形组合的5×3网格,第三列之后的空格创造了2个单独组的感知。
空格通过接近原理将形状分成两个不同的分组。即使在每个组内包括不同的形状时,这两个分组仍然很清楚。

使用为联合或单独的元素而变化的空白是传达有意义的分组的关键。例如,在惠灵顿市议会网站的标题区域,搜索在大屏幕上查看时,功能位于与网站的主导航相同。但是,主导航和主要导航之间的额外空格搜索表示它们属于单独的组,因此具有独特的功能。这个空格对于制造来说至关重要搜索功能从主菜单的其余部分脱颖而出。

惠灵顿市议会网站的屏幕截图如桌面网络浏览器所示。
惠灵顿市议会网站,如桌面监视器所见:额外的空白左侧搜索按钮将其与主导航的其余部分分开,并将其标识为不同类型的功能,即使它与导航菜单中的主要类别共享相同的字体处理。

然而,在较小的屏幕上,不可能保持这种间距。避免这些区域被视为一个单一组,搜索被转移,远离主要导航。(是的,这种设计的其他方面可以进一步改进,例如分组搜索使用邻近或公共区域标记和相应的图标。)

惠灵顿市议会网站的屏幕截图如在平板电脑上看到的。
在平板电脑上,没有足够的屏幕空间来维持这种分离,因此,避免拥有搜索似乎是主要导航的一部分,它被移位,与其他实用程序菜单项分组。

即使在呈现基本文本内容时,也会反映出于创建有意义的群体的邻近:句子在上面和下面的空格中分隔的段落中分组。此外,围绕设计良好的标题围绕它们与相应部分相关联的段落的空格通常比来自前一部分的文本更靠近标题。

文本内容的屏幕截图(1个标题与文本段落,后跟子标题和2个简短段落),以及显示与灰框覆盖文本的相同布局的图形。
(左)接近定义相关文本组(段落和部分),并有助于扫描。(右)即使在不查看实际文本,这些分组也是可辨别的。

适用于表格设计同样:当相关的字段显示在一起进行分组时,表单似乎更易于扫描和更少令人生畏完成。例如,具有12个字段的单个形式可能会出现太征税以填写,而具有4个字段的3个块形式相比似乎简单。(在良好的形式设计中以多种方式应用接近的原理。例如,俯视标签及其相应形式场之间的最小量的间距使得与下一个标签 - 场对之前的较大余量相比,这种关系明显。。)

2图形模拟了一种形式:1,具有单个大小的表单字段,与字段分组为3个部分。
12个在一个大型组(左)中的表格字段看起来比与三个分组(右)分解的相同数量的字段更加令人生畏。(显然假设这些组是有意义的 - 例如,在一个组中运输信息和另一组的计费信息。)

另一方面,将无关的元素分组可能会伪装它们来自用户。例如,在加利福尼亚州EDD网站上,要列出表单所需的雇主信息的按钮被埋在不相关的按钮中以移动到下一个过程的步骤,保存为草稿,和取消。查看页面时,用户可能会只查看感知分组中的一个项目,并使用它来判断该组中的其他项目必须是什么。(相反,以前下一个是相关的,所以将它们分组会增加可用性。)

CA EDD索赔表中的步骤3的屏幕截图。
CA.GOV:按钮靠近不相关的按钮,远离形式的主要区域,这使得很难找到。

遥远的元素出现不相关,很容易被忽视

当用户完全错过链接时,按钮或信息,即使它在其面前,靠近(或相当缺乏它)往往是责任。因为空格分隔的元素被认为是较小的相关,遥远的物品可以很容易地忽视以任务为中心的用户谁期望所有相关信息和互动元素都靠近。这种行为有时被描述为“管视角:“用户选择性地参加屏幕的某些区域,因为他们完成了他们的任务并在平原视野中错过了”屏幕“,因为它们在这个焦点区域之外。

例如,在我们的移动可用性研究中,当应用程序要求他们在获得内容之前创建帐户时,参与者经常会受挫。但是,在许多这些设计中,可以跳过帐户创建 - 这个选项很难找到,因为它被放置在页面的顶角,远离主要的动作呼叫。

皮划艇移动应用程序登录屏幕的屏幕截图
皮划艇移动应用程序:跳跃链接显示在屏幕的左上角,远离主要内容和最突出的行动呼叫。这种放置使您可以轻松忽视并欺骗用户认为他们必须登录。

同样,Apple TV上的Hulu应用程序为如何在屏幕右下角的右下角的方式与当前屏幕的内容进行交互,远离相关内容。而且,这是文字由照片遮挡所选节目的背景。这种缺乏接近导致我丈夫相信没有办法进入细节屏幕(列出了本赛季中的其他剧集) - 幸运的是,他让我纠正了他!

Hulu Apple电视应用程序的照片。
Hulu在Apple TV:指示单击并保存:(对于)细节在屏幕的右下角呈现,远离有关下一集的信息。特别是在大型电视屏幕上,这种安置使得很难注意到。

接近可能会在响应性设计中转换

在设计响应布局时,关注元素的接近尤为重要,因为这些分组可能会改变,因为它们适应不同的屏幕尺寸。缩小到较小的设备可以最小化元素之间的空间,或者可以将元素推越远,销毁分组关系。

例如,在桌面上的伦敦驱动页面上的传输,与有关的信息的链接超低发射区低排放区并排出现,在两个不同的列中。介绍这两个密切关注的链接允许用户轻松查看并比较它们以决定他们要点击的内容。然而,在小屏幕上,这些链接似乎很远,因为两列堆叠在另一个上方,而不是并排堆叠。这个不幸的安置可能导致移动用户永远不会发现第二种排放区域。

伦敦驱动页面的屏幕截图,如桌面屏幕和移动设备所示。
伦敦运输:关于两种类型的低辐射区域的信息在大屏幕上靠近近距离(左)。在移动设备(右)上,由于如何在响应式布局中堆叠柱子,对应于两个区域对应的部分。

结论

将相关元素放置在密切接近并使用空格创建有意义的群体是视觉设计中的基础原则。用户是专注的任务,可以很快扫描页面,因此通过帮助用户快速查找和关注与其当前任务最多相关的UI元素来提高可用性来提高可用性。

了解有关视觉感知的更多信息,如何在我们的培训课程中适用于UI设计和其他心理学原则人类的思想和可用性