|教你巧用UI设计中的暗黑模式——Dark Mode

编辑导语：我们每天都会看一写APP ，有时候你会觉得一些软件界面的白色很刺眼，尤其是晚上的时候；这就是为什么越来越多的设计师开始注重创作两种主题模式——明亮和黑暗；本文作者教你如何用UI设计中的暗黑模式。

本文插图

黑暗模式有一些我们应当遵守的特定规范，使其对用户使用来说会更加合理。
一、为什么选择暗黑模式？
黑暗主题的主要优势是在于：

弱光环境下具有更高的可读性；
黑暗模式降低了设备屏幕的亮度；
它改善了视觉工程学，并能在特定的光照条件下得到更好的调节。

正因如此，在夜晚及深夜使用数码设备会更加舒适。
1. 深色模式的优缺点
使用深色模式可以：

减轻眼睛疲劳；
构造视觉层次；
使界面更神秘；
营造高端感；
提高在夜间提高可读性；
确保夜晚使用环境（比如在晚上使用娱乐的app）；

在以下情况下，请避免使用暗黑模式：
这些是深色模式的优缺点。
2. 可以在项目中使用的实用技巧
尽量不要用100％的纯黑色：
当您想开始设计暗黑模式时，你想到的第一件事可能是“直接创建一个黑色背景” 。
这应该是我们常犯的错误。
Google的Material Design建议使用深灰色，而不是纯黑色；Material Design建议的深色主题界面颜色为＃121212 。

本文插图

考虑把颜色饱和度降低：
黑暗模式应避免使用饱和色，首要原因便是可访问性——饱和色不符合WCAG（注：Web内容无障碍指南）的标准：即深色背景下的正文文本至少为4.5:1（注：即界面主色与文字信息的对比度）。
饱和色在深色背景下会产生光学振动（optical vibrations），从而可能会导致眼部疲劳。

本文插图

做两个调色板—— 用于暗黑模式和明亮模式：
在上面的技巧中，我提到过饱和的颜色更适合深色主题。
另一方面，我们都喜欢轻便的用户界面中充满活力的色调。
如何匹配这两个？接下来的答案是给这两种主题创建互补的色板是最佳选择。

本文插图

记住深色模式下的可访问性：
如果你想使解决方案更易于使用，则有适用于深色主题的特定准则。
最重要的是以下内容：正文和背景之间的对比度应至少为15.8：1 ，正因这点，即便是更高、颜色更浅的层级，可读性也很不错（参见Material Design）。
你可以使用这些工具来检查对比度：

Contrast（mac版）；
Accessible Brand Colors（web端）；
Stark（XD、Sketch、Figma插件）；

本文插图

避免使用阴影：
在一些明亮的界面中，我们往往使用轻微的阴影来表现深度。
正因如此，现在的界面使用起来会更加自然合理（注：可能是界面设计借鉴和引用了自然的光影效果，所以感觉会比较自然合理）。
然而，阴影在大多数黑暗模式的元素中，并不是那么明显。
这就是为什么不要频繁地使用它们。毕竟还有另外的表现层次的方法。