今すぐログイン 你有没有注意过，很多 App 的深色模式，在晚上关灯后打开，反而比浅色模式更让人难受？微信测试版和网易云音乐曾推出过的深色主题，就被不少用户吐槽“看着很累”“眼睛更酸了”。其实，这些问题在 Google 的 Material Design 深色模式规范里早有答案。
深色模式绝不是简单地把背景涂黑、把文字刷白。它是一套独立于浅色模式的色彩系统，主要作为默认浅色界面的补充，而不是替代品。好的深色模式需要在低亮度环境下仍能提供舒适的阅读体验，同时保持界面的层次感和可用性。Material Design 对此有几条很明确的要求：深色表面与纯白文本之间的对比度至少达到 15.8:1；海拔的表达方式也得变——浅色模式下我们用阴影暗示组件浮起的高度，但在深色背景里阴影几乎看不见，所以谁的层级越高，表面颜色反而越亮，就像有一盏隐形的光源从上方照下来；用色上，鲜艳的色块在深色背景上会让眼睛迅速疲劳，颜色必须去饱和，首选色与主文字之间的对比度也不能低于 4.5:1；最后，整个界面需要大面积使用深色，色彩只用来做有限的强调，而不是铺满屏幕。
这些要求落到具体设计上，第一个关键选择就是：背景到底用纯黑还是深灰？很多人直觉上觉得深色模式就该用 #000000，但 Google 推荐的是 #121212。原因很简单，纯黑底上白色文字的反差过于强烈，盯久了会加剧视疲劳，而且纯黑很难表现界面层次——一片死黑，卡片和浮层全揉在一起了。深灰则能容纳更多灰阶变化，让亮度的细微差异成为区分前后关系的语言，同时还能减轻眼部压力。
在深灰的画布上，怎么表达不同的海拔呢？靠的是叠加半透明白色。想象每一个组件表面都贴着一层透明度不同的白色蒙版：海拔越高的卡片，这层白色就越明显，好像它离光源更近一些。这种手法不仅能清晰区分组件边缘，也让阴影有了用武之地——深色模式下的阴影依然必须是黑的，亮起的表面与黑影之间就有足够的分辨率。不过，对于使用了品牌色或首选色的组件，就不能简单叠加白色，否则颜色会跑偏，需要另做处理。
文字层级同样有一套精细的规则。深色背景上的浅色文字，并不是直接设为纯白，而是通过不透明度来控制视觉权重。高优先级的标题和正文使用 87% 不透明度的白色，辅助信息或提示文字降到 60%，完全不可用的状态文字只有 38%。这样既保持了文字与背景之间超过 15.8:1 的对比度，又不会让所有文字都是一个亮度，界面的节奏感一下子就出来了。
颜色选择是深色模式最容易翻车的地方。直接在深色背景上使用浅色模式下的饱和色，往往就是“灾难”的源头——比如高饱和的蓝色按钮，在黑色背景上会像发光体一样刺眼。Material Design 给出的解决方案是优先使用去饱和的颜色，并推荐基线色调 200 作为深色模式的首选色。如果需要延伸出更多色彩，可以基于首选色派生出一套低饱和度的色阶。次级色同样要经过去饱和处理，确保与背景的对比度不低于 4.5:1。高饱和的颜色就完全不能用了吗？也不是，但必须极其克制，只留给品牌元素或需要强烈吸引注意的强调色，比如 logo 或某个关键操作按钮，而且整个界面中这种高饱和色最好控制在 1-2 种，否则优先级就乱了。错误状态的颜色也有专门规定，比如 Material Design 的深色错误色 #CF6679，其实就是浅色错误色 #B0020 叠加了 40% 不透明度的白色，这样既能醒目地传达错误信息，又不会过于扎眼。
在实际应用中，大面积的组件如顶部导航栏、背景区域，应当坚持使用深色，而小面积的控件如开关、浮动按钮，可以适当用亮色来提升辨识度。一个有意思的用法是，把某些原本浅色的小组件（比如 Snackbar）在深色模式下直接做成浅色背景，让它从整个深色界面中跳出来，从而强化优先级，告诉你“这里有一条重要消息”。
回过头来看，很多 App 的深色模式之所以体验不佳，恰恰是因为忽略了这些细节。要么是用了纯黑背景导致文字太刺眼，要么是保留了浅色模式下那些高饱和的按钮和图标，要么是层次完全消失，卡片和背景糊成一片。微信和网易云音乐的早期测试版，正是在这些细节上栽了跟头。如果你对上面的说法还有怀疑，不妨今晚关灯后，躺在床上实际打开那些不规范的深色模式试试看——眼睛的酸涩感不会骗人。
最后，如果你想自己验证某个界面的颜色对比度是否达标，可以借助 WCAG 的对比度计算工具随手测一下。好的深色模式，从来不是“黑底白字”四个字能概括的，它是一套需要遵循物理和心理准则的精密设计系统。