惠州大亚湾好的c4d培训学校

夜间模式在过去几年中很，Apple和Google都将为用户提供了这一功能。夜间模式将屏幕亮度降低，减少并视觉疲劳。今天小编主要给大家分享日夜间模式切换ui设计，希望对你们有帮助!

日夜间模式切换ui设计

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

1.避免纯黑色

夜间模式不一定是纯黑背景上的纯白文本，如果对比度太高，看起来也很难受。

使用深灰色作为背景色更安全，因为深灰色表面可以减少眼睛疲劳，表面上的浅色文字比黑色表面上的浅色文字具有更低的对比度。深灰色表面可以表达更广泛的颜色、高度和深度，因为它更容易看到灰色阴影(纯黑色上不可能有阴影)。

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

2.避免高饱和度颜色

高度饱和的颜色在浅色表面看起来很棒，但是一旦放在深色背景上，它们就变得难以阅读，为了搭配深色背景，消除饱和度非常重要。

建议使用较浅的颜色(200-50范围内的颜色)，因为它们在深色背景下更易读，它可以帮助用户保持适当的对比度，而不会引起眼睛疲劳。

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

为了确保内容在夜间模式下清晰可读，背景必须足够暗以显示白色文本，建议在文本和背景之间使用至少15.8:1的对比度。

4.文本高亮色

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

黑色主题的默认高亮颜色是纯白色(#FFFFFF)。但是#FFFFFF太亮了，这就是为什么推荐使用稍微暗一点的白色来造成视觉干扰:

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

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

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

提示:深色背景上的浅色文字在浅色背景下看起来可能比黑色文本更夸张，因此，在夜间模式下，用较细的字体更友好。选择稍微暗一点的白色，以防止背景向周围暗的内容发光。

5.情感化设计

在为现有产品设计夜间模式时，你可能希望设计表达的情感在切换后与原始设计保持一致，不要有这样的想法，为什么?因为:

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

夜间模式是不同于日间模式的，黑暗和光明会引起不同的情绪，没有必要想办法避免这个问题。

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

6.景深

与日间模式相似，夜间模式也需要创建层次结构，强调布局中的重要元素。

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

在日间模式下，我们使用阴影来表示高度，海拔越高，投射的阴影越宽。同样的方法在夜间模式下并不奏效——在黑暗的背景下很难看到阴影。

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