近年來暗黑模式的設(shè)計趨勢開始一點(diǎn)點(diǎn)明顯，Ant Design 在這次 4.0 的升級中也對這類暗黑場景化的設(shè)計開始進(jìn)行初步的探索，接下來就讓我們一起來看下 Ant Design 這一針對企業(yè)級的設(shè)計體系是如何設(shè)計暗黑模式的。

什么是暗黑模式

暗黑模式是指把所有 UI 換成黑色或者深色的一個模式。

需要說明的是，暗黑模式不只夜間模式：

暗黑模式更多的目的是希望使用者更加專注自己的操作任務(wù)，所以對于信息內(nèi)容的表達(dá)會更注重視覺性；

而夜間模式則更多是出于在夜間或暗光環(huán)境使用下的健康角度考慮，避免在黑暗環(huán)境中長時間注視高亮光源帶來的視覺刺激，所以在保證可讀性的前提下，會采用更弱的對比來減少屏幕光對眼睛的刺激。

同時，從使用場景上來說，暗黑模式既可以在黑暗環(huán)境，也可以在亮光環(huán)境下使用，可以理解為是對淺色主題的一種場景化補(bǔ)充，而夜間模式只建議在黑暗環(huán)境下使用，在亮光環(huán)境使用時很可能并不保證信息可讀性。

為什么 Ant Design 要做暗黑模式

1. 更加專注內(nèi)容

試想一下，我們在電影院看電影時，為什么要全場關(guān)燈？甚至有些 APP，在影片的下方也會又一個模擬關(guān)燈效果的操作，來讓整個手機(jī)屏幕變黑，只剩下視屏畫面的部分，這都幫助我們可以更專注、更沉浸在當(dāng)前的內(nèi)容下。

色彩具有層級關(guān)系，深色會在視覺感官上自動后退，淺色部分則會向前延展，這樣對比強(qiáng)烈的層次關(guān)系可以讓用戶更注重被凸顯出來的內(nèi)容和交互操作；尤其在信息負(fù)責(zé)界面內(nèi)層級關(guān)系的合理拉開對操作效率都有明顯的促進(jìn)作用。

2. 在暗光環(huán)境下更加適用

如今社會我們身處黑夜使用手機(jī)、電腦、iPad等設(shè)備的次數(shù)越來越多，環(huán)境光與屏幕亮度的明暗差距在夜間會被放大 ，亮度對比帶來視覺刺激也更加明顯，使用暗色模式可以縮小屏幕顯示內(nèi)容與環(huán)境光強(qiáng)度的差距，同時也可以為設(shè)備的續(xù)航帶來積極影響，可以保證使用者在暗光環(huán)境下使用 OLED 設(shè)備的舒適度。

3. 大眾喜愛

黑色一直以來就可以給人以高級、神秘的語義象征，相比于淺色模式，暗色模式藏著更多可能性。

設(shè)計原則

在這次暗黑模式的設(shè)計中主要遵循以下兩大設(shè)計原則：

1. 內(nèi)容的舒適性

不論是顏色還是文字或是組件本身，在暗色環(huán)境下的使用感受應(yīng)當(dāng)是舒適的，而不是十分費(fèi)力的，如果一個顏色在淺色下使用正常，在暗色下卻亮的刺眼或根本看不見，那必然不夠舒適也不可讀；所以在顏色的處理上不建議直接使用，這樣會讓界面變得到處都是「亮點(diǎn)」，讓眼睛不適的同時，也會帶來許多誤操作。

2. 信息的一致性

暗黑模式下的信息內(nèi)容需要和淺色模式保持一致性，不應(yīng)該打破原有的層級關(guān)系。舉個例子，在淺色模式下越深的顏色，與界面背景色對比度越大，也就越容易被人注意，視覺層級越高，比如 tooltip；在暗黑模式下我們同樣需要遵循這一規(guī)律，所以對應(yīng)所使用的顏色也就越淺，反之則會越深。

如何設(shè)計

1. 界面層級

在大量的企業(yè)級產(chǎn)品界面中，我們通常用只用一個白色背景結(jié)合分割線就可以搞定所有界面的板塊層級，因?yàn)樵跍\色模式下有投影可以借助，然而暗黑模式中投影將不足以起到如此功效，我們需要通過顏色來區(qū)分層級關(guān)系。

在經(jīng)過對螞蟻企業(yè)級頁面的典型布局結(jié)構(gòu)評估后，我們在中性色中增加了三個梯度，將中性色擴(kuò)展至 13 個

并定義出通用情況下頁面中的框架層次，主要分為三大塊：

