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