一、緣起
隨著iOS 13和Android 10的正式釋出，一個名詞"暗黑模式(Dark Mode)"逐漸走入了大家的視野。各大APP都將暗黑模式的適配列入了開發日程，輿情上使用者們對暗黑模式支援的呼聲也非常的高。優酷主客也順應時勢，啟動了相應的技術預研。
從2019年11月開始，優酷主客Android端和iOS端使用了兩個版本的時間，推動各業務方基本完成了主要使用路徑上數十個頁面的改造，還使用同一套方案同步完成了部分Weex頁面和H5頁面的適配，並完整地通過了UED的視覺驗收。
二、什麼是暗黑模式？不考慮計算機工業早期的黑色底，綠色字元的終端介面，暗黑模式的概念主要來源於MacOS，該系統為使用者提供兩個外觀，即"淺色"和"深色"。
自從有了這個概念之後，很多網站都為使用者提供了“淺色”和“深色”兩套介面，便於使用者根據自己的習慣或愛好進行切換。
在MacOS之後，很多APP和Android定製ROM也加入了所謂"深色模式"的支援；在iOS 13和Android 10釋出之後，"暗黑模式" 終於被新增到官方支援的特性列表。
三、為什麼要支援暗黑模式？根據Apple官方的說法，暗黑模式可以“改善電池壽命，改善視力不佳和強光下的人的可視性，以及在弱光環境中更好地使用裝置”。
1. 改善電池壽命從下圖中notebookcheck的功耗分析可以看出，在使用OLED螢幕時，螢幕上顯示的內容決定了功耗。當螢幕基本全黑時，OLED屏在任何亮度下的功耗都保持恆定。顯示了白色內容的螢幕，功耗曲線會隨著亮度提高而逐漸變陡。
2. 改善視力不佳使用者的可視性我們面對的使用者群體中有一部分是色盲或者色弱使用者，暗黑模式對於色盲/色弱使用者群體是非常友好的。
在溫暖的被窩中也可以舒服地看劇了，再也不用害怕被白色背景閃瞎眼了。
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);深色模式的切換就像拉上了家中的窗簾，光線暗下來但不會改變桌布和傢俱的固有色。我們主要對優酷五大欄目頭部氛圍和底欄圖示進行了深色的第二套設計，讓他們在深色上看起來和諧。
2. 主背景色選擇：保證與內容的相容度基於對內容相容度的考慮，我們選擇了足夠深的深色但比黑色淺一些。這樣能夠與包含黑色的媒資圖片拉開空間層次，同時與前景色有足夠大的對比度，保證在弱光和強光環境下的識別度。深色模式的主背景色應該保持安靜不搶戲，給定製主題場景包括運營場、垂類頻道、會員場，保留髮聲的空間。所以選擇相對中性的顏色。色調協調，要考與主場景的氛圍融合，優酷主要涉及到五大欄目導航欄和首焦吸色。3. 色彩框架：包容且一致我們將現有色彩進行歸類，並歸納出每個型別的用途，從而建立色彩框架。這樣可以幫助我們確保同一用途的色彩包含的深色模式和淺色模式兩個色彩組合的唯一性，而不是單個色彩的唯一性。例如：白色會同時使用在背景和有些按鈕文字上，我們不能在深色模式中規定白色變成深色，因為在按鈕上不適用。我們應該規定背景色的淺色模式是白色，深色模式是深色，這樣按鈕文字就不會受到影響。
值得注意的是要先抓住一般型別，再看特殊個例。類如：我們將文字、圖示歸納為資訊層並劃分三個層級，而不是歸納為主標題、副標題、按鈕文字、底欄圖示、頂導航圖示。
用一般型別歸納色彩的用途可以涵蓋絕大部分的色彩型別，而特殊型別可以用場景、狀態、元件等維度來劃分，例如：“少兒一級背景色”、“可以隱藏的分割線”“黑色導航欄”。
主要型別：
1）對比度的階梯：清晰降噪
我們在背景的對比度上設定均勻的階梯變化，這種均勻的變化有利於建立背景層級的秩序感。值得注意的是與淺色模式不同在深色模式下背景的視覺感受是逐步被抬高的層，海拔越高明度高。
文字的對比度階梯則不同於背景，在深色和淺色模式下文字的對比度階梯是趨同的。原因是我們希望主標題和副標題要有足夠大的反差使主標題足夠醒目，而副標題與置灰文字的反差則不需要那麼大。值得注意的是需要適度提升次要層級文字的對比度。
更好的對比度階梯有利於在複雜資訊密度介面的視覺降噪。
2）可讀性：跨場景測試
深色的外觀很可能受到使用者的喜歡，要考慮到使用者在深夜弱光的環境中使用深色模式的同時也不能排除白天強光的使用場景。手機螢幕的自動亮度調節會給實際的比度帶來影響。我們觀察到 iOS 深色模式的設計提升了幾乎所有元素的對比度，這值得我們有所考慮。所以儘可能在這兩種極端環境中測試我們的最終設計，保證資訊的可讀性。
3）規範化：建立深色模式色板
基於色彩框架以層級劃分色彩為主，特殊型別作補充，在對應的淺色模式的層級下新增深色模式的色彩。
同時我們需要在產品的真實場景中反覆的對比嘗試確保實際效果是滿足要求的。
另外，一些細節上的處理仍然值得我們的關注：
1）圖示：面型圖示在深色下識別性更優
深色模式下線條型的圖示有時會顯得過於單薄缺少份量感導致關注度降低，為改善這種情況我們可以替換為塊面型的圖示。此外有研究表明多數情況下塊面型的圖示會比線條型的圖示有更好的易用性，他們會被更快速的識別。
2）分割線和陰影：轉換為填充色來區分
深色模式多數情況下對於層級的區隔來說，使用填充色會比分割線和陰影更有效。
五、執行策略深色模式不是簡單的顏色的明暗變化的處理，它是一套全新的設計風格，涉及的場景與團隊非常多，按照常規做法會耗費巨大的開發成本，如何快速實現優酷雙端的深色模式適配是當前面臨的主要問題。
優酷去年設計主導與開發共同搭建視覺產品化能力，設計側針對優酷業務屬性把視覺進行不同顆粒度的拆解抽象，把影響視覺風格調性的最基礎屬性（顏色、字號、間距、圓角、尺寸）進行了統一design token命名，設計與開發團隊共同維護一套可擴充套件的視覺屬性。視覺屬性與框架佈局分離並與開發邏輯相互對應，通過SDK 的方式統一管理，一處替換全端生效，遍於控制並快速定義產品風格。
在視覺產品化能力下進行深色模式的適配與落地相對來說比較容易。在兩個風格的轉化中主要需要適配：色彩、圖片。
1. 色彩：使用語義命名交付設計整個優酷系統顏色體系分：靜態色（在淺色模式下與深色模式下不需要變化的）、動態色（在深色模式下需要變化）。
動態色根據不同的層級進行重新語意化工程命名，底層還是保留靜態色design token 。整個顏色會由一個sdk 進行統一控制，也保證了整體的一致性。
同時，我們遵循了 iOS HIG 中的語義命令方式，這對於設計師和開發都非常友好。語義命名實際上是為深色模式的動態色建立一個令牌，例如，命名一個叫“主背景色”的動態色，它實際包含了深色模式的主背景色和淺色模式的主背景色。設計師把“主背景色”標註在介面中相應的元素上，開發就可以實現這個元素兩種模式的色彩切換。當然我們還要為開發同學準備一份動態色的對照表。
2. 複用與濾鏡對於深色模式的圖片處理，我們給出以下建議：
1）設計側儘可能一套圖片適配兩個模式, 例如，使用不透明度設定這類淡彩色可以同時適配淺色和深色模式，這是一種取巧的做法；2）開發側可以選擇程式碼濾鏡；3）對於一些無法複用的重要圖片，需根據深色介面增加一套新的切圖資源。
3. 工具化：設計的輸出與維繫通常設計完成後與開發之間的協作是通過sketchMeasure直接一鍵匯出標註即可。
那我們對基礎屬性進行統一design token命名後，後續的標註設計要如何標註？需要對照表格手動標註麼？開發怎麼看design token？
蓋亞是優酷設計主要在用的一個提效工具，不同於sketch Measure 匯出RGB色值，蓋亞匯出標註會對屬性的值進行符號化處理，顯示屬性對應的值的同時會顯示對應的designtoken。從而解決了設計輸出與開發實現的效率問題。
六、暗黑模式的官方文件暗黑模式的官方設計指南，可以參考iOS和Android的官方文件：
iOS:/file/2020/01/06/20200106144259_2370.jpg 否則我們只需要編排一份淺色和深色色值的顏色轉換表，以及一份適用於暗黑模式的素材, 然後簡單地對APP進行改寫就可以了。
以iOS為例，為了支援系統級別的暗黑模式主題，以及系統內建APP同步支援暗黑模式下的介面，iOS系統在螢幕(Screen), 檢視(View)， 選單(Menu)和元件(Controls)上使用了 Apple 新定義的 "Darker Color Palette"。
這套 Color Palette 的主要目的，在於透過調整顏色的飽和度, 做出視覺層級，提升顏色的對比性，讓所有元件能夠以合適的狀態在暗黑模式中進行操作。
基於暗黑模式進行的介面設計並不是一個顏色調整一下就可以快速解決的任務。由於暗色系的一些特性，原本用來建立檢視層級（例如陰影）或者色彩對比（白底黑字）的概念都需要被重新設計，設計師們需要以全新的思維去應對視覺上的每個細節。
也因為新增暗黑模式支援這一大幅度的改動，Apple 也重新定義了自己的UI設計指南，除了強調設計師們應該 "更專注於內容"，也在原有的設計 "Light Mode"基礎上，提出5個原則進行調整。
維持操作上的熟悉性維持平臺上的一致性清楚的資訊層級無障礙操作保持簡單暗黑模式帶來的是一整套的全新設計理念。對應而來的，就是對現有APP設計元素的全盤重構，這在設計和開發側來講，都是龐雜繁瑣的工程，涉及優酷幾乎全部業務的的介面適配。