暗模式网站设计可以在任何地方工作。从移动应用到智能手表再到电视界面，这种设计趋势可以推动您的品牌前进。在UI设计中正确的使用暗模式，将会有事半功倍的效果。但是如果技巧运用的不合理，那将是事倍功半了。

关于如何创建暗模式以获得在各种设备上的外观、可访问性、电池寿命和性能方面的最佳结果，仍然存在许多误解。

暗模式不仅仅是反转颜色。

不要用100％的纯黑色

当您想开始设计暗黑模式时，你想到的第一件事可能是“直接创建一个黑色背景”。

这应该是我们常犯的错误。

Google的Material Design建议使用深灰色，而不是纯黑色；Material Design建议的深色主题界面颜色为＃121212。

考虑把颜色饱和度降低

黑暗模式应避免使用饱和色，首要原因便是可访问性——饱和色不符合WCAG（注：Web内容无障碍指南）的标准：即深色背景下的正文文本至少为4.5:1（注：即界面主色与文字信息的对比度）。

饱和色在深色背景下会产生光学振动（optical vibrations），从而可能会导致眼部疲劳。

避免使用阴影：

在一些明亮的界面中，我们往往使用轻微的阴影来表现深度。

正因如此，现在的界面使用起来会更加自然合理（注：可能是界面设计借鉴和引用了自然的光影效果，所以感觉会比较自然合理）。

然而，阴影在大多数黑暗模式的元素中，并不是那么明显。

这就是为什么不要频繁地使用它们。毕竟还有另外的表现层次的方法。

颜色和深度

我发现效果最好的是饱和度降低约 20-30%，具体取决于色调。在大多数情况下，您不需要触及任何其他值。

正如你在上面的例子中看到的，浅色模式下的颜色，当放在较暗的背景上时，会很刺眼，很难看。通过这个简单的去饱和技巧，它们最终会变得更容易在眼睛上。

另一件事是为基于强调色的深灰色阴影使用颜色主题。你不能用它走得太远，但是当以一种微妙的方式完成时，它会将整个设计转变为一个一致、连贯的整体。

在我们的例子中（上面的例子），我只是在灰色中添加了一点蓝色，以便更好地匹配按钮（强调色）和其他 UI 元素。

另一个重要部分是图层的层次结构，这主要是由它们的亮度创建的。我们旧手机的典型角度约为 45°，最自然的光源是来自顶部的光源——太阳或天花板灯。

所以那些假的、模拟的、感知的层越靠近光源就越亮。您可以充分利用它。

即使界面是完全扁平的，我们的头脑仍然更喜欢被欺骗一点，以获得更好、更容易掌握的层次结构。这就是为什么假深度很重要！

这就是为什么你应该避免被认为“在顶部”的物体，或者比背景更暗的更接近用户的物体。正如你在左边的例子中看到的那样，它看起来不自然，而且我们的大脑需要更长的时间来处理图像。

一个特别有效的技巧是简单地从背景的基本亮度（最暗的颜色）开始，并为每个级别添加 8 或 10 个亮度点。

在大多数情况下，无论如何你只需要两到三层。

使用该技巧，您将在层之间获得一致的“颜色距离”，这将有助于我们的大脑更快地处理它。

作者：Michal Malewicz