适配黑夜模式_「简书App」夜间模式升级

夜间模式与暗黑模式的区别

首先先普及一下夜间模式和暗黑模式（dark mode）的区别。

引用苹果「Human Interface Guidelines」中的一句话。

Dark Mode is an aesthetic choice for users. Users can choose Dark Mode as their default interface style, and may use it at any time of day or in any lighting conditions.

Dark Mode 不是夜间模式，用户可以在任何时间任何环境下使用它。

而夜间模式专为夜间场景设计，而暗黑模式的使用场景为全天，在系统主题为深色的条件下，自动变换为暗黑模式。

夜间模式更多是在夜间或暗光环境使用下的为用户的健康角度考虑的模式，避免用户在黑暗环境中长时间注视高亮光源感到眼睛不适，所以夜间模式屏幕显示更柔和，饱和度更低，对比度更小来减少用户的眼睛压力。

为什么简书选择夜间模式而不是暗黑模式

多数简书用户会在晚上睡前打开简书App

根据简书后台数据可以看出，在每天22点左右用户访问App次数达到峰值且这个时间段用户最活跃。相较于白天10点左右的活跃度高峰，晚22点比白天最高峰活跃度平均高36.7%。参考之前的调研报告，大多数用户喜欢碎片化时间和睡前打开手机。

根据4976份简书核心用户调研问卷的结果：42%的用户每天睡前会打开简书App。

用户夜间使用手机的频率很高，且简书App是一款阅读工具类产品，与其他工具类产品不同。简书用户需要更长时间的“沉浸式”阅读，所以“护眼”功能就显得尤为重要。所以更适合简书用户使用场景的是——夜间模式。

旧版本的夜间模式的缺点

简书夜间模式与其他主流App夜间模式对比

从上图可以直观得看出旧版简书App夜间模式的可读性略差，使用的文字颜色和背景颜色的对比较弱，导致界面文字不清晰，辨识度低。不适合在白天或者亮光环境下使用。且背景颜色背景偏灰，底色为浅灰，这点会导致OLED屏幕深色不发光的特性无法很好的发挥，隐藏边框的视觉效果无法显示出来，还是十分影响观感的。

在夜晚不开灯的情况下，环境与手机屏幕亮度的明暗差距被进一步放大，亮度对比带来视觉刺激也更加明显。如果在漆黑的环境下看高亮的手机屏幕，对我们的健康有非常大的损害，不仅表现在对视力的伤害上面，视网膜和神经元容易受损，同时主流的研究项目还表明会这会抑制我们褪黑素的分泌造成失眠。

因此尽可能降低屏幕亮度，缩小屏幕显示亮度与环境光的差距，是保证用户夜间舒适阅读和使用的重要前提。

图片来自unsplash

设计原则

1.设计更符合用户使用习惯，让用户使用更加舒适的夜间模式。

2.找到对设计师和开发都更加友好、便捷的黑夜模式实现方式。

如果加入夜间模式后，设计师设计页面都要出白天与黑夜两个版本，开发也需要用大量成本投入，是非常不友好的。所以需要一个更便捷更适合开发与设计协作的更系统的方式。避免重复劳动，减少不必要的的工作。

如何设计夜间模式

1.选择背景色——选择低亮度背景色

我们常用来描述光的物理量有4个：发光强度/光通量/光照度/亮度。亮度是指物体明暗的程度，定义是单位面积的发光强度，它的单位是 nit（尼特）；1nit=1 cd/m²。夜晚，我们最终的屏幕亮度应该保证在0.034cd/m²左右是较为合适的。

对亮度控制，首先需要确定颜色本身的亮度，从一开始对界面的主体颜色的选择就应该选择亮度较低的色彩，从设计用色上就控制界面的亮度。因此，方法就是直接降低色彩本身亮度，但是要避免选用极端颜色（避免纯黑色）。为了方便大家对比所选颜色的亮度，可通过色彩亮度公式计算（Y-范围0-255，Y值约接近0亮度越低）：

色彩亮度公式

依据简书规范中的灰度色阶，我们通过色彩亮度公式进行逐个计算，最终符合底色标准的颜色定为: #1A1A1A。

2.定义背景界面层级框架

Material Design 在浅色模式时使用在白色卡片下投射阴影的形式来模拟现实世界的空间深度感，而在深色模式下，尤其是当背景已经很深时如何表现深度呢？Material Design的原则：元素层级越高，其承载面的颜色越浅。

Material Design

参考 Material Design 的设计原则，在夜间模式下，从浅到深定义了Overlay Light、Overlay Dark、Surface、Base、Overlay 五个颜色。有1-5深色梯度表现元素层级。最深为5最浅为1。