• 應(yīng)用框架：也就是我們平時定義的導(dǎo)航欄，也是在大結(jié)構(gòu)中最上層的一部分
• 內(nèi)容組件：指頁面中的具體內(nèi)容，通常情況下以區(qū)塊的形式存在，作為第二層級
• 頁面容器：顧名思義，指頁面級別的容器盒子，可容納頁面中的所有內(nèi)容，可以理解為是一個背景板，也就是最末層

在目前的暗黑體系下，我們分別為這三大塊從淺到深定義了#1F1F1F、#141414、#000000 三個顏色，在實(shí)際應(yīng)用中，你也可以根據(jù)自身業(yè)務(wù)的需求，從中性色板中直接選用或是依據(jù)透明度的思路自定義出合適的中性色彩。當(dāng)定義出較為明確的框架層次和顏色后，也對后續(xù)系統(tǒng)中組件的顏色配置有著重要的指導(dǎo)意義。我們需要考慮組件出現(xiàn)在不同顏色背景下的可能性及其表現(xiàn)，盡量保持一致性。

2. 色彩

眾所周知，暗黑模式與淺色模式最大的不同就在色彩的處理上，在暗黑模式中，我們并不想打破淺色模式下基礎(chǔ)色板的配置規(guī)律及色值，當(dāng)一個應(yīng)用或站點(diǎn)深淺模式并存時，希望在色彩上有一定延續(xù)和關(guān)聯(lián)，而不是毫不相關(guān)的兩套色板，這樣一是避免開發(fā)及后續(xù)的維護(hù)成本，二是實(shí)際切換和使用時，可以保證一致性，這意味著需要借助一定規(guī)則。

這里分享一下我們的處理思路：

基于 Ant Design 自然的設(shè)計價值觀，我們先從自然界中尋找靈感，如果說淺色模式如同初升時的朝陽，那暗黑模式就是落日下的晚霞，各有各的韻味，同一片天，唯一不同的是，受光線亮度的影響，晚霞整體會暗一些。

所以我們大體的設(shè)計思路也是基于淺色的基礎(chǔ)色板，通過結(jié)合透明度的轉(zhuǎn)換，去得到一套暗黑模式下的色彩。這樣的好處是，深淺模式下的色彩根基是同一個，在這樣的基礎(chǔ)上經(jīng)過透明度的變換得到的結(jié)果也會相對和諧，同時也符合我們一致性的原則。

這里我們借助下面這兩個概念對透明度進(jìn)行轉(zhuǎn)換：

對比度極性

對比度極性分為正極性和負(fù)極性。

• 對比度正極性：指在電子文本中文本為深色，背景色為淺色
• 對比度負(fù)極性：指在電子文本中文本為淺色，背景色為深色

這里可以給大家分享對比度查閱的一個工具：WebAIM，只要輸入色值就可以看到具體的值，十分方便。

正負(fù)極性差值

顧名思義便是正負(fù)兩者的差值，這里取的是絕對值。

根據(jù)一致性原則，我們嘗試通過對比一套顏色的正負(fù)極性變化趨勢來找到轉(zhuǎn)換規(guī)律。

首先可以看下，如果一個顏色在不做任何修改的前提下直接使用，它的正負(fù)極性趨勢以及差值趨勢的走勢和關(guān)系是怎么樣的，我們嘗試描繪出這樣的曲線，他們的變化規(guī)律也將作為我們規(guī)則轉(zhuǎn)換的參考標(biāo)準(zhǔn)。

經(jīng)過對比，可以發(fā)現(xiàn)一些變化規(guī)律：

首先來說下「差值趨勢」，橫向?qū)Ρ瓤梢园l(fā)現(xiàn)，不同顏色的正負(fù)極性走勢是很不一樣的，可以看到在黃綠色段差值曲線達(dá)到一個變化峰值，這是由于黃綠色本身由于明度、飽和度值相比其他顏色偏高，所以總是有種刺眼的感覺，生活中也會用它來作為警示、提醒的作用，所以在深淺背景下的對比度有一個比較大的差異，可以說這個變化是正常的。

這點(diǎn)也可以從「正負(fù)對比度極性趨勢」兩者間的相對關(guān)系反應(yīng)出來，從紅色到洋紅，綠線一開始從逐漸在藍(lán)線的上方一點(diǎn)，開始逐漸上移，最后在峰值處開始慢慢下移，在「極客藍(lán)」這個色相中接近重疊，在洋紅處又慢慢下移，說明淺色下越深的顏色，在深色中越亮，反之則越暗。

縱向比對單個色板，可以發(fā)現(xiàn)，其斜率變化主要受顏色的明度、飽和度影響，可以反應(yīng)一個顏色的不同梯度在黑白背景下的變化規(guī)律。

