超详细！凤凰新闻「暗黑模式适配落地」全方位复盘

凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配，本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。

项目背景

主流趋势：随着 iOS 13 与 Android 10（Q）系统版本上线深色模式功能。 用户诉求：阅读类产品，满足受众用户“缓解疲劳、沉浸式阅读的使用场景”。 现存问题：对标主流 APP 产品，凤凰新闻 APP 早期的“夜间模式”阅读体验较差，且色值规范缺少统一性，需要一次全面梳理。

改版目标

满足深色模式日间使用需求，并提升用户在深色模式下的阅读体验。 构筑一套新的深色/浅色模式色彩规范，方便管理与记忆。 双端开发建立新的色值代码库，提升沟通协同效率，同时节约设计开发后续的维护成本。

调研平台规范

1. 背景色

iOS 平台在深色模式下的背景色展示是动态的，分为基础、升起（例如，弹出框或半浮层）。如下图中 iOS 系统的两个界面，相同样式的组件在基础层与升起层显示的是不同的两组颜色。

从 iOS14 的色彩规范中可以发现随着界面高度的升起，系统定义的三级背景色也同步进行了一级上升。

iOS 通过这种背景色统一升级的处理方式来达到多任务窗口叠加的视觉隔离效果，但相对的开发成本也较高。

再来看看 Android 平台深色模式下不同层级间背景色的显示规律。

Android 把页面分为从“0dp”到“24dp”的 10 个不同高度的显示层级，通过在同一背景色上叠加不同透明度的白色来区分显示层级。相对于 iOS 的整体背景色升级，Android 的背景色分级逻辑则更加的简单易用。

2. 文字色

iOS 的规范中定义了 4 个等级的文字色，一级文字色为黑白纯色，二到四级文字色为色相偏蓝的半透明色，通过降低同一颜色的不透明度数值来进行分级。

Android 的文字色分为 3 个等级，与 iOS 的共同点是都用了半透明颜色，也都采用了降低不透明度的方式来进行分级。不同点是 Android 文字色使用的黑色与白色，没有添加色相。

使用带有透明度的字色能够避免相同字色与背景色相融的问题。以 Android 为例，三级文字色与 10 种背景色叠加后都具有较高的识别度。

iOS 则通过一套半透明字色可以适应基础与升起两种不同背景色的使用场景。

3. WCAG

iOS 人机界面准则和 Material design 在深色模式的建议中，都提到了文字信息需满足 WCAG 无障碍阅读的 AA 标准。

WCAG 全称为 Web 内容无障碍指南，其中包含分为可感知性、可操作性、可理解性、可兼容性四项原则的相关建议，这些建议可使网站内容更容易访问。WCAG 从高到低分别是 AAA、AA、A 三个等级。其中 AA 要求文字与背景对比度不小于 4.5:1。

感兴趣的朋友可以通过下面链接进行深入了解： https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

也可以通过下面的色彩对比计算器进行对比度检验（下图为翻译后展示）https://www.msfw.com/Services/ContrastRatioCalculator

这里我拿 iOS 在深色模式下的主次两级字色与基础、升起背景色做了一下对比度检验，得到的结果均满足 WCAG 无障碍阅读的 AA 标准。这里再给大家推荐一个可以同时对多个颜色进行对比度检验的网站 https://hexnaw.com

4. 彩色

iOS 人机界面准则的彩色方案中给出了 9 种颜色。如下图所示的深浅配色方案以 RGB 与 HSB 两种属性进行对比。

RGB：是大家所熟知的光的三原色，R 代表红色，G 代表绿色，B 代表蓝色 HSB：是颜色的另一种展现形式，H 代表色相，S 代表饱和度，B 代表亮度

https://baike.baidu.com/item/HSB

图中左侧以 RGB 属性展示的各项参数差值较大，没有明显的规律性；右侧以 HSB 属性展示的各项参数差值较小，其中靛青与紫色 HS 数值相同，仅有 B 的数值有所差异，但整体来看依然没有一个完整的规律。

