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

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

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

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

大家感知比較深的應(yīng)該是2018年 MacOS 10.14，這個(gè)電腦端 Dark Mode 已經(jīng)受到不少好評(píng)；

再往前追溯，前幾年的 Windows10 早就支持了暗色模式；

還有設(shè)計(jì)師最熟悉的工具軟件 Adobe 系列和 Sketch 都或早或晚的開(kāi)始了暗色界面風(fēng)格；

國(guó)內(nèi)神機(jī)小米也在最新 MIUI 10 中加入了深色模式；蘋(píng)果在 iOS11 里試驗(yàn)了「反轉(zhuǎn)顏色」功能……

暗色體驗(yàn)的轉(zhuǎn)變?cè)缫验_(kāi)始潛移默化的演變。

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

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

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

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

隨著人們對(duì)智能機(jī)的依賴性越來(lái)越強(qiáng)，設(shè)備使用時(shí)間也高頻覆蓋了白天、黑夜，所以暗光環(huán)境的使用需求被實(shí)實(shí)在在的擺到臺(tái)面上。——重慶定制網(wǎng)站

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

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

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

3. 節(jié)能耗電

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

4. 專注內(nèi)容

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

5. 信息保護(hù)

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

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

同時(shí)國(guó)際上有針對(duì)滿足身體障礙人群的使用需求的通用標(biāo)準(zhǔn)，今年 Google I/O 大會(huì)上重點(diǎn)講解的Live Caption 就是為解決特殊人群用戶的使用障礙。同樣在 iOS & Android 的設(shè)計(jì)語(yǔ)言中也在重點(diǎn)說(shuō)明滿足色盲色弱用戶的使用需求的 WCAG 2.0（Web內(nèi)容可訪問(wèn)性指南），這些都是需要設(shè)計(jì)師著重考慮的地方?！?a href="http://pgwc.com.cn/" target="_self">網(wǎng)站建設(shè)

「暗黑」時(shí)代已到來(lái)，設(shè)計(jì)師如何接招？

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

1. 暗黑UI不是簡(jiǎn)單的反色處理

暗黑主題是一種弱亮度 UI ，主要顯示深色的界面。暗黑主題通過(guò)大面積使用黑色（深色）、顏色的減少減弱，降低了設(shè)備屏幕發(fā)出的亮度，同時(shí)也滿足了最低色彩對(duì)比度的要求。有助于改善眼睛視覺(jué)疲勞，同時(shí)節(jié)省電池電量（具有 OLED、AMOLED 屏幕的設(shè)備利用關(guān)閉黑色像素來(lái)顯示黑色）?！?a href="http://pgwc.com.cn/" target="_self">定制網(wǎng)站

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

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

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

2. 注重用戶的觀感體驗(yàn)

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

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

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

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

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

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

保持足夠的對(duì)比度：利用深色（黑色）主題色來(lái)配上淺色文字，將對(duì)比度控制在 4.5 : 1 的基礎(chǔ)上，滿足了 Web 內(nèi)容無(wú)障礙指南的 AA 級(jí)要求?！?a href="http://pgwc.com.cn/" target="_self">重慶網(wǎng)站建設(shè)

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

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

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

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

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

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

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

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

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

開(kāi)發(fā)團(tuán)隊(duì)視角，暗黑模式實(shí)現(xiàn)成本

Android Q & iOS 13 因?yàn)椴捎貌煌陌瞪曈X(jué)方式，所以如果遵循各自平臺(tái)的官方規(guī)范做適配，極有可能導(dǎo)致同一個(gè) APP 在兩端的品牌視覺(jué)有較大差異，不利于給用戶建立統(tǒng)一嚴(yán)謹(jǐn)?shù)钠放菩闹牵钥梢試L試 follow 其中一端的標(biāo)準(zhǔn)，改動(dòng)另一端?；蛘咛鰞蛇吂俜揭?guī)范自成一套暗色視覺(jué)體系，需要根據(jù)每個(gè)產(chǎn)品的情況自主選擇。

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

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

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

Dark Mode 到底會(huì)帶來(lái)多大的革新浪潮，大眾用戶接受度都還需要時(shí)間的驗(yàn)證。雖然現(xiàn)在只有零散的官方諜照，也缺乏詳盡的官方規(guī)范文檔。但是抱著與時(shí)俱進(jìn)的心態(tài)，ICBU 設(shè)計(jì)將聯(lián)合技術(shù)團(tuán)隊(duì)開(kāi)始對(duì) Dark Mode 做對(duì)應(yīng)解決策略的研究開(kāi)發(fā)?！?a href="http://pgwc.com.cn/" target="_self">重慶網(wǎng)站建設(shè)