深色模式在今天的 C 端和 B 端中都已經(jīng)得到廣泛的應(yīng)用，所以很多項(xiàng)目在前期都有提出深色模式的需求，設(shè)計(jì)師就要在設(shè)計(jì)階段中完成對應(yīng)的設(shè)計(jì)和輸出相關(guān)規(guī)范。這篇分享就是圍繞深色模式的搭建展開。

一、深色模式應(yīng)用邏輯和流程

如果應(yīng)用需要增加深色模式，就意味著基礎(chǔ)設(shè)計(jì)是淺色模式，因?yàn)轫?xiàng)目如果一開始就采用深色的風(fēng)格設(shè)計(jì)，那就沒有增加深色模式的需要，這類項(xiàng)目從一開始就追求暗色效果，所以也很少會(huì)額外增加淺色模式，比如各類深色大屏項(xiàng)目。

使用大面積淺色背景的設(shè)計(jì)雖然是 UI 設(shè)計(jì)中最主流的模式，但不代表它是完美的。其中最大的問題，就是對用戶眼睛的影響。

隨著技術(shù)的進(jìn)步，顯示器的亮度和對比度一代比一代高，雖然這在戶外或窗邊等強(qiáng)光環(huán)境下可以幫助我們更好得看清內(nèi)容，但在夜晚或室內(nèi)的弱光環(huán)境中，屏幕過亮就會(huì)和環(huán)境產(chǎn)生過大的亮度差，從而讓用戶的眼睛很快產(chǎn)生不適和疲勞。

雖然屏幕亮度多數(shù)可以調(diào)節(jié)，但調(diào)弱的效果并不是每個(gè)人都滿意。所以有了屏幕掛燈這樣的產(chǎn)品，通過增加背景亮度來降低屏幕和環(huán)境的亮度差，緩解用戶眼睛的疲勞。

深色模式被廣泛應(yīng)用于 B 端產(chǎn)品的原因就在這里，通過降低屏幕亮度，來提高用戶舒適度，從而增加整體使用時(shí)長。

所以深色模式雖然本質(zhì)上是一套系統(tǒng) “皮膚”，但它的出發(fā)點(diǎn)并不僅僅是為用戶提供更豐富的樣式選擇，而是為了滿足用戶在不同使用環(huán)境下的瀏覽體驗(yàn)。這也是 PS、C4D、Blender 等生產(chǎn)力軟件界面多為深灰色的原因。

而為系統(tǒng)增加一套新皮膚樣式，對于設(shè)計(jì)師來說并不困難，只要簡單的替換色彩和部分視覺元素即可。但對于前端開發(fā)來說卻并不容易，需要在前端架構(gòu)中做好樣式組件的分離和控制準(zhǔn)備。

簡單概括，就是頁面的架構(gòu)、內(nèi)容由 Html 編寫，樣式則由 CSS 編寫，HTML 文件通過調(diào)用 CSS 文件來實(shí)現(xiàn)頁面的樣式效果。而調(diào)用的 CSS 文件是可以切換的，所以前端可以準(zhǔn)備多個(gè) CSS 文件用于切換。

原理雖然簡單，但是執(zhí)行過程中的細(xì)節(jié)非常多且繁瑣，會(huì)耗費(fèi)前端大量的時(shí)間。所以為了提高效率，需要在設(shè)計(jì)和交付階段就盡量遵照前端的標(biāo)準(zhǔn)來構(gòu)建深色模式的源文件和格式。

把深色模式作為一個(gè)獨(dú)立小項(xiàng)目的話，那么它的設(shè)計(jì)流程如下：

首先需求分析，就是對項(xiàng)目相關(guān)信息的收集和整理，比如產(chǎn)品、用戶有沒有什么具體的需求，深色模式的主要使用場景，開發(fā)想要什么樣的交付物、用什么方式實(shí)現(xiàn)等等。分析得越全面，對后續(xù)的設(shè)計(jì)幫助越大。

基礎(chǔ)規(guī)范的整理，就是整理淺色模式的色彩規(guī)范，將用色的所有類型和命名方式全部標(biāo)準(zhǔn)化，不管是使用樣式替換還是 Token 命名的模式，都要在這個(gè)階段中定好。

接著就是根據(jù)需求完成主要頁面的深色模式設(shè)計(jì)，通過完整的設(shè)計(jì)稿進(jìn)行方案的評(píng)審。因?yàn)槭窃u(píng)審，所以設(shè)計(jì)稿能表示對應(yīng)規(guī)范應(yīng)用的實(shí)際效果即可，只需要用少數(shù)頁面就能實(shí)現(xiàn)，無需把所有頁面重改一遍。

方案評(píng)審?fù)ㄟ^以后，就可以使用前面整理的格式，將深色模式的規(guī)范都整理出來，并完成最終得輸出。

了解完項(xiàng)目的流程，下面就來討論深色模式設(shè)計(jì)中的具體規(guī)則和細(xì)節(jié)。

二、深色模式的制作思路

深色模式的設(shè)計(jì)，就是在淺色模式源文件上進(jìn)行重新 “配色” 的過程。這個(gè)配色指的是影響界面視覺的所有彩色元素，包括下面要素：

在填充色的替換中，我們需要先確定色彩的規(guī)范標(biāo)準(zhǔn)，即包含了哪些色彩類型，用什么模式定義。簡單的色彩規(guī)范就定義主色、輔助色、中性色三個(gè)大類即可，最多加上投影、遮罩等樣式的色彩。

