前言
說到顏色，最近兩個新聞，一個是支付寶深藍，一個是蘋果與微信關於暗黑的討論。新的一周開始了，今日早讀文章由螞蟻金服@瑞含分享。
正文從這開始～～
近年來暗黑模式的設計趨勢開始一點點明顯，Ant Design 在這次 4.0 的升級中也對這類暗黑場景化的設計開始進行初步的探索，接下來就讓我們一起來看下 Ant Design 這一針對企業級的設計體系是如何設計暗黑模式的
什麼是暗黑模式暗黑模式是指把所有 UI 換成黑色或者深色的一個模式。
需要說明的是，暗黑模式不只是夜間模式：
暗黑模式更多的目的是希望使用者更加專注自己的操作任務，所以對於信息內容的表達會更注重視覺性；
而夜間模式則更多是出於在夜間或暗光環境使用下的健康角度考慮，避免在黑暗環境中長時間注視高亮光源帶來的視覺刺激，所以在保證可讀性的前提下，會採用更弱的對比來減少屏幕光對眼睛的刺激。
同時，從使用場景上來說，暗黑模式既可以在黑暗環境，也可以在亮光環境下使用，可以理解為是對淺色主題的一種場景化補充，而夜間模式只建議在黑暗環境下使用，在亮光環境使用時很可能並不保證信息可讀性。
為什麼 Ant Design 要做暗黑模式1、更加專注內容試想一下，我們在電影院看電影時，為什麼要全場關燈？甚至有些 APP，在影片的下方也會有一個模擬關燈效果的操作，來讓整個手機屏幕變黑，只剩下視頻畫面的部分，這都幫助我們可以更專注、更沉浸在當前的內容下。
色彩具有層級關係，深色會在視覺感官上自動後退，淺色部分則會向前延展，這樣對比強烈的層次關係可以讓用戶更注重被凸顯出來的內容和交互操作；尤其在信息負責界面內層級關係的合理拉開對操作效率都有明顯的促進作用
2、在暗光環境下更加適用如今社會我們身處黑夜使用手機、電腦、ipad等設備的次數越來越多，環境光與屏幕亮度的明暗差距在夜間會被放大 ，亮度對比帶來視覺刺激也更加明顯，使用暗色模式可以縮小屏幕顯示內容與環境光強度的差距，同時也可以為設備的續航帶來積極影響，可以保證使用者在暗光環境下使用 OLED 設備的舒適度
3、大眾喜愛黑色一直以來就可以給人以高級、神秘的語義象徵，相比於淺色模式，暗色模式藏著更多可能性
設計原則在這次暗黑模式的設計中主要遵循以下兩大設計原則：
1、內容的舒適性不論是顏色還是文字或是組件本身，在暗色環境下的使用感受應當是舒適的，而不是十分費力的，如果一個顏色在淺色下使用正常，在暗色下卻亮的刺眼或根本看不見，那必然不夠舒適也不可讀；所以在顏色的處理上不建議直接使用，這樣會讓界面變得到處都是「亮點」，讓眼睛不適的同時，也會帶來許多誤操作。
2、信息的一致性暗黑模式下的信息內容需要和淺色模式保持一致性，不應該打破原有的層級關係。舉個例子，在淺色模式下越深的顏色，與界面背景色對比度越大，也就越容易被人注意，視覺層級越高，比如 tooltip；在暗黑模式下我們同樣需要遵循這一規律，所以對應所使用的顏色也就越淺，反之則會越深。
如何設計1、界面層級在大量的企業級產品界面中，我們通常只用一個白色背景結合分割線就可以搞定所有界面的板塊層級，因為在淺色模式下有投影可以藉助，然而暗黑模式中投影將不足以起到如此功效，我們需要通過顏色來區分層級關係。
在經過對螞蟻企業級頁面的典型布局結構評估後，我們在中性色中增加了三個梯度，將中性色擴展至 13 個
並定義出通用情況下頁面中的框架層次，主要分為三大塊：
1、應用框架：也就是我們平時定義的導航欄，也是在大結構中最上層的一部分
2、內容組件：指頁面中的具體內容，通常情況下以區塊的形式存在，作為第二層級
3、頁面容器：顧名思義，指頁面級別的容器盒子，可容納頁面中的所有內容，可以理解為是一個背景板，也就是最末層
在目前的暗黑體系下，我們分別為這三大塊從淺到深定義了#1F1F1F、#141414、#000000 三個顏色，在實際應用中，你也可以根據自身業務的需求，從中性色板中直接選用或是依據透明度的思路自定義出合適的中性色彩。當定義出較為明確的框架層次和顏色後，也對後續系統中組件的顏色配置有著重要的指導意義。我們需要考慮組件出現在不同顏色背景下的可能性及其表現，儘量保持一致性。
2、色彩眾所周知，暗黑模式與淺色模式最大的不同就在色彩的處理上，在暗黑模式中，我們並不想打破淺色模式下基礎色板的配置規律及色值，當一個應用或站點深淺模式並存時，希望在色彩上有一定延續和關聯，而不是毫不相關的兩套色板，這樣一是避免開發及後續的維護成本，二是實際切換和使用時，可以保證一致性，這意味著需要藉助一定規則。
這裡分享一下我們的處理思路：
基於 Ant Design 自然的設計價值觀，我們先從自然界中尋找靈感，如果說淺色模式如同初升時的朝陽，那暗黑模式就是落日下的晚霞，各有各的韻味，同一片天，唯一不同的是，受光線亮度的影響，晚霞整體會暗一些。
朝陽與晚霞所以我們大體的設計思路也是基於淺色的基礎色板，通過結合透明度的轉換，去得到一套暗黑模式下的色彩。這樣的好處是，深淺模式下的色彩根基是同一個，在這樣的基礎上經過透明度的變換得到的結果也會相對和諧，同時也符合我們一致性的原則。
這裡我們藉助下面這兩個概念對透明度進行轉換：
1、對比度極性對比度極性分為正極性和負極性。
對比度正極性：指在電子文本中文本為深色，背景色為淺色
對比度負極性：指文本為淺色，背景色為深色
這裡可以給大家分享對比度查閱的一個工具：WebAIM，只要輸入色值就可以看到具體的值，十分方便。
2、正負極性差值顧名思義便是正負兩者的差值，這裡取的是絕對值
根據一致性原則，我們嘗試通過對比一套顏色的正負極性變化趨勢來找到轉換規律。
首先可以看下，如果一個顏色在不做任何修改的前提下直接使用，它的正負極性趨勢以及差值趨勢的走勢和關係是怎麼樣的，我們嘗試描繪出這樣的曲線，他們的變化規律也將作為我們規則轉換的參考標準。
常規顏色的趨勢對比經過對比，可以發現一些變化規律：
首先來說下「差值趨勢」，
橫向對比可以發現，不同顏色的正負極性走勢是很不一樣的，可以看到在黃綠色段差值曲線達到一個變化峰值，這是由於黃綠色本身由於明度、飽和度值相比其他顏色偏高，所以總是有種刺眼的感覺，生活中也會用它來作為警示、提醒的作用，所以在深淺背景下的對比度有一個比較大的差異，可以說這個變化是正常的。
這點也可以從「正負對比度極性趨勢」兩者間的相對關係反應出來，從紅色到洋紅，綠線一開始從逐漸在藍線的上方一點，開始逐漸上移，最後在峰值處開始慢慢下移，在「極客藍」這個色相中接近重疊，在洋紅處又慢慢下移，說明淺色下越深的顏色，在深色中越亮，反之則越暗。縱向比對單個色板，可以發現，其斜率變化主要受顏色的明度、飽和度影響，可以反應一個顏色的不同梯度在黑白背景下的變化規律。
有了這個大的變化規律，我們便可做到心中有數。首先以 Ant Design 的品牌色「破曉藍」為例，經過在多個業務、場景中不斷嘗試與調整，我們得到一個透明度轉換規則：
轉換規則對應實色色板並將這個規則應用在其他 11 套色板中，驗證其可用性。這個過程確實沒有什麼快捷通道，唯一的辦法就是不斷嘗試。
最後，我們將經過規則轉換的實色與常規顏色的變化趨勢做對比：
可以看到在大趨勢走向上左右兩側圖基本一致，這代表兩個色板在變化規律接近一致，基本可以證明規則的合理性。區別在於，對比度負極性和差值相對於右側未經處理的值明顯有所下降。這是由於透明度的處理讓暗色下的顏色在明度、飽和度上有所下降導致。
再仔細觀察可以發現，在左側的常規顏色中，從「破曉藍-洋紅」這段偏冷色系幾個顏色中，差值趨勢變化最平緩的是「極客藍」這顏色，這說明該顏色在深淺背景下的表現較為穩定，起伏不大，當基於一個統一的透明度規則前提下，會讓它在暗色下的對比度減弱，所以反而會導致差值趨勢變大，所以我們會發現差值趨勢變化較小的顏色轉移到了「破曉藍」、「洋紅」中，也是一個正常現象。
最後可以看到顏色在調整過後實際應用的效果
在官網中點擊右下角的「切換」即可預覽
如果上述 12 個色板不滿足你的業務需求，你也可以在官網上自己選擇顏色，我們會根據規則幫你生成一個暗色色板。
另外，如果在實際應用過程中，你選了色相在 225～325 間的深冷色系作為主色或強調色使用，建議適當提高透明度的值，避免在暗色界面上引起閱讀障礙。
3、文字暗黑模式中，文字的使用與淺色模式基本一致，依舊從 85%-65%-45%，唯一不同的地方在 disable 的狀態，其透明度值提升為 30%，避免顏色過淡真的「不可見」。另外，對於 #FFFFFF 的純白色文字，儘量避免大面積使用，尤其對於表格、列表這類偏閱讀瀏覽的場景，如有需要，做小範圍強調即可。
4、陰影暗黑模式中的陰影規則與淺色模式基本保持一致，但由於本身的界面背景較深，在的陰影色值上也有所加深，幫助層次更好的體現，整體將色值擴大到原先的 4 倍，但在陰影的位移、擴展上均保持不變。
5、分割線分割線在暗黑模式中建議根據界面中常用的背景色，通過透明度換算成實色使用，Ant Design 中分割線主要有 #434343 和 #303030 兩種顏色，分別對應淺色模式下的 #D9D9D9 和 #F0F0F0，這樣做的目的主要是為了避免帶來額外的交錯疊加，尤其對於表格類以及很多帶有 border 屬性的組件，實色會更為穩妥便於記憶。
適應性適應性方面，Ant Design 的暗黑模式可以與海兔及可視化資產進行無縫銜接，使用時可以任意組合拖拽，你可以下載 Kitchen 插件，獲取我們的海量資產
結語暗黑模式最近越來越受到人們的關注，與某一特定產品的暗黑設計不同，Ant Design 的暗黑模式更多以設計體系的角度考慮企業級這個大場景下的內容，在易用性、擴展度、復用度等方面還有許多需要完善和繼續研究探索的地方，我們會在未來的迭代中逐步進行，先完成再完善。希望上述內容能對大家在暗黑模式的設計上有所幫助。
關於本文作者：@瑞含原文：https://zhuanlan.zhihu.com/p/112470365
@Ant Design相關
【第1871期】Ant Design 4.0 正式版來了！
【第1873期】設計體系的響應式設計
為你推薦
【第1765期】微信官方小程序同構新方案Kbone全解析
【第1822期】黑暗模式的過去、現在和未來
【第1856期】會話式界面設計