簡介： 《 優酷 APP 全量支持“暗黑模式” 設計與技術完整總結》正式發布……

?

一、緣起

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

從2019年11月開始，優酷主客Android端和iOS端使用了兩個版本的時間，推動各業務方基本完成了主要使用路徑上數十個頁面的改造，還使用同一套方案同步完成了部分Weex頁面和H5頁面的適配，并完整地通過了UED的視覺驗收。

當前，到APP Store和各大Android市場下載的優酷APP最新版本，均已全量支持“暗黑模式”。我們邀請了參與優酷APP暗黑模式設計/開發/測試的同學們編寫《 優酷APP全量支持“暗黑模式” 設計與技術完整總結》，全面介紹了整個項目的實施流程和經驗教訓，也是對整個項目做一個完整的總結，感興趣的同學可下翻至文末下載。

?

二、什么是暗黑模式？

不考慮計算機工業早期的黑色底，綠色字符的終端界面，暗黑模式的概念主要來源于MacOS，該系統為用戶提供兩個外觀，即"淺色"和"深色"。

自從有了這個概念之后，很多網站都為用戶提供了“淺色”和“深色”兩套界面，便于用戶根據自己的習慣或愛好進行切換。

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

?

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

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

?

改善電池壽命

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

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

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

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

弱光環境中的使用

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

UI風格的統一

業務開發中難免會用到系統默認控件，而系統默認控件都支持了暗黑模式。如果自定義控件不支持的話，當用戶打開暗黑模式后，就會發現風格不統一的情況。

以iOS為例，在下圖的界面中， Tabbar已經被轉成暗黑模式的樣式，但畫面上方的組件、文字因為都是自定義顏色/樣式，并沒有隨著模式切換而自動調整，這也讓整個畫面看起來不太協調。

如果短時間內沒有精力支持暗黑模式，也可以在開發階段強制指定不支持暗黑模式。

對于iOS，需要在APP的Info.plist里面添加名稱為User Interface Style, 類型為String的項目，將User Interface Style 的值設置為Light，聲明"只支持 Light Mode"，就可以避免系統控件轉換為暗黑狀態。

對于Android，需要在APP的Application里面調用下面的代碼，聲明不支持暗黑模式。

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

?

四、設計方法

產品印象：盡量保留產品的核心視覺特征

深色模式的切換就像拉上了家中的窗簾，光線暗下來但不會改變壁紙和家具的固有色。我們主要對優酷五大欄目頭部氛圍和底欄圖標進行了深色的第二套設計，讓他們在深色上看起來和諧。

主背景色選擇：保證與內容的兼容度

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

色彩框架：包容且一致

我們將現有色彩進行歸類，并歸納出每個類型的用途，從而建立色彩框架。這樣可以幫助我們確保同一用途的色彩包含的深色模式和淺色模式兩個色彩組合的唯一性，而不是單個色彩的唯一性。例如：白色會同時使用在背景和有些按鈕文字上，我們不能在深色模式中規定白色變成深色，因為在按鈕上不適用。我們應該規定背景色的淺色模式是白色，深色模式是深色，這樣按鈕文字就不會受到影響。

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

用一般類型歸納色彩的用途可以涵蓋絕大部分的色彩類型，而特殊類型可以用場景、狀態、組件等維度來劃分，例如：“少兒一級背景色”、“可以隱藏的分割線”“黑色導航欄”。
主要類型：

1）對比度的階梯：清晰降噪

我們在背景的對比度上設置均勻的階梯變化，這種均勻的變化有利于建立背景層級的秩序感。值得注意的是與淺色模式不同在深色模式下背景的視覺感受是逐步被抬高的層，海拔越高明度高。

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

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

2）可讀性：跨場景測試

深色的外觀很可能受到用戶的喜歡，要考慮到用戶在深夜弱光的環境中使用深色模式的同時也不能排除白天強光的使用場景。手機屏幕的自動亮度調節會給實際的比度帶來影響。我們觀察到 iOS 深色模式的設計提升了幾乎所有元素的對比度，這值得我們有所考慮。所以盡可能在這兩種極端環境中測試我們的最終設計，保證信息的可讀性。

