2019 年的兩場重量級發(fā)布會 Google I/O 和 Apple WWDC 終于落下帷幕。在各種新奇科技資訊中大家會有趣地發(fā)現(xiàn)兩家公司不約而同的發(fā)布了手機系統(tǒng)的 Dark Mode（Theme），大眾群體可以在隨后的幾個月內(nèi)升級 Android Q 和 iOS 13 體驗暗黑色彩模式的 UI 界面。

預(yù)感Dark Mode這個詞今年要火了！

ICBU 設(shè)計團隊的小伙伴們迫不及待地從有限的零散資料入手快速試驗解讀，就「暗黑模式」下的體驗設(shè)計進(jìn)行了總結(jié)和探索。僅供拋磚引玉，歡迎一起探討。

簡單回顧下近幾年 UI 發(fā)展歷程，暗黑模式其實并不是全新概念：

• 大家感知比較深的應(yīng)該是2018年 MacOS 10.14，這個電腦端 Dark Mode 已經(jīng)受到不少好評；
• 再往前追溯，前幾年的 Windows10 早就支持了暗色模式；
• 還有設(shè)計師最熟悉的工具軟件 Adobe 系列和 Sketch 都或早或晚的開始了暗色界面風(fēng)格；
• 國內(nèi)神機小米也在最新 MIUI 10 中加入了深色模式；蘋果在 iOS11 里試驗了「反轉(zhuǎn)顏色」功能…...

暗色體驗的轉(zhuǎn)變早已開始潛移默化的演變。

以 Alibaba.com App 為例，我們先快速預(yù)覽下暗黑模式下的 App 界面。

暗黑模式為什么受到追捧？

IT 大佬們?yōu)楹渭娂姲?Dark Mode 納入自家的設(shè)計體系？

1. 暗光環(huán)境下使用場景

隨著人們對智能機的依賴性越來越強，設(shè)備使用時間也高頻覆蓋了白天、黑夜，所以暗光環(huán)境的使用需求被實實在在的擺到臺面上。

以設(shè)計職業(yè)為例，2019 年阿里經(jīng)濟體設(shè)計師大會上分享的數(shù)據(jù)結(jié)果，設(shè)計師群體通常要在晚上工作 5-6 個小時。

2. 屏幕亮度造成的「光污染」

長時間使用智能機導(dǎo)致視力下降已經(jīng)成為不爭的實事，我們無法擺脫工作生活中對智能設(shè)備的依賴，但是可以通過設(shè)計&技術(shù)手段降低高頻亮屏對眼睛的損害。所以 Dark Mode 可以降低屏幕的整體視覺亮度，減少對眼睛的視覺壓力。

3. 節(jié)能耗電

現(xiàn)在主流的智能機屏幕越做越大，屏幕越做越亮，OLED、AMOLED 都成了耗電大頭，而手機卻越做越薄，電池在本身技術(shù)蓄電量不能跳躍式發(fā)展的前提下只能為輕薄機身做讓步，所以手機續(xù)航能力的問題也日益嚴(yán)峻。即使是評價口碑領(lǐng)頭羊的 iPhone 系列也不免要為提升續(xù)航尋找最優(yōu)解決方案，可以降低設(shè)備耗電速度的 Dark Mode 優(yōu)勢突顯出來（由于 OLED 屏幕中每個像素都是自主發(fā)光，所以在顯示深色元素時像素所消耗的電流更低，尤其在純黑顏色時像素點可以完全關(guān)閉達(dá)到省電的效果）。

4. 專注內(nèi)容

色彩具有層級關(guān)系，深色會在視覺感官上自動后退，淺色部分則會向前延展，這樣的對比強烈的層次關(guān)系可以讓用戶更注重被凸顯出來的內(nèi)容和交互操作。尤其在信息負(fù)責(zé)界面內(nèi)層級關(guān)系的合理拉開對操作效率都有明顯的促進(jìn)作用。

5. 信息保護(hù)

