/?為什么我們需要深色模式？/
由于電子設(shè)備的屏幕是主動(dòng)發(fā)光式的容握，它們發(fā)出的光線會(huì)比我們生活中接觸的物品更具刺激性侧戴，而深色模式可以顯著降低屏幕的整體視覺亮度，減少眼睛的視覺壓力喷市。在深色模式下相种，所有的界面元素都退居幕后，使得我們真正與之交互和操作的內(nèi)容可以被凸顯出來品姓，這也是為什么眾多專業(yè)的圖像寝并、視頻等編輯軟件普遍采用深色界面作為默認(rèn)外觀。其實(shí)深色模式不僅僅可以被那些專業(yè)生產(chǎn)力工具所用腹备，對(duì)任何想要追求專注和沉浸式使用體驗(yàn)的用戶來說衬潦，深色模式都將會(huì)使他們獲益匪淺。
同時(shí)隨著OLED屏幕的普及植酥，支持深色模式更有了一定的現(xiàn)實(shí)意義：省電镀岛！由于OLED屏幕中每個(gè)像素都是自主發(fā)光而非LCD由整個(gè)一塊背光面板發(fā)光，所以在顯示深色元素時(shí)像素所消耗的電流更低友驮，在純黑色下像素點(diǎn)可以完全關(guān)閉達(dá)到省電的效果漂羊。
Youtube 同一界面深淺兩種模式下屏幕的電流對(duì)比，可以看到同樣的界面卸留，最高亮度下深色模式降低了 60% 的耗電量走越。
除此以外深色模式如此備受廠商熱衷的另一個(gè)原因：酷炫！沒錯(cuò)耻瑟，酷炫买喧！我們?cè)诳苹秒娪爸锌吹降念H具未來感的概念界面多數(shù)都是以深色為主，這也潛移默化的影響了我們的審美匆赃。同時(shí)自從扁平化風(fēng)潮流行起來以后淤毛，千篇一律的素白界面也很容易讓用戶產(chǎn)生審美疲勞，對(duì)與各家系統(tǒng) OS 廠商來說算柳，增加一個(gè)系統(tǒng)全局性的深色模式可以無需對(duì) UI 進(jìn)行大刀闊斧改革的同時(shí)達(dá)到讓用戶耳目一新的效果低淡，這一點(diǎn)對(duì)于你自己的 App 來說也是一樣的。
/ Dark Mode 不是夜間模式瞬项！/
很多國(guó)內(nèi)的 App 總是把深色模式理解為夜間模式蔗蹋，認(rèn)為用戶在夜間喜歡更暗更低對(duì)比度的界面，然而這陷入了一個(gè)誤區(qū)囱淋，用戶確實(shí)需要夜間使用不刺眼猪杭，但達(dá)到這一目的并不意味著需要放棄對(duì)比度。其實(shí)在深色模式下當(dāng)頁面的背景由白色反轉(zhuǎn)為黑灰色時(shí)妥衣，我們已經(jīng)極大減少了電子屏幕發(fā)出的光亮皂吮，而配合設(shè)備的環(huán)境光傳感器自動(dòng)亮度調(diào)節(jié)已經(jīng)可以使界面整體的亮度滿足用戶在暗光環(huán)境下的使用戒傻。而且系統(tǒng)級(jí)的深色模式下，各個(gè) App 之間保持相對(duì)統(tǒng)一的對(duì)比度對(duì)用戶的實(shí)際體驗(yàn)也更好蜂筹，否則當(dāng)下的很多 App 夜間模式由于對(duì)比度太低用戶看不清文字需纳，反倒不得不調(diào)高屏幕亮度，而一旦跳到其他沒有夜間模式的 App 更是會(huì)被亮瞎眼艺挪。
另外前面已經(jīng)提到不翩，用戶使用深色模式的理由有很多，在暗光環(huán)境下減少視覺疲勞只是其中一種麻裳，即使在白天很多用戶也會(huì)長(zhǎng)期打開深色模式口蝠。這意味著在深色模式下你的界面設(shè)計(jì)依然必須考慮可讀性，依然需要滿足 WCAG 2.0（Web內(nèi)容可訪問性指南）中規(guī)定的 AA 級(jí)標(biāo)準(zhǔn)即最低 4.5:1 的對(duì)比度津坑。
WCAG 中對(duì)對(duì)比度的標(biāo)準(zhǔn)可以很好的幫助設(shè)計(jì)師檢查自己設(shè)計(jì)界面的可讀性亚皂，尤其是對(duì)于那些本來就患有視力障礙的用戶來說，低于 AA 級(jí)標(biāo)準(zhǔn)4.5:1 對(duì)比度的正文可讀性非常差国瓮。我們可以使用色彩對(duì)比度計(jì)算器來檢查自己的配色是否符合 AA 級(jí)標(biāo)準(zhǔn)灭必。
Color Review - 色彩對(duì)比度檢查工具：
/ Dark Mode并非簡(jiǎn)單的反色處理 /
iOS 目前已經(jīng)在設(shè)置里提供一個(gè)叫做智能反轉(zhuǎn)的選項(xiàng)，可以把除媒體以外的界面元素顏色按其對(duì)比色全部自動(dòng)反轉(zhuǎn)乃摹，但實(shí)際效果卻差強(qiáng)人意禁漓。因?yàn)樯钌Ｊ讲⒎菍?duì)淺色界面的簡(jiǎn)單反轉(zhuǎn)，如淺色界面下的深色陰影孵睬，在深色模式下該如何處理呢播歼？直接反色成為淺色光暈嗎？然而這樣做會(huì)打破UI原有的視覺層級(jí)和空間感掰读。如果使用與淺色模式下相同的陰影在深色模式往往又達(dá)不到足夠的深度感秘狞。這些問題都需要我們?cè)谏钌Ｊ较虏捎靡惶仔碌囊曈X設(shè)計(jì)規(guī)范，由于 iOS 目前還沒有關(guān)于深色模式的設(shè)計(jì)規(guī)范蹈集，但 Google 在 Android P 推出后烁试，在 Material Design 官網(wǎng)上已經(jīng)更新了他們?cè)谠O(shè)計(jì)深色模式時(shí)的一整套設(shè)計(jì)規(guī)范，并且蘋果在 macOS 的視覺規(guī)范中也已經(jīng)更新了深色模式相關(guān)的內(nèi)容拢肆，這些都可以成為我們的參考减响，為 iOS 即將到來的深色模式做好準(zhǔn)備。
在這里我整理了各家視覺規(guī)范中的一些要點(diǎn)郭怪，希望對(duì)大家有所幫助：
/ 界面層級(jí)/
作為 UI 設(shè)計(jì)師我們都知道 UI 中視覺層級(jí)的重要支示，那么在深色模式下如何確保視覺層級(jí)依然有效呢？Material Design 在淺色模式時(shí)使用在白色卡片下投射陰影的形式來模擬現(xiàn)實(shí)世界的空間深度感鄙才，而在深色模式下颂鸿，尤其是當(dāng)背景已經(jīng)很深時(shí)如何表現(xiàn)深度呢？記住一個(gè)原則：元素層級(jí)越高攒庵，其承載面的顏色越淺嘴纺。
讓我們假想界面上方有一盞光源败晴，離這盞光源越近，界面元素的層級(jí)越高颖医，它的表面也將被照得越亮。因此在不同層級(jí)間應(yīng)用不同級(jí)別的灰度裆蒸，可以使界面層級(jí)更加突出熔萧。使用深灰而不是純黑也可使得陰影更容易發(fā)揮作用。
Material Design 中推薦的深色模式默認(rèn)最低層顏色為 #121212僚祷，而在這之上的層級(jí)則使用不同透明度的白色透明層遮罩獲得層級(jí)區(qū)分佛致。深色主題的最底層顏色應(yīng)該達(dá)到 15.8：1 的對(duì)比度級(jí)別，因?yàn)檫@可以確保即使當(dāng)應(yīng)用于最高層的表面時(shí)辙谜，正文文本仍能通過 WCAG 的 AA 標(biāo)準(zhǔn)至少能達(dá)到 4.5：1 對(duì)比度俺榆。
/ 注意事項(xiàng) /
不要在深色模式的高層級(jí)元素下使用淺色的陰影，因?yàn)樗雌饋砀袷枪鈺炞岸摺６@會(huì)破壞界面的空間結(jié)構(gòu)罐脊，真實(shí)世界里物體并不會(huì)投射比自身顏色更淺的陰影。
部分 App 可能會(huì)為使用 OLED 設(shè)備的用戶提供純黑底色的界面蜕琴，以達(dá)到更佳的省電效果萍桌。但這只是一種可選項(xiàng)，完全使用純黑底會(huì)導(dǎo)致界面層級(jí)不易表現(xiàn)凌简，很容易限制設(shè)計(jì)發(fā)揮上炎，只有在產(chǎn)品視覺層級(jí)非常簡(jiǎn)單且明確的情況下可以酌情采用。并且記住對(duì)與 OLED 屏幕來說在滾動(dòng)屏幕時(shí)像素點(diǎn)頻繁的切換開閉狀態(tài)可能會(huì)導(dǎo)致一定延遲雏搂，造成文字產(chǎn)生拖尾現(xiàn)象藕施。
/ 色彩 /
深色模式下的色彩需要與背景有足夠的對(duì)比度,當(dāng)用于正文字號(hào)時(shí)，在任何界面層級(jí)中都至少需要保證滿足 WCAG 2.0 AA 級(jí)標(biāo)準(zhǔn)即至少 4.5:1 的對(duì)比度凸郑。
在淺色模式下我們使用的一般都是高飽和的顏色裳食，然而在深色的背景承載下，這些較為濃重的顏色無法滿足 4.5:1 的最低對(duì)比度標(biāo)準(zhǔn)芙沥。高飽和的顏色在深色的背景下也容易產(chǎn)生視覺抖動(dòng)胞谈，從而導(dǎo)致人眼疲勞。所以在深色模式下我們應(yīng)當(dāng)選擇更低飽和的顏色以達(dá)到更好的可讀性憨愉。
當(dāng)前 Google 在 Android P 以及蘋果在 macOS 中都已經(jīng)加入了在同色系下深淺模式自動(dòng)適應(yīng)兩套配色方案的相關(guān) API烦绳，在 iOS 13 中蘋果也很可能加入類似的功能。這意味著今后設(shè)計(jì)師將需要為自己的 App 色板定義深淺兩套方案配紫，在這個(gè)語境下一種色彩不再之只對(duì)應(yīng)一個(gè)色值径密，每個(gè)顏色都將有高飽和和低飽和的兩種版本。開發(fā)者應(yīng)該使用語義化的顏色名稱而不是絕對(duì)色值躺孝，剩下的就交由系統(tǒng)自動(dòng)適配吧享扔。
在某些情況下底桂，色彩需要特殊對(duì)待：
1. 品牌色
為了保證品牌 VI 的一致性，品牌色可保持原飽和度不變惧眠，但對(duì)應(yīng)用范圍應(yīng)當(dāng)及其克制籽懦，僅限于在個(gè)別元素如品牌 Logo 或品牌性的按鈕上，但界面中的其余部分仍應(yīng)遵循低飽和的配色規(guī)則氛魁。
2. 氛圍背景色
如果我們一直采用無色傾的深灰色作為背景暮顺，用戶很容易就會(huì)感到乏味。我們可以嘗試把品牌色融入到背景中去營(yíng)造氛圍感秀存，把品牌色用極低的透明度與系統(tǒng)默認(rèn)的深色模式背景色疊加捶码，得到的結(jié)果就可以用來作為氛圍色運(yùn)用到設(shè)計(jì)中。但切記或链，這個(gè)氛圍背景色需要足夠暗惫恼，才可以保證在最高的層級(jí)中依然可以保證滿足 4.5:1 的最低對(duì)比度。
Material Design 中推薦作為底層背景的顏色至少需要與文字有15.8:1的對(duì)比度澳盐，才能保證在MD規(guī)范下最高也是最淺的層級(jí)滿足4.5:1的最低比對(duì)比度標(biāo)準(zhǔn)祈纯。
3. 淺色模式下使用大面積色彩的元素
深色模式的界面應(yīng)整體以深色為主，在淺色模式下使用大面積色彩的元素叼耙，如導(dǎo)航欄盆繁、工具欄等在深色模式下應(yīng)避免使用彩色，因?yàn)樵谏钌Ｊ较逻@些色彩可能會(huì)顯得刺眼旬蟋，對(duì)比過于強(qiáng)烈油昂，破壞深色模式的沉浸感。
4. 深色模式下的提示元素
在淺色模式下我們有時(shí)會(huì)使用深色的元素倾贰，比如Toast提示等冕碟。在深色模式下為了讓這樣的模塊依然足夠突出，我們可以少量的使用淺色底作為模塊的背景匆浙，但僅限于這類面積很小安寺，且需要特別強(qiáng)調(diào)的模塊中。
/ 文字/
不要在深色模式下使用純白色的文字作為正文首尼，因?yàn)樯钌Ｊ较录儼咨膶?duì)比會(huì)非常強(qiáng)烈挑庶，很容易造成視覺疲勞。當(dāng)然為了保證合適的對(duì)比度软能，文字顏色也不宜過淺迎捺。推薦的做法是在文字層級(jí)上使用透明度，這樣可以使文字與在不同的氛圍背景色上更和諧查排，或者使用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)格和深色模式下的具體視覺效果再做判斷椒功。
/ 結(jié)語 /
以上就是為大家總結(jié)的深色模式設(shè)計(jì)中的一些重要的點(diǎn)，在 iOS 13 正式推出系統(tǒng)級(jí)的深色模式后玫锋，這必然會(huì)成為設(shè)計(jì)師逃不過去的一個(gè)坎蛾茉，當(dāng)用戶開啟系統(tǒng)全局的深色模式后突然出現(xiàn)一個(gè)不支持的 App讼呢，你的 App 就會(huì)顯得特別刺眼撩鹿，甚至有些用戶可能會(huì)不得不去尋找支持這一模式的替代品。這意味著今后設(shè)計(jì)過程中設(shè)計(jì)師們不得不關(guān)注兩套模式下的不同效果悦屏，確定一套適配規(guī)范讓系統(tǒng)自動(dòng)調(diào)整你的 App 外觀节沦，并在某些情況下為部分界面單獨(dú)設(shè)計(jì)，設(shè)計(jì)組件化在此刻也顯得無比重要了础爬。
由于 iOS 13 還未正式推出甫贯，iOS 對(duì)深色模式的視覺規(guī)范還并不清晰，這篇文章中并不會(huì)過多地探究具體的細(xì)節(jié)看蚜，其中提到的很多點(diǎn)都是普適性的概念叫搁。在 iOS 13 正式發(fā)布后，針對(duì) iOS 的深色模式規(guī)范我會(huì)帶來更詳細(xì)的解讀。
