周陆军

2021-08-15 22:44 已编辑腾讯_IEG_前端

关注

<span>DarkMode(1)：产品应用深色模式分析</span>

为什么Dark Mode变得越来越流行

2018 年的 macOS Mojave 率先支持了深色外观，紧接着 Windows 10 在 2018 年的 10 月份大版本更新中，也引入了 Dark Mode。

iOS 13 的发推出了深色模式（Dark Mode），不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。

Android Q 重点推出了Dark Mode

目前主流的操作系统也都在逐步支持 Dark Mode。

像Facebook 、Slack、WhatsApp、Chrome 等等软件都支持Dark Mode

那么，增加暗黑模式的目的是什么呢？

夜间使用时不那么刺眼

Google 提出了「Digital Wellbeing（数字健康）」的概念，注重在科技设备与使用者之间，找到一个健康的平衡点。

夜览模式让屏幕在晚上减少蓝光，帮助我们更好地睡眠；
隐式推送减少了各类通知打扰我们的次数，使手机不会频繁打断我们的注意力

虽然有许多 app 已经支持了夜间模式，但还远远不够。首先，每个 app 的支持程度不尽相同，同时由于缺乏系统级的 API 支持，每个 app 的开发适配工作也比较烦琐。

让使用者沉浸于内容

将 Dark Mode 翻译为「夜间模式」，是因为前者的使用场景更广，因此使用「深色模式」这样的翻译更恰当。

黑色更有利于我们沉浸于内容本身，无论是生产内容还是消费内容。如果你细心观察，你会发现许多专业级的多媒体内容生产软件，一直以来都是黑色的界面。不管是 Adobe 系列的软件，还是苹果的 Final Cut Pro，或者是 Pixelmator、Affinity 系列软件，都是深色的主界面基调。同样的道理，你会发现许多视频网站或者影音播放工具，都是使用深色作为主基调。

OLED 屏幕节电

大多旗舰机的手机屏幕都抛弃了 LCD 材质，转而使用 OLED 材质的屏幕，例如，从 iPhone X 到 iPhone XS，搭配 Dark Mode，这样就能更加省电。

LCD 屏幕分两层：像素层不发光，另外有背光面板照亮像素。
OLED 屏幕只有一层，像素本身是自发光的。这样，在显示黑色时，OLED 的屏幕像素只需要关闭，就是纯正的黑色了。

在 macOS 的深色模式中，基底色并不是纯黑，而是带有一定灰度的黑色。

在 iOS 上，苹果设计 Dark Mode 的基底色就是纯黑，这样一方面来可以省电，另一方面也与「刘海」的衔接更加自然。

Dark Mode 的设计难点在哪？

既然 Dark Mode 有不少吸引人的优点，为什么 Google 和苹果，一直等到2019年才正式推出系统级的 Dark Mode

Dark Mode 并不像想像中的那么简单。

Dark Mode 并不是简单的颜色反转

在界面色彩复杂一些的情况下，直接的颜色反转就完全没法用了。以下面的桌面为例，绿色的反转色是粉色，红色的反转色是青蓝色，而原本就是黑色的桌面被反转成了白色，最终得到的效果惨不忍睹。

任意颜色可以由三原色组成，在电子设备上，一个色彩也可以表示成 RGB 值，即红绿蓝三种颜色的比例。每种颜色的取值范围是 0-255 之间，例如，白色可以表示为（255，255，255），黑色可以表示为（0，0，0）。那么，颜色反转实际上，是把一种颜色（R，G，B），自动变换到它的对立面，成为新的颜色（255-R，255-G，255-B）。

更多相关内容推荐阅读：《色彩空间RGB/CMYK/HSL/HSB/HSV/Lab/YUV基础理论及转换方法:RGB与YUV》、《水煮RGB与CMYK色彩模型—色彩与光学相关物理理论浅叙》、《三色视者与四色视者身后的理论基础:色彩原理》

所以Android与iOS的开启颜色反转，并不能开启暗黑模式。

要重新考虑色彩对比度

内容与背景之间的色彩对比度问题，两者之间必须保持才能使内容具有可读性。要衡量这一点，其实是有一个明确的指标的：