有趣的測試發(fā)現(xiàn)，暗黑模式下的屏幕信息在非正視角預(yù)覽時，信息的辨別可視性反倒會降低。當(dāng)色彩運用得當(dāng)，可以讓暗黑模式下起到一定的信息保護(hù)作用，如 Alibaba.com 貿(mào)易客戶端用戶對個人信息具有一定的隱私性需求。

需要特別注意的是 Dark Mode 不只是為夜晚使用，它也不完全代表夜間模式。除了前面提到的硬件營銷和體驗需求，用戶也極有可能在白天打開暗黑模式，這就意味著 Dark Mode 模式下必須讓界面的信息交互在亮光環(huán)境下依然保持清晰的可視性。

同時國際上有針對滿足身體障礙人群的使用需求的通用標(biāo)準(zhǔn)，今年 Google I/O 大會上重點講解的Live Caption 就是為解決特殊人群用戶的使用障礙。同樣在 iOS & Android 的設(shè)計語言中也在重點說明滿足色盲色弱用戶的使用需求的 WCAG 2.0（Web內(nèi)容可訪問性指南），這些都是需要設(shè)計師著重考慮的地方。

「暗黑」時代已到來，設(shè)計師如何接招？

我們以 Alibaba.com App 為例，快速研究了 Dark Mode 模式的無線 UI 升級適配。

1. 暗黑UI不是簡單的反色處理

暗黑主題是一種弱亮度 UI ，主要顯示深色的界面。暗黑主題通過大面積使用黑色（深色）、顏色的減少減弱，降低了設(shè)備屏幕發(fā)出的亮度，同時也滿足了最低色彩對比度的要求。有助于改善眼睛視覺疲勞，同時節(jié)省電池電量（具有 OLED、AMOLED 屏幕的設(shè)備利用關(guān)閉黑色像素來顯示黑色）。

結(jié)合平臺設(shè)計語言去看，比如 Android 以卡片層級為主的設(shè)計思路，那么在黑暗主題下就是提高卡片的層級：使用最暗的顏色作為主要背景，利用卡片高度的疊加來顯示灰度的變化。卡片高度越高，顏色越淺。

iOS 13 設(shè)計規(guī)范中給了一組系統(tǒng)級別顏色適配光、暗黑模式下的色彩變化需求，仔細(xì)分析會發(fā)現(xiàn)在保障原色系基礎(chǔ)上，適量增加對比度&降低透明度。

舉個例子，Alibaba.com 以亮橙為品牌色的產(chǎn)品，更要慎用飽和度過高和過深的顏色。在使用品牌色時，需要考慮到顏色是否適合于深色（黑色）的背景使用。也可以使用品牌延展色（淺色）或輔助顏色，既保持了對比度，不易產(chǎn)生疲勞感，也滿足了界面的美觀。所以暗黑模式下對色彩做了降級處理，保障清晰度的同時避免亮色與暗色依然會形成刺眼的視覺效果，反倒會降低對比識別度。

2. 注重用戶的觀感體驗

以文字顏色配比為例，傳統(tǒng)淺底深字的界面，因為對比度較強，閱讀時間長后眼睛容易產(chǎn)生疲勞感。通過黑暗模式的深底淺字，減少了屏幕中發(fā)出的光，也滿足了最低色彩對比度要求。但暗色背景上的淺色文字也要把握尺度，避免亮度過高會產(chǎn)生的視覺疲勞。

3. 「亮&暗」順暢切換適配原則

從用戶需求出發(fā)，保持常規(guī)主題和暗黑主題的流暢切換的適配原則。

設(shè)計方案需要滿足常規(guī)主題&暗黑主題的同時適配：在Android Q & iOS13 中，用戶可能隨時在這兩個模式間進(jìn)行切換（iOS支持設(shè)置時間段內(nèi)自動切換）。因此需要在設(shè)計和開發(fā) APP 的時候，同時兼顧到這兩個模式下的使用體感。

4. WCAG 2.0 標(biāo)準(zhǔn)（Web內(nèi)容可訪問性指南）

WCAG 2.0 是國際公認(rèn)的通用標(biāo)準(zhǔn)，在某些西方國家甚至作為評判產(chǎn)品優(yōu)劣的重要指標(biāo)，所以涉及到有海外用戶的 App 尤其要關(guān)注這個標(biāo)準(zhǔn)。

