一、緣起
随着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?spm=a1z389.11499242.0.0.6545241397agQz&utm_content=g_1000098203