> ## 文章索引
> 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt
> 这是 lrd.im 的个人博客，记录设计、技术与思考。

# 关于深色模式的一些发现和思考

![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-10-04-8639df407000/01.png "来源：苹果官网")

> 近期更新的 iOS 13 重磅推出深色模式，作为一名设计师当然也要蹭下热度把[个人网站](https://lrd.im/)也适配上深色模式。这篇文章记录了我最近为网站做深色模式时的一些发现和思考。

## 深色模式的优点

1. 省电（在 OLED 屏上尤为显著）；
2. 与环境色接近，减少对眼睛的刺激；
3. 酷，新潮玩意就是酷！
4. …

## 哪些 App 适合使用深色模式？

根据产品调性和使用场景判断，通常情况下社交通讯、工具、影音播放、资讯阅读、运动科技等类型的产品适合使用深色模式。

![五款深色模式 App 截图对比：Telegram（外观设置）、全能扫描王（文档列表）、哔哩哔哩（视频播放）、腾讯新闻（资讯列表）、爱范儿（科技资讯），均属社交、工具、影音、资讯类适合使用深色模式的产品类型。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-10-04-8639df407000/02.png "以深色/黑色为主题的 App")

但深色模式其实不是所有 App 都适合使用，比如：

电商，外卖等消费类型 App，色彩对消费转化的影响特别大，除非应用是主打潮酷风格的，否则并不建议大面积使用黑色。

教育学习类型 App，深夜低亮度学习，对中小学生视力影响很大，并不鼓励这样做，而且这样学习效率恐怕不会比白天高。

…

下面写上我最近发现在适配深色模式时的一些要注意的地方，有正面和反面的例子来佐证我的观点。

## 一、选择恰当的背景颜色

### iOS 和 iPadOS 是怎么做的

![iOS 系统背景色规范图，展示浅色、基础、提升三个层级下主要、次要、辅助背景色。深色模式基础层主要背景色为纯黑 #000，次要和辅助背景色依次为深灰色，层级越高颜色越浅。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-10-04-8639df407000/03.png "iOS 13 设计文档的局部")

苹果系统应用在深色模式下的背景色是 #000 纯黑色，在 OLED 屏幕 上纯黑色不发光，所以能起到省电作用；而且自带应用多数是工具类应用，不涉及商业性质，所以使用了中性的纯黑色。

### 根据产品类型选择恰当的背景色

但是大面积的纯黑会给人一种严肃和压抑的感觉，不建议所有深色模式下的应用背景色都设为纯黑。我们需要要考虑到应用的类型，品牌色等等来选择背景色的明度和色彩倾向。通常会使用深灰色或者偏蓝一点的深灰色。

![五款 App 深色模式背景色对比：豆瓣、爱奇艺、网易云音乐、Twitter 的色相值均在 212–255 之间（偏冷蓝色调），饱和度较低；Medium 则采用 H:0 S:0 的纯中性深灰，背景色普遍避免纯黑。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-10-04-8639df407000/04.png "深色模式下各大 App 的页面")

如上图，深色模式下 App 背景色的 H 值都在 200~250 之间（即在蓝色范围内），在纯灰色的基础上稍微偏冷一些，色彩心理学上冷色是后退色，所以比较适合在背景色中使用。同时可以看到网易云音乐的背景色有点偏暖紫色，可能是因为其品牌色就是暖色（红色）的缘故。这一点待研究。

### 关于纯黑和纯白

不要大面积使用纯黑和纯白色。因为两者共存时对比度是最大的（21:1），如果大量在正文中使用，容易产生阅读疲劳，不适合长时间阅读。

![三张深色模式截图对比：Twitter 暗淡主题（蓝灰背景）正文用纯白 #FFFFFF；Twitter 暗黑主题（纯黑背景）正文改用浅灰 #D9D9D9；Medium 纯黑背景下标题为纯白，正文同样使用 #D9D9D9，以降低对比度减少阅读疲劳。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-10-04-8639df407000/05.png "背景色与正文色的对比")

如上图，Twitter 的深色模式有两种方案，一种是蓝灰色作为背景色的暗淡主题，这时正文使用了 #FFF 纯白色；另一种是纯黑色作为背景的暗黑主题，这时正文颜色则使用浅灰色 #D9D9D9。

同样 Medium 在纯黑色背景下，只有标题是 #FFF 纯白色，下方正文部分也是用了浅灰色。

## 二、投影的处理方式

### 投影使用不当会影响页面观感

在常规的浅色模式下我们常常会使用投影来凸显某些元素，比如按钮、卡片等等，但是在深色模式中要谨慎实用，不能生硬地把投影颜色加深就完事了。

投影在深色模式下使用不当，不仅起不到区分页面内元素层级的作用，还会影响整体观感，起到反作用。

![百度贴吧与图书 App 的深色模式对比截图：贴吧深色模式下卡片投影失效，卡片与背景融为一体；图书 App 深色模式下书本投影变为发光效果，视觉异常。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-10-04-8639df407000/06.png "百度贴吧和图书中投影的使用")

如上图，在百度贴吧 App 的浅色模式下“最近逛的吧”里面把我最近常去的贴吧以卡片的形式逐个显示。并给卡片添加了投影的效果，视觉层级比“关注的吧”更高。

然而在深色模式下，卡片背景色与 App 背景色一致，也同样加上投影，但是并没有区分开来。

同样 iOS 自带的图书程序里面，设计师使用了为书本设计了投影，在浅色模式上显示正常，但直接应用到深色背景色时会出现滑稽的效果，书本居然在发光。

> 补充：百度贴吧在 10 月 10 日更新的 10.3.11 版本中加深了 App 底色，现在可以较好地区分“常逛的吧”了。但还是使用了投影，尽管视觉上很不明显。

### 看看 Apple 的设计师怎么说

![Apple 官方文档截图，说明深色模式下的分层背景色设计：基础背景用于后置界面，稍亮的 "elevated" 背景色用于前置界面，以替代投影实现视觉层级区分。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-10-04-8639df407000/07.png "WWDC 2019 中讲到深色模式时的文本")

Apple 认为在浅色模式下投影能轻松地区分两个视觉元素，但是在暗色模式下作用甚微。所以他们在深色背景下，对前置元素的使用**稍亮的灰色**。

下图举了正反两例，左边的 Twitter 使用了纯黑色作为通栏列表的背景色，而页面背景色则使用稍亮的灰色，让人一眼看上去有些别扭，通栏列表像内陷进去了。而右侧的 iOS 设置应用，用了纯黑色作为背景，操作区则使用稍亮的灰色，视觉表现上更自然，更符合用户的使用直觉。

![对比截图：Twitter（左）用纯黑色作操作区背景、浅灰作页面底色，视觉上操作区内陷；iOS 设置（右）用纯黑作页面底色、深灰作操作区背景，层级自然清晰，符合使用直觉。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-10-04-8639df407000/08.png "Twitter 和设置两种不同的做法")

### 深色模式下如何处理投影？

回到投影的处理上，处理得比较好的如下图爱奇艺、网易云音乐，在暗色模式下就把投影移除，将卡片颜色调整至比背景色稍亮。App Store 的首页上把弥散投影移除。

![爱奇艺、网易云音乐、App Store 深浅色模式对比截图：三款 App 在深色模式下均移除了卡片投影，改用比背景色稍亮的灰色来区分视觉层级。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-10-04-8639df407000/09.png "三款应用在深色模式下处理投影的方式")

但并不是说暗色模式下不能使用投影。在一些情况下比如背景比较复杂、或者元素的不确定性较高的时候，还是可以适当使用投影效果，如下图中苹果自带地图右上方的按钮和 Twitch 的视频悬浮窗：

![深色模式下合理使用投影的正面示例：左侧苹果地图截图中，右上角浮动按钮使用投影以突出显示；右侧 Twitch 截图中，视频悬浮窗使用投影与列表内容区分层级。两例均因背景复杂或元素不确定性高而保留投影。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2019-10-04-8639df407000/10.png "地图和 Twitch 在深色模式中仍然使用投影")

所以我们要明确使用投影的目的，如果是为了区分视觉层级，应用在深色模式时作出适当的调整，达到设计目标即可。

关于深色模式的其他的方面诸如颜色、图标、材质的处理等等很多大佬在公众号、社区也发表过一些文章，我这里就不重复描述了，后续如果我有其他新发现也会及时更新。

## 参考链接

- [一篇吃透 Dark Mode ，搞定“暗黑/深色”适配](https://mp.weixin.qq.com/s/02QmgMkmVcB8x7xVZJT_Bg)
- [图文版 WWDC 设计分会：iOS 13 设计新特性（1） | Be For Web - 为网而生](http://beforweb.com/node/1047)
- [What’s New in iOS Design](https://developer.apple.com/videos/play/wwdc2019/808)
- 各种支持深色模式的 App