日夜间模式切换ui设计

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

1.避免纯黑色
 

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

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

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

2.避免高饱和度颜色
 

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

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

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

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

4.文本高亮色
 

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

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

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

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

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

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

5.情感化设计
 

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

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

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

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

6.景深
 

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

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

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

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

更多培训课程，学习资讯，课程优惠等学校信息，请进入 成都青羊区平面设计培训成都青羊区PS淘宝美工培训成都青羊区UI培训成都青羊区PhotoShop培训 网站详细了解，免费咨询电话：400-998-6158