色彩对比率（Color Contrast Ratio），它能够提供两种颜色之间，相对亮度的一个衡量关系。

色彩对比率的取值范围在 1:1 到 21:1 之间，数值越大，表示对比度越强烈，内容的可辨认度越高。

Web 标准制定组织 W3C 在其 Web 内容无障碍指南（WCAG）中建议

对比一般的文本，其对比率应该不小于 4.5:1，
对于图像和界面元素来说，对比率应该不小于 3:1

要如何计算色彩对比率呢？

它的计算相对比较复杂，感兴趣的同学可以在这个页面搜索「Contrast Ratio」查看具体的计算方法。一般情况下，你可以使用各种现成的工具，只需要数入两种颜色的数值，就可以直接看到最终的计算结果了。

界面的层级与明暗关系

除了色彩对比度的关系外，还有一个更深层次的界面层级带来的问题，是通过颜色反转无法解决的。

论是浅色还是深色外观下，我们都应该在界面层级中，让离用户在逻辑关系上更近的颜色更亮一些。

再让我们看一看实际 iOS 13 版本中 Dark Mode 的效果。你会发现，Dark Mode 的界面配色，并不是简单的颜色反转，可操作区域的颜色更浅一些，而背景色才是全黑的。这样，不管是浅色还是深色外观下，始终都保持了逻辑上的统一：离用户逻辑关系上越近的层级，颜色越浅越亮一些。

界面层级与明暗的逻辑关系，本质上是与颜色反转不兼容的。

苹果是如何为 iOS 设计 Dark Mode 的？

苹果在今年 WWDC 的「What's New in iOS Design」专题中，花了不少的篇幅专门用来介绍如何升级适配 Dark Mode。

引入语义色彩（semantic color）

在以往的界面设计与开发过程中，需要单独针对每一个元素，指定一个颜色。既然不能简单地通过颜色反转来实现 Dark Mode，那么最简单的方式就是：为浅色外观和深色外观分别设计两套配色方案。

然而，这样的做法带来了一系列问题，尤其是 iOS 作为一个平台，需要考虑平台化的统一标准，以及尽可能地方便第三方开发者的适配工作。如果单纯地使用两套配色方案，那么每改动一处界面，都不能忘了要改动两个颜色值。同时，界面和界面之间，同样的页面元素，需要重复地指定具体的颜色，也造成了不必要的工作。

因此，苹果引入了语义色彩（Semantic Color）这个概念。如同字面意思一样，不再通过 RGB 的值来描述一个颜色，而是通过 LabelColor、SeparatorColor 这样的文字描述，来说明这里应该使用文字标签的颜色、分隔线的颜色……例如，在深浅两种模式下，系统界面的背景色会自动地去对应 SystemBackground，在浅色外观下 SystemBackground=#FFFFFF（白色），在深色外观下 SystemBackground=#000000（黑色）。

语义色彩带来了两个显而易见的好处：

趋动设计师规划全局的配色方案：在 Dark Mode 的设计难点中我们提到了，一套完整而悦目的 Dark Mode，需要设计师深入地调整明暗关系下色彩的搭配。通过引入语义色彩，设计师可以自上而下地进行框架性设计，首先定义好界面中一共存在哪些元素，然后，为这些元素规划好相应的配色方案，以确保在深浅外观中都获得最佳显示效果。
更容易复用：通过语义色彩，无论是对于设计师还是程序员，都可以实现「一次声明，处处使用」。通过语义色彩，设计师可以整理出配色模板，程序员可以在不同界面的同类型元素中，直接使用语义色彩，而不用重复地去指定相同的颜色。

苹果在系统层面整理出了一套配色方案，其中包含了背景色、文字标签色、填充色等等，大多提供了四种不同醒目程度的层级，从应用在标题上的一级，到提示或说明性文字的四级。当然，除了系统内置的这些色彩，开发者也可以根据自己的需要创建和声明新的语义色彩。

背景分基底ase）与提亮色（Elevated）

在设计难点中我们提到了，层级上离用户越近的区域，应该在视觉上更明亮一些。苹果在设计 Dark Mode 时，也充分考虑到了这一点。

