Dark Mode不是夜間模式
Material Design 中推薦的深色模式默認(rèn)最低層顏色為 #121212摇展，而在這之上的層級則使用不同透明度的白色透明層遮罩獲得層級區(qū)分吻氧。深色主題的最底層顏色應(yīng)該達(dá)到 15.8:1 的對比度級別，因?yàn)檫@可以確保即使當(dāng)應(yīng)用于最高層的表面時(shí)，正文文本仍能通過 WCAG 的 AA 標(biāo)準(zhǔn)至少能達(dá)到 4.5:1 對比度盯孙。
在淺色模式下我們使用的一般都是高飽和的顏色鲁森，然而在深色的背景承載下，這些較為濃重的顏色無法滿足 4.5:1 的最低對比度標(biāo)準(zhǔn)振惰。高飽和的顏色在深色的背景下也容易產(chǎn)生視覺抖動(dòng)歌溉，從而導(dǎo)致人眼疲勞。所以在深色模式下我們應(yīng)當(dāng)選擇更低飽和的顏色以達(dá)到更好的可讀性骑晶。
在某些情況下痛垛，色彩需要特殊對待。
1. 品牌色
為了保證品牌 VI 的一致性桶蛔，品牌色可保持原飽和度不變匙头，但對應(yīng)用范圍應(yīng)當(dāng)極其克制，僅限于在個(gè)別元素仔雷，如品牌 Logo 或品牌性的按鈕上蹂析，但界面中的其余部分仍應(yīng)遵循低飽和的配色規(guī)則。
2. 氛圍背景色
如果我們一直采用無色傾的深灰色作為背景碟婆，用戶很容易就會(huì)感到乏味电抚。我們可以嘗試把品牌色融入到背景中去營造氛圍感，把品牌色用極低的透明度與系統(tǒng)默認(rèn)的深色模式背景色疊加竖共，得到的結(jié)果就可以用來作為氛圍色運(yùn)用到設(shè)計(jì)中喻频。但切記，這個(gè)氛圍背景色需要足夠暗肘迎，才可以保證在最高的層級中依然可以保證滿足 4.5:1 的最低對比度。
3. 淺色模式下使用大面積色彩的元素
深色模式的界面整體以深色為主锻煌，在淺色模式下使用大面積色彩的元素妓布，如導(dǎo)航欄、工具欄等在深色模式下應(yīng)避免使用彩色宋梧，因?yàn)樵谏钌Ｊ较逻@些色彩可能會(huì)顯得刺眼匣沼，對比過于強(qiáng)烈，破壞深色模式的沉浸感捂龄。
4. 深色模式下的提示元素
在淺色模式下我們有時(shí)會(huì)使用深色的元素释涛，比如 Toast 提示等。在深色模式下為了讓這樣的模塊依然足夠突出倦沧，我們可以少量的使用淺色底作為模塊的背景唇撬，但僅限于這類面積很小，且需要特別強(qiáng)調(diào)的模塊中展融。
文字
不要在深色模式下使用純白色的文字作為正文窖认，因?yàn)樯钌Ｊ较录儼咨膶Ρ葧?huì)非常強(qiáng)烈，很容易造成視覺疲勞。當(dāng)然為了保證合適的對比度扑浸，文字顏色也不宜過淺烧给。推薦的做法是在文字層級上使用透明度，這樣可以使文字與在不同的氛圍背景色上更和諧喝噪，或者使用 HSB 模式下調(diào)整 B 值的方法確定文字的固定色值础嫡。
圖形
在淺色模式下使用的一些線性圖標(biāo)，如果直接反轉(zhuǎn)拿到深色界面下來用酝惧，你可能會(huì)發(fā)現(xiàn)圖形的形狀感和體積感都損失了很多榴鼎，這是因?yàn)榘咨尘翱梢愿玫谋憩F(xiàn)出形狀，人的大腦可以將白色腦補(bǔ)成圖形的一部分系奉。然而在深色模式下檬贰，這種作用消失了，人腦更傾向于認(rèn)為這些空白的部分是鏤空的缺亮。所以在深色模式下建議把線性圖標(biāo)反轉(zhuǎn)為面性圖標(biāo)翁涤，不過具體的情況可以綜合產(chǎn)品實(shí)際的設(shè)計(jì)風(fēng)格和深色模式下的具體視覺效果再做判斷。
