介： 《 優(yōu)酷 APP 全量支持“暗黑模式” 設(shè)計(jì)與技術(shù)完整總結(jié)》正式發(fā)布……

?一、緣起

隨著iOS 13和Android 10的正式發(fā)布，一個(gè)名詞"暗黑模式(Dark Mode)"逐漸走入了大家的視野。各大APP都將暗黑模式的適配列入了開發(fā)日程，輿情上用戶們對(duì)暗黑模式支持的呼聲也非常的高。優(yōu)酷主客也順應(yīng)時(shí)勢(shì)，啟動(dòng)了相應(yīng)的技術(shù)預(yù)研。

從2019年11月開始，優(yōu)酷主客Android端和iOS端使用了兩個(gè)版本的時(shí)間，推動(dòng)各業(yè)務(wù)方基本完成了主要使用路徑上數(shù)十個(gè)頁(yè)面的改造，還使用同一套方案同步完成了部分Weex頁(yè)面和H5頁(yè)面的適配，并完整地通過(guò)了UED的視覺(jué)驗(yàn)收。

當(dāng)前，到APP Store和各大Android市場(chǎng)下載的優(yōu)酷APP最新版本，均已全量支持“暗黑模式”。我們邀請(qǐng)了參與優(yōu)酷APP暗黑模式設(shè)計(jì)/開發(fā)/測(cè)試的同學(xué)們編寫《 優(yōu)酷APP全量支持“暗黑模式” 設(shè)計(jì)與技術(shù)完整總結(jié)》，全面介紹了整個(gè)項(xiàng)目的實(shí)施流程和經(jīng)驗(yàn)教訓(xùn)，也是對(duì)整個(gè)項(xiàng)目做一個(gè)完整的總結(jié)，感興趣的同學(xué)可下翻至文末下載。

二、什么是暗黑模式？

不考慮計(jì)算機(jī)工業(yè)早期的黑色底，綠色字符的終端界面，暗黑模式的概念主要來(lái)源于MacOS，該系統(tǒng)為用戶提供兩個(gè)外觀，即"淺色"和"深色"。

自從有了這個(gè)概念之后，很多網(wǎng)站都為用戶提供了“淺色”和“深色”兩套界面，便于用戶根據(jù)自己的習(xí)慣或愛(ài)好進(jìn)行切換。

在MacOS之后，很多APP和Android定制ROM也加入了所謂"深色模式"的支持；在iOS 13和Android 10發(fā)布之后，"暗黑模式" 終于被添加到官方支持的特性列表。

三、為什么要支持暗黑模式？

根據(jù)Apple官方的說(shuō)法，暗黑模式可以“改善電池壽命，改善視力不佳和強(qiáng)光下的人的可視性，以及在弱光環(huán)境中更好地使用設(shè)備”。

1. 改善電池壽命

從下圖中notebookcheck的功耗分析可以看出，在使用OLED屏幕時(shí)，屏幕上顯示的內(nèi)容決定了功耗。當(dāng)屏幕基本全黑時(shí)，OLED屏在任何亮度下的功耗都保持恒定。顯示了白色內(nèi)容的屏幕，功耗曲線會(huì)隨著亮度提高而逐漸變陡。

圖片來(lái)源：
https://www.notebookcheck.net/Display-Comparison-OLED-vs-IPS-on-Notebooks.168753.0.html

1. 改善視力不佳用戶的可視性

我們面對(duì)的用戶群體中有一部分是色盲或者色弱用戶，暗黑模式對(duì)于色盲/色弱用戶群體是非常友好的。

1. 弱光環(huán)境中的使用

在溫暖的被窩中也可以舒服地看劇了，再也不用害怕被白色背景閃瞎眼了。

1. UI風(fēng)格的統(tǒng)一