相较 iOS 系统彩色方案的单独订制，Android 系统的配色方案则是一整套渐变梯度由“50-900”的色彩库。

在 Android 的色彩工具中还可以自定义配色方案，在色板中选取一个主题色，对应梯度值为 500，通过一套算法来自动获取其他梯度的辅助色。

为了在深色主题中提供更大的灵活性和可用性，Android 官方建议在深色主题中使用较浅的色调（200-50），而不使用默认的主题颜色（饱和色调范围为 900-500）。

选用 500 左右的颜色作为浅色模式的主题色。 选用 200 左右的颜色作为深色模式下的主色。

总结来看两大平台在深色模式的适配上都各有所长，在整体的视觉体验上 iOS 更加鲜亮突出，Android 则更加柔和舒适。

iOS 更加注重细节体验，在整体的色彩规范中的很多颜色都是单独定义的，这也印证了 iOS 13 发布后苹果官方向用户所表达的“屏幕上的每个元素都经过精心设计”这一理念。而 Android 的色彩规范中无论从背景色、文字色还是彩色都遵循着一个梯度规律。

竞品调研

深色模式改版设计的前期工作除了调研两大平台的指导规范外，我们还对已上线深色模式的竞品 app 进行了调研，调研的主要目标是背景色、文字色的色相与亮度展示效果。（以下截图时间为 2020 年 2 月份）

腾讯新闻，主背景无色相，次级背景无色相，一级文字无色相亮度较高，次级文字无色相亮度极低。文字与背景对比度高，主要信息比较突出。

网易新闻，主背景色相偏蓝，次级背景色相偏蓝，一级文字无色相亮度较高，次级文字无色相亮度极低。文字与背景对比度高，主要信息比较突出。

凤凰新闻，主背景无色相，次级背景无色相，一级文字无色相亮度偏低，次级文字无色相亮度极低。文字与背景对比度低，主要信息不够突出。

以 3 个 APP 首页来对比，可以明显的感觉到凤凰新闻首页的信息展示不够突出，在日间场景下体验极差。

配色方案尝试

深色模式并不是简单的把整个界面反色了那么简单，还是要考虑到所有用户的需求。凤凰新闻作为资讯类 app 用户在夜间使用的场景也有一定的占比。深色模式的改版不仅要在日间满足使用需求，还要保证夜间的视觉刺激相对柔和。所以，在设计配色方案时就不能使用对比度极高的纯黑色背景与纯白色文字，只能在各种灰色中搭配出最优方案。

经过多稿背景色与文字色的搭配尝试后，最终确定了下图中所框选的配色方案。这个方案整体背景色与二三四级文字色在色相上略微偏蓝，相较于无色相背景更具有活力，在视觉体验上信息层级的区分也更加明确。

在各种方案尝试设计的过程中对颜色的色相、饱和度、亮度的选取都是随机的，目的是在短时间内进行快速试错来确定配色方向。

色彩规范重构

本次改版的目标中还需要重新构建色彩规范，所以还需要对这稿配色的选用进行细致的打磨，在色彩对应的 HSB 参数中进行细微的调整使整套配色方案有律可循。

最终方案在四级背景的色相与饱和度方面进行了统一，对亮度的递增梯度统一为 5。对比初选方案在视觉上变动也很微弱，却使色彩分级规律一目了然。那么依照此方式也可以对文字色与彩色也进行了一轮打磨。

对于文字色在深色模式优化调整的基础上也对浅色模式下的文字色进行了调整，使深浅模式下两套字色更具有规律性。

在文字色的使用上凤凰新闻没有参照两大平台规则使用带透明度的颜色，主要原因是从自身实际出发，考虑到端内的文字色使用场景部分是用于半透明背景色上的，如果文字色与背景色均带有透明度，叠加后的体验会很差。

凤凰新闻的功能图标以线性为主，通常搭配文字一起使用，所以对图标颜色的定义与文字色是保持一致的。

