适配深色模式,用之前你需要了解这几点吗（ *** 页面变黑了怎么办

页面变黑如何适应黑暗模式？使用前需要了解这几点。

黑暗模式最近风头正劲。大家都在用吗？本文从产品经理的角度，分析了人们为什么喜欢深色图案，深色图案的适应现状以及深色图案的搭配思路，与大家分享。

继Android Q之后，苹果也在iOS13中支持了黑暗模式，黑暗模式成为2019年下半年的热门话题。很多产品已经完成了黑暗模式的适配， 和微信也开始了内测，“转黑”似乎已经成为一种趋势。

在适应深色图案之前，设计师需要深入了解它的特性，衡量适应深色图案带来的价值，规划合适的策略，避免陷入“为黑而黑”的泥潭。

00-1010

一、为什么人们会喜欢「深色模式/dark mode」？

影片放映时，所有的灯都将关闭，只有屏幕亮起来，以吸引观众的注意力。同理，当产品界面背景较暗时，页面元素的优先级更清晰，用户更容易注意到重点内容。而且与浅 面相比，深 面对眼睛的视觉压力更小。

注至于它的“护眼”功能，现在还不清楚，长时间盯着屏幕造成的视觉疲劳还是不可避免的。

00-1010看了太久同样的“白底黑字”，黑暗模式让用户多了一个选择。大家都喜欢清新的风格，哪怕只是短暂的热情尝试，也会增加用户对产品的新鲜感，不可否认黑色更容易让人觉得清凉清新。

1. 深色系界面弱化背景，浏览内容更专注

有机发光二极管屏幕中的每个像素都会自主发光，在显示暗元素时功耗更低，而在显示纯黑色时，像素可以完全关闭。打个不完全的比方，手机屏幕就像一个大灯面板，上面有成千上万个小灯泡。当有机发光二极管屏幕显示黑色时，它真的会关闭该区域的灯泡，这自然会节省电力。

2. 新鲜感

许多产品已经具有夜间模式。开启夜间模式时，界面也会变黑。突然讨论的「黑暗模式」和「夜间模式」有什么区别？

用户显然没有必要区分夜间模式和黑暗模式的区别。他们长得真的很像。但从设计者的角度来说，只有真正区分它们的差异和应用场景，才能为用户提供一套逻辑清晰的选项，让用户更方便快捷地选择自己想要的模式。

开启夜间模式前后的对比

明/暗模式下的界面对比度

通过这两张对比图，可以明显感觉到界面元素的对比度和层次表现在夜间模式和黑暗模式下是不同的。夜间模式的设计目的是让用户在夜间使用手机时，屏幕显示更加柔和，调节色温，降低饱和度。白天开启夜间模式很难看清显示内容，所以不适合白天使用。

显然，黑暗模式不是夜晚模式，用户可以在任何时间、任何环境下使用。它需要保持与灯光模式相同的产品特性，并且可以与设备的夜景模式开启。

00-1010用户将系统主题设置为黑暗后，自然期望所有app都变成黑暗，黑暗模式会逐渐成为产品的标配功能。越来越多的产品以各种方式适配了系统的黑暗模式。主要分为以下三种类型

00-1010如果用户手机系统不支持黑暗模式，产品不会切换到黑暗模式。

产品包括微信读书、豆瓣、懒米、Instagram、爱奇艺。

2.原有的夜间模式与黑暗模式捆绑，用户可以选择是否配合系统主题切换。

在不支持黑暗主题的系统中，用户可以打开夜间模式。

式，使产品主题变为深色。严格来说，这并不是真正的深色模式，而出于不同的决策模型，产品团队会做出最适合自己的选择。

代表产品 、Twitter

3. 原有产品没有夜间模式，正在内测跟随系统切换主题的深色模式

代表产品微信

四、深色模式的适配不同思路

iOS Android 两套设计语言的 Dark Mode 策略除了在基础色彩体系的数值有些差距外，更明显的是在 Accent color 的不同处理方式。Android Q 则强调保障清晰观看体验的前提下，要具备更多的灵活性，比如在原色彩上面加 40% 的白色透明遮罩，以增强在深色背景上的清晰对比度，缺点可能会让原色彩在感官上发生较大的偏差。

——引自钉钉 Dark Mode 设计

1. 语义化颜色

在 iOS 设计语言规范下，产品支持深色模式就必须管理两套完整的颜色方案，确保它们之间始终保持同步，这就要求设计团队以更系统的方式来管理颜色体系。为此，苹果引入了“语义化颜色”的概念。

注语义化颜色是通过「用途」来对元素进行定义描述，而不是具体的色值。「用途」定义下的颜色是动态性，脱离于具体的表现样式而独立存在。比如，“背景色”，在深色模式中指代黑色，而在浅色模式中指代白色，这样就可以让颜色灵活的适应浅色与深色模式切换。

具体应用 已有很多资料分享，本文不做扩展。

2. 统一规律变化色彩梯度

Android 适配方案简单粗暴，对于颜色可参考梯梯度渐变模型规律配色，页面背景根据层级叠加不同透明度的白色即可。完全执行就容易导致产品在深色模式下产生风格偏移，出现不符合品牌设计语言的情况。

3. 智能语义化

在iOS 适配策略的基础上， 团队在分享中提出了「智能语义化」方案，使适配成本大幅降低。方案思路是设计师根据不同UI元素的特性先期制定颜色语义化规则，技术在框架层面通过“颜色自动反转”技术实现颜色反转。

除去基本颜色，大量的图标、插图，动效等等需要一一调整兼容，完美适配深色模式需要多方配合持续维护，而后期的功能开发也需要兼顾两种模式，对于自定义元素较多、业务组成复杂的 APP适配难度可想而知。

看完本文后，你可以了解深色模式受到追捧的原因，区分深色模式与夜间模式的不同，了解到适配深色模式的多种策略和面临的挑战，深入思考，当前产品是否真的需要适配深色模式。，希望能够帮你找到真正适合自己产品的适配策略。

#参考资料#

WCGA2.0 标准Web Content Accessibility Guidelines (WCAG) Overview | Web Accessibility Initiative (WAI) | W3CiOS HIG 中 Dark Mode 设计指导的章节https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/Material Design 中 Dark Mode 设计指导的章节https://material.io/design/color/dark-theme.html#properties一篇吃透 Dark Mode ，搞定“暗黑/深色”适配 设计团队-我们把 黑了

作者bubblegun；公众号@泡枪指北

本文由 @bubblegun 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

不能选深色模式 深色模式和浅色