如何做好深色模式设计体验？方法+实战案例帮你学会！

更多深色模式干货：

一、深色模式和深色风格

在了解深色背景配色之前，设计师首先要了解深色模式和深色风格，是两个不同的概念。

首先解释深色风格，就是以深色背景为基调的设计风格，在网上的设计案例中并不少见。

而深色模式，则是用来和浅色模式配对的反色模式。首先主流的手机、平板、电脑系统中都有浅色、深色模式的选择， 用于切换系统 UI 是以浅色为主还是深色为主。

应用如果要跟随系统切换主题，就需要预设浅色和深色两种模式，也就是说深色模式是用于支持系统主题切换而做的，是搭配浅色模式提供的一种色彩变体版本。

深色风格和深色模式不同，主要原因就是如果产品一开始以深色风格进行设计，就是它的默认风格，意味着设计师要在系统处于默认浅色模式下它也是深色的。

这种风格的设计往往就不会去适配系统主题的切换，因为它已经是深色了，那么当系统主题改成深色模式就没有必要再提供一套设计。

另一个次要的原因，就是深色模式作为浅色模式的补充，它的选色逻辑是不同的，是基于原有配色上做出变体完成的，而不是单独选配。

除了模式和风格差异外，还有个需要理解的概念即 —— 深夜模式。今天很多人会把深夜模式和深色模式等同起来，但两者并不是一种东西。

深色模式的出发点是提供两种系统级的色彩方案，给用户提供更多的个性化设置选项（比如我就喜欢用深色模式）。深色模式在夜间有更好的使用体验只是附带加成，但不代表深色模式在白天就不能正常用了。

而夜间模式的出发点，则是在夜间低光源环境中，尽可能减少屏幕自发光的强度，减少用户用眼的疲劳。

夜间模式的配色逻辑和深色模式不同，但因为现在深色模式的普及且附带了夜间的特性，所以多数应用都放弃了夜间模式功能。

所以最后总结一遍，在我们进入配色阶段，首先要确定配色风格，是使用浅色还是深色风格，它们都要独立完成色彩的选择。

如果一开始先做了浅色风格，但还要添加深色模式，那就要在浅色模式的配色基础上进行深色的选色，确定一套匹配的深色模式配色标准。

二、深色模式的配色逻辑

苹果在 iOS13 中更新了深色模式，也提供了一套深色模式的适配规范，我们今天制定深色模式的配色方法主要参照这套规范开展。所以要掌握深色模式的配色逻辑，首先要了解官方的定义规范。

官方规范中深色模式下的颜色定义包含以下几个模块：

1. 基础系统色彩
2. 中性色应用
3. 阴影和模糊

Part.1 基础系统色彩

iOS 默认应用了一套系统色彩，在深色模式中，虽然还是使用这些色相但轻微调整了明度和饱和度。因为相同颜色在浅色和深色背景中给人带来的感受是不同的，所以要获得一致的色彩体验，就要在深色模式下做出调整。

可以用选色面板来查看它们的调节差异。

Part.2 中性色应用

深色模式的中性色和浅色模式完全不同，浅色背景下的中性色越突出颜色越深，深色背景下的中性色越突出则颜色越亮。

在 iOS 的中性色定义中是围绕场景制定的，包括背景、列表、文字、填充和描边等。

首先解释背景中性色，iOS 默认使用三个中性背景色，用于区分不同模块之间的堆叠。要重点注意的是，再浅色模式下模块堆叠是“白-灰-白”，而在深色模式下堆叠是 “深灰-中灰-浅灰”。

然后是列表用色，iOS 也定义了三个颜色，用于区分背景、列表背景、分割线的用色。

之后的文字用色上 iOS 采用了 4 个等级，除了纯黑和纯白外，其它灰色都使用带有色相和透明度的灰色。

最后 iOS 还提供了四个等级的中性色用于其它内容的填充和描边。

Part.3 阴影和模糊

最后就是图层效果的应用上，主要包含阴影和毛玻璃两个效果。

