1. 避免纯黑
不要在一张纯黑的界面上使用纯白的文字:
理由:这种非常高的对比度,会让眼睛不舒服。
推荐:
使用深灰色作为主要界面的配色会更安全。由于在深灰色界面上文字的对比度相对于纯黑色界面上文字的对比度会更小,对人眼的压力也就小很多。另外,深灰色的界面也能有更多的颜色选择,投影也更好做(纯黑色是不好做黑色投影的)。
谷歌设计规范推荐使用#121212作为深色主题的主要配色

2. 避免使用太高饱和度的颜色
饱和度高的颜色在浅色界面上看起来很棒,但在深色界面上却会让用户产生视觉抖动,使得内容难以阅读。
推荐:
使用较浅的颜色(颜色在200-50之间)会使得内容有更好的可读性。饱和度降低不会降低UI的表现力,但可以帮助产品在不引起眼部疲劳的前提下保证适当的对比度。
3. 符合无障碍颜色对比度标准
确保内容在深色模式下依然清晰易读,内容与背景之间的对比度要合适。谷歌设计规范推荐在文本内容与背景之间的对比度至少要达到15.8:1的比例。
推荐:
使用对比度测试工具(uxpro.cc/toolbox/acc…
4. 对文字使用不同透明度来强调不同层级
文字在深色主题下默认会被设置为纯白色(#FFFFFF),但#FFFFFF是一种很明亮的颜色。它会在黑暗的背景下产生视觉“抖动”,这就是为什么谷歌设计规范推荐使用稍微暗一些的白色:
最需要强调的文本不透明度为87% 中等强调的文本不透明度为60% 禁用文本使用38%的不透明度
小提示:
浅色文本在深色背景上会比深色文本在浅色背景上显得更粗,这就是为什么在深色模式下要使用更细的字体。

5. 考虑界面传达的情绪
不同的背景颜色所带来的感知是不同的。 这意味着深色主题和浅色主题在传达信息上是有区别的,深色和浅色的主题风格总是会让用户产生不同的情绪。要善用这种区别,重新思考产品的特性,并及时优化自己设计。 暗色模式并不是总是必须从现有的浅色中直接得来

6.善用灰色营造空间感
目的:
达到清晰的层次结构并需要突出界面中的重要元素。 空间感是我们用来传达元素层次结构的工具。
推荐方式
在浅色模式下,我们使用阴影来突出空间感。界面空间感越强,投影就越宽。
在暗色的背景下很难看到阴影。最好是使用不同的亮度来表达元素的空间感。
在谷歌设计规范中,深色主题的空间感使用不同的明度来设计。更高的明度,更轻的界面。

7. 允许用户从普通模式切换到暗色模式
让系统决定何时开启或关闭深色主题,这相当于从用户那边抢夺了控制权,并让系统为他们做出决定。
推荐方式
所以最好不要使用自动切换模式,而应该允许用户使用UI控件打开(或关闭)深色主题。用户应该能够根据自己的实际需要来手动选择不同的模式。

8. 测试浅色和深色的主题
最后,需要查看UI在这两种情况下的外观细节,并根据需要调整设计以适应不同情况。可以考虑在天黑以后,在开灯的环境下,测试自己的产品。
9.材质设计深色主题由以下属性定义:
对比度:深色表面和100%白色文字的对比度至少为15.8:1
深度:在较高的高度下,组件通过显示较浅的表面颜色来表示深度
去饱和度:原色被去饱和度,因此它们在所有海拔高度上均通过至少4.5:1的Web Content Accessibility Guidelines(WCAG)AA标准。
有限的颜色:大表面使用深色表面颜色,用有限的颜色修饰(光,去饱和和明亮的,饱和的颜色)
白色覆盖透明度,呈现的效果

在黑暗主题中,阴影保持黑暗以准确表示投射阴影