2021-2-7 資深UI設(shè)計者
鳳凰新聞 APP 在 2020 年上半年完成了 Dark Mode 適配，本文主要從規(guī)范、設(shè)計和實現(xiàn)的角度對整個項目的落地過程進(jìn)行復(fù)盤。
1. 背景色
iOS 平臺在深色模式下的背景色展示是動態(tài)的，分為基礎(chǔ)、升起（例如，彈出框或半浮層）。如下圖中 iOS 系統(tǒng)的兩個界面，相同樣式的組件在基礎(chǔ)層與升起層顯示的是不同的兩組顏色。
從 iOS14 的色彩規(guī)范中可以發(fā)現(xiàn)隨著界面高度的升起，系統(tǒng)定義的三級背景色也同步進(jìn)行了一級上升。
iOS 通過這種背景色統(tǒng)一升級的處理方式來達(dá)到多任務(wù)窗口疊加的視覺隔離效果，但相對的開發(fā)成本也較高。
再來看看 Android 平臺深色模式下不同層級間背景色的顯示規(guī)律。
Android 把頁面分為從“0dp”到“24dp”的 10 個不同高度的顯示層級，通過在同一背景色上疊加不同透明度的白色來區(qū)分顯示層級。相對于 iOS 的整體背景色升級，Android 的背景色分級邏輯則更加的簡單易用。
2. 文字色
iOS 的規(guī)范中定義了 4 個等級的文字色，一級文字色為黑白純色，二到四級文字色為色相偏藍(lán)的半透明色，通過降低同一顏色的不透明度數(shù)值來進(jìn)行分級。
Android 的文字色分為 3 個等級，與 iOS 的共同點是都用了半透明顏色，也都采用了降低不透明度的方式來進(jìn)行分級。不同點是 Android 文字色使用的黑色與白色，沒有添加色相。
使用帶有透明度的字色能夠避免相同字色與背景色相融的問題。以 Android 為例，三級文字色與 10 種背景色疊加后都具有較高的識別度。
iOS 則通過一套半透明字色可以適應(yīng)基礎(chǔ)與升起兩種不同背景色的使用場景。
3. WCAG
iOS 人機(jī)界面準(zhǔn)則和 Material design 在深色模式的建議中，都提到了文字信息需滿足 WCAG 無障礙閱讀的 AA 標(biāo)準(zhǔn)。
WCAG 全稱為 Web 內(nèi)容無障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性四項原則的相關(guān)建議，這些建議可使網(wǎng)站內(nèi)容更容易訪問。WCAG 從高到低分別是 AAA、AA、A 三個等級。其中 AA 要求文字與背景對比度不小于 4.5:1。
感興趣的朋友可以通過下面鏈接進(jìn)行深入了解： https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
也可以通過下面的色彩對比計算器進(jìn)行對比度檢驗（下圖為翻譯后展示）https://www.msfw.com/Services/ContrastRatioCalculator
這里我拿 iOS 在深色模式下的主次兩級字色與基礎(chǔ)、升起背景色做了一下對比度檢驗，得到的結(jié)果均滿足 WCAG 無障礙閱讀的 AA 標(biāo)準(zhǔn)。這里再給大家推薦一個可以同時對多個顏色進(jìn)行對比度檢驗的網(wǎng)站 https://hexnaw.com
4. 彩色
iOS 人機(jī)界面準(zhǔn)則的彩色方案中給出了 9 種顏色。如下圖所示的深淺配色方案以 RGB 與 HSB 兩種屬性進(jìn)行對比。
https://baike.baidu.com/item/HSB
圖中左側(cè)以 RGB 屬性展示的各項參數(shù)差值較大，沒有明顯的規(guī)律性；右側(cè)以 HSB 屬性展示的各項參數(shù)差值較小，其中靛青與紫色 HS 數(shù)值相同，僅有 B 的數(shù)值有所差異，但整體來看依然沒有一個完整的規(guī)律。
相較 iOS 系統(tǒng)彩色方案的單獨(dú)訂制，Android 系統(tǒng)的配色方案則是一整套漸變梯度由“50-900”的色彩庫。
在 Android 的色彩工具中還可以自定義配色方案，在色板中選取一個主題色，對應(yīng)梯度值為 500，通過一套算法來自動獲取其他梯度的輔助色。
為了在深色主題中提供更大的靈活性和可用性，Android 官方建議在深色主題中使用較淺的色調(diào)（200-50），而不使用默認(rèn)的主題顏色（飽和色調(diào)范圍為 900-500）。
總結(jié)來看兩大平臺在深色模式的適配上都各有所長，在整體的視覺體驗上 iOS 更加鮮亮突出，Android 則更加柔和舒適。
iOS 更加注重細(xì)節(jié)體驗，在整體的色彩規(guī)范中的很多顏色都是單獨(dú)定義的，這也印證了 iOS 13 發(fā)布后蘋果官方向用戶所表達(dá)的“屏幕上的每個元素都經(jīng)過精心設(shè)計”這一理念。而 Android 的色彩規(guī)范中無論從背景色、文字色還是彩色都遵循著一個梯度規(guī)律。
深色模式改版設(shè)計的前期工作除了調(diào)研兩大平臺的指導(dǎo)規(guī)范外，我們還對已上線深色模式的競品 app 進(jìn)行了調(diào)研，調(diào)研的主要目標(biāo)是背景色、文字色的色相與亮度展示效果。（以下截圖時間為 2020 年 2 月份）
騰訊新聞，主背景無色相，次級背景無色相，一級文字無色相亮度較高，次級文字無色相亮度極低。文字與背景對比度高，主要信息比較突出。
網(wǎng)易新聞，主背景色相偏藍(lán)，次級背景色相偏藍(lán)，一級文字無色相亮度較高，次級文字無色相亮度極低。文字與背景對比度高，主要信息比較突出。
鳳凰新聞，主背景無色相，次級背景無色相，一級文字無色相亮度偏低，次級文字無色相亮度極低。文字與背景對比度低，主要信息不夠突出。
以 3 個 APP 首頁來對比，可以明顯的感覺到鳳凰新聞首頁的信息展示不夠突出，在日間場景下體驗極差。
深色模式并不是簡單的把整個界面反色了那么簡單，還是要考慮到所有用戶的需求。鳳凰新聞作為資訊類 app 用戶在夜間使用的場景也有一定的占比。深色模式的改版不僅要在日間滿足使用需求，還要保證夜間的視覺刺激相對柔和。所以，在設(shè)計配色方案時就不能使用對比度極高的純黑色背景與純白色文字，只能在各種灰色中搭配出最優(yōu)方案。
經(jīng)過多稿背景色與文字色的搭配嘗試后，最終確定了下圖中所框選的配色方案。這個方案整體背景色與二三四級文字色在色相上略微偏藍(lán)，相較于無色相背景更具有活力，在視覺體驗上信息層級的區(qū)分也更加明確。
在各種方案嘗試設(shè)計的過程中對顏色的色相、飽和度、亮度的選取都是隨機(jī)的，目的是在短時間內(nèi)進(jìn)行快速試錯來確定配色方向。
本次改版的目標(biāo)中還需要重新構(gòu)建色彩規(guī)范，所以還需要對這稿配色的選用進(jìn)行細(xì)致的打磨，在色彩對應(yīng)的 HSB 參數(shù)中進(jìn)行細(xì)微的調(diào)整使整套配色方案有律可循。
最終方案在四級背景的色相與飽和度方面進(jìn)行了統(tǒng)一，對亮度的遞增梯度統(tǒng)一為 5。對比初選方案在視覺上變動也很微弱，卻使色彩分級規(guī)律一目了然。那么依照此方式也可以對文字色與彩色也進(jìn)行了一輪打磨。
對于文字色在深色模式優(yōu)化調(diào)整的基礎(chǔ)上也對淺色模式下的文字色進(jìn)行了調(diào)整，使深淺模式下兩套字色更具有規(guī)律性。
在文字色的使用上鳳凰新聞沒有參照兩大平臺規(guī)則使用帶透明度的顏色，主要原因是從自身實際出發(fā)，考慮到端內(nèi)的文字色使用場景部分是用于半透明背景色上的，如果文字色與背景色均帶有透明度，疊加后的體驗會很差。
鳳凰新聞的功能圖標(biāo)以線性為主，通常搭配文字一起使用，所以對圖標(biāo)顏色的定義與文字色是保持一致的。
在彩色的規(guī)范梳理中淺色模式下保持不變，僅對深色模式下顏色的亮度進(jìn)行了調(diào)整，使深淺色模式下顏色的亮度對比有了統(tǒng)一的規(guī)則。
當(dāng)然我們還需要對新的背景色與一二級文字色進(jìn)行檢驗，看看是否滿足 WCAG 無障礙閱讀的 AA 標(biāo)準(zhǔn)，也就是常規(guī)尺寸文本對比度高于 4.5 : 1。
下圖就是鳳凰新聞客戶端的新版色彩規(guī)范，在規(guī)范中除了上述的主要的通用顏色外也有部分是單獨(dú)定義的顏色，這些顏色多用于獨(dú)立或特定的場景下。
在完成色彩規(guī)范的重構(gòu)后，重新輸出界面樣稿與舊版進(jìn)行對比。
通過設(shè)計稿對比老版夜間模式與新版深色模式，能夠直觀的感受到新版在信息瀏覽上體驗更好。
1. 色值替換
在著手進(jìn)行色值替換時，iOS 開發(fā)小哥反饋給我鳳凰新聞全端跟色值有關(guān)的代碼有 2000+條，如下圖中是日夜間對應(yīng)的這條代碼樣式。
如此多的色值代碼多數(shù)是相同色值在不同場景中重復(fù)使用，但彼此卻又完全無關(guān)聯(lián)，還有很多是日積月累的舊色值未被刪除。如逐條替換費(fèi)時費(fèi)力效率極低，后期的維護(hù)也極其麻煩。
為了提高適配效率以及便于后期維護(hù)，使得之后的色值替換可以達(dá)到全局響應(yīng)的目的。由設(shè)計師與開發(fā)人員共同建立一個色值對照表。
此表中設(shè)計命名主要基于色彩規(guī)范，用于設(shè)計師團(tuán)隊間的溝通協(xié)作。工程命名由開發(fā)人員提供，主要用于設(shè)計師與開發(fā)人員的在設(shè)計走查中進(jìn)行高效的溝通協(xié)作。
以鳳凰新聞 iOS 端為例，優(yōu)化后的色值代碼庫如下圖，由原來的 2000 多條色值代碼變成了 30 多條色值代碼「宏」。
在 iOS 開發(fā)工具 Xcode 的可視化文件夾中看起來就更加直觀了。
之后的色值使用開發(fā)人員只需要調(diào)用代碼庫中相應(yīng)的「宏」即可，后續(xù)版本迭代中如有對通用色值的調(diào)整只需修改相應(yīng)的「宏」代碼即可完成全端替換。
以這種方式快速完成首輪色值替換后很多頁面的色值會出現(xiàn)錯誤，需要 UI 設(shè)計師持續(xù)的進(jìn)行走查反饋，再由開發(fā)人員根據(jù)反饋進(jìn)行修改校正。
以 iOS 端為例在深色模式色值走查過程中設(shè)計師分批次以 PDF 格式反饋給開發(fā)人員的，開發(fā)人員在修改反饋問題的同時設(shè)計師也在進(jìn)行下一批問題的整理，這樣同步進(jìn)行的效率會更高。
2. 切圖替換
切圖替換場景相對比較多，同樣延用色值走查的協(xié)作方式，設(shè)計師分批修改開發(fā)同步進(jìn)行替換。開發(fā)小哥提供切圖的方式就是直接扔過來一個全端切圖包，需要設(shè)計師修改切圖顏色后以原命名重新發(fā)回去。當(dāng)打開切圖包后頓感一陣頭大，切圖總數(shù)有近千張之多。
雖然切圖很多但其中有一部分是已經(jīng)無用的老切圖，在替換的過程中也對端內(nèi)切圖重新進(jìn)行了一輪梳理，刪除了很多無用和重復(fù)的切圖，同時也對鳳凰新聞 app 的體積進(jìn)行了瘦身。
在切圖的替換過程中比較費(fèi)時的是對同一切圖存在多張的情況進(jìn)行整理，梳理出該切圖的所有使用場景然后反饋給開發(fā)人員進(jìn)行統(tǒng)一調(diào)用，之后如再次修改即可完成全局替換。
除 icon 外還需要對默認(rèn)圖與缺省圖進(jìn)行替換。
3. 特殊適配
鳳凰新聞客戶端需要進(jìn)行特殊適配的場景主要是圖集與小視頻界面，這兩個界面僅有一套色值與 icon，界面中的元素需要單獨(dú)處理，在切換深色模式后避免出現(xiàn)錯誤。
4. 界面展示
Dark Mode 適配是一項費(fèi)時費(fèi)力的巨大工程，也是探索和優(yōu)化用戶體驗的全新挑戰(zhàn)。本文主要描述了鳳凰新聞 APP 在 Dark Mode 適配中的一整套心路歷程，從規(guī)范、設(shè)計以及實現(xiàn)的角度對整個項目進(jìn)行復(fù)盤總結(jié)。
文章來源：優(yōu)設(shè) 作者：鳳凰網(wǎng)設(shè)計中心
藍(lán)藍(lán)設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.teruid.com