A2.01.2Proximity dominance over similarity设计

接近性强于颜色与形状的分组作用

别名: 接近性优先 · proximity over similarity

概念解释

把一批元素的间距和外观(颜色、形状)故意做成两条相反的分组线索——比如让同色元素之间的距离拉大、异色元素之间的距离缩小——大多数人报告的分组会跟着距离走,而不是跟着颜色或形状走。这说明在这两条线索正面冲突时,接近性通常占上风。

这不是说颜色和形状不能用来分组,而是说当两者矛盾时,间距给出的答案更容易被当成"真正"的分组,外观上的共同点反而容易被解读成"同一组里的不同角色"而不是"另一组"。

机制

间距的判断只需要比较空间位置,是视觉处理里较早、较省力的一步;而颜色或形状是否"相似"要先识别出各自的属性再逐个比对,属于晚一步、需要更多加工的判断。当两条线索同时出现且方向相反,先到位的空间判断更容易定型,后到位的属性比对就只能在这个已经成形的分组框架里找位置,很难反过来推翻它。

边界

这个强弱关系不是绝对的:把颜色或形状的差异做得极端(比如唯一的亮色、唯一的特殊形状),或者把间距差异压缩到很接近,接近性的优势会被削弱甚至反转。多条线索同时存在时到底谁赢、赢多少,取决于每条线索各自的对比强度,而不是一个固定的排名表——具体怎样量化和验证这种强弱关系,属于另一套统一的方法论,这里不展开。

也不要把"接近性更强"理解成"颜色和形状不该用来分组":在没有间距冲突的版式里,颜色和形状仍然是常用且有效的分组手段,只是遇到冲突时不该指望它们压过间距。

怎么落地

  • 当一个版面里既想用间距分组,又想用颜色或形状标出类别时,先检查两套线索是否指向同一个分组结果;如果指向不同结果,用户大概率会先按间距分组,颜色标签会被理解成"组内的子类型"而不是"另一组"。
  • 需要表达"这几个东西按颜色分成不同组,但物理位置又不方便拉开距离"的场景,不要指望颜色单独完成分组任务,应该同时收紧组内间距、拉开组间间距,让两条线索一致。
  • 验证办法:把版式中的颜色去掉、只留位置关系,看分组是否和保留颜色时一致;如果一致,说明间距已经在独立承担分组功能,颜色只是锦上添花。

延伸

  • 同组A2.01.1 距离近的元素被感知为一组 · A2.01.3 间距不一致会产生非预期分组 · A2.01.4 组内间距必须小于组间间距
  • 相邻A2.02 相似性 · A2.07 共同区域 · A2.10 格式塔原则的冲突与优先级(线索相对强度的验证方法统一写在这一组)
  • 站内检索proximity dominance · cue conflict · perceptual grouping strength

同组卡片

快捷操作

分享

分享当前页面

ios_share

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