DarkMode(1)：产品应用深色模式分析

时间：2024-02-20 15:46:50

为什么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」查看具体的计算方法。一般情况下，你可以使用各种现成的工具，只需要数入两种颜色的数值，就可以直接看到最终的计算结果了。

界面的层级与明暗关系

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

界面的层级与明暗关系.jpg

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

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

iOS 13 版本中 Dark Mode 的效果

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

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

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

引入语义色彩（semantic color）

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

light模式与Dark Mode模式设计对白

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

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

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

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

  1. 趋动设计师规划全局的配色方案：在 Dark Mode 的设计难点中我们提到了，一套完整而悦目的 Dark  Mode，需要设计师深入地调整明暗关系下色彩的搭配。通过引入语义色彩，设计师可以自上而下地进行框架性设计，首先定义好界面中一共存在哪些元素，然后，为这些元素规划好相应的配色方案，以确保在深浅外观中都获得最佳显示效果。

  2. 更容易复用：通过语义色彩，无论是对于设计师还是程序员，都可以实现「一次声明，处处使用」。通过语义色彩，设计师可以整理出配色模板，程序员可以在不同界面的同类型元素中，直接使用语义色彩，而不用重复地去指定相同的颜色。

苹果在系统层面整理出了一套配色方案

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

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

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

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

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

材质（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

相关文章