業(yè)務(wù)開發(fā)中難免會(huì)用到系統(tǒng)默認(rèn)控件，而系統(tǒng)默認(rèn)控件都支持了暗黑模式。如果自定義控件不支持的話，當(dāng)用戶打開暗黑模式后，就會(huì)發(fā)現(xiàn)風(fēng)格不統(tǒng)一的情況。

以iOS為例，在下圖的界面中， Tabbar已經(jīng)被轉(zhuǎn)成暗黑模式的樣式，但畫面上方的組件、文字因?yàn)槎际亲远x顏色/樣式，并沒(méi)有隨著模式切換而自動(dòng)調(diào)整，這也讓整個(gè)畫面看起來(lái)不太協(xié)調(diào)。

如果短時(shí)間內(nèi)沒(méi)有精力支持暗黑模式，也可以在開發(fā)階段強(qiáng)制指定不支持暗黑模式。

對(duì)于iOS，需要在APP的Info.plist里面添加名稱為User Interface Style, 類型為String的項(xiàng)目，將User Interface Style 的值設(shè)置為L(zhǎng)ight，聲明"只支持 Light Mode"，就可以避免系統(tǒng)控件轉(zhuǎn)換為暗黑狀態(tài)。

對(duì)于Android，需要在APP的Application里面調(diào)用下面的代碼，聲明不支持暗黑模式。

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

四、設(shè)計(jì)方法

1. 產(chǎn)品印象：盡量保留產(chǎn)品的核心視覺(jué)特征

深色模式的切換就像拉上了家中的窗簾，光線暗下來(lái)但不會(huì)改變壁紙和家具的固有色。我們主要對(duì)優(yōu)酷五大欄目頭部氛圍和底欄圖標(biāo)進(jìn)行了深色的第二套設(shè)計(jì)，讓他們?cè)谏钌峡雌饋?lái)和諧。

1. 主背景色選擇：保證與內(nèi)容的兼容度

基于對(duì)內(nèi)容兼容度的考慮，我們選擇了足夠深的深色但比黑色淺一些。這樣能夠與包含黑色的媒資圖片拉開空間層次，同時(shí)與前景色有足夠大的對(duì)比度，保證在弱光和強(qiáng)光環(huán)境下的識(shí)別度。
深色模式的主背景色應(yīng)該保持安靜不搶戲，給定制主題場(chǎng)景包括運(yùn)營(yíng)場(chǎng)、垂類頻道、會(huì)員場(chǎng)，保留發(fā)聲的空間。所以選擇相對(duì)中性的顏色。
色調(diào)協(xié)調(diào)，要考與主場(chǎng)景的氛圍融合，優(yōu)酷主要涉及到五大欄目導(dǎo)航欄和首焦吸色。

1. 色彩框架：包容且一致

我們將現(xiàn)有色彩進(jìn)行歸類，并歸納出每個(gè)類型的用途，從而建立色彩框架。這樣可以幫助我們確保同一用途的色彩包含的深色模式和淺色模式兩個(gè)色彩組合的唯一性，而不是單個(gè)色彩的唯一性。例如：白色會(huì)同時(shí)使用在背景和有些按鈕文字上，我們不能在深色模式中規(guī)定白色變成深色，因?yàn)樵诎粹o上不適用。我們應(yīng)該規(guī)定背景色的淺色模式是白色，深色模式是深色，這樣按鈕文字就不會(huì)受到影響。

值得注意的是要先抓住一般類型，再看特殊個(gè)例。類如：我們將文字、圖標(biāo)歸納為信息層并劃分三個(gè)層級(jí)，而不是歸納為主標(biāo)題、副標(biāo)題、按鈕文字、底欄圖標(biāo)、頂導(dǎo)航圖標(biāo)。

用一般類型歸納色彩的用途可以涵蓋絕大部分的色彩類型，而特殊類型可以用場(chǎng)景、狀態(tài)、組件等維度來(lái)劃分，例如：“少兒一級(jí)背景色”、“可以隱藏的分割線”“黑色導(dǎo)航欄”。
主要類型：

1）對(duì)比度的階梯：清晰降噪