在彩色的规范梳理中浅色模式下保持不变，仅对深色模式下颜色的亮度进行了调整，使深浅色模式下颜色的亮度对比有了统一的规则。

当然我们还需要对新的背景色与一二级文字色进行检验，看看是否满足 WCAG 无障碍阅读的 AA 标准，也就是常规尺寸文本对比度高于 4.5 : 1。

下图就是凤凰新闻客户端的新版色彩规范，在规范中除了上述的主要的通用颜色外也有部分是单独定义的颜色，这些颜色多用于独立或特定的场景下。

新旧版本对比

在完成色彩规范的重构后，重新输出界面样稿与旧版进行对比。

通过设计稿对比老版夜间模式与新版深色模式，能够直观的感受到新版在信息浏览上体验更好。

实现与验收

1. 色值替换

在着手进行色值替换时，iOS 开发小哥反馈给我凤凰新闻全端跟色值有关的代码有 2000+条，如下图中是日夜间对应的这条代码样式。

如此多的色值代码多数是相同色值在不同场景中重复使用，但彼此却又完全无关联，还有很多是日积月累的旧色值未被删除。如逐条替换费时费力效率极低，后期的维护也极其麻烦。

为了提高适配效率以及便于后期维护，使得之后的色值替换可以达到全局响应的目的。由设计师与开发人员共同建立一个色值对照表。

此表中设计命名主要基于色彩规范，用于设计师团队间的沟通协作。工程命名由开发人员提供，主要用于设计师与开发人员的在设计走查中进行高效的沟通协作。

以凤凰新闻 iOS 端为例，优化后的色值代码库如下图，由原来的 2000 多条色值代码变成了 30 多条色值代码「宏」。

在 iOS 开发工具 Xcode 的可视化文件夹中看起来就更加直观了。

之后的色值使用开发人员只需要调用代码库中相应的「宏」即可，后续版本迭代中如有对通用色值的调整只需修改相应的「宏」代码即可完成全端替换。

以这种方式快速完成首轮色值替换后很多页面的色值会出现错误，需要 UI 设计师持续的进行走查反馈，再由开发人员根据反馈进行修改校正。

以 iOS 端为例在深色模式色值走查过程中设计师分批次以 PDF 格式反馈给开发人员的，开发人员在修改反馈问题的同时设计师也在进行下一批问题的整理，这样同步进行的效率会更高。

2. 切图替换

切图替换场景相对比较多，同样延用色值走查的协作方式，设计师分批修改开发同步进行替换。开发小哥提供切图的方式就是直接扔过来一个全端切图包，需要设计师修改切图颜色后以原命名重新发回去。当打开切图包后顿感一阵头大，切图总数有近千张之多。

虽然切图很多但其中有一部分是已经无用的老切图，在替换的过程中也对端内切图重新进行了一轮梳理，删除了很多无用和重复的切图，同时也对凤凰新闻 app 的体积进行了瘦身。

在切图的替换过程中比较费时的是对同一切图存在多张的情况进行整理，梳理出该切图的所有使用场景然后反馈给开发人员进行统一调用，之后如再次修改即可完成全局替换。

除 icon 外还需要对默认图与缺省图进行替换。

3. 特殊适配

凤凰新闻客户端需要进行特殊适配的场景主要是图集与小视频界面，这两个界面仅有一套色值与 icon，界面中的元素需要单独处理，在切换深色模式后避免出现错误。

4. 界面展示

结语

Dark Mode 适配是一项费时费力的巨大工程，也是探索和优化用户体验的全新挑战。本文主要描述了凤凰新闻 APP 在 Dark Mode 适配中的一整套心路历程，从规范、设计以及实现的角度对整个项目进行复盘总结。

在 Dark Mode 落地的过程中，仅投入 1 名设计师和 2 名 iOS&Android 开发工程师，用时 3 周完成了适配，并总结出上述的一套适配流程与设计开发并行的协作方式，希望可以对有需要的设计师提供一个参考。

[link https://www.uisdc.com/dark-pattern-design]