Dark Mode(深色)模式設(shè)計指南

深色模式最近突然成為了一個時髦的詞匯,蘋果去年在 macOS 10.14 上加入了 Dark Mode,Android 系的廠商近來也紛紛加入支持,Google 在今年的 Android P 當(dāng)中也正式推出了自己的深色模式。 今天發(fā)布的 iOS 13 正式引入 Dark Mode,深色模式已經(jīng)成為大勢所趨,而這對我們 UI 設(shè)計師又意味著什么呢?

 

 

為什么我們需要深色模式?

由于電子設(shè)備的屏幕是主動發(fā)光式的,它們發(fā)出的光線會比我們生活中接觸的物品更具刺激性,而深色模式可以顯著降低屏幕的整體視覺亮度,減少眼睛的視覺壓力。在深色模式下,所有的界面元素都退居幕后,使得我們真正與之交互和操作的內(nèi)容可以被凸顯出來,這也是為什么眾多專業(yè)的圖像、視頻等編輯軟件普遍采用深色界面作為默認(rèn)外觀。其實深色模式不僅僅可以被那些專業(yè)生產(chǎn)力工具所用,對任何想要追求專注和沉浸式使用體驗的用戶來說,深色模式都將會使他們獲益匪淺。

同時隨著OLED屏幕的普及,支持深色模式更有了一定的現(xiàn)實意義:省電!由于OLED屏幕中每個像素都是自主發(fā)光而非LCD由整個一塊背光面板發(fā)光,所以在顯示深色元素時像素所消耗的電流更低,在純黑色下像素點可以完全關(guān)閉達(dá)到省電的效果。

Youtube 同一界面深淺兩種模式下屏幕的電流對比,可以看到同樣的界面,最高亮度下深色模式降低了 60% 的耗電量。

除此以外深色模式如此備受廠商熱衷的另一個原因:酷炫!沒錯,酷炫!我們在科幻電影中看到的頗具未來感的概念界面多數(shù)都是以深色為主,這也潛移默化的影響了我們的審美。同時自從扁平化風(fēng)潮流行起來以后,千篇一律的素白界面也很容易讓用戶產(chǎn)生審美疲勞,對與各家系統(tǒng) OS 廠商來說,增加一個系統(tǒng)全局性的深色模式可以無需對 UI 進(jìn)行大刀闊斧改革的同時達(dá)到讓用戶耳目一新的效果,這一點對于你自己的 App 來說也是一樣的。

 

 

Dark Mode 不是夜間模式!

很多國內(nèi)的 App 總是把深色模式理解為夜間模式,認(rèn)為用戶在夜間喜歡更暗更低對比度的界面,然而這陷入了一個誤區(qū),用戶確實需要夜間使用不刺眼,但達(dá)到這一目的并不意味著需要放棄對比度。其實在深色模式下當(dāng)頁面的背景由白色反轉(zhuǎn)為黑灰色時,我們已經(jīng)極大減少了電子屏幕發(fā)出的光亮,而配合設(shè)備的環(huán)境光傳感器自動亮度調(diào)節(jié)已經(jīng)可以使界面整體的亮度滿足用戶在暗光環(huán)境下的使用。而且系統(tǒng)級的深色模式下,各個 App 之間保持相對統(tǒng)一的對比度對用戶的實際體驗也更好,否則當(dāng)下的很多 App 夜間模式由于對比度太低用戶看不清文字,反倒不得不調(diào)高屏幕亮度,而一旦跳到其他沒有夜間模式的 App 更是會被亮瞎眼。

另外前面已經(jīng)提到,用戶使用深色模式的理由有很多,在暗光環(huán)境下減少視覺疲勞只是其中一種,即使在白天很多用戶也會長期打開深色模式。這意味著在深色模式下你的界面設(shè)計依然必須考慮可讀性,依然需要滿足 WCAG 2.0(Web內(nèi)容可訪問性指南)中規(guī)定的 AA 級標(biāo)準(zhǔn)即最低 4.5:1 的對比度。

WCAG 中對對比度的標(biāo)準(zhǔn)可以很好的幫助設(shè)計師檢查自己設(shè)計界面的可讀性,尤其是對于那些本來就患有視力障礙的用戶來說,低于 AA 級標(biāo)準(zhǔn)4.5:1 對比度的正文可讀性非常差。我們可以使用色彩對比度計算器來檢查自己的配色是否符合 AA 級標(biāo)準(zhǔn)。

Color Review - 色彩對比度檢查工具:

 

 

