状态需同时有形状或文字
别名: 状态不只靠颜色 · redundant coding · 红绿点
概念解释
在线、错误、通过、已选,不能只靠换成另一种颜色来告诉人。状态必须在颜色之外再给出形状或文字:叉与勾、实心与空心、标签写「失败」。颜色可以保留,作为加快识别的通道,但不能当唯一通道。图表里靠色相区分系列、正文里靠蓝色认链接,是后面两条;这里管的是界面里那些会变的状态。
机制
颜色是单通道编码。一旦这条通道对某个人、某一台显示器、某一种光照失效,状态机就塌成同一种样子。红绿一对尤其脆,但问题不限于红绿色觉:强光下的手机、灰度电子墨水、投影偏色,都会把相邻色相压到分不开。即便色觉典型的人,五档状态若只在色相上挪一点点,分类也不稳。
冗余编码(redundant coding)把同一状态写进两条可分离的特征:色相加形状,或色相加文字。形状走的是空间频率和轮廓,文字走的是语义,都不依赖把波长映射成「红/绿」这种范畴。第二层:多出来的那条线索自己也要看得见——一个 1 px 的红点和一个 1 px 的灰点,形状上没有差别。不要在这里展开色觉缺陷的生理分型与比例,那是人因侧的机制;这里只取「单通道会断」这一事实。
怎么研究
把界面做成灰度截图,或开系统灰度,让没见过产品的人给每一行标状态。对照:只改颜色、颜色加图标、颜色加文字。色觉模拟器可作筛子,但不能当唯一证据,因为它只覆盖部分分型、也不模拟强光。
自变量:线索组合(仅颜色 / 颜色+形状 / 颜色+文字)、状态档数。 因变量:状态识别正确率、犹豫时长、灰度条件下的正确率。
抽查表单校验、开关、在线点、选中行、标签页选中态。自动化只能发现「用了 color 属性」,发现不了「红框旁边有没有字」。
边界
纯装饰的品牌色不承载对/错,不必加形状。整块可点的卡片用描边加勾选来表示选中,已经有形状。文本输入的语法高亮若只服务能看见颜色的人,需要另给错误列表。印刷后仍要分状态的票据,更不能只印色。动态色盲模式滤镜不是产品免责声明——滤镜打不开时界面自己仍要站得住。
怎么落地
- 错误与警告:文字说明 + 图标,不要只把边框变红。
- 开关与在线状态:用 ON/OFF、连接/断开,或明显不同的形(满月/弯月、勾/空),不要只靠绿点灰点。
- 选中行在颜色之外加勾选、加粗或「已选」。
- 验证:截图去色,找一个没看过稿的人指认每一处状态。指错的每一处补形状或补字。再用键盘走一遍,确认选中不只靠背景色。