3）規范化：建立深色模式色板

基于色彩框架以層級劃分色彩為主，特殊類型作補充，在對應的淺色模式的層級下添加
深色模式的色彩。

同時我們需要在產品的真實場景中反復的對比嘗試確保實際效果是滿足要求的。

另外，一些細節上的處理仍然值得我們的關注：

1）圖標：面型圖標在深色下識別性更優

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

2）分割線和陰影：轉換為填充色來區分

深色模式多數情況下對于層級的區隔來說，使用填充色會比分割線和陰影更有效。

?

五、執行策略

深色模式不是簡單的顏色的明暗變化的處理，它是一套全新的設計風格，涉及的場景與團隊非常多，按照常規做法會耗費巨大的開發成本，如何快速實現優酷雙端的深色模式適配是當前面臨的主要問題。

優酷去年設計主導與開發共同搭建視覺產品化能力，設計側針對優酷業務屬性把視覺進行不同顆粒度的拆解抽象，把影響視覺風格調性的最基礎屬性（顏色、字號、間距、圓角、尺寸）進行了統一design token命名，設計與開發團隊共同維護一套可擴展的視覺屬性。視覺屬性與框架布局分離并與開發邏輯相互對應，通過SDK 的方式統一管理，一處替換全端生效，遍于控制并快速定義產品風格。

在視覺產品化能力下進行深色模式的適配與落地相對來說比較容易。在兩個風格的轉化中主要需要適配：色彩、圖片。

色彩：使用語義命名交付設計

整個優酷系統顏色體系分：靜態色（在淺色模式下與深色模式下不需要變化的）、動態色（在深色模式下需要變化）。

動態色根據不同的層級進行重新語意化工程命名，底層還是保留靜態色design token 。整個顏色會由一個sdk 進行統一控制，也保證了整體的一致性。

同時，我們遵循了 iOS HIG 中的語義命令方式，這對于設計師和開發都非常友好。語義命名實際上是為深色模式的動態色建立一個令牌，例如，命名一個叫“主背景色”的動態色，它實際包含了深色模式的主背景色和淺色模式的主背景色。設計師把“主背景色”標注在界面中相應的元素上，開發就可以實現這個元素兩種模式的色彩切換。當然我們還要為開發同學準備一份動態色的對照表。

復用與濾鏡

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

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

工具化：設計的輸出與維系

通常設計完成后與開發之間的協作是通過sketchMeasure直接一鍵導出標注即可。

那我們對基礎屬性進行統一design token命名后，后續的標注設計要如何標注？需要對照表格手動標注么？開發怎么看design token？

蓋亞是優酷設計主要在用的一個提效工具，不同于sketch Measure 導出RGB色值，蓋亞導出標注會對屬性的值進行符號化處理，顯示屬性對應的值的同時會顯示對應的designtoken。從而解決了設計輸出與開發實現的效率問題。

?

六、暗黑模式的官方文檔

暗黑模式的官方設計指南，可以參考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

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

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

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

基于暗黑模式進行的界面設計并不是一個顏色調整一下就可以快速解決的任務。由于暗色系的一些特性，原本用來建立視圖層級（例如陰影）或者色彩對比（白底黑字）的概念都需要被重新設計，設計師們需要以全新的思維去應對視覺上的每個細節。

也因為新增暗黑模式支持這一大幅度的改動，Apple 也重新定義了自己的UI設計指南，除了強調設計師們應該 "更專注于內容"，也在原有的設計 "Light Mode"基礎上，提出5個原則進行調整。

維持操作上的熟悉性
維持平臺上的一致性
清楚的信息層級
無障礙操作
保持簡單

暗黑模式帶來的是一整套的全新設計理念。對應而來的，就是對現有APP設計元素的全盤重構，這在設計和開發側來講，都是龐雜繁瑣的工程，涉及優酷幾乎全部業務的的界面適配。

在《 優酷 APP 全量支持“暗黑模式” 設計與技術完整總結》電子書中，優酷的 UED 們講述了他們對于暗黑模式在優酷 APP 實際落地的深度思考，點擊下方鏈接即可下載或在線閱讀。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。