2024年6月15日发(作者：)

日夜间模式切换ui设计

夜间模式在过去几年中很最受欢迎，Apple和Google都将为用

户提供了这一功能。夜间模式将屏幕亮度降低，减少并视觉疲惫。

今天我主要给大家分享日夜间模式切换ui〔制定〕，希望对你们

有帮助!

如果你计划在产品中添加夜间模式功能，请注意以下几点:

1.避免纯黑色

夜间模式不一定是纯黑背景上的纯白文本，如果对比度太高，

看起来也很难受。

使用深灰色作为背景色更安全，因为深灰色表面可以减少眼睛

疲惫，表面上的浅色文字比黑色表面上的浅色文字具有更低的对

比度。深灰色表面可以表达更广泛的颜色、高度和深度，因为它

更容易看到灰色阴影(纯黑色上不可能有阴影)。

建议夜间模式的背景颜色为# 121212。

2.避免高饱和度颜色

高度饱和的颜色在浅色表面看起来很棒，但是一旦放在深色背

景上，它们就变得难以阅读，为了搭配深色背景，消除饱和度非

常重要。

建议使用较浅的颜色(200-50范围内的颜色)，因为它们在深色

第 1 页 共 3 页

背景下更易读，它可以帮助用户坚持适当的对比度，而不会引起

眼睛疲惫。

3.满足可访问性颜色对比标准

为了保证内容在夜间模式下清楚可读，背景必须足够暗以显示

白色文本，建议在文本和背景之间使用至少15.8: 1的对比度。

4.文本高亮色

高亮色是出现在组件和关键表面顶部的颜色，它们通常用于文

本。

黑色主题的默认高亮颜色是纯白色(#FFFFFF)。但是#FFFFFF太

亮了，这就是为什么推举使用略微暗一点的白色来造成视觉干扰:

(1)高强度文本的不透明度应为87%;

(2)中等关键词适用于60%;

(3)禁用的文本使用38%的不透明度。

提示:深色背景上的浅色文字在浅色背景下看起来可能比黑色

文本更夸张，因此，在夜间模式下，用较细的字体更友好。选择

略微暗一点的白色，以防止背景向四周暗的内容发光。

5.情感化制定

在为现有产品制定夜间模式时，你可能希望制定表达的情感在

切换后与原始制定坚持一致，最好不要有这样的想法，为什么?

因为:

颜色感知受背景颜色的影响很大。

第 2 页 共 3 页

夜间模式是不同于日间模式的，黑暗和光明会引起不同的情绪，

没有必要想办法避免这个问题。

夜间模式不必继承日间模式。

6.景深

与日间模式相似，夜间模式也必须要创建层次结构，强调布局

中的重要元素。

海拔是我们用来传达元素层次结构的标准。

在日间模式下，我们使用阴影来表示高度，海拔越高，投射的

阴影越宽。同样的方法在夜间模式下并不奏效在黑暗的背景下很

难看到阴影。

在使用材质构建夜间模式中，背景和组件使用叠加阴影，海拔

越高，颜色越浅。

第 3 页 共 3 页