我們?cè)诒尘暗膶?duì)比度上設(shè)置均勻的階梯變化，這種均勻的變化有利于建立背景層級(jí)的秩序感。值得注意的是與淺色模式不同在深色模式下背景的視覺(jué)感受是逐步被抬高的層，海拔越高明度高。

文字的對(duì)比度階梯則不同于背景，在深色和淺色模式下文字的對(duì)比度階梯是趨同的。原因是我們希望主標(biāo)題和副標(biāo)題要有足夠大的反差使主標(biāo)題足夠醒目，而副標(biāo)題與置灰文字的反差則不需要那么大。值得注意的是需要適度提升次要層級(jí)文字的對(duì)比度。

更好的對(duì)比度階梯有利于在復(fù)雜信息密度界面的視覺(jué)降噪。

2）可讀性：跨場(chǎng)景測(cè)試

深色的外觀很可能受到用戶的喜歡，要考慮到用戶在深夜弱光的環(huán)境中使用深色模式的同時(shí)也不能排除白天強(qiáng)光的使用場(chǎng)景。手機(jī)屏幕的自動(dòng)亮度調(diào)節(jié)會(huì)給實(shí)際的比度帶來(lái)影響。我們觀察到 iOS 深色模式的設(shè)計(jì)提升了幾乎所有元素的對(duì)比度，這值得我們有所考慮。所以盡可能在這兩種極端環(huán)境中測(cè)試我們的最終設(shè)計(jì)，保證信息的可讀性。

3）規(guī)范化：建立深色模式色板

基于色彩框架以層級(jí)劃分色彩為主，特殊類型作補(bǔ)充，在對(duì)應(yīng)的淺色模式的層級(jí)下添加
深色模式的色彩。

同時(shí)我們需要在產(chǎn)品的真實(shí)場(chǎng)景中反復(fù)的對(duì)比嘗試確保實(shí)際效果是滿足要求的。

另外，一些細(xì)節(jié)上的處理仍然值得我們的關(guān)注：

1）圖標(biāo)：面型圖標(biāo)在深色下識(shí)別性更優(yōu)

深色模式下線條型的圖標(biāo)有時(shí)會(huì)顯得過(guò)于單薄缺少份量感導(dǎo)致關(guān)注度降低，為改善這種情況我們可以替換為塊面型的圖標(biāo)。此外有研究表明多數(shù)情況下塊面型的圖標(biāo)會(huì)比線條型的圖標(biāo)有更好的易用性，他們會(huì)被更快速的識(shí)別。

2）分割線和陰影：轉(zhuǎn)換為填充色來(lái)區(qū)分

深色模式多數(shù)情況下對(duì)于層級(jí)的區(qū)隔來(lái)說(shuō)，使用填充色會(huì)比分割線和陰影更有效。

五、執(zhí)行策略

深色模式不是簡(jiǎn)單的顏色的明暗變化的處理，它是一套全新的設(shè)計(jì)風(fēng)格，涉及的場(chǎng)景與團(tuán)隊(duì)非常多，按照常規(guī)做法會(huì)耗費(fèi)巨大的開發(fā)成本，如何快速實(shí)現(xiàn)優(yōu)酷雙端的深色模式適配是當(dāng)前面臨的主要問(wèn)題。

優(yōu)酷去年設(shè)計(jì)主導(dǎo)與開發(fā)共同搭建視覺(jué)產(chǎn)品化能力，設(shè)計(jì)側(cè)針對(duì)優(yōu)酷業(yè)務(wù)屬性把視覺(jué)進(jìn)行不同顆粒度的拆解抽象，把影響視覺(jué)風(fēng)格調(diào)性的最基礎(chǔ)屬性（顏色、字號(hào)、間距、圓角、尺寸）進(jìn)行了統(tǒng)一design token命名，設(shè)計(jì)與開發(fā)團(tuán)隊(duì)共同維護(hù)一套可擴(kuò)展的視覺(jué)屬性。視覺(jué)屬性與框架布局分離并與開發(fā)邏輯相互對(duì)應(yīng)，通過(guò)SDK 的方式統(tǒng)一管理，一處替換全端生效，遍于控制并快速定義產(chǎn)品風(fēng)格。

