暗黑模式

暗黑模式是默认配色的一个补充模式,指把所有界面元素适配成黑色或者深色。

作用

改善暗光使用体验

在保证内容对比度的情况下,暗黑模式降低了屏幕的亮度,减少了暗光环境下眼睛的疲劳。

更加专注于内容

人眼对黑色会倾向处理为真空(无内容),在暗色背景下页面的内容和交互会显得更加突出,利于用户更加专注于内容本身。

大幅减少设备耗电量

暗黑模式省电的作用来源于 OLED 这种屏幕的特性。和 LCD 依赖于背光不同,OLED 自发光的特性使得屏幕能够独立控制单个像素是否发光,也就是说画面越黑,采用 OLED 屏幕的手机就越省电。

设计指导

清晰的模块层级

相比于默认模式主要依靠阴影营造模块层级,深色界面下的阴影感知更弱,需更加注意模块间的层级对比,通常使用不同层级的黑色和阴影来体现层次感。

足够的对比度

为了确保文字内容在暗黑模式下清晰易读,文字颜色与深色背景应确保足够的对比度。 Google Material Design 建议在文本和背景之间使用至少15.8:1的对比度级别。
但需要注意的是,深色背景下纯白色会造成文字边缘明显的光晕影响阅读,尽量避免使用。

避免高饱和度

避免使用过高饱和度颜色,高饱和色彩在暗色背景上可能引起视觉抖动。
建议使用较浅的颜色,因为它们在深色背景上具有更好的可读性。

舒适的图像处理

考虑到电商平台页面包含大量商品图、白底图及高饱和运营氛围内容,暗黑模式还应针对界面中的图案内容进行一定处理,如通过叠加一定透明度的黑色以降低图片饱和度及明度。