其实“深灰色”也是很多应用在深色模式中所使用的背景色,这次微信更新的深色模式里,聊天背景用的就是深灰色(#181818)。
文字颜色也是一样,比如在亮色模式下偏暗色调的文字,在深色模式下会变得难以阅读。因此也需要选择合适的颜色,既能清晰显示,也减轻用户的视觉疲劳。
如果你觉得对比不够明显,不妨来看一下 Twitter 和 iOS 模式深色模式 。Twitter 提供了两种深色模式,分别是“昏暗(Dim)”和“熄灯(Light out)”,前者背景色为深灰色,后者基本是纯黑色。
从 Medium 上一位作者 Pudge 给出的对比图来看,在 Twitter 纯黑背景的深色模式下的界面下,通栏列表几乎与背景融为一体了。而 iOS 在深色模式下的这些地方用了稍亮的灰色,感觉更加自然了。
打开微信的深色模式,你也能看到类似的设计。在“朋友圈”“视频号”“扫一扫”等可交互的功能栏上,都采用比深灰色背景更亮的灰色。
由于深色模式下容易出现难以区分两个元素的情况,这种方式能让颜色在不同的外观模式下都具备足够的对比度。
不只是背景色,在低对比度的深色模式下之下,一般模式之下的各种色彩几乎都要重新设计。
比如很多 app 的品牌色饱和度都比较高,然而高饱和色则是深色模式的大忌之一。正如前文所说,这种对比度十分影响视觉体验,因此必须降低这些颜色的饱和度,比如 Google 的深色模式就会给“错误提示”的红色一层 40% 透明的白色图层。