有了這個大的變化規(guī)律，我們便可做到心中有數(shù)。首先以 Ant Design 的品牌色「破曉藍(lán)」為例，經(jīng)過在多個業(yè)務(wù)、場景中不斷嘗試與調(diào)整，我們得到一個透明度轉(zhuǎn)換規(guī)則：

并將這個規(guī)則應(yīng)用在其他 11 套色板中，驗(yàn)證其可用性。這個過程確實(shí)沒有什么快捷通道，唯一的辦法就是不斷嘗試。

最后，我們將經(jīng)過規(guī)則轉(zhuǎn)換的實(shí)色與常規(guī)顏色的變化趨勢做對比：

可以看到在大趨勢走向上左右兩側(cè)圖基本一致，這代表兩個色板在變化規(guī)律接近一致，基本可以證明規(guī)則的合理性。區(qū)別在于，對比度負(fù)極性和差值相對于右側(cè)未經(jīng)處理的值明顯有所下降。這是由于透明度的處理讓暗色下的顏色在明度、飽和度上有所下降導(dǎo)致。

再仔細(xì)觀察可以發(fā)現(xiàn)，在左側(cè)的常規(guī)顏色中，從破曉藍(lán)-洋紅這段偏冷色系幾個顏色中，差值趨勢變化最平緩的是「極客藍(lán)」這顏色，這說明該顏色在深淺背景下的表現(xiàn)較為穩(wěn)定，起伏不大，當(dāng)基于一個統(tǒng)一的透明度規(guī)則前提下，會讓它在暗色下的對比度減弱，所以反而會導(dǎo)致差值趨勢變大，所以我們會發(fā)現(xiàn)差值趨勢變化較小的顏色轉(zhuǎn)移到了「破曉藍(lán)」、「洋紅」中，也是一個正?，F(xiàn)象。

最后可以看到顏色在調(diào)整過后實(shí)際應(yīng)用的效果

在官網(wǎng)中點(diǎn)擊「切換」即可預(yù)覽：

如果上述 12 個色板不滿足你的業(yè)務(wù)需求，你也可以在官網(wǎng)上自己選擇顏色，我們會根據(jù)規(guī)則幫你生成一個暗色色板。

另外，如果在實(shí)際應(yīng)用過程中，你選了色相在 225～325 間的深冷色系作為主色或強(qiáng)調(diào)色使用，建議適當(dāng)提高透明度的值，避免在暗色界面上引起閱讀障礙。

3. 文字

暗黑模式中，文字的使用與淺色模式基本一致，依舊從 85%-65%-45%，唯一不同的地方在 disable 的狀態(tài)，其透明度值提升為 30%，避免顏色過淡真的「不可見」。另外，對于 #FFFFFF 的純白色文字，盡量避免大面積使用，尤其對于表格、列表這類偏閱讀瀏覽的場景，如有需要，做小范圍強(qiáng)調(diào)即可。

4. 陰影

暗黑模式中的陰影規(guī)則與淺色模式基本保持一致，但由于本身的界面背景較深，在陰影色值上也有所加深，幫助層次更好的體現(xiàn)，整體將色值擴(kuò)大到原先的 4 倍，但在陰影的位移、擴(kuò)展上均保持不變。

5. 分割線

分割線在暗黑模式中建議根據(jù)界面中常用的背景色，通過透明度換算成實(shí)色使用，Ant Design 中分割線主要有 #434343 和 #303030 兩種顏色，分別對應(yīng)淺色模式下的 #D9D9D 和 #F0F0F0，這樣做的目的主要是為了避免帶來額外的交錯疊加，尤其對于表格類以及很多帶有 border 屬性的組件，實(shí)色會更為穩(wěn)妥便于記憶。

適應(yīng)性

適應(yīng)性方面，Ant Design 的暗黑模式可以與海兔及可視化資產(chǎn)進(jìn)行無縫銜接，使用時可以任意組合拖拽，你可以下載 Kitchen 插件，獲取海量資產(chǎn)。

結(jié)語

暗黑模式最近越來越受到人們的關(guān)注，與某一特定產(chǎn)品的暗黑設(shè)計不同，Ant Design 的暗黑模式更多以設(shè)計體系的角度考慮企業(yè)級這個大場景下的內(nèi)容，在易用性、擴(kuò)展度、復(fù)用度等方面還有許多需要完善和繼續(xù)研究探索的地方，我們會在未來的迭代中逐步進(jìn)行，先完成再完善。希望上述內(nèi)容能對大家在暗黑模式的設(shè)計上有所幫助。

文章來源：優(yōu)設(shè)    作者：AlibabaDesign

藍(lán)藍(lán)設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)