F5.07.1Dark mode remapping设计研究

深色模式不是简单反色

别名: 反色 · invert colors · 深色主题 · colour inversion

概念解释

把浅色仪表盘每个像素做 255 − 通道,柱状图变成照相底片,人像像 X 光,卡片阴影变成一圈光,品牌黄变成脏蓝。这叫反色(inversion),不是深色模式。深色模式是把表面改写成暗的中性色,让该保持色相的东西大致还在原来的色相上,照片和插画不要跟着翻面。

机制

反色保住的是通道差,毁掉的是外观关系。物体色的识别依赖「亮的是纸、暗的是墨」;反转之后墨变亮、纸变暗,深度线索、照片里的皮肤和天空都会读错。色相也会走:黄的补色靠近蓝,肤色变成青灰。CIE 色貌模型里,适应的是白点与周围平均亮度,不是把每个刺激映射到它的补色。

正确的重映射更像换一套照明:背景从高 L* 挪到低 L*,文字从低 L* 挪到高 L*,品牌色和数据色沿明度轴搬家、尽量锁住色相角。图像、图标若本身已是真实场景或已设计好的资产,应整块替换或加遮罩,而不是逐像素取补。

怎么研究

把同一界面做成三种刺激:原浅色、通道反色、人工重映射。测识别(这根柱子是不是还是「销售额」)、舒适、品牌色是否仍被叫出原来的名字。自变量:反色 vs 分平面重映射、图像是否豁免。因变量:任务正确率、不适评分、色相命名一致性。

眼动可以看人像和图表在反色条件下是否被当成异常物反复看。不要只用对比度数字当成功标准——反色往往「对比度还在」,任务已经垮了。

边界

  • 系统级「智能反色」会豁免照片,看起来像深色模式,仍可能把自定义绘制的图表和阴影翻错。那是辅助功能开关的行为,不能拿来当产品主题。
  • 极少数以线框为主、没有照片和软阴影的界面,反色的破坏较小,但仍会把品牌色推到补色。
  • OLED 为省电把背景推到真黑,是功耗策略,不是反色算法变得合理。

怎么落地

  • 按角色重映射:表面、文字、品牌、数据、语义,各写浅→深的对应,禁止整页 invert 滤镜当主题。
  • 照片、用户头像、带真实光照的插画在深色主题里保持原样,必要时加暗色衬底,不要取补。
  • 阴影、内发光、渐变这些依赖「上亮下暗」的效果要重做,不能跟着通道一起翻。
  • 验证办法:把反色结果和重映射结果并排,圈出照片、品牌色、图表、阴影四处;任何一处读起来像底片,就还在反色。

延伸

  • 同组F5.07.2 纯黑背景与纯白文字对比过强 · F5.07.3 饱和色在深底上需降低饱和
  • 相邻F5.08 深色模式下的层级 · F5.12 高对比模式
  • 站内检索dark mode remapping · colour inversion · colour appearance

同组卡片

快捷操作

分享

分享当前页面

ios_share

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