相信大家對深色模式已經(jīng)不陌生了，自從 iOS13 啟用深色模式開始，各個軟件及平臺對于深色模式基本都做了相應(yīng)的設(shè)計適配，經(jīng)過了長時間的使用體驗及迭代，每個人對深色模式也有了自己內(nèi)心的好壞評判標(biāo)準(zhǔn)，下面是一些結(jié)合深色模式設(shè)計的相關(guān)總結(jié)。

深色模式小結(jié)：

深色模式下的顏色應(yīng)用

1. 關(guān)于深色模式下的色彩應(yīng)用

避免使用純黑色值

深色模式不意味著在純黑色背景上使用純白色文本，而為何不使用#000000 純黑色值作為大面積背景，原因在于現(xiàn)階段智能手機(jī)多采用 OLED 屏幕，當(dāng)我們設(shè)定界面顏色為純黑色值時，屏幕集成中的發(fā)光管是不會點亮的，而在進(jìn)行界面操作時，發(fā)光管則會因為滑動到有色部分而被點亮。簡單來說就是大面積使用純黑色值就會造成發(fā)光管一直處于即開即關(guān)的狀態(tài)，長時間使用便會導(dǎo)致較為嚴(yán)重的拖影現(xiàn)象。所以具有廣泛使用性的軟件一般會使用深灰色值來替代純黑。同時，純黑與純白的高對比度也會使用戶很難適應(yīng)這兩種色彩亮度，引起用戶的視覺疲勞。

選擇低飽和度色彩

使用較淺的色調(diào)（200–50范圍內(nèi)的顏色），在深色模式上具有更好的可讀性。較淺的顏色不會降低UI的視覺表現(xiàn)力，但可以幫助你保持適當(dāng)?shù)膶Ρ榷榷粫鹧劬ζ?。飽和度低的色彩能提高可讀性，減少用戶視覺震動，而飽和度高的色彩易讀性較弱，很容易使眼睛產(chǎn)生疲勞感，降低用戶的使用體驗，同時也容易造成頁面信息層級的混亂，導(dǎo)致重點信息不夠突出。

合理使用彩色

在深色模式下，大面積的彩色使用會破壞暗色平衡，使用戶產(chǎn)生刺眼感與疲勞感。可以看到下圖同一顏色的深淺模式對比中：第一組在淺色界面較突出，第三組在深色界面較突出，第二組則在深淺界面突出程度相差不多，所以在設(shè)計深色模式時應(yīng)該充分考慮在深淺底色上，色彩指示效果是否能保持一致。

除了在選擇顏色時充分考慮之外，也可以借鑒 iOS 設(shè)計指南中相應(yīng)的色彩映射以達(dá)到同等的設(shè)計效果，即淺色模式選用一個顏色時，深色模式會自動映射另一種顏色。

2. 維持指示性

深色模式不是簡單的將淺色模式的顏色翻轉(zhuǎn)，更應(yīng)保證在暗色模式下信息展示層級也可以保持視覺提示的準(zhǔn)確性。

我們在淺色模式中想要突出的信息與元素，在深色模式時同樣應(yīng)該是突出的。作為背景色，深色模式遵循的設(shè)計規(guī)則應(yīng)該是離我們越近的元素顏色越淺，越遠(yuǎn)的顏色越深，用不同的色彩灰度來模擬淺色模式下的層級概念。

類似的，谷歌 Material Design 有一套屬于自己的層級規(guī)范：

3. 輔助色的應(yīng)用

輔助色在深色模式中亦是用來區(qū)分層級關(guān)系的重要部分（如下圖的下拉菜單設(shè)計），比如輔助色中的分割線色值界定，不論是用分割線區(qū)分層級或是用底色區(qū)分層級，在屏幕亮度調(diào)暗時或色彩對比度較小時都有可能會"消失"，深色模式下，相較于分割線與投影，較優(yōu)的處理方式是在交互層面設(shè)計更好的信息層級區(qū)分，這樣即使在看不清分割線的情況下依舊可以保持可讀性。

關(guān)于文字

關(guān)于深色模式下的文字使用，老生常談的就是對比度了，這里就要引入一個新的名詞"WCAG"，WCAG 全稱為 Web 內(nèi)容無障礙指南，其中包含分為可感知性、可操作性、可理解性、可兼容性和一致性五大類的相關(guān)建議。WCAG 規(guī)定為了確保文字的可讀性，對比度需要符合 WCAG 的 AA 級 與 AAA 級標(biāo)準(zhǔn)。WCAG 的 AA 級 要求小文本與背景的對比度至少為 4.5:1,大文本與背景的對比度至少為 3：1。WCAG 的 AAA 級則要求小文本與背景的對比度至少為 7：1，大文本與背景的對比度為 4.5：1。