简书App界面层级框架

3.确定文字颜色

需要符合 WCAG 色彩通用性标准，保证文字与背景的对比在能看清的范围。

对比度规范是由 Web 无障碍指南（WCAG）提出，现已经逐步被大公司采纳，苹果公司的设计规范中引用了此对比度规范。根据 WCAG2.0 对比度的标准：

1.4.3 对比度（最小）: 文本的视觉呈现以及文本图像至少要有4.5:1的对比度（AA级），大文本: 大号文本以及大文本图像至少有3:1的对比度;
1.4.6 对比度（加强）: 文本视觉呈现以及文本图像至少有7:1的对比度（AAA级），大文本: 大号文本以及大文本图像至少有 4.5:1的对比度。

怎样在符合色彩通用性标准的情况下又不过于强对比，适合夜间阅读。

在确定底色后开始尝试挑选色阶表上的其他颜色作为文字的颜色，尽量满足文字对比度的比值在3:1-4.5:1的范围。通过微调，文字方案下：

背景色为#1A1A1A，在色阶中选取较为适宜黑夜模式的主标题文字颜色为 #B1B1B1 与 #DDDDD。利用对比度查阅的工具网站：WebAim，选取最接近且符合WCAG 2.0的AAA级的颜色。最后选取所得的主标题颜色为 #B1B1B1，背景色与文字的对比度为：8.11：1。选取了主标题色后再利用色阶表把黑夜模式的其他文字颜色（如二级标题与正文，三级标题与注释等）定义出来。

背景色与文字色对比度截图

4.为颜色建立命名系统——语义化颜色（Semantic Colors）

在 iOS 设计语言规范下，产品支持深色模式就必须管理两套完整的颜色方案，确保它们之间始终保持同步，这就要求设计团队以更系统的方式来管理颜色体系。为此，苹果引入了「语义化颜色」的概念。（如果对苹果的官方规范感兴趣可以在 这里下载 苹果官方提供的 iOS 13 设计模板的 Sketch 文件，其中包含了 iOS 13 的最新规范、内置语义色彩、材质等元素。）

使用能够适配于当前外观模式的颜色。使用 iOS 13 新引入的语义化颜色（Semantic Colors）的界面元素可以自动适配当前的外观模式。当需要定制化的颜色时，你可以向 app 的素材目录（Asset Catalog）当中添加一套颜色组合，为浅色与深色模式各自定义一组颜色变量，使其能够根据用户当前的外观模式进行自动适配。避免通过硬编码的方式定义具体的色值，否则颜色将不具备自适应性。

苹果语义化颜色概念截图

下图为简书规范中的部分颜色的语义化命名。

例如，在白天模式中，#2F2F2F是我们的一级标题和正文的颜色，而深色模式下我们用#B1B1B1这个色值来取代一级标题的颜色。如果给这一对色值命名为「gray900」的动态色，开发就可以高效实现在两种模式下的色彩切换。设计师也只需要记得这个颜色代号就可以。对颜色的语义化命名对设计师和开发都非常友好。

简书部分语义化命名

下图为给开发工程师准备动态色对照表。

5.为过亮元素增加黑色透明度蒙层

避免在文字和背景都处理为低饱和度的黑夜模式下，突然出现一张白色图，给用户的眼睛带来负担。所以需要在高亮度元素上增加黑色透明蒙层。

例如头像、图片等类元素如果不能满足亮度和对比度（3:1-7:1）的要求在其上方添加黑色透明遮罩（不透明度30%-40%），从而降低对比度和亮度，使界面元素的亮度尽力满足对比度（3:1-7:1）的要求。

下图为示例：在原有的图片的基础上加了灰色遮罩，在黑夜模式下看起来不会太过刺眼。

步骤总结

为了便于理解，绘制了一个步骤流程图。

先选择低亮度的背景色 → 根据背景色定义层级框架 → 根据色彩通用性标准确定文字色值 → 为颜色建立命名系统 → 为元素添加蒙层降低元素亮度对比度。

黑夜模式升级步骤图

最终效果呈现

其他

对比度检测工具推荐

1.可以直接在线调颜色，实时看对比度是否满足要求：WebAIM

2.检测对比度是否达标：Contrast-ratio

参考文献

1. iOS HIG 中 Dark Mode 设计指导的章节：https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/
2. Material Design 中 Dark Mode 设计指导的章节：https://material.io/design/color/dark-theme.html#properties
3. 色彩无障碍设计之「对比度」的探索：https://zhuanlan.zhihu.com/p/29359260
4. 优化夜间阅读体验 (特别推荐）：https://www.ui.cn/detail/207795.html