A2.07.2Common-region dominance over proximity设计

容器分组强于接近性分组

别名: 容器优先于间距 · region beats proximity

概念解释

把间距暗示的分组和容器(背景色块、描边框)暗示的分组故意做成两个相反的答案——比如让同一容器里的两个元素间距拉大、不同容器里的两个元素间距缩小——大多数人报告的分组会跟着容器走,而不是跟着间距走。也就是说,容器和接近性正面冲突时,容器通常占上风。

这不代表间距失去了意义:在没有容器的版面里,间距仍然是最直接的分组手段,只是一旦画面里出现了明确的容器,间距不该指望能反过来推翻容器给出的分组结果。

机制

容器改变的是"这块画面被切成几片区域"这个更早的步骤,一个元素只需要判断自己落在哪块区域里就能确定组别;接近性则要求先比较元素之间的相对距离,这个比较是在容器已经把区域划好之后才发生的。当两者给出的答案不一致,容器给出的答案已经在更早的阶段成形,接近性的比较只能在这个既定框架内部起作用,很难反过来推翻它。

边界

这个优先关系不是绝对的:容器的边界如果做得极淡、极细,或者间距差异被拉到非常悬殊,容器的优势会被削弱甚至反转。两条线索各自能压过对方多少,取决于每条线索本身的强弱程度,而不是一个固定不变的排名——如何量化这种此消彼长的关系,属于另一套统一的验证方法,这里不展开。

也不要把"容器更强"理解成"间距不重要":容器之内的元素仍然可以靠间距做进一步的细分组,容器只是决定了最外层的分组结果,不覆盖容器内部的层次。

怎么落地

  • 当一个版面里同时想用间距分组、又想用背景色块或描边圈出模块时,先确认两套线索指向同一个分组结果;如果指向不同结果,用户大概率会先按容器分组,间距上的差异会被理解成"容器内部的次级排列"而不是"另一个组"。
  • 需要把间距因为栅格限制无法拉开的几个元素明确分成不同组时,不要指望调整间距能压过已经存在的容器,应该直接改用不同的容器(换一块背景色块、加一条分隔线围出的区域)来体现分组。
  • 验证办法:把容器的背景色和描边全部去掉,只保留元素本身的间距关系,看分组结果是否和保留容器时一致;如果不一致,说明容器确实在独立决定分组,而不是和间距一起顺势起作用。

延伸

  • 同组A2.07.1 同一封闭区域内的元素被感知为一组 · A2.07.3 容器嵌套过深会失去分组意义
  • 相邻A2.01 接近性 · A2.10 格式塔原则的冲突与优先级(多条线索相对强度的验证方法统一写在这一组)
  • 站内检索common region dominance · cue conflict · container grouping

同组卡片

快捷操作

分享

分享当前页面

ios_share

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