一
、色模式设深色模式和深色风格

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

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

而深色模式，计体则是验方用来和浅色模式配对的反色模式 。首先主流的法实手机、平板、战案电脑系统中都有浅色
、例帮深色模式的何做好深选择， 用于切换系统 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 ：装饰、内容色优化

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

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

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

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

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

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

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

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

作者：超人的电话亭