鳳凰新聞 APP 在 2020 年上半年完成了 Dark Mode 適配，本文主要從規(guī)范、設計和實現(xiàn)的角度對整個項目的落地過程進行復盤。

項目背景

• 主流趨勢：隨著 iOS 13 與 Android 10（Q）系統(tǒng)版本上線深色模式功能。
• 用戶訴求：閱讀類產品，滿足受眾用戶“緩解疲勞、沉浸式閱讀的使用場景”。
• 現(xiàn)存問題：對標主流 APP 產品，鳳凰新聞 APP 早期的“夜間模式”閱讀體驗較差，且色值規(guī)范缺少統(tǒng)一性，需要一次全面梳理。

改版目標

• 滿足深色模式日間使用需求，并提升用戶在深色模式下的閱讀體驗。
• 構筑一套新的深色/淺色模式色彩規(guī)范，方便管理與記憶。
• 雙端開發(fā)建立新的色值代碼庫，提升溝通協(xié)同效率，同時節(jié)約設計開發(fā)后續(xù)的維護成本。

調研平臺規(guī)范

1. 背景色

iOS 平臺在深色模式下的背景色展示是動態(tài)的，分為基礎、升起（例如，彈出框或半浮層）。如下圖中 iOS 系統(tǒng)的兩個界面，相同樣式的組件在基礎層與升起層顯示的是不同的兩組顏色。

從 iOS14 的色彩規(guī)范中可以發(fā)現(xiàn)隨著界面高度的升起，系統(tǒng)定義的三級背景色也同步進行了一級上升。

iOS 通過這種背景色統(tǒng)一升級的處理方式來達到多任務窗口疊加的視覺隔離效果，但相對的開發(fā)成本也較高。

再來看看 Android 平臺深色模式下不同層級間背景色的顯示規(guī)律。

Android 把頁面分為從“0dp”到“24dp”的 10 個不同高度的顯示層級，通過在同一背景色上疊加不同透明度的白色來區(qū)分顯示層級。相對于 iOS 的整體背景色升級，Android 的背景色分級邏輯則更加的簡單易用。

2. 文字色

iOS 的規(guī)范中定義了 4 個等級的文字色，一級文字色為黑白純色，二到四級文字色為色相偏藍的半透明色，通過降低同一顏色的不透明度數(shù)值來進行分級。

Android 的文字色分為 3 個等級，與 iOS 的共同點是都用了半透明顏色，也都采用了降低不透明度的方式來進行分級。不同點是 Android 文字色使用的黑色與白色，沒有添加色相。

使用帶有透明度的字色能夠避免相同字色與背景色相融的問題。以 Android 為例，三級文字色與 10 種背景色疊加后都具有較高的識別度。

iOS 則通過一套半透明字色可以適應基礎與升起兩種不同背景色的使用場景。

3. WCAG

iOS 人機界面準則和 Material design 在深色模式的建議中，都提到了文字信息需滿足 WCAG 無障礙閱讀的 AA 標準。

WCAG 全稱為 Web 內容無障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性四項原則的相關建議，這些建議可使網(wǎng)站內容更容易訪問。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 標準。這里再給大家推薦一個可以同時對多個顏色進行對比度檢驗的網(wǎng)站 https://hexnaw.com

4. 彩色

iOS 人機界面準則的彩色方案中給出了 9 種顏色。如下圖所示的深淺配色方案以 RGB 與 HSB 兩種屬性進行對比。

• RGB：是大家所熟知的光的三原色，R 代表紅色，G 代表綠色，B 代表藍色
• HSB：是顏色的另一種展現(xiàn)形式，H 代表色相，S 代表飽和度，B 代表亮度

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

圖中左側以 RGB 屬性展示的各項參數(shù)差值較大，沒有明顯的規(guī)律性；右側以 HSB 屬性展示的各項參數(shù)差值較小，其中靛青與紫色 HS 數(shù)值相同，僅有 B 的數(shù)值有所差異，但整體來看依然沒有一個完整的規(guī)律。

相較 iOS 系統(tǒng)彩色方案的單獨訂制，Android 系統(tǒng)的配色方案則是一整套漸變梯度由“50-900”的色彩庫。

