跳到主要内容

形状知觉中的分组

· 阅读需 7 分钟

昨日翻阅《心理学》一书,恰好读到知觉章节中关于视觉形状知觉的“分组”原则。这一节介绍的理论知识对于程序界面设计有着重要的启发意义,也为我之前总结的一些界面设计经验提供了坚实的理论基础。

视觉感知的首要步骤是将图形从背景中分离出来,即区分“图”与“底”。完成这一步后,大脑便开始对提取出的图形进行分类和组合,将其加工成有意义的图像。在对背景中分离出的图形进行分组时,大脑遵循着一系列组织原则,这些原则被称为“格式塔原则”(Gestalt Principles)。格式塔心理学是20世纪初在德国兴起的一个心理学流派,强调知觉的整体性,认为整体大于部分之和。

以下是几种主要的格式塔分组原则,并结合界面设计进行阐述:

  • 接近性原则(Proximity): 大脑倾向于将空间位置上彼此靠近的物体感知为一组。例如,当我们看到下面这幅图时(插图丢失了),自然而然地会将其视为三组双竖线,而不是六根独立的竖线。

    在界面设计中,接近性原则的应用非常广泛。例如,在一个界面上有六个按钮,其中三个负责文件操作(打开、保存、关闭),另外三个负责文件编辑(插入、删除、修改)。为了方便用户快速定位所需的功能按钮,我们需要清晰地划分这两个功能组。一个简单有效的方法是利用间距:将“打开”、“保存”、“关闭”三个按钮之间的间距设置为较小的值(例如6个像素),而将“关闭”按钮与“插入”按钮之间的间距设置为较大的值(例如12个像素),“插入”、“删除”、“修改”三个按钮之间的间距也设置为较小的值。这样,用户便会自然地将这六个按钮感知为两组,从而提高操作效率。

  • 相似性原则(Similarity): 大脑倾向于将具有相似特征(例如形状、颜色、大小、纹理等)的物体感知为一组。例如,当我们看到下面这幅图时(插图丢失了),人脑会倾向于将其分为几列或几行,而不是随机的元素集合。

    在界面设计中,相似性原则同样非常有用。例如,如果我们希望用户将一篇文章中所有的名词归为一组,我们可以赋予这些名词相同的颜色或字体样式,用户便能迅速地将它们识别出来。这在数据表格或列表的呈现中尤为重要,通过使用不同的颜色、字体或图标,可以清晰地区分不同的数据类型,提高信息的可读性和易用性。

    以上这两点(接近性和相似性),在我之前的文章《界面元素的关联》中也有提及,但现在有了格式塔理论的支撑,就更加具有说服力。

  • 连续性原则(Continuity): 大脑倾向于将平滑连续的线条或曲线感知为一组,即使这些线条或曲线被其他物体遮挡或中断。例如,当我们看到下面这幅图时(插图丢失了),我们会将其视为一条直线和一条曲线的组合,而不是五个独立的半圆。

    在界面设计中,连续性原则可以用于引导用户的视线流动。例如,使用连续的线条或箭头可以引导用户按照特定的顺序浏览页面内容或完成操作步骤。

  • 闭合性原则(Closure): 大脑倾向于将未完全闭合的图形补充完整,感知为一个完整的物体。例如,当我们看到下面这幅图时(插图丢失了),我们会明显地感觉到一个完整的圆形或三角形的存在,即使它实际上并不完整。

    在界面设计中,闭合性原则可以用于创建简洁而富有表现力的图标或界面元素。例如,使用部分线条或形状来暗示一个完整的物体,可以减少视觉错觉,提高界面的简洁性。此外,为了避免由于闭合性原则造成的视觉错觉,我们可以使用封闭的图形(例如边框)将一组相关的控件圈起来,以明确它们的组合关系。

  • 连通性原则(Connectedness): 当图形通过线条、边框或其他视觉元素连接在一起时,大脑会将其感知为一组。例如,当我们看到下面这幅图时(插图丢失了),我们会将其视为一个整体,而不是几个独立的个体。

    在界面设计中,连通性原则可以用于表示元素之间的逻辑关系。例如,使用线条将相关的表单字段连接起来,可以帮助用户理解字段之间的关联性。

通过理解和应用这些格式塔原则,我们可以设计出更加符合人类视觉感知习惯的界面,提高用户体验和操作效率。