【译】黑暗模式的过去、现在和未来

原文：https://uxdesign.cc/the-past-...
作者：Olivier Berni
译者：Chor

2019 年的一大新闻，当属安卓和苹果分别在 I/O（谷歌 I/O 开发者大会）和 WWDC（苹果全球开发者大会）相继推出的黑暗模式。

苹果公司在谈到黑暗模式时说，它是一种“有助于你专注工作的吸引人的新外观”，同时也是一种“全方位对眼睛友好的无干扰环境”。谷歌则从实用角度回答，声称黑暗模式可以“显著降低用电量”，”提高低视力用户和对强光敏感用户的能见度“，并且可以“让任何人在低光环境下轻松地使用设备”。

值得注意的是，我们每天平均花费 3 小时 15 分钟在手机上。假如黑暗模式真的可以提高专注力、增强可读性、缓解眼睛疲劳以及延长电池寿命，可以想见它将会对我们的技术使用和身体健康产生多么巨大的影响。

起源：明亮模式破壳而出

单色计算机的 CRT 显示器

受限于阴极射线管的容量大小，计算机屏幕最初就是采用我们今天所说的”黑暗模式“的。后来，越来越多的非程序员开始接触计算机，且各个公司都有处理文字的需求，人们迫切需要一个接近纸张书写效果的工作环境。正极性在这时候发挥了拟物的作用，它使得计算机界面呈现类似纸张的效果。

早期的苹果计算机 Apple Lisa

人类向来是白天劳作、晚上睡觉。我们在室外逐步进化，眼睛最终变得习惯于观察明亮背景（阳光普照的天空等）前的黑暗物体（人、山等）。

这是我们的大脑固有的。丹尼米勒和斯蒂芬斯在 1988 年发表的一篇研究论文表明，3 个月大的婴儿更容易被明亮背景的暗色内容所吸引。

如今：黑暗模式卷土重来...这是怎么回事？

在使用明亮模式这么长时间后，改用黑暗模式就仿佛是久旱逢甘霖。它为用户提供了更多的定制设备和数字环境的机会。它具有一定的科技感和设计感，即使没有全盘重新设计，看上去也足够新奇。黑暗模式的推广还得益于它解决了我们使用电子设备时遇到的各种问题（如眼睛疲劳、低光环境下观看屏幕，或者是减少长期观看屏幕引起的头痛）。

它真的比明亮模式更好吗？

黑暗模式也许符合的是个人口味，而不是大众口味：有些人在使用黑暗模式的时候觉得更舒服、没有那么疲劳，并且能够更专注；有些人则认为，由于颜色变显眼了，他们很容易分心。

研究表明，人眼更习惯于明亮背景的暗色内容（正极性）

人眼的工作原理很像摄像机的镜头：当我们看到正极性的东西时，瞳孔收缩：我们看到的物体会更加锐利和细致。相反，当我们看到负极性的东西时，进入眼睛的光线会减少，这导致我们的瞳孔扩张：物体看上去会更加模糊。黑色背景上的白色文字显得更大，并且有一种光晕，这是因为单个字母发出的光被其它字母反射。这在一定程度上使负极性的东西难以观察。相反，正极不会产生这种现象。多项测试表明，对正极性的文本进行校对、速读等会更好（详见 TidBits 以及 Wired 上的相关文章）。此外，负极性的阅读更加困难，意味着我们的眼睛和大脑必须更专注，这导致我们更容易感到眼睛疲劳和头痛。

不过，最后还是取决于个人

尽管需要花费更多时间去阅读和分析内容，一些用户可能会发现，在黑暗模式下不容易被无关内容分心。当我们快速扫描屏幕寻找某个视觉/着色元素时，黑暗模式同样没有让我们失望。

2018 年，SalesForce 的设计师们在设计图表时，想知道哪一种模式是最好的。为此，他们采访了很多用户，结果发现，用户的决策速度既快又准 —— 他们选择了黑色主题中的图表。

来源： salesforce.com

这对于开发者来说也是一样的：你在开发的时候，一定更想要看到有语法高亮的代码结构，而不是一字一句地去解读和分析。

Atom

甚至彭博社的 app 也是如此：交易员在负极性下可以更快捕获信息。同理，iOS 的 Stock app 和 Activity app 也是这样，这两款 app 早在黑暗模式推出之前就使用暗色 UI 了。

彭博社

苹果的 Activity App

甚至在黑暗模式尚未成型的时候，一些产品就开始使用暗色 UI 了，比如奢侈品牌、流媒体服务等...或者是为了传达一种精英主义感，或者是为了让内容脱颖而出，又或者是为了适应使用服务的场景（你最有可能在夜晚或者光线昏暗的地方使用流媒体服务，暗色 UI 在这些场景下看起来更加舒服）。不过，那时几乎没有提供切换模式的选项，因为暗色 UI 在设计的时候就敲定了。

来源： Breitling 的早期设计

不得不承认，有些人受疾病影响，只能放弃使用明亮模式。黑暗模式对视力受损或患有畏光症的人来说是福音。使用黑暗模式还可以减少蓝光的发射，提高我们的睡眠质量。