在 Android 的色彩工具中還可以自定義配色方案，在色板中選取一個主題色，對應梯度值為 500，通過一套算法來自動獲取其他梯度的輔助色。

為了在深色主題中提供更大的靈活性和可用性，Android 官方建議在深色主題中使用較淺的色調（200-50），而不使用默認的主題顏色（飽和色調范圍為 900-500）。

• 選用 500 左右的顏色作為淺色模式的主題色。
• 選用 200 左右的顏色作為深色模式下的主色。

總結來看兩大平臺在深色模式的適配上都各有所長，在整體的視覺體驗上 iOS 更加鮮亮突出，Android 則更加柔和舒適。

iOS 更加注重細節(jié)體驗，在整體的色彩規(guī)范中的很多顏色都是單獨定義的，這也印證了 iOS 13 發(fā)布后蘋果官方向用戶所表達的“屏幕上的每個元素都經過精心設計”這一理念。而 Android 的色彩規(guī)范中無論從背景色、文字色還是彩色都遵循著一個梯度規(guī)律。

競品調研

深色模式改版設計的前期工作除了調研兩大平臺的指導規(guī)范外，我們還對已上線深色模式的競品 app 進行了調研，調研的主要目標是背景色、文字色的色相與亮度展示效果。（以下截圖時間為 2020 年 2 月份）

騰訊新聞，主背景無色相，次級背景無色相，一級文字無色相亮度較高，次級文字無色相亮度極低。文字與背景對比度高，主要信息比較突出。

網(wǎng)易新聞，主背景色相偏藍，次級背景色相偏藍，一級文字無色相亮度較高，次級文字無色相亮度極低。文字與背景對比度高，主要信息比較突出。

鳳凰新聞，主背景無色相，次級背景無色相，一級文字無色相亮度偏低，次級文字無色相亮度極低。文字與背景對比度低，主要信息不夠突出。

以 3 個 APP 首頁來對比，可以明顯的感覺到鳳凰新聞首頁的信息展示不夠突出，在日間場景下體驗極差。

配色方案嘗試

深色模式并不是簡單的把整個界面反色了那么簡單，還是要考慮到所有用戶的需求。鳳凰新聞作為資訊類 app 用戶在夜間使用的場景也有一定的占比。深色模式的改版不僅要在日間滿足使用需求，還要保證夜間的視覺刺激相對柔和。所以，在設計配色方案時就不能使用對比度極高的純黑色背景與純白色文字，只能在各種灰色中搭配出最優(yōu)方案。

經過多稿背景色與文字色的搭配嘗試后，最終確定了下圖中所框選的配色方案。這個方案整體背景色與二三四級文字色在色相上略微偏藍，相較于無色相背景更具有活力，在視覺體驗上信息層級的區(qū)分也更加明確。

在各種方案嘗試設計的過程中對顏色的色相、飽和度、亮度的選取都是隨機的，目的是在短時間內進行快速試錯來確定配色方向。

色彩規(guī)范重構

本次改版的目標中還需要重新構建色彩規(guī)范，所以還需要對這稿配色的選用進行細致的打磨，在色彩對應的 HSB 參數(shù)中進行細微的調整使整套配色方案有律可循。

最終方案在四級背景的色相與飽和度方面進行了統(tǒng)一，對亮度的遞增梯度統(tǒng)一為 5。對比初選方案在視覺上變動也很微弱，卻使色彩分級規(guī)律一目了然。那么依照此方式也可以對文字色與彩色也進行了一輪打磨。

對于文字色在深色模式優(yōu)化調整的基礎上也對淺色模式下的文字色進行了調整，使深淺模式下兩套字色更具有規(guī)律性。

在文字色的使用上鳳凰新聞沒有參照兩大平臺規(guī)則使用帶透明度的顏色，主要原因是從自身實際出發(fā)，考慮到端內的文字色使用場景部分是用于半透明背景色上的，如果文字色與背景色均帶有透明度，疊加后的體驗會很差。

鳳凰新聞的功能圖標以線性為主，通常搭配文字一起使用，所以對圖標顏色的定義與文字色是保持一致的。

在彩色的規(guī)范梳理中淺色模式下保持不變，僅對深色模式下顏色的亮度進行了調整，使深淺色模式下顏色的亮度對比有了統(tǒng)一的規(guī)則。

