一篇文带你了解黑暗UI模式的过去，现在和未来

在19年的WWDC期间，苹果在iOS上引入了 Dark Mode。关于这种模式，苹果公司的原话是，它是一种“戏剧性的新外观，可帮助您专注于工作”，以及“创建一种无干扰的环境，无论从哪方面来看，都很适用”。

而Google则更加务实，说Dark Mode可以“大幅减少用电量”，“为视力不佳的用户和对强光敏感的用户提高可视性”，并“使任何人都可以更轻松地在智能手机中使用设备弱光环境”。

需要考虑的一件事是，我们每天平均在智能手机上平均要花费3个小时15分钟（不提及其他屏幕，例如电视，计算机等）。然后，如果暗模式可以真正改善对焦，可读性，眼睛疲劳度和电池寿命，那么我们可以想象到暗模式可能会对我们的技术使用和健康产生巨大影响。好的，既然场景设置为黑暗模式，那么让我们深入探讨一下。从科学和用户体验的角度来看，黑暗模式都是一个非常有趣的话题。

起源：亮色模式的兴起

最早期的计算机和单色显示器

由于当时显示器使用的阴极射线管，计算机屏幕最初处于我们今天所说的“黑暗模式”下。作为一种拟态设计方法，开发人员采用了正极性来使计算机界面类似于纸张，由于文字处理已成为每个公司的重要一环：他们必须在外观熟悉的环境中工作，而且那个环境就是纸。

Apple Lisa

人类被上帝设定为白天生活，晚上睡觉的动物。所以，我们的眼睛习惯于在明亮的背景（阳光普照的天空）前看到黑暗的物体（人，山）等等。

它内置在我们的大脑中。丹妮米勒（Dannemiller）和史蒂芬斯（Stephens）于1988年发表的研究论文表明，一个3个月大的婴儿，在观察明亮图片和黑暗图片时，更容易被黑暗图片吸引。

黑暗模式是炒作吗？

长时间使用“亮色模式”后，“黑暗模式”感觉就像呼吸新鲜空气。它使用户有机会自定义其设备的环境颜色，让它具有更技术性和设计感的外观，外观新颖，无需完全重新设计，并且可以解决我们的不少问题（例如眼疲劳，在弱光环境下使用屏幕，或减少屏幕诱发的头痛）。

它比传统的亮色模式好吗？黑暗模式更是个人喜好，而不是所有问题的绝对答案：使用黑暗模式时，有些人会感到更舒适，更少疲劳且更加专注。其他一些人会注意到，由于颜色变得闪烁，很容易分散注意力。

科学表明，人眼更习惯于在亮色环境中观看黑暗的事物（正极性）。我们的眼睛像摄像机镜头一样工作：当我们看到正极性的东西时，我们的瞳孔会收缩：我们看到的东西更清晰，更细腻。相反，当我们看到负极性的东西时，更少的光进入眼睛，导致我们的瞳孔扩大：事物变得模糊。黑色背景上的白色文字会显得更大，并产生光晕……

这是因为一个字母发出的光被其他字母反射。这导致了负极性难以阅读。多次试验证明，校对，阅读速度和这样的任务是在正极性表现较好。此外，由于难以阅读，我们的眼睛和大脑必须更加专注于这项任务，这使我们更容易遭受眼睛疲劳和头痛。

总而言之，这一切都取决于每个人。

尽管黑暗模式下，用户需要花费更多的时间阅读和分析内容，但他们可能更不容易受干扰性内容的影响。

当您快速扫描屏幕以查找视觉/彩色元素时，暗模式效果也很好。

在2018年，SalesForce的设计师想知道开发仪表板功能时哪种模式最好。他们采访了许多用户，结果发现，用户使用Dark Theme中显示的图表可以更快，同样准确地帮助用户制定决策。

对于开发人员来说原理也是一样的：在开发程序时，程序员会对查看代码的结构更感兴趣，使用着色语法使其清晰可见，而不必阅读每个单词。

Xcode黑暗模式界面

甚至是彭博社的应用程序：交易者可以通过黑暗模式更快地看到信息。

彭博社的应用程序

同样的情况也适用于iOS中的股票应用和健康及活动应用，这些应用甚至在宣布Dark Mode之前就使用Dark UI。

即使深色模式概念还没有发布，某些产品（如奢侈品牌，流媒体服务）也使用了深色的用户界面……为了传达一种高贵的感觉，使内容更加凸显，并结合使用场景（您最有可能在晚上在昏暗的房间中使用流媒体服务，从而使黑暗的UI更加舒适）。这种情况下，它是没有切换黑暗模式和浅色模式的选择的，因为它仅仅是一种设计选择。

