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

凤凰新闻 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 完成了适配，并结出上述套适配流程与设计开发并协作，希望可以有需要设计师提供个参考。