首先说阴影，它的成像原理是在投射平面上形成更深的轮廓，但本来背景就是深色的时候还怎么加深？所以深色模式下统一移除阴影。

而很多新手的深色模式是用更亮的颜色做阴影，那不叫阴影，叫外发光。

然后就是毛玻璃效果，iOS 中的毛玻璃包含六种不同的模糊等级，使用了不同的透明度来表现。

以上就是 iOS 官方规范中深色模式应用的内容，在我们自己的项目中，不可能完全照搬这套标准和数值，所以要总结出对应的规律：

1. 主要色彩在深色模式下要微调，色相、明度、饱和度会轻微调节
2. 中性色和浅色模式对调，但在深色模式下的中性色数量要精简
3. 在深色模式下移除阴影的使用，定义新的遮罩元素色值和透明度

三、深色模式的应用案例

上一次分享我们完成了浅色模式的设计，并创建了对应的色彩规范，我们依旧要使用它来完成深色模式的配色演示。

配色的顺序和之前稍有改动：

1. 中性色选择
2. 彩色色相调整
3. 装饰、内容色优化

Step1:中性色选择

配色的第一步依旧是选择中性色，为整个深色模式的色彩氛围奠基。中性色配色的逻辑就是从深到浅，从下到上（层级）选择，可以使用原设计稿替换色彩来进行测试。

深色模式对中性色的感知没有浅色那么敏感，所以在配色过程中，减少了一级中性色。

要注意的是，在实际项目的规范中，色彩是作为一个特定角色（命名、等级）记录的，虽然你可能要合并、削减一些颜色，但依旧要根据浅色模式包含的角色给出对应的深色模式色值。这也是 Figma 的变量工具应用要点原则之一，不能因为你删减了颜色而让一些色彩的角色为空。

Step2:彩色色相选择

彩色之所以要调节，是因为人对颜色的观感会根据环境的变化而变化，浅色模式对一个颜色的感受和深色模式下是不同的。所以当换几个呢变成深色，这些固定用色也要做出调整匹配环境。

而配色需要测试，要获得直观效果，就要直接在完成中性色的基础上调节才有意义，且需要将浅色模式放在旁边进行对比，而不是根据固定的规则无脑更改。

虽然颜色整体明度、饱和度都有调整，但具体应该调多少只能靠设计师自己“感觉”，可以多放在手机上查看前后的效果。

最终完成的彩色色相调整对比：

Step3：装饰、内容色优化

原则上深色模式的适配，只要给出前面两步中的固定色彩角色即可，类似装饰色或者内容色不调整也没有问题。

但在实际应用中，浅色转深色的影响是难以预估的，会产生非常多的问题。

比如设计会增加装饰性字体标题，需要切图后导入，替换深色模式就意味着它的贴图也要另外更新。还有一些使用深色色彩的装饰性元素、彩色投影，也都需要单独处理、切图才能满足深色模式的正常使用需求。

有非常多的产品在深色模式下显示效果有问题，就是摆烂没有去优化装饰的色彩和切图的结果。

所以还有个小经验要分享，就是因为这些装饰性的内容维护起来很麻烦，所以很多大型应用干脆不做，直接放弃深色模式的适配，例如美团、飞猪、淘宝等都没有适配深色模式。

另一点，就是内容图在深色模式下产生的观感也不同，所以对于一些会和深色产生冲突的内容用图，是需要替换更合适的图片。

但是！如果在作品集等场景中要展示两个版本，你不能在版本前后用了不同的内容配图，所以对配图的优化不是光改深色版本，而是选出两个模式都适用的内容方案进行替换。

完成上面的操作，我们就完成了深色模式的配色了，下面是最终得结果：

结尾

后面有时间还会围绕深色风格再做一篇独立的说明，那么别忘记 C 端体验设计全能班即将开课这件事 👉 https://yfbsy.xetslk.com/s/2NQB4A

欢迎关注作者的微信公众号：「超人的电话亭」