A2.02.3Differentiate elements with different functions设计

不同功能的元素必须在外观上可区分

别名: 视觉区分度 · distinguishability rule

概念解释

这是相似性原则反过来的用法:既然外观相似会被当成功能相同的证据,那么功能不同的元素就必须在外观上做出足够的差异,不能只靠位置、文字说明来区分。这条规则要求的不是"看起来不完全一样",而是"差异大到能被相似性分组机制当作两个不同的类别"。

机制

相似性分组是按属性通路分别计算的,一条通路上的取值只要还落在同一个可辨认的范围内,就会被归为同一类,不会因为存在细微差异就自动拆开。两个颜色只是深浅略有不同的图标,在快速扫视下大概率仍会被当成同一类处理;只有当差异跨过了该通路能可靠区分的范围(换了完全不同的色相、换了轮廓形状),才会被系统地分进两类。

这意味着"区分"不是一个二元判断,而是要让差异落在某条特征通路上、且足够大,才能真正触发分类机制把两者分开。

边界

区分度是否足够,取决于查看条件:正常光线下近距离细看能分辨的差异,在弱光、小屏幕、快速扫视或视觉障碍等条件下可能完全无效,这些场景需要更大的差异幅度,不能用最佳观看条件下的可辨认阈值来判断是否够用。

只在一个属性维度上加大差异(比如只调深浅),如果这个维度本身对该用户群体的分辨力较弱(例如色觉差异),区分效果仍然有限,这种情况下单一维度不足以保证可靠区分。

怎么落地

  • 功能不同的元素至少在一个高辨识度维度上(形状、图标内容、整体色相,而不是同一色相的深浅)做出差异,深浅、粗细这类细微变化不足以单独承担区分任务。
  • 后果差异大的功能对(例如确认与取消、保存与删除)优先在形状或图标这类不依赖颜色的维度上做区分,避免只靠色觉正常的人才能可靠分辨的方式。
  • 缩略、模糊、远距离查看等真实使用场景下也要保持可区分,不能只在设计稿的标准查看条件下验证过关。
  • 验证办法:把两个元素的截图缩小到远距离能看清整体轮廓的程度,或调低对比度模拟弱光环境,检查是否仍能一眼分辨出这是两个不同的东西。

延伸

  • 同组A2.02.1 外观相似的元素被感知为同类 · A2.02.2 相似即同类的推断会导致功能误判
  • 相邻A2.01.4 组内间距必须小于组间间距 · A1 视觉感知
  • 站内检索visual distinguishability · similarity avoidance · icon differentiation

同组卡片

快捷操作

分享

分享当前页面

ios_share

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