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