专栏名称: 超人的电话亭
只分享有价值的设计经验。
目录
相关文章推荐
字体设计  ·  2025日本年度色彩公布 ·  2 天前  
国际家居  ·  黑白灰极简公寓，越简单越高级！ ·  2 天前  
国际家居  ·  黑白灰极简公寓，越简单越高级！ ·  2 天前  
庞门正道  ·  为什么有人可以情绪稳定？ ·  3 天前  
ZaomeDesign  ·  每日灵感丨十二月七日 ·  5 天前  
WWD 国际时尚特讯  ·  FASHION & ... ·  5 天前  
WWD 国际时尚特讯  ·  FASHION & ... ·  5 天前  
51好读  ›  专栏  ›  超人的电话亭

如何提供更好的深色模式设计体验？

超人的电话亭  · 公众号  · 设计  · 2024-12-10 22:34

正文

前面完成了 UI 基础配色方式的说明，而案例是在以白色、浅色背景为主的配色方法。
第一篇：配色基础 | 用最直白易懂的方式讲配色
第二篇：配色逻辑 | UI设计中的配色思路
第三篇：配色应用 | 用实际案例演示配色使用思路
而这篇就要围绕深色背景的配色展开，帮助大家补充另一个重要的 UI 配色原则。


深色模式和深色风格

在了解深色背景配色之前，设计师首先要了解深色模式和深色风格，是两个不同的概念。
首先解释深色风格，就是以深色背景为基调的设计风格，在网上的设计案例中并不少见。
而深色模式，则是用来和浅色模式配对的反色模式。首先主流的手机、平板、电脑系统中都有浅色、深色模式的选择， 用于切换系统 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端体验设计全能班即将开课这件事，找我进一步咨询课程咯！

今天的分享就到这里结束，我们下篇再贱！

推荐文章
字体设计  ·  2025日本年度色彩公布
2 天前
国际家居  ·  黑白灰极简公寓，越简单越高级！
2 天前
国际家居  ·  黑白灰极简公寓，越简单越高级！
2 天前
庞门正道  ·  为什么有人可以情绪稳定？
3 天前
ZaomeDesign  ·  每日灵感丨十二月七日
5 天前
WWD 国际时尚特讯  ·  FASHION & FILM｜热播电影《魔法坏女巫》中幻想与现实的对话
5 天前
WWD 国际时尚特讯  ·  FASHION & FILM｜热播电影《魔法坏女巫》中幻想与现实的对话
5 天前
FM93交通之声  ·  温州治水新进展：目前已完成13744个排放口整治
7 年前
厦门日报  ·  再过4天，不带这个证件你可能上不了鼓浪屿！
7 年前
钱币圈  ·  建军纪念币来了，深潜钞你准备好了吗？
7 年前
半导体行业观察  ·  一图看懂Cortex-A75/Mali-G72
7 年前
周到上海  ·  晚餐临时泡汤了该咋办？黄执中教你怎么讨好女朋友！
7 年前
Sov5搜索   ·   小百科   ·   移动版
51好读 - 好文章就要读起来!