而復(fù)雜的色彩規(guī)范則會(huì)根據(jù)功能性做劃分，比如 ArcoDesign 中，定義了主色、成功色、警示色、錯(cuò)誤色、鏈接色、數(shù)據(jù)色、邊框色、填充色、文字色、背景色等 10 種色彩類型。

在這里我們不深入討論色彩規(guī)范定義的方法用普通命名的模式還是嵌套的 Token（下一篇分享再討論），只需要知道，不管你前面定出多少色彩，在深色模式中都要把它們復(fù)制一份并全部調(diào)整一遍。

而這個(gè)調(diào)整也要講究順序，就是先中性色，然后主色、輔助色，最后其它色彩的填充。其中，中性色的填充是最先也最重要的環(huán)節(jié)，它奠定了整個(gè)界面深色模式的樣式。

比如下圖案例，我們先把細(xì)節(jié)案例移除，只保留基礎(chǔ)框架，然后通過對框架的大色塊填充，來確定基礎(chǔ)的深色氛圍。

在這個(gè)基礎(chǔ)框架中，就包含了組件在 Z 軸柵格的基本層級(jí)關(guān)系，背景在最底層，然后頂欄、側(cè)邊導(dǎo)航、內(nèi)容區(qū)域在上層。而根據(jù)最樸素的配色邏輯，深色在下，淺色在上，所以上方的配色案例中，背景顏色比上方的組件深。

而之所以選 Arco，就是因?yàn)?Arco 官方深色模式中這個(gè)邏輯是反著來的，背景淺，上層深，這樣并不利于背景模塊的識(shí)別，因?yàn)樵谏钌Ｊ较赂恋脑馗怀觯覀儧]有任何突出背景層的需要?？梢钥纯春? TDesign 的深色模式對比，是不是就能感受 TDesign 的內(nèi)容更易于辨識(shí)。

ArcoDesign 淺色背景深色模塊

TDesign 深色背景淺色模塊

最底層的背景和模塊背景使用的深色即中性色中最深的兩個(gè)顏色，以 HSB 中的 B 值來描述，就是 5-20 之間的兩個(gè)深灰色。

在深色的選擇中，要直接避免使用全黑，即 B 值 0，這由多方面因素組成。最關(guān)鍵的因素，是純黑色區(qū)域在 LED 屏幕中是“熄燈” 不發(fā)光的（LED 屏幕特性），而其它色彩則會(huì)發(fā)光，這就導(dǎo)致一個(gè)屏幕內(nèi)的亮度落差急劇增加，不符合深色模式的功能定位。

另一個(gè)要點(diǎn)，則是用于體現(xiàn)背景層級(jí)的 B 值落差，盡量在 10 以內(nèi)，比如背景使用 B：10，那么上級(jí)的背景可以使用 15、20，但到 25、30 以后，就會(huì)明顯感覺到顏色的落差過大，沒有必要。

除此之外，深色模式對比淺色模式還有個(gè)特點(diǎn)，就是中性色所需的數(shù)量更少，有時(shí)候淺色模式下包含了 10 個(gè)中性色，而深色模式僅需 5-6 個(gè)即可。因?yàn)樯钌Ｊ较聦叶鹊母兄遣蝗鐪\色模式明顯的，很多時(shí)候我們創(chuàng)建了過多的灰度值并不能很好的表現(xiàn)元素權(quán)重的差異，只能造成視覺效果的混亂。

所以我們可以將淺色模式下一些臨近的色彩合并成同一個(gè)灰度值，減少中性色的數(shù)量。比如下面案例中，深色模式就合并了標(biāo)簽欄背景色、分割線和表頭背景色等。

同理，在文字、圖標(biāo)等色彩應(yīng)用中，也要做臨近色值的合并，文字最多使用 3 個(gè)灰度即可。最亮的文字色值可以使用 5-10，同樣不建議用純白。然后文字的每一級(jí)落差可以控制在 15-20 之間，否則對比就不夠明顯。

定義了中性色以后，就可以定義主色、輔助色等其它顏色。雖然基礎(chǔ)規(guī)范中已經(jīng)定義過了，但彩色在深色背景和淺色背景下的視覺效果是不同的，比如下面案例。

所以在色彩定義中，要適當(dāng)調(diào)整明度、飽和度，具體應(yīng)該調(diào)整多少?zèng)]有固定數(shù)值，需要設(shè)計(jì)師自己測試，也可以參考蘋果 iOS 官方規(guī)范中的色彩調(diào)整范圍。

最后，就是其它圖標(biāo)和圖片元素，如果是工具圖標(biāo)定義起來容易，和文字使用相同色值即可，重點(diǎn)在于不是使用中性色的裝飾圖標(biāo)、圖片元素、背景圖等要素。

比如 LOGO，在白底模式下使用了深色的文字，而在深色模式下自然要切換成白色的文字，所以它們在交付中就是兩張切圖。所以所有在深色模式下無法被有效顯示出來的元素，都要進(jìn)行額外的定義用于滿足深色模式的顯示和切圖。

只要了解上面這些要點(diǎn)，那么輸出和制定深色模式就不再困難，只要實(shí)踐一次就能掌握其中的絕大多數(shù)要點(diǎn)。

結(jié)尾

關(guān)于深色模式定義中需要掌握的色彩規(guī)范命名、定義，以及 DesignToken 是什么，我會(huì)在下一篇內(nèi)容中做進(jìn)一步的說明。

我們下篇再賤！

作者：超人的電話亭