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

什麼是暗黑模式

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

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

暗黑模式更多的目的是希望使用者更加專注自己的操作任務，所以對於信息內容的表達會更注重視覺性；

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

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

爲什麼 Ant Design 要做暗黑模式

1. 更加專注內容

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

色彩具有層級關係，深色會在視覺感官上自動後退，淺色部分則會向前延展，這樣對比強烈的層次關係可以讓用戶更注重被凸顯出來的內容和交互操作；尤其在信息負責界面內層級關係的合理拉開對操作效率都有明顯的促進作用。

2. 在暗光環境下更加適用

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

3. 大衆喜愛

黑色一直以來就可以給人以高級、神祕的語義象徵，相比於淺色模式，暗色模式藏着更多可能性。

設計原則

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

1. 內容的舒適性

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

2. 信息的一致性

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

如何設計

1. 界面層級

在大量的企業級產品界面中，我們通常用只用一個白色背景結合分割線就可以搞定所有界面的板塊層級，因爲在淺色模式下有投影可以藉助，然而暗黑模式中投影將不足以起到如此功效，我們需要通過顏色來區分層級關係。

在經過對螞蟻企業級頁面的典型佈局結構評估後，我們在中性色中增加了三個梯度，將中性色擴展至 13 個

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

• 應用框架：也就是我們平時定義的導航欄，也是在大結構中最上層的一部分
• 內容組件：指頁面中的具體內容，通常情況下以區塊的形式存在，作爲第二層級
• 頁面容器：顧名思義，指頁面級別的容器盒子，可容納頁面中的所有內容，可以理解爲是一個背景板，也就是最末層

在目前的暗黑體系下，我們分別爲這三大塊從淺到深定義了#1F1F1F、#141414、#000000 三個顏色，在實際應用中，你也可以根據自身業務的需求，從中性色板中直接選用或是依據透明度的思路自定義出合適的中性色彩。當定義出較爲明確的框架層次和顏色後，也對後續系統中組件的顏色配置有着重要的指導意義。我們需要考慮組件出現在不同顏色背景下的可能性及其表現，儘量保持一致性。

2. 色彩

衆所周知，暗黑模式與淺色模式最大的不同就在色彩的處理上，在暗黑模式中，我們並不想打破淺色模式下基礎色板的配置規律及色值，當一個應用或站點深淺模式並存時，希望在色彩上有一定延續和關聯，而不是毫不相關的兩套色板，這樣一是避免開發及後續的維護成本，二是實際切換和使用時，可以保證一致性，這意味着需要藉助一定規則。

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

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

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

這裏我們藉助下面這兩個概念對透明度進行轉換：

對比度極性

對比度極性分爲正極性和負極性。

• 對比度正極性：指在電子文本中文本爲深色，背景色爲淺色
• 對比度負極性：指在電子文本中文本爲淺色，背景色爲深色

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

正負極性差值

顧名思義便是正負兩者的差值，這裏取的是絕對值。

根據一致性原則，我們嘗試通過對比一套顏色的正負極性變化趨勢來找到轉換規律。

首先可以看下，如果一個顏色在不做任何修改的前提下直接使用，它的正負極性趨勢以及差值趨勢的走勢和關係是怎麼樣的，我們嘗試描繪出這樣的曲線，他們的變化規律也將作爲我們規則轉換的參考標準。

經過對比，可以發現一些變化規律：

首先來說下「差值趨勢」，橫向對比可以發現，不同顏色的正負極性走勢是很不一樣的，可以看到在黃綠色段差值曲線達到一個變化峯值，這是由於黃綠色本身由於明度、飽和度值相比其他顏色偏高，所以總是有種刺眼的感覺，生活中也會用它來作爲警示、提醒的作用，所以在深淺背景下的對比度有一個比較大的差異，可以說這個變化是正常的。

這點也可以從「正負對比度極性趨勢」兩者間的相對關係反應出來，從紅色到洋紅，綠線一開始從逐漸在藍線的上方一點，開始逐漸上移，最後在峯值處開始慢慢下移，在「極客藍」這個色相中接近重疊，在洋紅處又慢慢下移，說明淺色下越深的顏色，在深色中越亮，反之則越暗。

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

有了這個大的變化規律，我們便可做到心中有數。首先以 Ant Design 的品牌色「破曉藍」爲例，經過在多個業務、場景中不斷嘗試與調整，我們得到一個透明度轉換規則：

並將這個規則應用在其他 11 套色板中，驗證其可用性。這個過程確實沒有什麼快捷通道，唯一的辦法就是不斷嘗試。

最後，我們將經過規則轉換的實色與常規顏色的變化趨勢做對比：

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

再仔細觀察可以發現，在左側的常規顏色中，從破曉藍-洋紅這段偏冷色系幾個顏色中，差值趨勢變化最平緩的是「極客藍」這顏色，這說明該顏色在深淺背景下的表現較爲穩定，起伏不大，當基於一個統一的透明度規則前提下，會讓它在暗色下的對比度減弱，所以反而會導致差值趨勢變大，所以我們會發現差值趨勢變化較小的顏色轉移到了「破曉藍」、「洋紅」中，也是一個正常現象。

最後可以看到顏色在調整過後實際應用的效果

在官網中點擊「切換」即可預覽：

如果上述 12 個色板不滿足你的業務需求，你也可以在官網上自己選擇顏色，我們會根據規則幫你生成一個暗色色板。

另外，如果在實際應用過程中，你選了色相在 225～325 間的深冷色系作爲主色或強調色使用，建議適當提高透明度的值，避免在暗色界面上引起閱讀障礙。

3. 文字

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

4. 陰影

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

5. 分割線

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

適應性

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

結語

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