D1.03.2Redundant coding设计研究

高亮不能仅靠颜色承载

别名: 冗余编码 · non-color cue · color vision deficiency · state indication

概念解释

冗余编码(redundant coding)指高亮、选中、错误或优先级等状态除了色相,还以形状、边界、图标、文字、位置或纹理中的至少一种线索表达。要求不是禁止用颜色,而是颜色变化不能是理解状态的唯一证据。只从灰度、低亮度屏幕、投影、夜间模式或色觉差异的观看条件下仍能辨认的高亮,才真正把状态信息交给了用户。

机制

颜色感知受色觉类型、显示器校准、环境光、压缩与相邻颜色影响;即使能分辨两种颜色,用户也可能在密集列表或短暂扫视中来不及把它们解释成不同状态。非色彩线索为同一信号提供独立的感知通路:轮廓建立对象边界,图标或文字给出语义,位置与形状支持快速外周识别。冗余不是把装饰堆在元素上,而是确保关键差异在任一单一线索弱化时仍可被恢复。

怎么研究

评估时可先将界面转为灰度、在不同亮度和常见色觉模拟条件下检查任务完成,再让参与者在真实设备上进行目标查找、状态判断和错误恢复。测量状态辨认准确率、搜寻时间和误操作,分别比较仅颜色与颜色加形状、文字或边界的版本。模拟不能替代真实用户测试:色觉差异只是一个因素,低质量显示、强光反射、疲劳和注意分散也会让色彩唯一编码失效。还应检查冗余线索是否在放大、缩小和本地化后仍保留。

边界

冗余编码不意味着每个彩色元素都要加标签。纯装饰色、没有行为后果的品牌色和可由相邻正文完整解释的插图不承担关键状态时,可以只考虑视觉协调。反过来,单纯加一个图标但与状态无固定映射,也不构成有效冗余。过多的边框、徽章和文字会破坏信息层级,因此应为需要被迅速区分且会改变操作的状态优先分配第二线索。

怎么落地

  • 列出每一种以颜色标出的状态及其对应的操作后果,给高后果状态补上稳定的边界、符号、文字或结构变化。
  • 在灰度、低亮度、强光和不同缩放级别下执行真实任务;不能仅看设计稿中两种色值是否不同。
  • 让非色彩线索与状态一一对应,并在相同组件中保持一致,避免同一图标或轮廓在别处表示相反含义。
  • 用状态识别和错误恢复测试验收:参与者应能说出差异是什么、接下来能否操作,而不是只指出「这里颜色不一样」。

延伸

  • 同组D1.03.1 选中态与悬停态必须可区分 · D1.03.3 多选状态需要显示已选数量
  • 相邻D1.04 焦点指示环 · D1.07 禁用态
  • 站内检索redundant coding · non-color cue · color vision deficiency

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/D1.03.2