暗黑模式设计指南：不仅是变黑那么简单

随着 OLED 屏幕的普及和用户对夜间阅读体验的重视，暗黑模式（Dark Mode）已成为现代 App 和操作系统的标配。但很多开发者和初级设计师误以为暗黑模式就是简单地把背景设为 #000000，文字设为 #FFFFFF。这种“反色”做法不仅丑，还会导致严重的视觉问题，如拖影、眩光和层级丢失。

1. 避免纯黑 (Avoid Pure Black)

虽然纯黑 (#000000) 在 OLED 屏幕上最省电（像素点完全关闭），但它并非最佳背景色。Google Material Design 建议使用深灰色（如 #121212）作为基础背景色。

• 减少拖影 (Smearing)： 在 OLED 屏幕上，纯黑像素关闭。当用户快速滑动列表时，像素从关闭到点亮需要时间，会产生明显的紫色拖影。使用深灰可以保持像素处于低亮度开启状态，消除拖影。
• 表现阴影： 在纯黑背景上，黑色的阴影是不可见的。使用深灰背景，我们依然可以使用更深的黑色阴影来表现卡片的立体感和层级。
• 减少眼疲劳： 纯黑背景与亮色文字的对比度极高，容易产生视觉震颤。深灰背景能略微降低这种硬对比，视觉更柔和。

2. 降低饱和度 (Desaturate Colors)

在浅色模式下看起来很棒的高饱和度品牌色（如亮蓝、鲜红），在深色背景上会产生强烈的“光晕”效应。这就像在黑夜里直视车灯，会让文字变得模糊、刺眼，降低可读性。

解决方案： 设计暗黑模式时，务必降低品牌色的饱和度，提高明度。或者在原色上叠加一层 40% 的白色透明度，使其变成柔和的粉彩色（Pastel）。例如，Material Design 的蓝色从浅色模式的 #6200EE (700) 调整为暗色模式的 #BB86FC (200)。

3. 通过亮度区分层级 (Elevation via Light)

在物理世界中，物体离光源越近（层级越高），看起来就越亮。在浅色模式下，我们习惯用阴影 (Shadow) 来表现层级。但在深色模式下，阴影的作用被削弱了。

此时，我们需要通过“表面亮度”来区分层级：层级越高（离用户越近），表面颜色越亮。例如：

• 背景层 (Level 0)：#121212
• 卡片层 (Level 1)：#1E1E1E (叠加 5% 白)
• 弹窗层 (Level 2)：#232323 (叠加 8% 白)
• 悬浮按钮 (Level 3)：#252525 (叠加 11% 白)

这种通过叠加半透明白色层来提升亮度的方法，能确保不同层级在视觉上的逻辑一致性。

4. 文字的不透明度

为了保持舒适的对比度，不要使用纯白 (#FFFFFF) 文字。推荐使用不同不透明度的白色来区分文字层级：

• 主要文字： 87% 不透明度 (High Emphasis)
• 次要文字： 60% 不透明度 (Medium Emphasis)
• 禁用/提示文字： 38% 不透明度 (Disabled)

总结： 优秀的暗黑模式设计，是对光线、色彩与层级的重新演绎。它不是简单的反色，而是一套独立的视觉系统，需要设计师像对待浅色模式一样，进行精细的打磨与测试。