這里推薦一個檢查色彩對比度的網(wǎng)站：contrast-ratio.com。

為了適配暗黑模式，建議字色采用某個固定色值，字色的層級僅靠透明度進(jìn)行區(qū)分，如下圖：

同時，白色相較于黑色會有視覺擴(kuò)充的效果，同樣的粗細(xì)，白底黑字白色向內(nèi)壓會覺得字體較細(xì)，黑底白字白色向外擴(kuò)則會覺得字體較粗，所以當(dāng)大面積使用粗體時，字體的顏色在保證對比度的前提下如果相對較灰就不會造成視覺壓抑的感受。

關(guān)于 ICON

在深色模式中，icon 的表現(xiàn)上建議不要直接翻轉(zhuǎn)顏色或者保持原樣，不同的 icon 需要進(jìn)行針對性的處理。白色背景可以更好地表現(xiàn)出形狀，人的大腦可以將白色腦補(bǔ)成圖形的一部分。然而在暗黑模式下，這種作用消失了，人腦更傾向于認(rèn)為這些空白的部分是鏤空的，如下圖：在 iOS 9 上，蘋果公司采用的辦法是將淺色模式下的線性圖標(biāo)顏色反轉(zhuǎn)，拿到深色界面下使用。等到了 iOS 11，蘋果公司將這個圖標(biāo)在暗黑模式下改成了面性圖標(biāo)。

同時，對于彩色線性 icon 來說，基于我們前文所述，黑色對飽和度的變化會更敏感，而且明度不同也會導(dǎo)致淺色視覺外擴(kuò)程度不同而產(chǎn)生視覺上的粗細(xì)不統(tǒng)一，這就導(dǎo)致了黑底彩色線性圖標(biāo)極容易看起來很亂，對于這種圖標(biāo)，一種是去除個性統(tǒng)一用純色展示，而一定要用不同顏色的話，則可以用單色圖標(biāo)加輔助色進(jìn)行點綴，或是將線性圖標(biāo)加固定形狀底色形成統(tǒng)一形狀（類似于 iOS），再或者將線性圖標(biāo)加粗規(guī)避飽和度和明度帶來的視覺干擾來規(guī)避這個問題。

關(guān)于 button

關(guān)于按鈕點擊態(tài)的問題。在我們設(shè)計界面的時候，按鈕的點擊態(tài)通常都是模擬現(xiàn)實的按鈕按下的狀態(tài)做了加深處理。但是在暗黑模式下，就要考慮加深是否能有效傳達(dá)點擊反饋。因此我們可以在按鈕邊緣增加閃爍效果，來增強(qiáng)暗色模式下的按鈕反饋效果。

關(guān)于陰影

在淺色模式下，我們區(qū)分視覺層級通常會使用投影，陰影 y 值越高 blur 值越大則層級越高，反之則越低。而在深色模式中，因為背景的深色很難體現(xiàn)出陰影，這種方案相對來說就不夠適用了。

在淺色模式下，頁面的層級可以靠投影進(jìn)行區(qū)分，底層元素投影面積較小、而上層元素投影面積較大。如下圖左側(cè)：

而在深色模式下投影變得不明顯。因此改用"明暗"區(qū)分層級，如下圖右側(cè)：

谷歌 Material Design 把頁面分成了 8 個層級：

其中最底層的"代號"為 00dp*，最高層為 24dp（PS：這里的 dp，無需和邏輯像素單位 dp、pt 關(guān)聯(lián)），不同層級的實現(xiàn)方式，是在同一個背景色上，疊加"不透明度"不同的白色。

比如：背景色為#121212， 那么最底層的 00dp 就是#121212 疊加不透明度為 0%的白色；而最上層的 24dp，則是#121212，疊加不透明度為 16%的白色。這樣一來不同層級只要調(diào)整所疊加的白色不透明度即可，操作起來也相對方便。

第三方產(chǎn)品圖

對于第三方不可控的圖片，為圖片加一層黑色遮罩是一種較好的選擇，這樣用戶在瀏覽時眼睛會感到更加舒適，在圖片多且高對比度的場景下，用這種處理方式，在保證易讀性的同時，也可以降低用戶的使用疲勞感。

總結(jié)

深色模式的實用性有多少，每個人看法也不一樣。盡管深色模式的界面可能不像淺色模式那樣觀感清晰，但深色模式的界面卻具有一定的魅力，可以讓你聯(lián)想到新穎，高端，精致，神秘，力量，奢華這些詞。深色模式仍然有很多東西值得我們?nèi)ヌ剿?，但無論是深色模式還是淺色模式，以用戶的可讀性和易讀性為前提進(jìn)行設(shè)計，才能更好地為用戶服務(wù)，提升用戶的使用體驗！