簡介： 《 優(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è)頁面的改造，還使用同一套方案同步完成了部分Weex頁面和H5頁面的適配，并完整地通過了UED的視覺驗(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è)早期的黑色底，綠色字符的終端界面，暗黑模式的概念主要來源于MacOS，該系統(tǒng)為用戶提供兩個(gè)外觀，即"淺色"和"深色"。

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

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

?

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

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

?

改善電池壽命

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

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

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

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

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

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

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顏色/樣式，并沒有隨著模式切換而自動(dòng)調(diào)整，這也讓整個(gè)畫面看起來不太協(xié)調(diào)。

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

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

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

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

?

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

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

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

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

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

色彩框架：包容且一致

我們將現(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)、組件等維度來劃分，例如：“少兒一級(jí)背景色”、“可以隱藏的分割線”“黑色導(dǎo)航欄”。
主要類型：

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

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

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

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

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

深色的外觀很可能受到用戶的喜歡，要考慮到用戶在深夜弱光的環(huán)境中使用深色模式的同時(shí)也不能排除白天強(qiáng)光的使用場(chǎng)景。手機(jī)屏幕的自動(dòng)亮度調(diào)節(jié)會(huì)給實(shí)際的比度帶來影響。我們觀察到 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ì)顯得過于單薄缺少份量感導(dǎo)致關(guān)注度降低，為改善這種情況我們可以替換為塊面型的圖標(biāo)。此外有研究表明多數(shù)情況下塊面型的圖標(biāo)會(huì)比線條型的圖標(biāo)有更好的易用性，他們會(huì)被更快速的識(shí)別。

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

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

?

五、執(zhí)行策略

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

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

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

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

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

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

同時(shí)，我們遵循了 iOS HIG 中的語義命令方式，這對(duì)于設(shè)計(jì)師和開發(fā)都非常友好。語義命名實(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ì)照表。

復(fù)用與濾鏡

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

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

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

通常設(shè)計(jì)完成后與開發(fā)之間的協(xié)作是通過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)的效率問題。

?

六、暗黑模式的官方文檔

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

iOS:
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/
Android:
https://developer.android.com/guide/topics/ui/look-and-feel/darkthemehttps://material.io/design/color/dark-theme.html

要支持暗黑模式，絕不是將界面上的淺色元素改為深色元素就大功告成; 否則我們只需要編排一份淺色和深色色值的顏色轉(zhuǎn)換表，以及一份適用于暗黑模式的素材, 然后簡單地對(duì)APP進(jìn)行改寫就可以了。

以iOS為例，為了支持系統(tǒng)級(jí)別的暗黑模式主題，以及系統(tǒng)內(nèi)置APP同步支持暗黑模式下的界面，iOS系統(tǒng)在屏幕(Screen), 視圖(View)， 菜單(Menu)和組件(Controls)上使用了 Apple 新定義的 "Darker Color Palette"。

這套 Color Palette 的主要目的，在于透過調(diào)整顏色的飽和度, 做出視覺層級(jí)，提升顏色的對(duì)比性，讓所有組件能夠以合適的狀態(tài)在暗黑模式中進(jìn)行操作。

基于暗黑模式進(jìn)行的界面設(shè)計(jì)并不是一個(gè)顏色調(diào)整一下就可以快速解決的任務(wù)。由于暗色系的一些特性，原本用來建立視圖層級(jí)（例如陰影）或者色彩對(duì)比（白底黑字）的概念都需要被重新設(shè)計(jì)，設(shè)計(jì)師們需要以全新的思維去應(yīng)對(duì)視覺上的每個(gè)細(xì)節(jié)。

也因?yàn)樾略霭岛谀Ｊ街С诌@一大幅度的改動(dòng)，Apple 也重新定義了自己的UI設(shè)計(jì)指南，除了強(qiáng)調(diào)設(shè)計(jì)師們應(yīng)該 "更專注于內(nèi)容"，也在原有的設(shè)計(jì) "Light Mode"基礎(chǔ)上，提出5個(gè)原則進(jìn)行調(diào)整。

維持操作上的熟悉性
維持平臺(tái)上的一致性
清楚的信息層級(jí)
無障礙操作
保持簡單

暗黑模式帶來的是一整套的全新設(shè)計(jì)理念。對(duì)應(yīng)而來的，就是對(duì)現(xiàn)有APP設(shè)計(jì)元素的全盤重構(gòu)，這在設(shè)計(jì)和開發(fā)側(cè)來講，都是龐雜繁瑣的工程，涉及優(yōu)酷幾乎全部業(yè)務(wù)的的界面適配。

在《 優(yōu)酷 APP 全量支持“暗黑模式” 設(shè)計(jì)與技術(shù)完整總結(jié)》電子書中，優(yōu)酷的 UED 們講述了他們對(duì)于暗黑模式在優(yōu)酷 APP 實(shí)際落地的深度思考，點(diǎn)擊下方鏈接即可下載或在線閱讀。

https://developer.aliyun.com/article/741622?utm_content=g_1000098394

總結(jié)

以上是生活随笔為你收集整理的为什么 APP 纷纷开发“暗黑模式”？优酷最佳实践总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。