A2.02.1Similarity设计研究

外观相似的元素被感知为同类

别名: 相似性原则 · Gestalt similarity

概念解释

一批元素只要在某个视觉属性上取值相同——同一种颜色、同一种形状、同一个大小、同一种纹理或朝向——就会被看成属于同一类,即使它们散落在版面各处、彼此并不相邻。这条线索叫相似性(similarity)。

它和接近性回答的是不同问题:接近性靠的是空间距离这个连续量,相似性靠的是某个离散属性上"取值是否相同",不涉及距离。两个相隔很远但同色的图标,会因为相似性被联系在一起;这层联系不需要它们挨在一起才成立。

机制

相似性分组依赖的是视觉系统里相对独立的几条特征通路——颜色、朝向、大小、形状各自有专门的早期加工机制,会分别提取出"这个元素在这条通路上的取值"。当一批元素在某一条通路上取值一致时,这条通路就会把它们标成一类,这个标记先于对元素身份或含义的识别就已经发生。

正因为各条通路是分开计算的,相似性分组通常只在单一属性上最稳固:颜色相似但形状不同的一组元素,主要按颜色分类;形状相似但颜色不同的一组,主要按形状分类。多个属性同时改变、又不一致时,分组结果会变得不那么确定,因为几条通路给出的答案彼此不一致。

怎么研究

相似性分组常通过纹理分割类范式来测量:在一片背景元素中嵌入若干在某个属性(朝向、颜色、大小)上不同的元素,考察这些元素能不能被自动、快速地从背景中分离出来,用检出时间或准确率衡量该属性的分组强度。这类范式的一个经典发现是,某些属性(比如颜色、明确的朝向差异)能产生几乎不需要逐个搜索就能完成的分割,而另一些属性组合则需要逐一比对才能分清。

在界面研究里,这套方法通常用来检验一套视觉编码(例如用颜色区分状态、用形状区分类型)是不是真的能让用户不经过逐项阅读就完成分类判断。

边界

相似性给出的是"看起来像同一类"的知觉判断,不保证这些元素在功能或语义上真的属于同一类——这层落差是它最主要的使用风险,具体表现和后果由这一组里的另一条单独展开。

当画面里同时有强烈的空间聚类(间距差异很大)时,相似性判断容易让位给空间线索;相似性更适合用在元素本身分散、无法靠位置分组的场景。

怎么落地

  • 需要让用户不经逐项阅读就能把一批元素分类时,选一个视觉上区分度高的单一属性(颜色或形状二选一为主),而不是同时变动多个属性又不完全一致,否则分组会显得混乱。
  • 同一类元素即使分散在页面不同区域,也可以用统一的颜色或图形语言把它们视觉上连成一类,不必依赖把它们排在一起。
  • 验证办法:把版面缩小到只能看清色块和轮廓的程度(模糊或远距离查看),检查目标类别能不能不靠阅读文字就被快速指认出来。

延伸

  • 同组A2.02.2 相似即同类的推断会导致功能误判 · A2.02.3 不同功能的元素必须在外观上可区分
  • 相邻A2.01 接近性 · A2.06 图形与背景 · A2.10 格式塔原则的冲突与优先级
  • 站内检索similarity · visual search · texture segregation · perceptual grouping

同组卡片

快捷操作

分享

分享当前页面

ios_share

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