F5.02.3Color appearance设计研究

语义色在深色模式下需重新调整明度

别名: 语义色重映射 · Hunt effect · 深色状态色

概念解释

浅色界面里的错误红是压在白底上的一枚偏深色块,看起来沉、像盖章。切到深色界面后如果原样贴上去,它会变成一块会发光的污渍,成功绿也跟着荧光起来。四个状态还在,但不像状态了。深色模式要给语义色另调明度,让「错 / 过 / 当心 / 告知」在深底上仍然落在原来的类别里。

这不是把整页反相,也不是单纯把所有鲜色降饱和。

机制

颜色外观跟着周围走。同一枚红,白底上是物体色,深底上更接近光源色——同时对比把色度抬起来,Hunt 效应又让相对更亮的色块显得更鲜。浅色主题里用来「盖在白上」的深饱和红,到了深底就既刺又飘,分类从「错误」滑向「警报灯」或「坏掉的像素」。

要保住类别,通常得把状态色往浅一层搬:深底上的错误是偏亮的红字或浅红底,而不是那枚为白底准备的深红填色。成功、警告、信息各有自己的深浅锚点,不能四色共用一次「减 20% 亮度」。背景填充和前景文字还要分开调:浅色主题的淡红底在深色主题里往往要改成透明红或更深的红底,否则一块中等红会同时不像底、也不像字。

怎么研究

在浅底和深底上呈现同一组状态色,做分类与不适评分。自变量:是否针对深底重算明度、色度是否跟着改、填充与文字是否分轨。因变量:类别正确率、刺眼评分、与浅色主题的「还是不是同一种错」匹配判断。

适应很关键。刚从亮环境进来的观察者会把深底上的状态色看得更炸;要报告适应时长和屏幕亮度,不能只报 hex。

边界

  • 纯黑底上的问题会被光晕放大,那是背景选择的后果,不单是状态色没调。
  • 高对比模式会把状态进一步推到极端明度差,不能把深色主题的那套浅红色直接拿去当高对比方案。
  • 色弱观察者主要丢的是色相,不是明度;只调明度救不回红绿不分,但调错明度会让他们仅剩的明度线索也乱掉。
  • 品牌红若兼任错误色,深色里调明度会改变品牌识别,这是角色冲突,不是调参能单独解决的。

怎么落地

  • 为每个语义色准备浅色 / 深色两套:文字色、填充色、描边色分开,不要只做一次 hex 反相。
  • 在目标深底上并排看四类状态,问还能不能立刻叫出名字;发荧光或发脏的那枚单独抬明度或降色度,直到类别回来。
  • 淡底提示条在深色里优先改成描边或低透明填充,避免整块中等饱和色浮在深底上。
  • 验证办法:同一条错误在浅色与深色主题下各截一张,遮住文案问「这是不是同一种状态」;经常被看成两种东西,就重做深色那一套明度,而不是加粗字重。

延伸

  • 同组F5.02.1 成功、警告、错误、信息需要固定映射 · F5.02.2 语义色不得挪作装饰
  • 相邻F5.07 深色模式的重映射 · F5.09 色板的感知要求
  • 站内检索color appearance · Hunt effect · dark theme semantic colour

同组卡片

快捷操作

分享

分享当前页面

ios_share

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