爲何 APP 紛紛開發「暗黑模式」？優酷最佳實踐總結

1、緣起

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

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

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

2、什麼是暗黑模式？

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

自從有了這個概念以後，不少網站都爲用戶提供了「淺色」和「深色」兩套界面，便於用戶根據本身的習慣或愛好進行切換。

在MacOS以後，不少APP和Android定製ROM也加入了所謂"深色模式"的支持；在iOS 13和Android 10發佈以後，"暗黑模式" 終於被添加到官方支持的特性列表。

3、爲何要支持暗黑模式？

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

1. 改善電池壽命

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

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

咱們面對的用戶羣體中有一部分是色盲或者色弱用戶，暗黑模式對於色盲/色弱用戶羣體是很是友好的。

3. 弱光環境中的使用

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

4. 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);

4、設計方法

1. 產品印象：儘可能保留產品的核心視覺特徵

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

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

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

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

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

值得注意的是要先抓住通常類型，再看特殊個例。類如：咱們將文字、圖標概括爲信息層並劃分三個層級，而不是概括爲主標題、副標題、按鈕文字、底欄圖標、頂導航圖標。

用通常類型概括色彩的用途能夠涵蓋絕大部分的色彩類型，而特殊類型能夠用場景、狀態、組件等維度來劃分，例如：「少兒一級背景色」、「能夠隱藏的分割線」「黑色導航欄」。

主要類型：

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

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

文字的對比度階梯則不一樣於背景，在深色和淺色模式下文字的對比度階梯是趨同的。緣由是咱們但願主標題和副標題要有足夠大的反差使主標題足夠醒目，而副標題與置灰文字的反差則不須要那麼大。值得注意的是須要適度提高次要層級文字的對比度。

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

2）可讀性：跨場景測試

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

3）規範化：創建深色模式色板

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

同時咱們須要在產品的真實場景中反覆的對比嘗試確保實際效果是知足要求的。

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

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

深色模式下線條型的圖標有時會顯得過於單薄缺乏分量感致使關注度下降，爲改善這種狀況咱們能夠替換爲塊面型的圖標。此外有研究代表多數狀況下塊面型的圖標會比線條型的圖標有更好的易用性，他們會被更快速的識別。

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

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

5、執行策略

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

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

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

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

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

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

同時，咱們遵循了 iOS HIG 中的語義命令方式，這對於設計師和開發都很是友好。語義命名其實是爲深色模式的動態色創建一個令牌，例如，命名一個叫「主背景色」的動態色，它實際包含了深色模式的主背景色和淺色模式的主背景色。設計師把「主背景色」標註在界面中相應的元素上，開發就能夠實現這個元素兩種模式的色彩切換。固然咱們還要爲開發同窗準備一份動態色的對照表。

2. 複用與濾鏡

對於深色模式的圖片處理，咱們給出如下建議：

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

3. 工具化：設計的輸出與維繫

一般設計完成後與開發之間的協做是經過sketchMeasure直接一鍵導出標註便可。

那咱們對基礎屬性進行統一design token命名後，後續的標註設計要如何標註？須要對照表格手動標註麼？開發怎麼看design token？

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

6、暗黑模式的官方文檔

暗黑模式的官方設計指南，能夠參考iOS和Android的官方文檔：

iOS:
https://developer.apple.com/d...
Android:
https://developer.android.com...://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 實際落地的深度思考，「點擊」便可下載或在線閱讀。

---

本文做者： 阿里文娛技術

閱讀原文

本文來自阿里雲合做夥伴「阿里技術」，如需轉載請聯繫原做者。