什么是深色模式
深色模式（也有人叫暗黑模式）確實(shí)不是人機(jī)界面領(lǐng)域的新概念了。曾幾何時(shí)，綠色字符呈現(xiàn)在漆黑屏幕上的模式就是我們所擁有的全部。如今的屏幕色彩越來(lái)越豐富，但深色模式依然存在，到底為什么呢？
從使用場(chǎng)景上來(lái)說(shuō)，深色模式是區(qū)別于夜間模式的；
深色模式對(duì)淺色主題的一種場(chǎng)景化補(bǔ)充，是滿(mǎn)足用戶(hù)日間的使用需求，讓使用者更加專(zhuān)注自己的操作任務(wù)，帶來(lái)視覺(jué)沉浸感；所以深色模式在信息內(nèi)容的表達(dá)上會(huì)更注重視覺(jué)性；
同時(shí)，設(shè)置深色模式，會(huì)降低設(shè)備屏幕發(fā)出的亮度，目前的中高端手機(jī)大多采用OLED屏幕，這一材質(zhì)自發(fā)光的特性使得屏幕能夠獨(dú)立控制單個(gè)像素是否發(fā)光，深色主題會(huì)降低設(shè)備屏幕發(fā)出的亮度，同時(shí)仍能滿(mǎn)足最低色彩對(duì)比度。
而傳統(tǒng)的夜間模式更注重于弱光場(chǎng)景下的體驗(yàn)。是從用戶(hù)的健康角度出發(fā)考慮的，當(dāng)用戶(hù)舒服的躺在被窩里，或關(guān)燈玩手機(jī)時(shí)，通過(guò)降低屏幕亮度和對(duì)比度，不會(huì)過(guò)于刺眼，以達(dá)到幫助保護(hù)眼睛的效果。夜間模式在亮光環(huán)境使用時(shí)很可能并不保證所有信息都具有可讀性。
深色模式的優(yōu)點(diǎn)
優(yōu)點(diǎn)一：提升視覺(jué)沉浸感；讓使用者更加專(zhuān)注自己的操作和界面內(nèi)容。
優(yōu)點(diǎn)二：減少屏幕明度；縮小屏幕顯示內(nèi)容與環(huán)境光強(qiáng)度的差距，減少眼睛的負(fù)擔(dān)。
優(yōu)點(diǎn)三：降低耗電量；根據(jù)谷歌官方數(shù)據(jù)來(lái)看，采用OLED屏幕的手機(jī)在「深色模式」下，耗電量可以大幅度下降。
優(yōu)點(diǎn)四：營(yíng)造高端感；深色模式給人以高級(jí)、神秘的語(yǔ)義象征，相比于淺色模式，深色模式藏著更多可能性。
深色模式行業(yè)內(nèi)的設(shè)計(jì)規(guī)范
Material Design的深色模式
（一）應(yīng)用原則：
1. 灰色而不是黑色
使用深灰色而不是黑色來(lái)表示具有更寬深度范圍的環(huán)境中的高度與空間。(解釋?zhuān)河捎谏钌黝}中無(wú)法像常規(guī)MD設(shè)計(jì)中使用陰影，因此使用不同亮度的灰色來(lái)表示Z軸的空間關(guān)系，不以純黑色作為大范圍使用的底色可以提供更寬的色域來(lái)體現(xiàn)Z軸深度關(guān)系)
簡(jiǎn)單說(shuō)下Z軸概念：
一般來(lái)說(shuō)，在平面的界面中想要表現(xiàn)出立體感和深度，我們會(huì)通過(guò)物體陰影或者透視關(guān)系來(lái)表現(xiàn)。在 Material Design 中，Z 軸概念的引入則可以輕松解決這個(gè)問(wèn)題。下圖中，組件在 Z 軸處于不同的高度，間接影響著陰影的表現(xiàn)。
那么引入 Z 軸難道只是為了畫(huà)個(gè)陰影？當(dāng)然不是的！更重要的還是用于表現(xiàn)出 UI 組件的次序及重要程度。下圖中 Card View 在 Z 軸上低于 App bar，因?yàn)檎?lái)說(shuō) Card View 上下滾動(dòng)時(shí)是被遮擋在 App bar 之下的；而 FAB 處于最高的位置（8dp），因?yàn)樗闹匾潭仁亲罡叩?，并且高?App bar 上的 actions。
2. 顏色與強(qiáng)調(diào)
在深色主題中只用有限的顏色用來(lái)做強(qiáng)調(diào)，從而使大部分區(qū)域都使用深色。
3. 節(jié)約能源
在需要效率的產(chǎn)品（例如帶有 OLED 屏幕的設(shè)備）中，通過(guò)減少光像素的使用來(lái)延長(zhǎng)電池壽命。
4. 增強(qiáng)可訪(fǎng)問(wèn)性
通過(guò)滿(mǎn)足可訪(fǎng)問(wèn)性顏色對(duì)比度標(biāo)準(zhǔn)來(lái)滿(mǎn)足常規(guī)深色模式用戶(hù)（例如弱視用戶(hù)）的需求。
（二）特性&特點(diǎn)：
- 對(duì)比度：深色表面和 100% 白色正文的對(duì)比度至少為 15.8:1
- 深度：在更高的海拔水平上，組件通過(guò)顯示較淺的表面顏色來(lái)表達(dá)深度
- 去飽和度：原色去飽和度，因此它們?cè)谒懈叨燃?jí)別都通過(guò)了至少 4.5:1
- 有限的顏色：大表面使用深色表面顏色，具有有限的色彩強(qiáng)調(diào)（淺色、不飽和和明亮、飽和的顏色）
對(duì)比度可以通過(guò)萬(wàn)維網(wǎng)W3C進(jìn)行顏色的對(duì)比檢查，也可以進(jìn)行對(duì)比度的計(jì)算；
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
（三）層級(jí)剖析：
可能看起來(lái)有點(diǎn)混亂，但以上各層級(jí)是遵循MD的Z軸理論的，在深度上有區(qū)別，同時(shí)保證了內(nèi)容的高對(duì)比度。概括下來(lái)即在轉(zhuǎn)變?yōu)樯钌Ｊ降耐瑫r(shí)繼承了常規(guī)場(chǎng)景下的MD的Z軸原則(白色背景下通過(guò)陰影和顏色體現(xiàn)縱深)，同時(shí)還能保證了信息的獲取效率。
（四）屬性：
解釋?zhuān)?/strong>黑色主題使用深灰色而不是黑色作為組件的主要表面顏色。深灰色表面可以表現(xiàn)出更廣泛的顏色、高度和深度，因?yàn)槲覀兏菀卓吹交疑?而不是黑色)上的陰影。
深灰色表面還可以減少眼睛疲勞，因?yàn)樯罨疑砻嫔系臏\色文字比黑色表面上的淺色文字具有更低的對(duì)比度。官方推薦的深色主題的表面顏色：#121212。
1. 海拔高度
在黑暗主題中，組件應(yīng)當(dāng)保留與較亮主題中的組件相同的默認(rèn)高度級(jí)別和陰影，這需要通過(guò)表面的不同亮度來(lái)體現(xiàn)這種縱深高度的區(qū)別。
海拔越高表面越輕：表面高度越高(越接近隱含光源)，表面越輕。通過(guò)應(yīng)用半透明白色覆蓋層來(lái)表達(dá)這種輕盈，隨著表面變高，顏色變淺。深色主題表面是通過(guò)在組件表面上放置半透明覆蓋層來(lái)構(gòu)建的，通過(guò)應(yīng)用半透明白色覆蓋層，表面變得更亮，通過(guò)調(diào)整表面顏色來(lái)表達(dá)高度。
默認(rèn)主題使用陰影來(lái)表達(dá)高度，而深色主題也通過(guò)調(diào)整表面顏色深淺來(lái)表達(dá)高度。
這些表面覆蓋值旨在最大限度地提高易讀性，同時(shí)確保不同的高度水平彼此可辨別。高度疊加透明度范圍從最低級(jí)別的0％到最高級(jí)別的16％。疊加層闡明了組件之間的高度差異。
2. 可訪(fǎng)問(wèn)性與對(duì)比度
深色模式表面必須足夠暗以顯示白色文本。文本和背景之間至少應(yīng)該達(dá)到15.8:1的對(duì)比度級(jí)別。這確保了當(dāng)應(yīng)用于最高(和最輕)高度的表面時(shí)，正文文本通過(guò)WCAG的AA標(biāo)準(zhǔn)至少能達(dá)到4.5:1。如果背景顏色不夠深，無(wú)法在白色文本和表面之間達(dá)到至少15.8:1的對(duì)比度，則最高(和最輕)高度表面的文本將無(wú)法通過(guò)4.5:1標(biāo)準(zhǔn)。
想要使用帶有品牌色的深色該怎么應(yīng)用呢？
要?jiǎng)?chuàng)建帶有品牌的深色背景，可以在推薦的深色主題背景顏色(＃121212)上疊加品牌顏色的透明度。下圖的案例中顏色＃1F1B24是組合深色模式的背景顏色＃121212和8％原色的結(jié)果。
（五）在UI應(yīng)用程序中的運(yùn)用
1. 主題顏色
所有深色主題顏色都應(yīng)顯示具有足夠?qū)Ρ榷鹊脑?，?dāng)應(yīng)用于所有高度的層級(jí)表面時(shí)，WCAG的AA標(biāo)準(zhǔn)至少為4.5:1。使用飽和度低的顏色，以提高可訪(fǎng)問(wèn)性。
一個(gè)黑暗的主題應(yīng)該避免使用過(guò)度飽和的顏色，飽和顏色還會(huì)在深色背景下產(chǎn)生光學(xué)振動(dòng)，這會(huì)引起眼睛疲勞。
相反，不飽和的顏色可以用作更清晰的替代品。避免使用下圖中這樣飽和度過(guò)高的顏色，會(huì)在深色背景下造成視覺(jué)震動(dòng)。
2. 主色的選擇
主要顏色是應(yīng)用程序屏幕和組件中最常顯示的顏色。基于Material Design深色主題的規(guī)范，請(qǐng)使用原色的200色調(diào)；
特殊情況：具有淺表面的組件可以顯示暗主題的主要顏色的變體。如下圖中白色浮層上的文字鏈按鈕使用的700的深色。
https://material.io/design/color/the-color-system.html#tools-for-picking-colors
3. 輔助色的選擇
輔助顏色可用于突出UI的重要部分。在深色模式中，輔助色應(yīng)該降低飽和度以滿(mǎn)足4.5:1的對(duì)比度水平。如下圖，紫色為主色，綠色為輔助色。
4. 強(qiáng)調(diào)色
在深色主題中，灰色界面占據(jù)了UI的大部分。強(qiáng)調(diào)色通常是淺色(不飽和柔和色)或明亮(飽和，鮮艷的色彩)，以幫助強(qiáng)調(diào)元素使其脫穎而出。應(yīng)謹(jǐn)慎使用它們來(lái)強(qiáng)調(diào)關(guān)鍵元素，例如文本或按鈕。
為了在深色主題中提供更多靈活性和可用性，建議在深色主題中使用較淺色調(diào)(200-50)，而不是默認(rèn)顏色主題(飽和色調(diào)范圍為900-500)。
5. 品牌顏色
為了保持品牌標(biāo)識(shí)，品牌顏色可以在深色主題中以完全飽和度使用，但應(yīng)用應(yīng)限于一個(gè)或兩個(gè)品牌元素，例如徽標(biāo)或品牌按鈕。通過(guò)謹(jǐn)慎使用品牌顏色，使元素在層次結(jié)構(gòu)中保持突出。
不飽和的顏色仍應(yīng)在黑暗主題UI的其余部分中使用，如下圖：
6. 錯(cuò)誤顏色
錯(cuò)誤顏色用于指示錯(cuò)誤狀態(tài)。對(duì)于谷歌規(guī)范中，深色模式錯(cuò)誤顏色為＃CF6679。這種深色主題顏色是通過(guò)采用淺色主題錯(cuò)誤顏色(＃B00020)并使用40％白色覆蓋物照亮它來(lái)創(chuàng)建的，該顏色通過(guò)了AA級(jí)對(duì)比度標(biāo)準(zhǔn)。
7. 文字顏色
深色背景下的文字顏色：
當(dāng)淺色文本出現(xiàn)在深色背景上(此處顯示為黑色)時(shí)，應(yīng)使用以下不透明度級(jí)別：
- 高強(qiáng)度文本的不透明度為87％；
- 中等重點(diǎn)文字和提示文字的透明度為60％；
- 禁用文字的不透明度為38％；
iOS的深色模式
（一）iOS顏色
iOS引用了6中不同的灰度，在深色模式下，采用純黑色作為背景，用不同程度的灰色來(lái)承載頁(yè)面內(nèi)容。
（二）層級(jí)
iOS通過(guò)背景、投影來(lái)表達(dá)層級(jí)關(guān)系。列表內(nèi)容至于純黑色背景的上方，表明層級(jí)越高的內(nèi)容，背景顏色就會(huì)越亮一些；
深色模式的設(shè)計(jì)建議
1.不要簡(jiǎn)單的將白變黑或者隨意減低亮度
通過(guò)背景顏色、卡片顏色、文字顏色來(lái)建立信息層級(jí)，讓內(nèi)容更好的呈現(xiàn)出來(lái)。
2.不要使用純黑色背景和純白色文字
不要同時(shí)使用純黑色（#000000）和純白色（￥ffffff）作為文本顏色。高強(qiáng)度對(duì)比會(huì)對(duì)用戶(hù)產(chǎn)生視覺(jué)疲勞。
3.注意UGC產(chǎn)品的顏色適配
在微信公眾號(hào)可以看到，部分在白色模式下很美觀的排版，但是在深色模式下，出現(xiàn)內(nèi)容看不清的情況，在設(shè)計(jì)上給到用戶(hù)較好的選擇，盡量避免透明圖片的使用。
如何設(shè)計(jì)深色模式
1.建立色彩規(guī)范
建立色彩規(guī)范，在在純黑色（#000000）背景中或者（#121212）背景中，加入20%的品牌色，然后通過(guò)調(diào)整HSB的B值，得到有序的系列背景色；
2.文字規(guī)范
在淺色模式下，我們大多數(shù)用過(guò)一套很常規(guī)的標(biāo)準(zhǔn)文字色值：#333、#666、#999、#ccc，通過(guò)查看它們的HSB可以發(fā)現(xiàn)，分別對(duì)應(yīng)的是（H0 S0 B20）、（H0 S0 B40）、（H0 S0 B60）、（H0 S0 B80），這些文字色值也是遵循20、40、60、80序列值做顏色層級(jí)，在深色模式下，我們也可以這樣做。
