F3.03.3dark-mode luminance rebuild设计研究

深色模式下明度层级需要反向重建

别名: 深色明度反转 · inverted hierarchy · 不是简单反色

概念解释

浅色主题里标题是接近黑的灰,辅助说明是中灰,背景近白——越重要越暗,靠的是相对纸面的明度差。一键反色之后,标题变成近白、说明变成中灰、背景近黑。看起来「也是越重要越亮」,但中灰说明贴在近黑底上的对比,常常赶上甚至超过标题,辅助信息突然跟主信息抢同一级。深色模式不是把浅色明度阶梯倒过来贴,而是在新的底上重新规定「谁比底更跳」。倒贴是生产上的省事,知觉上的翻车。

机制

浅色主题的层级写在「墨水相对纸」上:最重要的对象拿走最大的变暗余量。深色主题的底已经接近黑,变暗余量没了,层级改写在「光相对夜」上:最重要的对象拿走最大的变亮余量。简单反色把原来的中灰(浅色里的弱对比)映射成深底上的中灰(相对更强的对比),弱角色被抬进强角色的区间。同时,浅色里靠「更暗」区分的两级,反色后可能落在深色里可辨明度差不够的区段。所以要重建:先定深底,再从底向上分配有限的变亮台阶,而不是把浅色色板取负。表面抬升用变亮来表达高度,是另一套问题;这里只处理「谁更重要」这条明度序。

怎么研究

同一信息结构出浅色原版、机械反色版、按深底重分配明度的重建版,三版都做灰度后的首次命名。自变量是明度映射规则,因变量是与意图序的一致率、以及辅助信息被误报为主信息的次数。机械反色版上辅助项名次上升、重建版上回落,就是「倒贴失败、重建有效」。要在目标设备的真实深色环境测,办公室亮里看深色主题会低估对比膨胀。

边界

有些界面浅色时就不是「越重要越暗」(浅底上的白字标题、彩色主按钮),反色规则从一开始就对不上,必须按角色重做,不能讨论「反转」。高对比辅助模式下系统会强制拉大明度差,你重建的细台阶可能被系统吞掉。纯黑底加纯白字对比过强,重建时标题不必顶到绝对白。品牌色、插画在深底上的饱和膨胀是色彩重映射,不要和明度台阶重建混成一次「深色适配」。

怎么落地

  • 深色主题单独做一张明度角色表:底、辅助字、正文、标题、主操作,每档只写相对底的变亮量,不从浅色色板抄数字。
  • 禁止把浅色灰阶一键取反当深色稿。中灰辅助说明要重新选一档,使它在深底上的对比明显低于标题。
  • 主操作如果在浅色里靠深填充,在深色里改靠亮填充或亮描边,而不是把同一个深色块扔进黑夜。
  • 验证:浅色页与深色页并排,都转灰度。列出「第一、第二、第三重要」在两版是否同一组对象。若深色里辅助说明挤进前二,只调深色的辅助明度,直到灰度序与浅色意图序重新对齐;不要用加描边、加饱和去补一条没重建的明度阶梯。

延伸

  • 同组F3.03.1 明度差比色相差更可靠地表达层级 · F3.03.2 高饱和色会越级夺取注意
  • 相邻F5.07 深色模式的重映射 · F5.08 深色模式下的层级 · F5.02.3 语义色在深色模式下需重新调整明度
  • 站内检索dark mode · luminance · inverted contrast · visual hierarchy

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F3.03.3