如何做好深色模式设计体验？方法+实战案例帮你学会 ！
· 2026-09-05 15:03:04
一 、色模式设深色模式和深色风格
在了解深色背景配色之前 ，计体设计师首先要了解深色模式和深色风格 ，验方是法实两个不同的概念 。
首先解释深色风格 ，战案就是例帮以深色背景为基调的设计风格，在网上的何做好深设计案例中并不少见。
而深色模式，计体则是验方用来和浅色模式配对的反色模式 。首先主流的法实手机 、平板 、战案电脑系统中都有浅色、例帮深色模式的何做好深选择 ， 用于切换系统 UI 是以浅色为主还是深色为主 。
应用如果要跟随系统切换主题 ，就需要预设浅色和深色两种模式 ，也就是说深色模式是用于支持系统主题切换而做的，是搭配浅色模式提供的一种色彩变体版本 。
深色风格和深色模式不同，主要原因就是如果产品一开始以深色风格进行设计 ，就是它的默认风格 ，意味着设计师要在系统处于默认浅色模式下它也是深色的 。
这种风格的设计往往就不会去适配系统主题的切换 ，因为它已经是深色了 ，那么当系统主题改成深色模式就没有必要再提供一套设计。
另一个次要的原因 ，就是深色模式作为浅色模式的补充 ，它的选色逻辑是不同的，是基于原有配色上做出变体完成的 ，而不是单独选配 。
除了模式和风格差异外 ，还有个需要理解的概念即 —— 深夜模式 。今天很多人会把深夜模式和深色模式等同起来 ，但两者并不是一种东西。
深色模式的出发点是提供两种系统级的色彩方案 ，给用户提供更多的个性化设置选项（比如我就喜欢用深色模式） 。深色模式在夜间有更好的使用体验只是附带加成 ，但不代表深色模式在白天就不能正常用了 。
而夜间模式的出发点 ，则是在夜间低光源环境中 ，尽可能减少屏幕自发光的强度 ，减少用户用眼的疲劳 。
夜间模式的配色逻辑和深色模式不同 ，但因为现在深色模式的普及且附带了夜间的特性 ，所以多数应用都放弃了夜间模式功能 。
所以最后总结一遍 ，在我们进入配色阶段 ，首先要确定配色风格，是使用浅色还是深色风格 ，它们都要独立完成色彩的选择 。
如果一开始先做了浅色风格 ，但还要添加深色模式 ，那就要在浅色模式的配色基础上进行深色的选色 ，确定一套匹配的深色模式配色标准 。
二、深色模式的配色逻辑
苹果在 iOS13 中更新了深色模式 ，也提供了一套深色模式的适配规范 ，我们今天制定深色模式的配色方法主要参照这套规范开展 。所以要掌握深色模式的配色逻辑 ，首先要了解官方的定义规范 。
官方规范中深色模式下的颜色定义包含以下几个模块 ：
- 基础系统色彩
- 中性色应用
- 阴影和模糊
Part.1 基础系统色彩
iOS 默认应用了一套系统色彩，在深色模式中 ，虽然还是使用这些色相但轻微调整了明度和饱和度 。因为相同颜色在浅色和深色背景中给人带来的感受是不同的，所以要获得一致的色彩体验 ，就要在深色模式下做出调整 。
可以用选色面板来查看它们的调节差异 。
Part.2 中性色应用
深色模式的中性色和浅色模式完全不同 ，浅色背景下的中性色越突出颜色越深，深色背景下的中性色越突出则颜色越亮。
在 iOS 的中性色定义中是围绕场景制定的 ，包括背景 、列表、文字 、填充和描边等 。
首先解释背景中性色 ，iOS 默认使用三个中性背景色 ，用于区分不同模块之间的堆叠 。要重点注意的是 ，再浅色模式下模块堆叠是"白-灰-白" ，而在深色模式下堆叠是 "深灰-中灰-浅灰" 。
然后是列表用色，iOS 也定义了三个颜色 ，用于区分背景 、列表背景 、分割线的用色 。
之后的文字用色上 iOS 采用了 4 个等级 ，除了纯黑和纯白外 ，其它灰色都使用带有色相和透明度的灰色。
最后 iOS 还提供了四个等级的中性色用于其它内容的填充和描边 。
Part.3 阴影和模糊
最后就是图层效果的应用上 ，主要包含阴影和毛玻璃两个效果 。
首先说阴影 ，它的成像原理是在投射平面上形成更深的轮廓 ，但本来背景就是深色的时候还怎么加深 ？所以深色模式下统一移除阴影 。
而很多新手的深色模式是用更亮的颜色做阴影 ，那不叫阴影 ，叫外发光 。
然后就是毛玻璃效果 ，iOS 中的毛玻璃包含六种不同的模糊等级 ，使用了不同的透明度来表现 。
以上就是 iOS 官方规范中深色模式应用的内容，在我们自己的项目中 ，不可能完全照搬这套标准和数值 ，所以要总结出对应的规律 ：
- 主要色彩在深色模式下要微调 ，色相 、明度 、饱和度会轻微调节
- 中性色和浅色模式对调 ，但在深色模式下的中性色数量要精简
- 在深色模式下移除阴影的使用 ，定义新的遮罩元素色值和透明度
三、深色模式的应用案例
上一次分享我们完成了浅色模式的设计，并创建了对应的色彩规范 ，我们依旧要使用它来完成深色模式的配色演示 。
配色的顺序和之前稍有改动 ：
- 中性色选择
- 彩色色相调整
- 装饰、内容色优化
Step1:中性色选择
配色的第一步依旧是选择中性色，为整个深色模式的色彩氛围奠基 。中性色配色的逻辑就是从深到浅 ，从下到上（层级）选择 ，可以使用原设计稿替换色彩来进行测试 。
深色模式对中性色的感知没有浅色那么敏感 ，所以在配色过程中 ，减少了一级中性色 。
要注意的是 ，在实际项目的规范中 ，色彩是作为一个特定角色（命名 、等级）记录的 ，虽然你可能要合并、削减一些颜色 ，但依旧要根据浅色模式包含的角色给出对应的深色模式色值 。这也是 Figma 的变量工具应用要点原则之一，不能因为你删减了颜色而让一些色彩的角色为空 。
Step2:彩色色相选择
彩色之所以要调节 ，是因为人对颜色的观感会根据环境的变化而变化 ，浅色模式对一个颜色的感受和深色模式下是不同的 。所以当换几个呢变成深色 ，这些固定用色也要做出调整匹配环境。
而配色需要测试 ，要获得直观效果，就要直接在完成中性色的基础上调节才有意义，且需要将浅色模式放在旁边进行对比 ，而不是根据固定的规则无脑更改。
虽然颜色整体明度 、饱和度都有调整 ，但具体应该调多少只能靠设计师自己"感觉" ，可以多放在手机上查看前后的效果 。
最终完成的彩色色相调整对比 ：
Step3 ：装饰 、内容色优化
原则上深色模式的适配 ，只要给出前面两步中的固定色彩角色即可 ，类似装饰色或者内容色不调整也没有问题。
但在实际应用中 ，浅色转深色的影响是难以预估的 ，会产生非常多的问题 。
比如设计会增加装饰性字体标题 ，需要切图后导入 ，替换深色模式就意味着它的贴图也要另外更新 。还有一些使用深色色彩的装饰性元素 、彩色投影，也都需要单独处理、切图才能满足深色模式的正常使用需求 。
有非常多的产品在深色模式下显示效果有问题 ，就是摆烂没有去优化装饰的色彩和切图的结果 。
所以还有个小经验要分享 ，就是因为这些装饰性的内容维护起来很麻烦 ，所以很多大型应用干脆不做 ，直接放弃深色模式的适配 ，例如美团 、飞猪 、淘宝等都没有适配深色模式 。
另一点 ，就是内容图在深色模式下产生的观感也不同 ，所以对于一些会和深色产生冲突的内容用图 ，是需要替换更合适的图片。
但是 ！如果在作品集等场景中要展示两个版本 ，你不能在版本前后用了不同的内容配图 ，所以对配图的优化不是光改深色版本 ，而是选出两个模式都适用的内容方案进行替换 。
完成上面的操作 ，我们就完成了深色模式的配色了 ，下面是最终得结果 ：
作者 ：超人的电话亭
文章推荐：
团队无线级级分佣 ，全天24小时进账不竭 ！ 5地利辰己经撸了3千多
AltaPixShare若何给图片建造鱼眼石特效 ？AltaPixShare修图编制
Reg Organizer若何扫描拾掇琐细残剩？进步电脑运转速度