A2.01.1Proximity设计研究

距离近的元素被感知为一组

别名: 接近性原则 · Gestalt proximity · 邻近性

概念解释

一排元素只要间距不均匀,人眼会自动把间距小的那几个看成一组,把间距大的地方看成组与组的分界——不需要任何边框、颜色或标签。这条知觉线索叫接近性(proximity)。

它起作用的判据很窄:只看相对距离,不看绝对距离,也不看元素本身长什么样。同一批圆点,间距均匀时会被看成一整条,一旦每隔一个就拉开一点空隙,立刻被拆成一对一对——圆点的颜色、大小完全没变。

机制

视觉系统在识别单个元素"是什么"之前,先要解决一个更基础的问题:这一片视觉输入要不要被当成同一个东西处理。间距是这一步最先被用上的线索之一,因为它不需要认出元素的身份就能算——只需要比较相邻元素之间的空隙大小。

这个比较是相对的:系统找的是"哪里的空隙明显大于旁边的空隙",而不是记住一个固定的距离数值当阈值。这就是为什么同一组间距,放大缩小整体版式后分组结果不变——只要间距之间的比例关系保持,分组判断就跟着保持。

怎么研究

最早的证据来自点阵实验:把一排等距的点渐进地改成两两靠近、组间拉开,被试报告的分组会随间距比例平滑变化,而不是过了某个阈值突然切换。这种范式后来发展成用点阵或网格测量分组强度的标准做法——固定元素本身不变,只改变距离关系,让被试判断或选择感知到的分组方式,用报告一致率或反应时衡量某个间距关系下分组有多"稳"。

这套方法在界面研究里常被用来验证一版布局的间距关系是否真的传达了设计者想要的分组,而不是想当然地假设"间距小=同一组"对每个用户都同样成立。

边界

接近性只处理"这几个东西算不算一伙",不处理组内元素之间是什么关系(先后、从属、并列),这一层含义要靠位置排列或其他视觉手段另外表达,间距本身不携带这个信息。

当画面里同时存在其他成组线索(颜色、形状、连线、包围框)且它们和间距给出不同答案时,接近性不一定赢;具体在什么条件下哪条线索占上风需要单独验证,不能只凭直觉判断。

怎么落地

  • 设计任何列表、表单、卡片组时,先确定"应该被看成一组"的元素集合,再把组内间距定得明显小于组间间距,而不是先排好版式再回头检查分组是否正确。
  • 间距差异要做到一眼能分辨,不能是几像素的细微差别——差异太小时分组会变得模糊,不同人会读出不同的分组结果。
  • 验证办法:把界面截图去掉所有颜色、边框、文字,只留元素轮廓和间距,请没见过这版设计的人指出"哪些东西是一组",看结果是否符合预期分组。

延伸

  • 同组A2.01.2 接近性强于颜色与形状的分组作用 · A2.01.3 间距不一致会产生非预期分组 · A2.01.4 组内间距必须小于组间间距
  • 相邻A2.02 相似性 · A2.07 共同区域 · A2.10 格式塔原则的冲突与优先级
  • 站内检索proximity · Gestalt grouping · perceptual organization

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/A2.01.1