一、深色模式和深色風(fēng)格

在了解深色背景配色之前，設(shè)計師首先要了解深色模式和深色風(fēng)格，是兩個不同的概念。

首先解釋深色風(fēng)格，就是以深色背景為基調(diào)的設(shè)計風(fēng)格，在網(wǎng)上的設(shè)計案例中并不少見。

而深色模式，則是用來和淺色模式配對的反色模式。首先主流的手機、平板、電腦系統(tǒng)中都有淺色、深色模式的選擇， 用于切換系統(tǒng) UI 是以淺色為主還是深色為主。

應(yīng)用如果要跟隨系統(tǒng)切換主題，就需要預(yù)設(shè)淺色和深色兩種模式，也就是說深色模式是用于支持系統(tǒng)主題切換而做的，是搭配淺色模式提供的一種色彩變體版本。

深色風(fēng)格和深色模式不同，主要原因就是如果產(chǎn)品一開始以深色風(fēng)格進行設(shè)計，就是它的默認風(fēng)格，意味著設(shè)計師要在系統(tǒng)處于默認淺色模式下它也是深色的。

這種風(fēng)格的設(shè)計往往就不會去適配系統(tǒng)主題的切換，因為它已經(jīng)是深色了，那么當(dāng)系統(tǒng)主題改成深色模式就沒有必要再提供一套設(shè)計。

另一個次要的原因，就是深色模式作為淺色模式的補充，它的選色邏輯是不同的，是基于原有配色上做出變體完成的，而不是單獨選配。

除了模式和風(fēng)格差異外，還有個需要理解的概念即 —— 深夜模式。今天很多人會把深夜模式和深色模式等同起來，但兩者并不是一種東西。

深色模式的出發(fā)點是提供兩種系統(tǒng)級的色彩方案，給用戶提供更多的個性化設(shè)置選項（比如我就喜歡用深色模式）。深色模式在夜間有更好的使用體驗只是附帶加成，但不代表深色模式在白天就不能正常用了。

而夜間模式的出發(fā)點，則是在夜間低光源環(huán)境中，盡可能減少屏幕自發(fā)光的強度，減少用戶用眼的疲勞。

夜間模式的配色邏輯和深色模式不同，但因為現(xiàn)在深色模式的普及且附帶了夜間的特性，所以多數(shù)應(yīng)用都放棄了夜間模式功能。

所以最后總結(jié)一遍，在我們進入配色階段，首先要確定配色風(fēng)格，是使用淺色還是深色風(fēng)格，它們都要獨立完成色彩的選擇。

如果一開始先做了淺色風(fēng)格，但還要添加深色模式，那就要在淺色模式的配色基礎(chǔ)上進行深色的選色，確定一套匹配的深色模式配色標(biāo)準。

二、深色模式的配色邏輯

蘋果在 iOS13 中更新了深色模式，也提供了一套深色模式的適配規(guī)范，我們今天制定深色模式的配色方法主要參照這套規(guī)范開展。所以要掌握深色模式的配色邏輯，首先要了解官方的定義規(guī)范。

官方規(guī)范中深色模式下的顏色定義包含以下幾個模塊：

1. 基礎(chǔ)系統(tǒng)色彩
2. 中性色應(yīng)用
3. 陰影和模糊

Part.1 基礎(chǔ)系統(tǒng)色彩

iOS 默認應(yīng)用了一套系統(tǒng)色彩，在深色模式中，雖然還是使用這些色相但輕微調(diào)整了明度和飽和度。因為相同顏色在淺色和深色背景中給人帶來的感受是不同的，所以要獲得一致的色彩體驗，就要在深色模式下做出調(diào)整。

可以用選色面板來查看它們的調(diào)節(jié)差異。

Part.2 中性色應(yīng)用

深色模式的中性色和淺色模式完全不同，淺色背景下的中性色越突出顏色越深，深色背景下的中性色越突出則顏色越亮。

在 iOS 的中性色定義中是圍繞場景制定的，包括背景、列表、文字、填充和描邊等。

首先解釋背景中性色，iOS 默認使用三個中性背景色，用于區(qū)分不同模塊之間的堆疊。要重點注意的是，再淺色模式下模塊堆疊是"白-灰-白"，而在深色模式下堆疊是 "深灰-中灰-淺灰"。

然后是列表用色，iOS 也定義了三個顏色，用于區(qū)分背景、列表背景、分割線的用色。

之后的文字用色上 iOS 采用了 4 個等級，除了純黑和純白外，其它灰色都使用帶有色相和透明度的灰色。

最后 iOS 還提供了四個等級的中性色用于其它內(nèi)容的填充和描邊。

Part.3 陰影和模糊

