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

相信 Dark Mode 這個(gè)詞是今年要火！ 簡(jiǎn)單回顧下近幾年 UI 發(fā)展歷程，暗黑模式其實(shí)并不是全新概念，大家感知比較深的應(yīng)該是 2018年 MacOS 10.14，這個(gè)電腦端 Dark Mode 已經(jīng)受到不少好評(píng)；再往前追溯，前幾年的 Windows10 早就支持了暗色模式；設(shè)計(jì)師最熟悉的工具軟件 Adobe 系列 & Sketch 都或早或晚的也開始了暗色界面風(fēng)格；國(guó)內(nèi)神機(jī)小米也在最新 MIUI 10 中加入了深色模式；蘋果在 iOS11 里試驗(yàn)了 “反轉(zhuǎn)顏色”功能 …

其實(shí)暗色體驗(yàn)轉(zhuǎn)變?cè)缫验_始潛移默化的演變…

我們先快速預(yù)覽下 Alibaba.com App 的暗黑模式：

暗黑模式為什么受到追捧，IT大佬們紛紛把 Dark Mode 納入自家的設(shè)計(jì)體系？

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

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

以設(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á)到省電的效果）；

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)系的合理拉開對(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)需求，用戶也極有可能在白天打開暗黑模式，這就意味著 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ì)師著重考慮的地方…

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

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

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

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

結(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ì)比度&降低透明度…

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

B、注重用戶的觀感體驗(yàn)

以文字顏色配比為例‘；

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

C、“亮&暗” 順暢切換適配原則

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

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

D、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í)要求。

這里給大家分享一個(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ì)比度越低）

E、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ā)生較大的偏差；

具體對(duì)比分析結(jié)果隨后分享...

F、初步發(fā)現(xiàn)的 “ 坑 ”

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

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

G、開發(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ù)钠放菩闹?，所以可以嘗試flow其中一端的標(biāo)準(zhǔn)，改動(dòng)另一端；或者跳出兩邊官方規(guī)范自成一套暗色視覺(jué)體系；看每個(gè)產(chǎn)品情況自主選擇吧。

暗黑模式對(duì)開發(fā)哥哥們的工作量也是一個(gè)不小的挑戰(zhàn)，尤其是規(guī)模龐大的復(fù)雜APP，同時(shí)有 Native、Weex、Flutter 等代碼結(jié)構(gòu)時(shí)，想做 Dark Mode 適配不是一件簡(jiǎn)單的事情… （要請(qǐng)開發(fā)哥哥多喝幾杯咖啡了?。?

總之，如 2016 年的 “劉海屏” 一樣，不管喜不喜歡它就這樣闖入你的世界。Dark Mode 帶來(lái)的暗黑體驗(yàn)勢(shì)必要讓視覺(jué)設(shè)計(jì)師們耗費(fèi)一番心思。試想當(dāng)用戶把手機(jī)切換到暗黑模式下舒服的享受著暗色系的舒適寧?kù)o時(shí)，打開一個(gè)沒(méi)有做適配的 App ！會(huì)猶如深夜睡覺(jué)突然被打開燈，心里會(huì)痛苦的吶喊 “關(guān)燈”...

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

原創(chuàng)：王羽楓

原文鏈接：https://www.zcool.com.cn/article/ZOTcwNzY0.html