2019 年的兩場重量級發布會 Google I/O 和 Apple WWDC 終于落下帷幕。在各種新奇科技資訊中大家會有趣地發現兩家公司不約而同的發布了手機系統的 Dark Mode（Theme），大眾群體可以在隨后的幾個月內升級 Android Q 和 iOS 13 體驗暗黑色彩模式的 UI 界面。
預感Dark Mode這個詞今年要火了！
ICBU 設計團隊的小伙伴們迫不及待地從有限的零散資料入手快速試驗解讀，就「暗黑模式」下的體驗設計進行了總結和探索。僅供拋磚引玉，歡迎一起探討。
簡單回顧下近幾年 UI 發展歷程，暗黑模式其實并不是全新概念：
大家感知比較深的應該是2018年 MacOS 10.14，這個電腦端 Dark Mode 已經受到不少好評；
再往前追溯，前幾年的 Windows10 早就支持了暗色模式；
還有設計師最熟悉的工具軟件 Adobe 系列和 Sketch 都或早或晚的開始了暗色界面風格；
國內神機小米也在最新 MIUI 10 中加入了深色模式；蘋果在 iOS11 里試驗了「反轉顏色」功能……
暗色體驗的轉變早已開始潛移默化的演變。
以 Alibaba.com App 為例，我們先快速預覽下暗黑模式下的 App 界面。
暗黑模式為什么受到追捧？
IT 大佬們為何紛紛把 Dark Mode 納入自家的設計體系？
1. 暗光環境下使用場景
隨著人們對智能機的依賴性越來越強，設備使用時間也高頻覆蓋了白天、黑夜，所以暗光環境的使用需求被實實在在的擺到臺面上。
以設計職業為例，2019 年阿里經濟體設計師大會上分享的數據結果，設計師群體通常要在晚上工作 5-6 個小時。
2. 屏幕亮度造成的「光污染」
長時間使用智能機導致視力下降已經成為不爭的實事，我們無法擺脫工作生活中對智能設備的依賴，但是可以通過設計&技術手段降低高頻亮屏對眼睛的損害。所以 Dark Mode 可以降低屏幕的整體視覺亮度，減少對眼睛的視覺壓力。
3. 節能耗電
現在主流的智能機屏幕越做越大，屏幕越做越亮，OLED、AMOLED 都成了耗電大頭，而手機卻越做越薄，電池在本身技術蓄電量不能跳躍式發展的前提下只能為輕薄機身做讓步，所以手機續航能力的問題也日益嚴峻。即使是評價口碑領頭羊的 iPhone 系列也不免要為提升續航尋找最優解決方案，可以降低設備耗電速度的 Dark Mode 優勢突顯出來（由于 OLED 屏幕中每個像素都是自主發光，所以在顯示深色元素時像素所消耗的電流更低，尤其在純黑顏色時像素點可以完全關閉達到省電的效果）。
4. 專注內容
色彩具有層級關系，深色會在視覺感官上自動后退，淺色部分則會向前延展，這樣的對比強烈的層次關系可以讓用戶更注重被凸顯出來的內容和交互操作。尤其在信息負責界面內層級關系的合理拉開對操作效率都有明顯的促進作用。
5. 信息保護
有趣的測試發現，暗黑模式下的屏幕信息在非正視角預覽時，信息的辨別可視性反倒會降低。當色彩運用得當，可以讓暗黑模式下起到一定的信息保護作用，如 Alibaba.com 貿易客戶端用戶對個人信息具有一定的隱私性需求。
需要特別注意的是 Dark Mode 不只是為夜晚使用，它也不完全代表夜間模式。除了前面提到的硬件營銷和體驗需求，用戶也極有可能在白天打開暗黑模式，這就意味著 Dark Mode 模式下必須讓界面的信息交互在亮光環境下依然保持清晰的可視性。
同時國際上有針對滿足身體障礙人群的使用需求的通用標準，今年 Google I/O 大會上重點講解的Live Caption 就是為解決特殊人群用戶的使用障礙。同樣在 iOS & Android 的設計語言中也在重點說明滿足色盲色弱用戶的使用需求的 WCAG 2.0（Web內容可訪問性指南），這些都是需要設計師著重考慮的地方。
「暗黑」時代已到來，設計師如何接招？
我們以 Alibaba.com App 為例，快速研究了 Dark Mode 模式的無線 UI 升級適配。
1. 暗黑UI不是簡單的反色處理
暗黑主題是一種弱亮度 UI ，主要顯示深色的界面。暗黑主題通過大面積使用黑色（深色）、顏色的減少減弱，降低了設備屏幕發出的亮度，同時也滿足了最低色彩對比度的要求。有助于改善眼睛視覺疲勞，同時節省電池電量（具有 OLED、AMOLED 屏幕的設備利用關閉黑色像素來顯示黑色）。
結合平臺設計語言去看，比如 Android 以卡片層級為主的設計思路，那么在黑暗主題下就是提高卡片的層級：使用最暗的顏色作為主要背景，利用卡片高度的疊加來顯示灰度的變化。卡片高度越高，顏色越淺。
iOS 13 設計規范中給了一組系統級別顏色適配光、暗黑模式下的色彩變化需求，仔細分析會發現在保障原色系基礎上，適量增加對比度&降低透明度。
舉個例子，Alibaba.com 以亮橙為品牌色的產品，更要慎用飽和度過高和過深的顏色。在使用品牌色時，需要考慮到顏色是否適合于深色（黑色）的背景使用。也可以使用品牌延展色（淺色）或輔助顏色，既保持了對比度，不易產生疲勞感，也滿足了界面的美觀。所以暗黑模式下對色彩做了降級處理，保障清晰度的同時避免亮色與暗色依然會形成刺眼的視覺效果，反倒會降低對比識別度。
2. 注重用戶的觀感體驗
以文字顏色配比為例，傳統淺底深字的界面，因為對比度較強，閱讀時間長后眼睛容易產生疲勞感。通過黑暗模式的深底淺字，減少了屏幕中發出的光，也滿足了最低色彩對比度要求。但暗色背景上的淺色文字也要把握尺度，避免亮度過高會產生的視覺疲勞。
3. 「亮&暗」順暢切換適配原則
從用戶需求出發，保持常規主題和暗黑主題的流暢切換的適配原則。
設計方案需要滿足常規主題&暗黑主題的同時適配：在Android Q & iOS13 中，用戶可能隨時在這兩個模式間進行切換（iOS支持設置時間段內自動切換）。因此需要在設計和開發 APP 的時候，同時兼顧到這兩個模式下的使用體感。
4. WCAG 2.0 標準（Web內容可訪問性指南
WCAG 2.0 是國際公認的通用標準，在某些西方國家甚至作為評判產品優劣的重要指標，所以涉及到有海外用戶的 App 尤其要關注這個標準。
保持足夠的對比度：利用深色（黑色）主題色來配上淺色文字，將對比度控制在 4.5 : 1 的基礎上，滿足了 Web 內容無障礙指南的 AA 級要求。
這里給大家分享一個查詢對比度的實用工具 Contrast-ratio.com 來檢測文字和背景是否符合規范。（注意：在實際的項目中也并非所有的內容的對比度都在 4.5 : 1 之上）
使用不同透明的文字來表達層級關系：在深色主題上進行多層文字（淺色）表達時，可以對文字進行降透明度的方式來設計，越重要的文字透明的數值越低（對比度越高），非重要的文本信息透明的數值越高（對比度越低）。
5. iOS 13&Android Q暗黑模式對比（還在研究中…）
仔細解讀 iOS & Android 兩套設計語言可以發現它們的 Dark Mode 策略其實有所不同，除了在基礎色彩體系的數值有些差距外，更明顯的是在 Accent color 的不同處理方式。
iOS 13 在顏色把控上減少亮暗兩種模式下色彩產生的較大幅度變動。
Android Q 則強調保障清晰觀看體驗的前提下，要具備更多的靈活性，比如在原色彩上面加 40% 的白色透明遮罩，以增強在深色背景上的清晰對比度。缺點可能會讓原色彩在感官上發生較大的偏差。
6. 初步發現的「坑」
淺色為主的圖片、視頻等圖像內容信息
以電商 APP 為例，不可避免有大量商品圖片元素，并且在目前主流圖片規范引導的是干凈的淺色底為主，就會形成下圖中「Dark」所示，產品圖區域比較突兀。簡單高效的解決方案還需要不斷測試，如：阿里達摩院的智能算法摳圖工具「頑兔」也許可以實現產品圖透明底，以配合不用背景顏色的需求。
開發團隊視角，暗黑模式實現成本
Android Q & iOS 13 因為采用不同的暗色視覺方式，所以如果遵循各自平臺的官方規范做適配，極有可能導致同一個 APP 在兩端的品牌視覺有較大差異，不利于給用戶建立統一嚴謹的品牌心智，所以可以嘗試 follow 其中一端的標準，改動另一端。或者跳出兩邊官方規范自成一套暗色視覺體系，需要根據每個產品的情況自主選擇。
暗黑模式對開發的工作量也是一個不小的挑戰，尤其是規模龐大的復雜 APP，同時有 Native、Weex、Flutter 等代碼結構時，想做 Dark Mode 適配不是一件簡單的事情。