最后就是圖層效果的應(yīng)用上，主要包含陰影和毛玻璃兩個效果。

首先說陰影，它的成像原理是在投射平面上形成更深的輪廓，但本來背景就是深色的時候還怎么加深？所以深色模式下統(tǒng)一移除陰影。

而很多新手的深色模式是用更亮的顏色做陰影，那不叫陰影，叫外發(fā)光。

然后就是毛玻璃效果，iOS 中的毛玻璃包含六種不同的模糊等級，使用了不同的透明度來表現(xiàn)。

以上就是 iOS 官方規(guī)范中深色模式應(yīng)用的內(nèi)容，在我們自己的項目中，不可能完全照搬這套標(biāo)準和數(shù)值，所以要總結(jié)出對應(yīng)的規(guī)律：

1. 主要色彩在深色模式下要微調(diào)，色相、明度、飽和度會輕微調(diào)節(jié)
2. 中性色和淺色模式對調(diào)，但在深色模式下的中性色數(shù)量要精簡
3. 在深色模式下移除陰影的使用，定義新的遮罩元素色值和透明度

三、深色模式的應(yīng)用案例

上一次分享我們完成了淺色模式的設(shè)計，并創(chuàng)建了對應(yīng)的色彩規(guī)范，我們依舊要使用它來完成深色模式的配色演示。

配色的順序和之前稍有改動：

1. 中性色選擇
2. 彩色色相調(diào)整
3. 裝飾、內(nèi)容色優(yōu)化

Step1:中性色選擇

配色的第一步依舊是選擇中性色，為整個深色模式的色彩氛圍奠基。中性色配色的邏輯就是從深到淺，從下到上（層級）選擇，可以使用原設(shè)計稿替換色彩來進行測試。

深色模式對中性色的感知沒有淺色那么敏感，所以在配色過程中，減少了一級中性色。

要注意的是，在實際項目的規(guī)范中，色彩是作為一個特定角色（命名、等級）記錄的，雖然你可能要合并、削減一些顏色，但依舊要根據(jù)淺色模式包含的角色給出對應(yīng)的深色模式色值。這也是 Figma 的變量工具應(yīng)用要點原則之一，不能因為你刪減了顏色而讓一些色彩的角色為空。

Step2:彩色色相選擇

彩色之所以要調(diào)節(jié)，是因為人對顏色的觀感會根據(jù)環(huán)境的變化而變化，淺色模式對一個顏色的感受和深色模式下是不同的。所以當(dāng)換幾個呢變成深色，這些固定用色也要做出調(diào)整匹配環(huán)境。

而配色需要測試，要獲得直觀效果，就要直接在完成中性色的基礎(chǔ)上調(diào)節(jié)才有意義，且需要將淺色模式放在旁邊進行對比，而不是根據(jù)固定的規(guī)則無腦更改。

雖然顏色整體明度、飽和度都有調(diào)整，但具體應(yīng)該調(diào)多少只能靠設(shè)計師自己"感覺"，可以多放在手機上查看前后的效果。

最終完成的彩色色相調(diào)整對比：

Step3：裝飾、內(nèi)容色優(yōu)化

原則上深色模式的適配，只要給出前面兩步中的固定色彩角色即可，類似裝飾色或者內(nèi)容色不調(diào)整也沒有問題。

但在實際應(yīng)用中，淺色轉(zhuǎn)深色的影響是難以預(yù)估的，會產(chǎn)生非常多的問題。

比如設(shè)計會增加裝飾性字體標(biāo)題，需要切圖后導(dǎo)入，替換深色模式就意味著它的貼圖也要另外更新。還有一些使用深色色彩的裝飾性元素、彩色投影，也都需要單獨處理、切圖才能滿足深色模式的正常使用需求。

有非常多的產(chǎn)品在深色模式下顯示效果有問題，就是擺爛沒有去優(yōu)化裝飾的色彩和切圖的結(jié)果。

所以還有個小經(jīng)驗要分享，就是因為這些裝飾性的內(nèi)容維護起來很麻煩，所以很多大型應(yīng)用干脆不做，直接放棄深色模式的適配，例如美團、飛豬、淘寶等都沒有適配深色模式。

另一點，就是內(nèi)容圖在深色模式下產(chǎn)生的觀感也不同，所以對于一些會和深色產(chǎn)生沖突的內(nèi)容用圖，是需要替換更合適的圖片。

但是！如果在作品集等場景中要展示兩個版本，你不能在版本前后用了不同的內(nèi)容配圖，所以對配圖的優(yōu)化不是光改深色版本，而是選出兩個模式都適用的內(nèi)容方案進行替換。

完成上面的操作，我們就完成了深色模式的配色了，下面是最終得結(jié)果：

作者：超人的電話亭