许昌口碑好的UI设计培训学校

选择深色模式的原因

1.需求趋势

自从过去一年以来，Android 10和iOS 13上都适配了深色模式，而且Apple和Google也一直致力于将资源和注意力投入到深色模式中，这也让深色模式备受用户的关注。

2.专注内容

深色模式在弱光环境下有更好的可读性，让我们更专注于眼前的屏幕。深色背景会降低内容周围元素的影响，特别是以图片和视频为主的应用，让用户更专注内容。

作为内容消费型应用的Netflix，就把深色背景作为默认的设计样式，深色的设计让用户更能集中注意力，延长使用时间。

3.减轻刺激

相对于其他颜色，深色系的设计在夜晚看着舒服。可能晚上玩手机不用担心光线太刺眼，但是深色模式对护眼并没有什么帮助，只能说可以减少对眼睛的刺激。

4.提高续航

深色模式更省电只适用于OLED屏幕。OLED面板的每个像素点可以单独发光，当使用深色模式时，部分像素点被熄灭，只点亮部分像素，屏幕的一部分相当于处在休眠状态，所以会更加省电。

二、平台设计指南

1.iOS平台深色模式设计

在深色模式下，Apple重新审视了iOS中UI样式和颜色的含义，让我们来看看在iOS上设计深色模式带来的变化。

（1）语义化颜色（Semantic Colors）

所谓语义化颜色，就是不再通过某一固定的RGB色值来描述颜色，而是根据用途来描述，让界面元素可以自动适配当前的外观模式。

淘宝团队就参考了苹果的适配建议，通过语义化颜色的方式进行适配，使适配成本大幅降低。设计师根据不同UI元素的特性先期制定颜色语义化规则，进而技术在框架层面通过「颜色自动反转」技术实现颜色反转。

（2）系统颜色

除了语义化颜色，Apple还提供了9种预定义的系统颜色，在浅色和深色模式中，这些颜色会动态变化，支持整个系统的外观，同样也可以自适应选定的界面样式。

（3）模糊与动态效果

在iOS13上，苹果引入了4种模糊效果和8种动态效果，它们自动适应iOS界面样式。这是在浅色和深色模式下不同的模糊效果。

2.Android平台深色模式设计

谷歌提供广泛的文档支持，帮助设计师了解深色主题如何在Android生态系统运行。

（1）Elevation（阴影）

UI界面元素间的投影能让用户清晰地感知用户界面的深度。在设计深色主题时，组件将保留与浅色主题相同的默认阴影组件。Elevation越靠上,颜色就会越浅。

（2）无障碍性与对比

深色UI设计中的背景应足够暗以显示白色文本。设计师要注意背景和文字之间至少使用15.8：1的对比度。这样可以确保将正文在前面时，能通过WCAG（Web内容无障碍指南，使网站内容更容易访问）的AA标准。