那么电池寿命呢？

黑暗模式得到推广后，很多人都听说它可以节省电量，这在某种程度上来说并不全对：除非你的手机配备了 OLED 屏幕，否则你不会从中受益。通常的 LED 屏幕需要背光才能显示颜色，甚至黑色也是如此。使用 OLED 屏幕时，只有彩色 LED 会亮起，而黑色的则不会亮起。而且看起来，亮起深灰色（黑暗模式中使用的）的 LED 仍然可以节省一些电量。

(PhoneBuff 比对明亮模式和黑暗模式下电量使用情况的视频： Dark Mode vs. Light Mode Battery Test)

那么，我需要在自己的 app 中实现黑暗模式吗？

忽视黑暗模式将会让你的 app 变得很”独特“，因为你在用户启用了黑暗模式的手机上用各种显眼的颜色“亮瞎了”他的眼睛。用户开始期待黑暗模式，你肯定不想做出最后一个仍然采用明亮模式的 app。

使用 Xcode，Android Studio...的话，实际上是很容易实现的。它们通过简单的方式提供了一套明亮模式和黑暗模式的预设。从技术上来说，这让黑暗模式的实现变得很简单。

此外，在安卓上还有一个非常有用的功能， « Force Dark Allowed »。简而言之，这是安卓自带的自动黑暗模式，并且与现在流行的黑暗模式是相兼容的。它并不完美，但也不会差到哪里去 (如果打算使用这个模式，你可能需要花费时间进行设计，防止给用户带来困扰)。

带有黑暗模式的 app 的未来

已经有很多文章谈到这个话题了，我们这里做一下总结（文章末尾有相关文章的链接）。不可否认，为 app 创建黑暗模式的时候必须遵循一些规则，否则就会大幅度地破坏用户体验。

我们分别来看一些成功以及失败的实践。

app 的黑暗模式必须遵循的规则

遵循平台的指南

这是第一条规则，并且可能是最重要的规则。针对产品黑暗模式的实现，谷歌已经提供了非常彻底和完整的指南，你在设计的时候可以多加参考。

避免 100% 纯黑色

Material Design 建议使用 #121212 作为黑暗主题的背景颜色，因为纯黑色对眼睛很不友好。同理，文本颜色也要避免使用纯白色，而是降低透明度（Material Design 建议主要文本内容的透明度应为 87%），从而减少强烈的对比度。

使用 Elevation Brightness

在明亮模式下，你很可能会使用阴影来表现视觉层次。这在黑暗模式中是不可行的，因为你根本看不到它们。相反，你应该使用灰色遮罩区分内容的不同层次。

Material Design 的亮度原则

Ji-Hern Baek 设计的 Evernote design

（请注意，阴影在背景变亮时是可见的。所以在避免过度依赖阴影的前提下，不要完全放弃使用它们。另外，不要使用彩色或浅色阴影：它们对眼睛来说是不自然的，而且也不会带来与普通阴影相同的深度效果）

考虑改变主色调

在黑暗模式中不宜采用过于饱和的颜色：它们太过明亮了，并且/或者会降低可读性。

谷歌的 Material Design 建议在明亮模式中采用 200 号颜色，在黑暗模式中采用 500 号颜色。你可以在 WGAG 中检查对比度。

使用黑暗模式后改变主色调 (Material Design)

来源： Material Design

改变调色板

由于改变了主色调以及亮度的展示方式，你应该创建一个新的调色板。注意，有些内容在明亮模式中共用一种颜色，但在黑暗模式中可能不是这样。

来源： Kat Angeles from TripIt

你还可以在黑暗模式中直接使用主色调：

来源： UX Misfits

小范围地使用颜色

颜色在黑暗模式中会产生更大的对比度：可以利用这一点让一些小块的内容更加突出，但不要大范围地使用。

来源： Apple using sparse colors

不要忘记启动界面

这是很容易忽略的部分，也是很重要的部分。启动界面是用户打开你的 app 时第一眼看到的界面，你可不希望用户在使用 app 之前就被亮瞎双眼。

确保有足够的对比度

如果你的屏幕没有足够的对比度，那么将很难区分不同的活动状态（启用、悬停、禁用等）

来源： Google Chrome

如果你使用 Instagram，你可能对这个问题很眼熟。链接与普通文本几乎没有区别，这使得查找链接变得很困难。

Marvel’s Instagram bio

在真实场景中测试黑暗模式

开启自动亮度、增强对比度等设置测试你的 app，在低光环境中测试你的 app...用户可能会在不同场景在使用 app，你需要为每种情况做好准备，防止出现任何不良体验。

未来喜闻乐见的是...?

从黑暗模式的采用率来看，iOS 14 和 Android 11 推出新功能可以说是板上钉钉了。

主屏幕的其中一个变化就是：

明亮模式和黑暗模式下，iPhone 的主屏幕

图标不会随着模式的切换而改变，如果开发者可以针对两种模式提供不同的 app 图标、用户可以针对两种模式设置不同的壁纸，那就再好不过了。