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

深色模式小結(jié)：

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

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

避免使用純黑色值

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

選擇低飽和度色彩

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

合理使用彩色

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

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

2. 維持指示性

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

我們?cè)跍\色模式中想要突出的信息與元素，在深色模式時(shí)同樣應(yīng)該是突出的。作為背景色，深色模式遵循的設(shè)計(jì)規(guī)則應(yīng)該是離我們?cè)浇脑仡伾綔\，越遠(yuǎn)的顏色越深，用不同的色彩灰度來(lái)模擬淺色模式下的層級(jí)概念。

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

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

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

關(guān)于文字

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

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

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

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

關(guān)于 ICON

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

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

關(guān)于 button

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

關(guān)于陰影

在淺色模式下，我們區(qū)分視覺(jué)層級(jí)通常會(huì)使用投影，陰影 y 值越高 blur 值越大則層級(jí)越高，反之則越低。而在深色模式中，因?yàn)楸尘暗纳钌茈y體現(xiàn)出陰影，這種方案相對(duì)來(lái)說(shuō)就不夠適用了。

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

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

谷歌 Material Design 把頁(yè)面分成了 8 個(gè)層級(jí)：

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

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

第三方產(chǎn)品圖

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

總結(jié)

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