F5.02.1Semantic color设计研究

成功、警告、错误、信息需要固定映射

别名: 语义色 · 状态色 · status colour · 成功警告错误

概念解释

表单刚保存,这条提示上周是绿的,这周改成了琥珀,因为另一个小组觉得「完成」更像提醒。用户不再把颜色当信号,只会停下来读字。语义色(semantic colour)把成功、警告、错误、信息绑到固定的色相类别上,让状态成为一种可学习的编码,而不是每次重新猜。

固定的是类别,不是某一枚永远不许改的 hex。

机制

人把反复共现的颜色和结果收进一套分类:绿≈过了、红≈拦下来、琥珀≈要你看一眼、蓝≈告知。这是范畴化颜色编码,靠的是一致重复,不是光谱上红绿有道德含义。映射一旦养成,下一次只要色相落在那个篮子里,分类可以在读完文案前完成;映射若周周改,分类器失效,颜色从信号退回装饰。

四个类别还要彼此可分。成功和信息都走冷静的蓝绿,警告和错误都走暖色,用户会在「要不要立刻处理」上犹豫。可分靠的是色相距离和用途绑定,不是把四个都做成最饱和的一档。

怎么研究

用分类任务而不是偏好评分:短时呈现一条无文字的色条或带中性文案的提示,让被试选择成功 / 警告 / 错误 / 信息。自变量:映射是否在会话内保持、类别之间的色相距离、是否同时给图标。因变量:正确率、反应时、信心。跨会话再测一次,看不稳定映射会不会把正确率打回随机。

注意实验室里的「红=错」来自被试的文化习惯,不能直接推广到涨跌色相反的市场——那是另一套约定,不能混进这套状态分类。

边界

  • 色弱用户不能只靠这四个色相完成分类,映射稳定也不等于可以去掉文字或形状。
  • 产品若从未建立过这套习惯(一次性落地页、外部邮件),固定映射的收益很小。
  • 「信息」和「中性」在有的产品里不是四类里的一类,硬凑四色会制造假状态。
  • 固定映射管的是状态识别,不管品牌认不认得出自己。

怎么落地

  • 给成功、警告、错误、信息各指定一个色相篮子,所有提示、内联校验、徽章走同一张表。
  • 禁止业务线私自改「保存成功」的颜色;要改就改整张表,并同期换掉旧实例。
  • 四类并排铺在同一背景上,确认不靠文字也能先分成「通过 / 留意 / 失败 / 告知」。
  • 验证办法:截掉文案只留色条,让未参与设计的人分类;某一类经常被叫成另一类,就加大色相距离,而不是加一句更长的说明。

延伸

  • 同组F5.02.2 语义色不得挪作装饰 · F5.02.3 语义色在深色模式下需重新调整明度
  • 相邻F5.03 品牌色与功能色 · F5.10 颜色的文化语义
  • 站内检索semantic color · status colour · categorical colour coding

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F5.02.1