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