深色模式是一种反向配色方案,将屏幕浅色元素变为深色,反之亦然。目前该功能已覆盖大多数操作系统、应用程序及社交媒体网站。
深色模式在移动设备上的采用率高达82%,用户几乎在所有场景(包括邮件和短信)中都会使用。
深色模式已在大多数操作系统、应用程序和社交网站上提供。
深色模式的优势
- 改善阅读体验:深色背景有效减少蓝光与屏幕眩光。
- 夜间表现更佳:低光环境下,黑色背景能显著减轻眼睛疲劳。
- 节省电池电量:最多可减少63%的能源消耗。
- 提高可访问性:相比浅色模式,深色模式对视力障碍人士更友好。
- 有益健康:有助于缓解眼干、偏头痛及紧张性头痛,并提升睡眠质量。
需要注意的是,深色模式在强光条件下可见度较低。虽然在弱光环境表现出色,但在阳光充足的户外,阅读文本可能更具挑战性。
设计技巧
深色模式应纳入电子邮件设计与开发的核心规划。渲染不佳的邮件不仅影响体验,还可能触发垃圾邮件过滤器,降低发件人声誉。以下是适配深色模式的关键要点:
- 优先使用PNG图像:JPG虽加载快但清晰度有限且不支持透明;PNG虽文件较大,但定义清晰、质量高,且支持透明度,这对深色模式至关重要。
在深色模式电子邮件中使用 PNG 图像有助于确保清晰度和背景透明度。
- 增加图像内边距:非透明图像应在裁剪区域周围保留适当内边距,以保持清晰可读。
确保非透明图像有足够的内边距,以保持清晰可读。
- 添加轮廓或投影:为深色字母添加白色边框,使其在深色模式下更易辨识。
通过在文本上添加白色边框,使字母在深色模式下更加醒目。图片:Email on Acid。
- 使用米白色替代纯白:许多客户端会自动反转纯黑(#000000)与纯白(#FFFFFF)。建议使用米白色(#FEFFFF),这种细微变化对人眼不易察觉,但能有效避免邮件服务商的剧烈颜色调整。
- 限制颜色数量:颜色越多,变体越复杂,潜在问题也越多。
测试资源
Twitter上的#emailgeeks社区提供了丰富的深色模式测试工具,推荐如下:
- WebAIM Contrast Checker:无障碍对比度检查器。
- Invert Colors:实现颜色反转与互补色测试。
- Proofjump:模拟深色模式效果。
- Litmus:预览及渲染各邮件客户端显示效果。
移动端开启指南
Apple iOS:
- 进入“设置” > “显示与亮度”。
- 选择“深色”即可开启。
Android:
- 打开“设置” > “辅助功能”。
- 在“色彩与动态”下开启深色主题。
深色模式已成为主流趋势,务必将其纳入设计规范。通过频繁测试并接受渲染差异,不仅能优化用户体验,还能有效提升邮件打开率与点击率。