在視覺(jué)產(chǎn)品化能力下進(jìn)行深色模式的適配與落地相對(duì)來(lái)說(shuō)比較容易。在兩個(gè)風(fēng)格的轉(zhuǎn)化中主要需要適配：色彩、圖片。

1. 色彩：使用語(yǔ)義命名交付設(shè)計(jì)

整個(gè)優(yōu)酷系統(tǒng)顏色體系分：靜態(tài)色（在淺色模式下與深色模式下不需要變化的）、動(dòng)態(tài)色（在深色模式下需要變化）。

動(dòng)態(tài)色根據(jù)不同的層級(jí)進(jìn)行重新語(yǔ)意化工程命名，底層還是保留靜態(tài)色design token 。整個(gè)顏色會(huì)由一個(gè)sdk 進(jìn)行統(tǒng)一控制，也保證了整體的一致性。

同時(shí)，我們遵循了 iOS HIG 中的語(yǔ)義命令方式，這對(duì)于設(shè)計(jì)師和開發(fā)都非常友好。語(yǔ)義命名實(shí)際上是為深色模式的動(dòng)態(tài)色建立一個(gè)令牌，例如，命名一個(gè)叫“主背景色”的動(dòng)態(tài)色，它實(shí)際包含了深色模式的主背景色和淺色模式的主背景色。設(shè)計(jì)師把“主背景色”標(biāo)注在界面中相應(yīng)的元素上，開發(fā)就可以實(shí)現(xiàn)這個(gè)元素兩種模式的色彩切換。當(dāng)然我們還要為開發(fā)同學(xué)準(zhǔn)備一份動(dòng)態(tài)色的對(duì)照表。

1. 復(fù)用與濾鏡

對(duì)于深色模式的圖片處理，我們給出以下建議：

1）設(shè)計(jì)側(cè)盡可能一套圖片適配兩個(gè)模式, 例如，使用不透明度設(shè)置這類淡彩色可以同時(shí)適配淺色和深色模式，這是一種取巧的做法；
2）開發(fā)側(cè)可以選擇代碼濾鏡；
3）對(duì)于一些無(wú)法復(fù)用的重要圖片，需根據(jù)深色界面增加一套新的切圖資源。

1. 工具化：設(shè)計(jì)的輸出與維系

通常設(shè)計(jì)完成后與開發(fā)之間的協(xié)作是通過(guò)sketchMeasure直接一鍵導(dǎo)出標(biāo)注即可。

那我們對(duì)基礎(chǔ)屬性進(jìn)行統(tǒng)一design token命名后，后續(xù)的標(biāo)注設(shè)計(jì)要如何標(biāo)注？需要對(duì)照表格手動(dòng)標(biāo)注么？開發(fā)怎么看design token？

蓋亞是優(yōu)酷設(shè)計(jì)主要在用的一個(gè)提效工具，不同于sketch Measure 導(dǎo)出RGB色值，蓋亞導(dǎo)出標(biāo)注會(huì)對(duì)屬性的值進(jìn)行符號(hào)化處理，顯示屬性對(duì)應(yīng)的值的同時(shí)會(huì)顯示對(duì)應(yīng)的designtoken。從而解決了設(shè)計(jì)輸出與開發(fā)實(shí)現(xiàn)的效率問(wèn)題。

六、暗黑模式的官方文檔

暗黑模式的官方設(shè)計(jì)指南，可以參考iOS和Android的官方文檔：

點(diǎn)擊“了解更多”獲取官方文檔

關(guān)鍵詞：移動(dòng)開發(fā)、weex、開發(fā)工具、Android開發(fā)、iOS開發(fā)、UED、MacOS