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

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

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

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

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

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

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

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

2、屏幕亮度造成的“光污染”

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

3、節(jié)能耗電

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

4、專注內(nèi)容

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

5、信息保護

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

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

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

“暗黑”時代已到來，設計師如何接招？

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

A、暗黑 UI 不是簡單的反色處理

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

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

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

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

B、注重用戶的觀感體驗

以文字顏色配比為例‘；

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

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

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

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

D、WCAG 2.0 標準（Web內(nèi)容可訪問性指南）

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

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

這里給大家分享一個查詢對比度的實用工具 Contrast-ratio.com 來檢測文字和背景是否符合規(guī)范。

（注意：在實際的項目中也并非所有的內(nèi)容的對比度都在 4.5:1 之上）

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

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

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

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

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

具體對比分析結果隨后分享...

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

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

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

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

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

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

總之，如 2016 年的 “劉海屏” 一樣，不管喜不喜歡它就這樣闖入你的世界。Dark Mode 帶來的暗黑體驗勢必要讓視覺設計師們耗費一番心思。試想當用戶把手機切換到暗黑模式下舒服的享受著暗色系的舒適寧靜時，打開一個沒有做適配的 App ！會猶如深夜睡覺突然被打開燈，心里會痛苦的吶喊 “關燈”...

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

原創(chuàng)：王羽楓

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