A2.07.1Common region设计研究

同一封闭区域内的元素被感知为一组

别名: 共同区域 · 共同区域原则 · shared enclosure

概念解释

只要一批元素落在同一块被边界(背景色块、描边、阴影卡片)圈出来的区域里,人眼会把它们看成一组——即使这些元素之间的间距、颜色、形状彼此都不一样。这条知觉线索叫共同区域(common region)。

它和"边框只是装饰"是两回事:边框一旦真正围出一块可辨识的区域,就会直接改变元素被分组的方式,不是锦上添花的视觉效果,而是分组判断本身依据的信号。

机制

接近性、相似性这类线索要求视觉系统去比较元素两两之间的关系——这个和那个离得近不近、像不像。共同区域不需要做这种比较:系统只需要判断某个元素落在哪块被围起来的区域里,这是一个更基础的图形-背景划分问题,而不是元素之间的相对关系问题。

正因为共同区域改变的是"这块画面被切成几片"这个更早的步骤,它给出的分组答案会被当成既定事实,后续再看元素间距或外观是否一致,只是在这个已经划好的区域内部做进一步区分,而不会推翻区域本身划出的组别。

怎么研究

经典验证方法是构造成对的点:先用间距把点排成"该按接近性分组"的样子,再叠加椭圆或方框,让实际圈住的组合和间距暗示的组合不一致。让被试报告或用强制选择的方式指出"哪些点是一组",看结果跟着间距走还是跟着圈出的区域走。

这套范式的关键在于只改变"是否用边界圈住"这一个变量,其余间距、颜色保持不变,这样才能确认分组结果的变化确实来自共同区域本身,而不是其他视觉差异带来的副作用。

边界

共同区域要起作用,边界本身必须清晰可辨——颜色反差过低、描边过细或区域没有真正闭合的浅色晕染,效果会大打折扣,甚至退化成普通的背景装饰。

经典验证多用点阵这类简单刺激;界面里的元素本身已经带有文字、图标等复杂视觉权重,共同区域是否还能同样干净地压过其他线索,需要针对具体版式单独确认,不能直接套用简单刺激下的结论。

怎么落地

  • 想明确表达"这几个控件是一组"时,优先加背景色块或卡片描边,而不是只靠拉开与其他组的间距——尤其当间距因为栅格限制拉不开的时候,共同区域能独立完成分组任务。
  • 区域边界的对比度要留出足够余量:在最终的配色和主题(含深色模式)下都要能一眼看出"这里是一块区域",而不是仅在设计稿的默认背景下才勉强可辨。
  • 验证办法:把卡片或色块背景去掉,只保留元素本身,请没见过这版设计的人指出"哪些东西是一组";如果答案变了,说明共同区域确实在独立承担分组功能,而不是间距等线索的附属效果。

延伸

  • 同组A2.07.2 容器分组强于接近性分组 · A2.07.3 容器嵌套过深会失去分组意义
  • 相邻A2.01 接近性 · A2.02 相似性 · A2.10 格式塔原则的冲突与优先级
  • 站内检索common region · shared enclosure · perceptual grouping

同组卡片

快捷操作

分享

分享当前页面

ios_share

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