最近在研究暗黑模式，看到一篇简单易懂的暗黑模式基础设计方法，分享给大家

深色主题是应用程序设计的最新趋势，MacOS 去年推出了暗黑模式，Andriod上个月推出了Dark Theme。IOS 在过去的两周里也迎头赶上了。 

曾经罕见的暗黑模式现在已成为人们普遍期待的主题。

如果做得好，暗黑模式有许多好处。它们可以减少眼睛的疲劳，在昏暗光线下更容易阅读。而且，根据屏幕的不同，可以大大降低电池消耗。

然而，创造一个令人愉悦的暗黑模式是很困难的。我们不能简单地重复使用我们的颜色或反转我们的色调，如果这样做，我们将得到与之相反的结果：我们会增加眼睛的疲劳，让我们在昏暗的光线下阅读变得更加吃力，甚至可能破坏我们看到的信息层次。 

在这篇文章中，我们将分享如何设计可读、平衡、令人愉悦的暗黑模式。 

1.让远的元素更暗

在暗黑模式里，UI元素的背景颜色遵循一个指导原则：越接近用户的层（例如弹窗），表面颜色越浅。这个模型类似于一个光源从上方投射的环境。层离的越远，它所接受的光线就越少，也就越能融入到背景中。

在创建暗黑模式时，直接反转现有的浅色主题颜色可能很容易，但是更远的层级会变得明亮，近的层级反而会变得黑暗，这样会打破物理特性，感觉不自然。

相反，只取你的浅色主题的主要表面颜色。反转这个颜色来变成你的深色主题的主要表面颜色，在较近的层级上把这个颜色变浅，而在较远的层级上把这个颜色变深。

在 Superhuman 中，我们的暗黑模式由五种深浅不一的灰色组成。较近的曲面使用较浅的灰色；较远的曲面使用较暗的灰色。 

2.重新审视视觉对比度

当通过参考浅色主题来设计一个深色主题时，重新审视视觉对比度是很重要的。

例如，在我们的浅色主题中，联系人详细信息为黑色，不透明度为60%。但在我们的暗色主题中，我们将联系方式设置为不透明65%的白色。虽然这两种对比度都超过了AA标准，但额外的5%可以更有效地防止疲劳，特别是在光线较弱的情况下。 

对于这些细微区别没有硬性规定。相反，我们根据文本大小、字体粗细和行高 来 分别调整每个项目，以确保深色主题与浅色主题一样清晰和易于阅读。 

3.减少大块的明亮色块

在浅色主题中，我们经常使用大块的明亮颜色。这一般是很好的，这样最重要的元素可能会更加显眼。但在暗黑主题中，这样就不行了，大块的亮颜色会让我们容易忽视更重要的元素。 

例如我们的提醒页面，在浅色主题中，粉色的覆盖不会分散对更明亮的对话框的注意力。但在我们的暗黑主题中，同样的覆盖吸引了我们的注意力。当我们把覆盖层变成更深的颜色，这样就可以轻松地专注于重要的层级。 

4.避免纯黑和纯白

4.1靠近现实

真正的黑色并不存在于我们的日常环境中。(世界上最暗的物体是麻省理工学院开发的一种尚未命名的物质，距离真正的黑色仍有0.005%的差距）因此，我们的视觉已经适应了将相对黑暗感知为真正的黑色，这就是为什么#000000会让人感觉如此刺眼，特别是在与浅色元素对比时，因为它与我们通常看到的任何东西都不匹配。 

4.2黑色模糊

黑色模糊是当较浅的内容在纯黑色背景上拖动或滚动时发生的视觉失真。 

在OLED屏幕上，这种现象越来越普遍。在这些屏幕上，纯黑色像素被关闭。(这就是深色主题比浅色主题更省电的原因。）然而，这些像素的开启和关闭比改变颜色要慢。这种可变的反应产生了模糊涂抹的效果。

你可以使用深灰色来避免黑色模糊，因为这样像素将不会关闭。这甚至适用于像#010101 一样暗的灰色，并且仍然比浅色主题更省电。

4.3深度

如果你在背景元素中使用纯黑，你将不能更好地表现视觉深度。

举个栗子，想象一下在一个纯黑背景上要显示一个通知，通知应该漂浮在背景之上的，所以你用阴影来表达深度，但是这个阴影实在是难以察觉，因为没有什么比纯黑更黑的了。

而如果你的背景不是纯黑色的，你就可以使用不同透明度和模糊度的阴影来表现深度。

4.4光散现象

纯白的文字与纯黑的背景产生了最高的对比度：21：1。在WCAG内容无障碍指南里，这是最极端的情况。

然而，在设计暗黑模式时，最重要的就是要注意对比度不能过高。对比度太高会导致眼睛疲劳和晕眩。 

当在非常暗的背景下设置非常亮的文本时，文本可能会看起来渗入背景中。对于我们这些散光的人来说，这种影响甚至更强。根据感官知觉和互动研究小组的博士后研究员Jason Harrison的说法：

有散光的人(大约50%的人)发现在黑底白字比白底黑字更难阅读。这在一定程度上与光线水平有关：在明亮的显示器(白色背景)下，眼睛虹膜关闭得更多，从而降低了“变形”镜头的效果；在黑暗显示器(黑色背景)下，虹膜打开以接收更多的光线，而镜头的变形在眼睛处产生了更模糊的焦点。 

在Superhuman 里，我们必须特别小心，因为我们的APP里文字占比非常大。我们将白色文本设置为90%不透明度，这样黑色背景就可以融入其中。这平衡了对比度和亮度，因此该应用程序在各种光线条件下都很容易阅读。 

5.加深其他颜色

由于我们淡化了文字颜色以避免眼睛疲劳和光散现象，其他的可点击文字和按钮就可能显得太亮了。我们现在必须调整这些颜色，以便在暗黑模式中更好地显示。首先，我们降低亮度，这样这些颜色就不会盖过附近的文字，然后增加饱和度，使它们仍然有明显的区别。

例如，如果我们直接使用浅色主题中的紫色，相对于附近的文本，它会显得太亮。在我们实际的暗色主题中，我们加深了这个颜色，以便用户可以专注于文本。 

总结

暗黑模式有很多好处而且现在被广泛期待，但是很难应用的很好。重复使用颜色和反转色调的简单方法会增加眼睛的疲劳，在光线不足的情况下更难阅读，甚至可能打破视觉和信息的层次。

我们找到了一种系统的方法来建立一个可读性良好、视觉平衡和令人舒适的暗黑模式。只需遵循以下步骤： 

1.让远的元素更暗

2.重新审视视觉对比度

3.减少大块的明亮色块

4.避免纯黑和纯白

5.加深其他颜色

Powered by Froala Editor