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

項(xiàng)目背景

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

改版目標(biāo)

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

調(diào)研平臺(tái)規(guī)范

1. 背景色

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

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

iOS 通過(guò)這種背景色統(tǒng)一升級(jí)的處理方式來(lái)達(dá)到多任務(wù)窗口疊加的視覺(jué)隔離效果，但相對(duì)的開(kāi)發(fā)成本也較高。

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

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

2. 文字色

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

Android 的文字色分為 3 個(gè)等級(jí)，與 iOS 的共同點(diǎn)是都用了半透明顏色，也都采用了降低不透明度的方式來(lái)進(jìn)行分級(jí)。不同點(diǎn)是 Android 文字色使用的黑色與白色，沒(méi)有添加色相。

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

iOS 則通過(guò)一套半透明字色可以適應(yīng)基礎(chǔ)與升起兩種不同背景色的使用場(chǎng)景。

3. WCAG

iOS 人機(jī)界面準(zhǔn)則和 Material design 在深色模式的建議中，都提到了文字信息需滿足 WCAG 無(wú)障礙閱讀的 AA 標(biāo)準(zhǔn)。

WCAG 全稱為 Web 內(nèi)容無(wú)障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性四項(xiàng)原則的相關(guān)建議，這些建議可使網(wǎng)站內(nèi)容更容易訪問(wèn)。WCAG 從高到低分別是 AAA、AA、A 三個(gè)等級(jí)。其中 AA 要求文字與背景對(duì)比度不小于 4.5:1。

感興趣的朋友可以通過(guò)下面鏈接進(jìn)行深入了解： https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

也可以通過(guò)下面的色彩對(duì)比計(jì)算器進(jìn)行對(duì)比度檢驗(yàn)（下圖為翻譯后展示）https://www.msfw.com/Services/ContrastRatioCalculator

這里我拿 iOS 在深色模式下的主次兩級(jí)字色與基礎(chǔ)、升起背景色做了一下對(duì)比度檢驗(yàn)，得到的結(jié)果均滿足 WCAG 無(wú)障礙閱讀的 AA 標(biāo)準(zhǔn)。這里再給大家推薦一個(gè)可以同時(shí)對(duì)多個(gè)顏色進(jìn)行對(duì)比度檢驗(yàn)的網(wǎng)站 https://hexnaw.com

4. 彩色

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

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

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

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

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

在 Android 的色彩工具中還可以自定義配色方案，在色板中選取一個(gè)主題色，對(duì)應(yīng)梯度值為 500，通過(guò)一套算法來(lái)自動(dòng)獲取其他梯度的輔助色。

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

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

總結(jié)來(lái)看兩大平臺(tái)在深色模式的適配上都各有所長(zhǎng)，在整體的視覺(jué)體驗(yàn)上 iOS 更加鮮亮突出，Android 則更加柔和舒適。

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

競(jìng)品調(diào)研

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

騰訊新聞，主背景無(wú)色相，次級(jí)背景無(wú)色相，一級(jí)文字無(wú)色相亮度較高，次級(jí)文字無(wú)色相亮度極低。文字與背景對(duì)比度高，主要信息比較突出。

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

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

以 3 個(gè) APP 首頁(yè)來(lái)對(duì)比，可以明顯的感覺(jué)到鳳凰新聞首頁(yè)的信息展示不夠突出，在日間場(chǎng)景下體驗(yàn)極差。

配色方案嘗試

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

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

在各種方案嘗試設(shè)計(jì)的過(guò)程中對(duì)顏色的色相、飽和度、亮度的選取都是隨機(jī)的，目的是在短時(shí)間內(nèi)進(jìn)行快速試錯(cuò)來(lái)確定配色方向。

色彩規(guī)范重構(gòu)

本次改版的目標(biāo)中還需要重新構(gòu)建色彩規(guī)范，所以還需要對(duì)這稿配色的選用進(jìn)行細(xì)致的打磨，在色彩對(duì)應(yīng)的 HSB 參數(shù)中進(jìn)行細(xì)微的調(diào)整使整套配色方案有律可循。

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

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

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

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

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

當(dāng)然我們還需要對(duì)新的背景色與一二級(jí)文字色進(jìn)行檢驗(yàn)，看看是否滿足 WCAG 無(wú)障礙閱讀的 AA 標(biāo)準(zhǔn)，也就是常規(guī)尺寸文本對(duì)比度高于 4.5 : 1。

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

新舊版本對(duì)比

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

通過(guò)設(shè)計(jì)稿對(duì)比老版夜間模式與新版深色模式，能夠直觀的感受到新版在信息瀏覽上體驗(yàn)更好。

實(shí)現(xiàn)與驗(yàn)收

1. 色值替換

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

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

為了提高適配效率以及便于后期維護(hù)，使得之后的色值替換可以達(dá)到全局響應(yīng)的目的。由設(shè)計(jì)師與開(kāi)發(fā)人員共同建立一個(gè)色值對(duì)照表。

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

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

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

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

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

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

2. 切圖替換

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

雖然切圖很多但其中有一部分是已經(jīng)無(wú)用的老切圖，在替換的過(guò)程中也對(duì)端內(nèi)切圖重新進(jìn)行了一輪梳理，刪除了很多無(wú)用和重復(fù)的切圖，同時(shí)也對(duì)鳳凰新聞 app 的體積進(jìn)行了瘦身。

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

除 icon 外還需要對(duì)默認(rèn)圖與缺省圖進(jìn)行替換。

3. 特殊適配

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

4. 界面展示

結(jié)語(yǔ)

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

文章來(lái)源：優(yōu)設(shè)  作者：鳳凰網(wǎng)設(shè)計(jì)中心

藍(lán)藍(lán)設(shè)計(jì)( www.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)