Dark Mode并非簡單的反色處理

iOS 目前已經(jīng)在設(shè)置里提供一個叫做智能反轉(zhuǎn)的選項,可以把除媒體以外的界面元素顏色按其對比色全部自動反轉(zhuǎn),但實際效果卻差強(qiáng)人意。因為深色模式并非對淺色界面的簡單反轉(zhuǎn),如淺色界面下的深色陰影,在深色模式下該如何處理呢?直接反色成為淺色光暈嗎?然而這樣做會打破UI原有的視覺層級和空間感。如果使用與淺色模式下相同的陰影在深色模式往往又達(dá)不到足夠的深度感。這些問題都需要我們在深色模式下采用一套新的視覺設(shè)計規(guī)范,由于 iOS 目前還沒有關(guān)于深色模式的設(shè)計規(guī)范,但 Google 在 Android P 推出后,在 Material Design 官網(wǎng)上已經(jīng)更新了他們在設(shè)計深色模式時的一整套設(shè)計規(guī)范,并且蘋果在 macOS 的視覺規(guī)范中也已經(jīng)更新了深色模式相關(guān)的內(nèi)容,這些都可以成為我們的參考,為 iOS 即將到來的深色模式做好準(zhǔn)備。在這里我整理了各家視覺規(guī)范中的一些要點,希望對大家有所幫助:

界面層級

作為 UI 設(shè)計師我們都知道 UI 中視覺層級的重要,那么在深色模式下如何確保視覺層級依然有效呢?Material Design 在淺色模式時使用在白色卡片下投射陰影的形式來模擬現(xiàn)實世界的空間深度感,而在深色模式下,尤其是當(dāng)背景已經(jīng)很深時如何表現(xiàn)深度呢?記住一個原則:元素層級越高,其承載面的顏色越淺。

讓我們假想界面上方有一盞光源,離這盞光源越近,界面元素的層級越高,它的表面也將被照得越亮。因此在不同層級間應(yīng)用不同級別的灰度,可以使界面層級更加突出。使用深灰而不是純黑也可使得陰影更容易發(fā)揮作用。

Material Design 中推薦的深色模式默認(rèn)最低層顏色為 #121212,而在這之上的層級則使用不同透明度的白色透明層遮罩獲得層級區(qū)分。深色主題的最底層顏色應(yīng)該達(dá)到 15.8:1 的對比度級別,因為這可以確保即使當(dāng)應(yīng)用于最高層的表面時,正文文本仍能通過 WCAG 的 AA 標(biāo)準(zhǔn)至少能達(dá)到 4.5:1 對比度。

 

 

注意事項

不要在深色模式的高層級元素下使用淺色的陰影,因為它看起來更像是光暈。而這會破壞界面的空間結(jié)構(gòu),真實世界里物體并不會投射比自身顏色更淺的陰影。

部分 App 可能會為使用 OLED 設(shè)備的用戶提供純黑底色的界面,以達(dá)到更佳的省電效果。但這只是一種可選項,完全使用純黑底會導(dǎo)致界面層級不易表現(xiàn),很容易限制設(shè)計發(fā)揮,只有在產(chǎn)品視覺層級非常簡單且明確的情況下可以酌情采用。并且記住對與 OLED 屏幕來說在滾動屏幕時像素點頻繁的切換開閉狀態(tài)可能會導(dǎo)致一定延遲,造成文字產(chǎn)生拖尾現(xiàn)象。

 

 

色彩

深色模式下的色彩需要與背景有足夠的對比度,當(dāng)用于正文字號時,在任何界面層級中都至少需要保證滿足 WCAG 2.0 AA 級標(biāo)準(zhǔn)即至少 4.5:1 的對比度。

在淺色模式下我們使用的一般都是高飽和的顏色,然而在深色的背景承載下,這些較為濃重的顏色無法滿足 4.5:1 的最低對比度標(biāo)準(zhǔn)。高飽和的顏色在深色的背景下也容易產(chǎn)生視覺抖動,從而導(dǎo)致人眼疲勞。所以在深色模式下我們應(yīng)當(dāng)選擇更低飽和的顏色以達(dá)到更好的可讀性。

當(dāng)前 Google 在 Android P 以及蘋果在 macOS 中都已經(jīng)加入了在同色系下深淺模式自動適應(yīng)兩套配色方案的相關(guān) API,在 iOS 13 中蘋果也很可能加入類似的功能。這意味著今后設(shè)計師將需要為自己的 App 色板定義深淺兩套方案,在這個語境下一種色彩不再之只對應(yīng)一個色值,每個顏色都將有高飽和和低飽和的兩種版本。開發(fā)者應(yīng)該使用語義化的顏色名稱而不是絕對色值,剩下的就交由系統(tǒng)自動適配吧。