當然我們還需要對新的背景色與一二級文字色進行檢驗，看看是否滿足 WCAG 無障礙閱讀的 AA 標準，也就是常規(guī)尺寸文本對比度高于 4.5 : 1。

下圖就是鳳凰新聞客戶端的新版色彩規(guī)范，在規(guī)范中除了上述的主要的通用顏色外也有部分是單獨定義的顏色，這些顏色多用于獨立或特定的場景下。

新舊版本對比

在完成色彩規(guī)范的重構后，重新輸出界面樣稿與舊版進行對比。

通過設計稿對比老版夜間模式與新版深色模式，能夠直觀的感受到新版在信息瀏覽上體驗更好。

實現(xiàn)與驗收

1. 色值替換

在著手進行色值替換時，iOS 開發(fā)小哥反饋給我鳳凰新聞全端跟色值有關的代碼有 2000+條，如下圖中是日夜間對應的這條代碼樣式。

如此多的色值代碼多數(shù)是相同色值在不同場景中重復使用，但彼此卻又完全無關聯(lián)，還有很多是日積月累的舊色值未被刪除。如逐條替換費時費力效率極低，后期的維護也極其麻煩。

為了提高適配效率以及便于后期維護，使得之后的色值替換可以達到全局響應的目的。由設計師與開發(fā)人員共同建立一個色值對照表。

此表中設計命名主要基于色彩規(guī)范，用于設計師團隊間的溝通協(xié)作。工程命名由開發(fā)人員提供，主要用于設計師與開發(fā)人員的在設計走查中進行高效的溝通協(xié)作。

以鳳凰新聞 iOS 端為例，優(yōu)化后的色值代碼庫如下圖，由原來的 2000 多條色值代碼變成了 30 多條色值代碼「宏」。

在 iOS 開發(fā)工具 Xcode 的可視化文件夾中看起來就更加直觀了。

之后的色值使用開發(fā)人員只需要調用代碼庫中相應的「宏」即可，后續(xù)版本迭代中如有對通用色值的調整只需修改相應的「宏」代碼即可完成全端替換。

以這種方式快速完成首輪色值替換后很多頁面的色值會出現(xiàn)錯誤，需要 UI 設計師持續(xù)的進行走查反饋，再由開發(fā)人員根據(jù)反饋進行修改校正。

以 iOS 端為例在深色模式色值走查過程中設計師分批次以 PDF 格式反饋給開發(fā)人員的，開發(fā)人員在修改反饋問題的同時設計師也在進行下一批問題的整理，這樣同步進行的效率會更高。

2. 切圖替換

切圖替換場景相對比較多，同樣延用色值走查的協(xié)作方式，設計師分批修改開發(fā)同步進行替換。開發(fā)小哥提供切圖的方式就是直接扔過來一個全端切圖包，需要設計師修改切圖顏色后以原命名重新發(fā)回去。當打開切圖包后頓感一陣頭大，切圖總數(shù)有近千張之多。

雖然切圖很多但其中有一部分是已經無用的老切圖，在替換的過程中也對端內切圖重新進行了一輪梳理，刪除了很多無用和重復的切圖，同時也對鳳凰新聞 app 的體積進行了瘦身。

在切圖的替換過程中比較費時的是對同一切圖存在多張的情況進行整理，梳理出該切圖的所有使用場景然后反饋給開發(fā)人員進行統(tǒng)一調用，之后如再次修改即可完成全局替換。

除 icon 外還需要對默認圖與缺省圖進行替換。

3. 特殊適配

鳳凰新聞客戶端需要進行特殊適配的場景主要是圖集與小視頻界面，這兩個界面僅有一套色值與 icon，界面中的元素需要單獨處理，在切換深色模式后避免出現(xiàn)錯誤。

4. 界面展示

結語

Dark Mode 適配是一項費時費力的巨大工程，也是探索和優(yōu)化用戶體驗的全新挑戰(zhàn)。本文主要描述了鳳凰新聞 APP 在 Dark Mode 適配中的一整套心路歷程，從規(guī)范、設計以及實現(xiàn)的角度對整個項目進行復盤總結。

文章來源：優(yōu)設  作者：鳳凰網(wǎng)設計中心

藍藍設計( bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務