手表官网设计

我们还必须承认，有些人确实患有无法使用亮色模式。视力障碍或畏光的人将从黑暗模式中受益匪浅。并且使用它可以减少蓝光的发射，众所周知，蓝光会降低我们的睡眠质量。

那电池寿命呢？自从Dark UI普及以来，我们被宣传说，这种模式可以节省电量。但事实并非如此：除非您的手机配备了OLED屏幕，否则您将不会从中受益。

通常的LED屏幕需要背光以显示颜色，甚至是黑色。使用OLED屏幕时，只有彩色的LED会点亮，而黑色的LED会保持熄灭状态。这就是为什么OLED对于黑暗模式更加友好的原因。

必须要在APP中使用黑暗模式吗？

不使用黑暗模式会使您的应用脱颖而出（当然这是以一种负面的方式）。用户已经开始期望这一点，您肯定不想成为最后一个功能独特的应用程序。

开发工程师在使用Xcode，Android Studio进行程序开发时，这些开发平台可以用非常简单的方法来为应用的亮色模式提供一组设计素材，为暗模式提供另一组素材。从技术上讲，暗模式很容易实现。

另外，在Android系统中，有一个非常有用的功能，称为“允许强制深色”。基本上，这是Android的自动暗模式。它会与黑暗模式兼容，虽然不完美，但是看起来还不错。

黑暗模式应用设计原则

创建应用程序的黑暗模式时，不可否认，我们要遵循一些规则，否则用户体验会大大恶化。

· 遵循平台准则

这是第一个，也许也是最重要的提示。Google和Apple都给出了非常完善的规范，以帮助你来设计黑暗模式。请务必在设计应用程序时遵循这些规范。

· 避免100%黑色

Material Design建议使用＃121212作为Dark Theme表面颜色，因为纯黑色对眼睛来说太刺激了。文字颜色也是如此：避免使用纯白色，而应将其与Alpha配合使用（Material Design建议透明度为87％）以减少强烈的对比度。（静电说：但是苹果的背景却是纯黑色的，摊手~）

· 使用不同亮度区分层次感

在亮色模式下，设计师很可能使用阴影来传达视觉层次。您必须避免在黑暗模式下使用它们，因为阴影在黑暗模式下并不是真正可见的。使用不同的灰色阴影来区分内容的不同级别是可行的，但iOS的设计规范建议我们直接使用不同的灰色，而不是阴影。

· 考虑更改你的主色

应该避免在黑暗模式下使用过于饱和的颜色：它们可能太亮和/或降低了可读性。Google Material Design建议在浅色模式下使用500色度，在深色模式下使用200。您可以在WGAG上检查对比度是否合格。

MD设计中的深色和浅色模式主色调整

· 更新配色

我们必须为黑暗模式单独设定一套调色板。请记住，某些内容可以在浅色模式下共享同样的颜色，但是在黑暗模式下，则可能不行。

· 减少颜色使用量

颜色在黑暗模式下可产生更多的对比度：通过使用它们使某些内容更加明显，但务必不要使用太多，会产生副作用。

·重新设计启动画面

很多设计师会忘了这个步骤。这是用户在打开应用程序时会看到的第一个屏幕，请确保不要在他们使用应用之前就把眼睛“刺瞎”。

· 确保足够的对比度

如果您的屏幕显示的对比度不足，则很难区分按钮的不同状态（活动，悬停，无效...）。

谷歌Chrome浏览器

如果您使用Instagram，则可能会熟悉此问题。链接与纯文本几乎没有区别，因此很难找到大段文字中的隐藏链接。

·在真实条件下测试黑暗模式

使用自动亮度，增强对比度等设置来测试您的应用程序，在弱光环境下对其进行测试...为用户可能以这种方式使用您的应用程序的每种情况做准备，可以防止任何不良体验。

黑暗模式的未来

从黑暗模式的使用率来看，我们可以肯定iOS14和Android 11会有新的功能出现。比如主屏幕变成这样的：

浅色和深色模式下的iPhone屏幕

如果图标颜色在明暗模式切换时不变，也许并不合适。对于开发人员来说，能够为两种模式提供两个不同的应用程序图标，以及允许用户为亮模式和暗模式设置不同的墙纸，将是一个很好的选择。

作者：Olivier Berni 翻译：静电