J2.03.1redundant status coding设计研究

状态需同时有形状或文字

别名: 状态不只靠颜色 · redundant coding · 红绿点

概念解释

在线、错误、通过、已选,不能只靠换成另一种颜色来告诉人。状态必须在颜色之外再给出形状或文字:叉与勾、实心与空心、标签写「失败」。颜色可以保留,作为加快识别的通道,但不能当唯一通道。图表里靠色相区分系列、正文里靠蓝色认链接,是后面两条;这里管的是界面里那些会变的状态。

机制

颜色是单通道编码。一旦这条通道对某个人、某一台显示器、某一种光照失效,状态机就塌成同一种样子。红绿一对尤其脆,但问题不限于红绿色觉:强光下的手机、灰度电子墨水、投影偏色,都会把相邻色相压到分不开。即便色觉典型的人,五档状态若只在色相上挪一点点,分类也不稳。

冗余编码(redundant coding)把同一状态写进两条可分离的特征:色相加形状,或色相加文字。形状走的是空间频率和轮廓,文字走的是语义,都不依赖把波长映射成「红/绿」这种范畴。第二层:多出来的那条线索自己也要看得见——一个 1 px 的红点和一个 1 px 的灰点,形状上没有差别。不要在这里展开色觉缺陷的生理分型与比例,那是人因侧的机制;这里只取「单通道会断」这一事实。

怎么研究

把界面做成灰度截图,或开系统灰度,让没见过产品的人给每一行标状态。对照:只改颜色、颜色加图标、颜色加文字。色觉模拟器可作筛子,但不能当唯一证据,因为它只覆盖部分分型、也不模拟强光。

自变量:线索组合(仅颜色 / 颜色+形状 / 颜色+文字)、状态档数。 因变量:状态识别正确率、犹豫时长、灰度条件下的正确率。

抽查表单校验、开关、在线点、选中行、标签页选中态。自动化只能发现「用了 color 属性」,发现不了「红框旁边有没有字」。

边界

纯装饰的品牌色不承载对/错,不必加形状。整块可点的卡片用描边加勾选来表示选中,已经有形状。文本输入的语法高亮若只服务能看见颜色的人,需要另给错误列表。印刷后仍要分状态的票据,更不能只印色。动态色盲模式滤镜不是产品免责声明——滤镜打不开时界面自己仍要站得住。

怎么落地

  • 错误与警告:文字说明 + 图标,不要只把边框变红。
  • 开关与在线状态:用 ON/OFF、连接/断开,或明显不同的形(满月/弯月、勾/空),不要只靠绿点灰点。
  • 选中行在颜色之外加勾选、加粗或「已选」。
  • 验证:截图去色,找一个没看过稿的人指认每一处状态。指错的每一处补形状或补字。再用键盘走一遍,确认选中不只靠背景色。

延伸

  • 同组J2.03.2 图表系列需要图案或直接标注 · J2.03.3 链接不能仅靠颜色与正文区分
  • 相邻A1.06 色觉缺陷 · J2.10 非文本对比度
  • 站内检索redundant coding · color is not the only cue · status indicator

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/J2.03.1