一年一度的科技界春晚——苹果WWDC于北京6月4日凌晨1点如期而至，本次发布会最让UI设计培训像素妹儿印象深刻的就是全新的模块化工作站主机——Mac Pro以及与之相匹配的6K显示器——ProDisplay XDR。

但是两者最低10998美刀的售价让像素妹儿目瞪狗呆，作为一名塑料果粉，信仰太贵，我还是老老实实搬砖吧。

除了硬件苹果还带来了全新的iOS 13、watchOS 6、macOS Catalina、tvOS以及首次发布的全新iPadOS，其中最重要的当属iOS系统。

苹果在iOS 13中引入全局深色主题模式，这一点早在大家的意料之中，毕竟去年的WWDC上就已经针对macOS带来了更新。除了苹果，Google 在今年的Android系统当中也正式推出了自己的深色模式，深色模式已经成为大势所趋，而这对我们 UI 设计师又意味着什么呢？

为什么要增加深色模式？

提高沉浸感

许多专业图形、视频等编辑软件普遍采用深色界面作为默认外观，这是为什么呢？因为在深色模式下，所有界面辅助信息会被减弱，核心元素会相对凸显。另外由于电子设备的屏幕往往采用主动发光模式，长时间盯着屏幕刺眼的光线会对眼睛造成严重的压力，而深色模式的刺激性没那么强烈，用户不易产生视觉疲劳，对提升产品的沉浸感会更好。

节省电量

在电池技术还未取得突破性进展的当下， 想要提升续航只能在节能方面多下功夫，这就是OLED屏幕逐渐普及的原因。由于自发光的特性，OLED屏幕越暗越省电，采用深色模式极大地降低了屏幕亮度，也就减少了屏幕的耗电量，使设备获得了更好的续航。

Youtube 同一界面深浅两种模式下屏幕的电流对比，可以看到同样的界面，最高亮度下深色模式降低了 60% 的耗电量

差异化设计

随着扁平化设计风格的流行，特别是近期一些大厂产品的更新，千篇一律的浅色系界面早已让用户审美疲劳，增加一个系统全局性的黑暗模式可以无需对 UI 进行大刀阔斧改革的同时达到让用户耳目一新的效果，做出一些差异化的改变。

除此之外，黑暗模式的界面开起来更加炫酷，更加具有未来感，满足了用户心中对于科技产品的形象。

深色模式与夜间模式的区别

深色模式不是夜间模式！尽管两者都整体调低了亮度，但是彼此之间还是有着明显差异的，最重要的就在于对比度。夜间模式主要针对夜晚低亮度下使用，为了降低对眼睛的刺激，一般会将界面的对比度调低。而许多用户在白天也会选择深色模式，为了保证在白天时用户也可以正常使用，所以深色模式的对比度会更强。

可以看到深色模式下的对比度明显高于夜间模式；

此外，由于各个APP的设计风格并不一样，那么就无法保证各APP之间的夜间模式视觉效果一致，甚至一些APP根本就没有夜间模式，那么用户在切换应用时瞬间的明暗变化甚至会出现适应性失明的现象。深色模式作为系统级别的设置可以有效避免这个问题，对用户体验的支持更好。

如何设计好深色模式？

在苹果和谷歌的带领下，未来将会有更多厂商会在自己的系统中加入黑暗模式，为了更好地与系统兼容，我们的产品也应该适当考虑添加黑暗模式，所以提前熟悉和了解黑暗模式对于我们的工作将大有益处。尽管iOS 13还处于测试阶段，我们还无法获得详细的黑暗模式设计规范，但是从已经推出黑暗模式的安卓以及苹果去年发布的macOS来看，我们还是可以总结出一些规律的。

层级

通常在浅色模式下，我们一般可以通过调整页面元素的投影高度来表现该元素在页面中的层级，但是深色模式下投影的作用被大大削弱，这种方法显然不适用。那如何表现深度呢？在深色模式下，我们一般通过元素表面的亮度来确定——元素层级越高，其承载面的颜色越浅。

浅色模式下，阴影越高层级越高，深思模式下，承载面越浅等级越高；

色彩

深色模式下的色彩与浅色模式相比具有非常明显的区别。在浅色模式下我们一般使用低亮度、高饱和度的颜色，然而在深色模式下，则为高亮度、低饱和度的颜色。高亮度是为了与深色背景拉开明暗上的差距，而低饱和度主要是为了避免高饱和度带来的视觉抖动。

视觉震动也称色彩震动，指两种对比强烈的颜色边缘发生的扭曲效应，详情参见百度；

总结

以上就是为大家总结的黑暗模式设计中最需重要的两点，其他方面由于平台规范的差异可能会有很大不同，小伙伴们想要了解更多的话可以访问谷歌Materia Design官方网站查看。

（Material Design深色主题模式专题页面：https://material.io/design/color/dark-theme.html#properties）

UI设计是一个不断发展变化的职业，新的设计风格的出现对广大设计师来说是挑战也是机会，各位小伙伴要做的就是提前做好知识储备，设计出更好的产品来，经过这次完整的历练，你一定会得到更大地提升。