F5.02.3Color appearance设计研究
语义色在深色模式下需重新调整明度
别名: 语义色重映射 · Hunt effect · 深色状态色
概念解释
浅色界面里的错误红是压在白底上的一枚偏深色块,看起来沉、像盖章。切到深色界面后如果原样贴上去,它会变成一块会发光的污渍,成功绿也跟着荧光起来。四个状态还在,但不像状态了。深色模式要给语义色另调明度,让「错 / 过 / 当心 / 告知」在深底上仍然落在原来的类别里。
这不是把整页反相,也不是单纯把所有鲜色降饱和。
机制
颜色外观跟着周围走。同一枚红,白底上是物体色,深底上更接近光源色——同时对比把色度抬起来,Hunt 效应又让相对更亮的色块显得更鲜。浅色主题里用来「盖在白上」的深饱和红,到了深底就既刺又飘,分类从「错误」滑向「警报灯」或「坏掉的像素」。
要保住类别,通常得把状态色往浅一层搬:深底上的错误是偏亮的红字或浅红底,而不是那枚为白底准备的深红填色。成功、警告、信息各有自己的深浅锚点,不能四色共用一次「减 20% 亮度」。背景填充和前景文字还要分开调:浅色主题的淡红底在深色主题里往往要改成透明红或更深的红底,否则一块中等红会同时不像底、也不像字。
怎么研究
在浅底和深底上呈现同一组状态色,做分类与不适评分。自变量:是否针对深底重算明度、色度是否跟着改、填充与文字是否分轨。因变量:类别正确率、刺眼评分、与浅色主题的「还是不是同一种错」匹配判断。
适应很关键。刚从亮环境进来的观察者会把深底上的状态色看得更炸;要报告适应时长和屏幕亮度,不能只报 hex。
边界
- 纯黑底上的问题会被光晕放大,那是背景选择的后果,不单是状态色没调。
- 高对比模式会把状态进一步推到极端明度差,不能把深色主题的那套浅红色直接拿去当高对比方案。
- 色弱观察者主要丢的是色相,不是明度;只调明度救不回红绿不分,但调错明度会让他们仅剩的明度线索也乱掉。
- 品牌红若兼任错误色,深色里调明度会改变品牌识别,这是角色冲突,不是调参能单独解决的。
怎么落地
- 为每个语义色准备浅色 / 深色两套:文字色、填充色、描边色分开,不要只做一次 hex 反相。
- 在目标深底上并排看四类状态,问还能不能立刻叫出名字;发荧光或发脏的那枚单独抬明度或降色度,直到类别回来。
- 淡底提示条在深色里优先改成描边或低透明填充,避免整块中等饱和色浮在深底上。
- 验证办法:同一条错误在浅色与深色主题下各截一张,遮住文案问「这是不是同一种状态」;经常被看成两种东西,就重做深色那一套明度,而不是加粗字重。