U4.06.5Semantic colour needs a text label to be judged on its own设计

语义色需与文字标签同时出现才能被单独判定

别名: 语义色标注 · 颜色加文字

概念解释

语义色表达"这是什么性质",但"性质"的具体判定必须由同场出现的文字完成:红色块旁要写"逾期",绿色徽章上要写"已完成",图例里的语义色要配名称。原因是语义色只传递一个类别槽位,槽位里装什么(是"危险"还是"热力高"还是"品牌")由语境与文字决定——脱离文字的语义色只能靠猜,猜的依据是读者自己的经验库,猜错率不可控。

机制

语义色的读取是两段式:第一段自动联想(红色→危险槽位),第二段具体化(这个"危险"指逾期/超支/故障中的哪个)。第一段快而不可靠,第二段靠文字且必须在场。没有文字时,读者只能用颜色+常识补全,而语义色的联想宽度极大(红色可指向十几种判断),补全方向完全取决于读者最近被训练过的场景——这就是为什么同一个红色图标,财务用户读成"超支"、运维用户读成"宕机"。文字在场把第二段从猜测变成读取,判定才有唯一性。

边界

并非一切语义用色都要文字:高度固化的界面惯例(红叉关闭、绿色进行中)已被广泛训练,文字可以省;频繁切换语境的仪表盘、面向新用户的图表、跨文化产品则必须带字。文字与颜色也不许互相替代——只写"状态"两个字不加色,丢了预注意搜索效率;只上色不写字,判定不可靠。两者同时在场时还有一致性问题:文字说"已完成"而颜色是黄,读者信颜色还是信字?答案是字为准,颜色立即修正——这种不一致本身也是要拦的缺陷。

怎么落地

  • 每处语义用色配对检查:颜色出现的位置上,文字标签是否也在场且与颜色语义一致;不在场即补。
  • 图例里的语义色块一律带名称,不用"红/绿"当名称——写"超支/正常",颜色自己说明不了自己。
  • 验证:把界面里所有语义色替换为灰色,请读者仅凭剩余文字判断状态;能完整判断说明文字已自足,再上色后两通道应相互印证而非各自为政。

延伸

  • 同组U4.06.1 语义色会覆盖色板本身的中性含义 · U4.06.2 语义色的方向随文化与行业改变,涨跌配色即为一例 · U4.06.3 同一界面中语义色与分类色需划定各自的使用范围 · U4.06.4 品牌色直接进入数据色板会破坏感知均匀性
  • 相邻U4.05.4 仅靠颜色区分的状态提示不满足无障碍要求 · U4.05.2 明度、形状、图案与直接标注是颜色的主要替代通道
  • 站内检索semantic colour labelling · legend naming · colour text pairing

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U4.06.5