在某些情況下,色彩需要特殊對待:

1. 品牌色

為了保證品牌 VI 的一致性,品牌色可保持原飽和度不變,但對應(yīng)用范圍應(yīng)當(dāng)及其克制,僅限于在個別元素如品牌 Logo 或品牌性的按鈕上,但界面中的其余部分仍應(yīng)遵循低飽和的配色規(guī)則。

2. 氛圍背景色

如果我們一直采用無色傾的深灰色作為背景,用戶很容易就會感到乏味。我們可以嘗試把品牌色融入到背景中去營造氛圍感,把品牌色用極低的透明度與系統(tǒng)默認(rèn)的深色模式背景色疊加,得到的結(jié)果就可以用來作為氛圍色運用到設(shè)計中。但切記,這個氛圍背景色需要足夠暗,才可以保證在最高的層級中依然可以保證滿足 4.5:1 的最低對比度。

Material Design 中推薦作為底層背景的顏色至少需要與文字有15.8:1的對比度,才能保證在MD規(guī)范下最高也是最淺的層級滿足4.5:1的最低比對比度標(biāo)準(zhǔn)。

3. 淺色模式下使用大面積色彩的元素

深色模式的界面應(yīng)整體以深色為主,在淺色模式下使用大面積色彩的元素,如導(dǎo)航欄、工具欄等在深色模式下應(yīng)避免使用彩色,因為在深色模式下這些色彩可能會顯得刺眼,對比過于強(qiáng)烈,破壞深色模式的沉浸感。

4. 深色模式下的提示元素

在淺色模式下我們有時會使用深色的元素,比如Toast提示等。在深色模式下為了讓這樣的模塊依然足夠突出,我們可以少量的使用淺色底作為模塊的背景,但僅限于這類面積很小,且需要特別強(qiáng)調(diào)的模塊中。

 

 

文字

不要在深色模式下使用純白色的文字作為正文,因為深色模式下純白色的對比會非常強(qiáng)烈,很容易造成視覺疲勞。當(dāng)然為了保證合適的對比度,文字顏色也不宜過淺。推薦的做法是在文字層級上使用透明度,這樣可以使文字與在不同的氛圍背景色上更和諧,或者使用HSB模式下調(diào)整B值的方法確定文字的固定色值。

 

 

圖形

在淺色模式下使用的一些線性圖標(biāo),如果直接反轉(zhuǎn)拿到深色界面下來用,你可能會發(fā)現(xiàn)圖形的形狀感和體積感都損失了很多,這是因為白色背景可以更好的表現(xiàn)出形狀,人的大腦可以將白色腦補成圖形的一部分。然而在深色模式下,這種作用消失了,人腦更傾向于認(rèn)為這些空白的部分是鏤空的。所以在深色模式下建議把線性圖標(biāo)反轉(zhuǎn)為面性圖標(biāo),不過具體的情況可以綜合產(chǎn)品實際的設(shè)計風(fēng)格和深色模式下的具體視覺效果再做判斷。

 

 

結(jié)語

以上就是為大家總結(jié)的深色模式設(shè)計中的一些重要的點,在 iOS 13 正式推出系統(tǒng)級的深色模式后,這必然會成為設(shè)計師逃不過去的一個坎,當(dāng)用戶開啟系統(tǒng)全局的深色模式后突然出現(xiàn)一個不支持的 App,你的 App 就會顯得特別刺眼,甚至有些用戶可能會不得不去尋找支持這一模式的替代品。這意味著今后設(shè)計過程中設(shè)計師們不得不關(guān)注兩套模式下的不同效果,確定一套適配規(guī)范讓系統(tǒng)自動調(diào)整你的 App 外觀,并在某些情況下為部分界面單獨設(shè)計,設(shè)計組件化在此刻也顯得無比重要了。

由于 iOS 13 還未正式推出,iOS 對深色模式的視覺規(guī)范還并不清晰,這篇文章中并不會過多地探究具體的細(xì)節(jié),其中提到的很多點都是普適性的概念。在 iOS 13 正式發(fā)布后,針對 iOS 的深色模式規(guī)范我會帶來更詳細(xì)的解讀。

 

 

 

作者:朗朗啊夠

公眾號: DEX Group

每天更新,
全站高品質(zhì)素材免費下載!