iOS 深色外观的背景色，是纯正的黑色（#000000），苹果称之为基底***ase）。不过，这个背景色会随着界面层级的变化，而变成提亮色（Elevated）。下图就是一个例子：在左边的通讯录 app 中，背景色就是纯正的黑色。而到了右边的电话 app 中，有些操作会需要弹出浮层供你选择联系人，这时候浮在上方的界面背景色，就变成了亮一些的提亮色。

材质（Material）与系统控件的原生支持

苹果在介绍 Dark Mode 时，还提到了材质（Material）。在我们常见的说法中，就是自 iOS 7 中引入的毛玻璃效果，常用于系统的文件夹、下拉菜单、通知、Dock 栏等处。苹果为这些材质设计了深浅两套配色方案，并提供了从厚到薄的四种感观效果。

更重要的是，苹果还为材质上的内容颜色进行了单独的鲜活化（Vibrancy）处理。以下图为例，第一行的文字「Solid Color」为固定色彩，随着背景颜色的变更，到最后两幅图中几乎不可辨识了。第二行的「Vibrant」则为经过了鲜活化处理的文字效果，在背景色变亮时，也能保证文字的可读性。

此外，苹果还更新了 UIKit 中的系统级控件，以适配深浅两种颜色外观。值得注意的是，在浅色模式下，许多元素是存在投影的，例如开关按钮、拖动条的拉动点……而到了深色外观中，这些投影被统统移除了，这也是苹果设计的细微精致之处。

引入字体化图标

在 iOS 13 中，苹果还为了 Dark Mode 引入了多达 1500 余个字体化图标 SF Symbols。

前面我们已经看到了，苹果通过语义色彩解决了界面与内容的色彩管理，同时通过更新一系列的系统级控件确保适应两种不同的配色方案。然而，界面中还存在着一个重要元素，就是图标。如果我们希望获得良好的效果，往往需要针对深浅外观重新填充图标的颜色，准备两套图标素材。

而字体化图标彻底解决了这个问题，还带来了一系列的优势。什么是字体化图标呢？简而言之，你可以对文字进行的处理，也可以针对图标做到。所以，字体化图标可以像文字一样修改颜色、粗细、大小、对齐。前面提到的语义色彩、鲜活化处理等技术，也一样可以运用在图标上。

以上四点，就是苹果如何为 iOS 设计 Dark Mode 的。你可以在这里下载苹果官方提供的 iOS 13设计模板的 Sketch 文件，其中包含了 iOS 13 的最新范式、内置语义色彩、材质等元素。

Dark Mode 在 iOS 13 上的呈现感不错，但距离完美还有一定距离。这其中既有客观因素，也有系统的主观原因。例如，iOS 的 Dark Mode 针对图像不会进行特别的处理，如果你的备忘录中有一张白色的照片，就会变得十分刺眼。而 Instapaper 在深色外观下，会自动暗化（Dimmed）处理内容中的图片元素。

此外，从客观因素上来说，许多网页还没有针对 Dark Mode 进行适配，导致打开时会一片惨白刺眼。同时，在 Power+ 1.0 中的《深色模式对视疲劳和效率的影响》这篇文章，对 Dark Mode 也提出了许多非常有深度的论述。例如，深色模式其实未必适合文字的阅读，以及即使开启了深色模式，在昏暗环境中使用电子设备对视力的伤害也不容小觑。

但不管怎么说，Dark Mode 都给我们提供了额外的选择，数字健康（Digital Wellbeing）不仅仅只体现在硬件的迭代与软件的更新上，更应该成为每一位使用者与开发者的主动意识，借此也希望所有的 app 和 web 开发者，尽早适配 Dark Mode。

参考文章：

Dark Mode 的设计要点 https://zhuanlan.zhihu.com/p/141465632

写给设计师的指南：如何为即将到来的Dark Mode做好准备 https://zhuanlan.zhihu.com/p/67583152

转载本站文章《DarkMode(1)：产品应用深色模式分析》,
请注明出处：https://www.zhoulujun.cn/html/webfront/style/darkMode/8557.html