保持足夠的對比度：利用深色（黑色）主題色來配上淺色文字，將對比度控制在 4.5 : 1 的基礎(chǔ)上，滿足了 Web 內(nèi)容無障礙指南的 AA 級要求。

這里給大家分享一個查詢對比度的實用工具 Contrast-ratio.com 來檢測文字和背景是否符合規(guī)范。（注意：在實際的項目中也并非所有的內(nèi)容的對比度都在 4.5 : 1 之上）

使用不同透明的文字來表達(dá)層級關(guān)系：在深色主題上進(jìn)行多層文字（淺色）表達(dá)時，可以對文字進(jìn)行降透明度的方式來設(shè)計，越重要的文字透明的數(shù)值越低（對比度越高），非重要的文本信息透明的數(shù)值越高（對比度越低）。

5. iOS 13&Android Q暗黑模式對比（還在研究中…）

仔細(xì)解讀 iOS & Android 兩套設(shè)計語言可以發(fā)現(xiàn)它們的 Dark Mode 策略其實有所不同，除了在基礎(chǔ)色彩體系的數(shù)值有些差距外，更明顯的是在 Accent color 的不同處理方式。

iOS 13 在顏色把控上減少亮暗兩種模式下色彩產(chǎn)生的較大幅度變動。

Android Q 則強調(diào)保障清晰觀看體驗的前提下，要具備更多的靈活性，比如在原色彩上面加 40% 的白色透明遮罩，以增強在深色背景上的清晰對比度。缺點可能會讓原色彩在感官上發(fā)生較大的偏差。

6. 初步發(fā)現(xiàn)的「坑」

淺色為主的圖片、視頻等圖像內(nèi)容信息

以電商 APP 為例，不可避免有大量商品圖片元素，并且在目前主流圖片規(guī)范引導(dǎo)的是干凈的淺色底為主，就會形成下圖中「Dark」所示，產(chǎn)品圖區(qū)域比較突兀。簡單高效的解決方案還需要不斷測試，如：阿里達(dá)摩院的智能算法摳圖工具「頑兔」也許可以實現(xiàn)產(chǎn)品圖透明底，以配合不用背景顏色的需求。

開發(fā)團隊視角，暗黑模式實現(xiàn)成本

Android Q & iOS 13 因為采用不同的暗色視覺方式，所以如果遵循各自平臺的官方規(guī)范做適配，極有可能導(dǎo)致同一個 APP 在兩端的品牌視覺有較大差異，不利于給用戶建立統(tǒng)一嚴(yán)謹(jǐn)?shù)钠放菩闹牵钥梢試L試 follow 其中一端的標(biāo)準(zhǔn)，改動另一端。或者跳出兩邊官方規(guī)范自成一套暗色視覺體系，需要根據(jù)每個產(chǎn)品的情況自主選擇。

暗黑模式對開發(fā)的工作量也是一個不小的挑戰(zhàn)，尤其是規(guī)模龐大的復(fù)雜 APP，同時有 Native、Weex、Flutter 等代碼結(jié)構(gòu)時，想做 Dark Mode 適配不是一件簡單的事情。

總之，如 2016 年的「劉海屏」一樣，不管喜不喜歡，它就這樣闖入你的世界。

Dark Mode 帶來的暗黑體驗勢必要讓視覺設(shè)計師們耗費一番心思。試想當(dāng)用戶把手機切換到暗黑模式下舒服地享受著暗色系的舒適寧靜時，打開一個沒有做適配的 App，會猶如深夜睡覺突然被打開燈，心里會痛苦地吶喊「關(guān)燈」。

Dark Mode 到底會帶來多大的革新浪潮，大眾用戶接受度都還需要時間的驗證。雖然現(xiàn)在只有零散的官方諜照，也缺乏詳盡的官方規(guī)范文檔。但是抱著與時俱進(jìn)的心態(tài)，ICBU 設(shè)計將聯(lián)合技術(shù)團隊開始對 Dark Mode 做對應(yīng)解決策略的研究開發(fā)。

歡迎關(guān)注「阿里巴巴國際UED」公眾號：