更多深色模式干貨：

一、深色模式和深色風格

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

首先解釋深色風格，就是以深色背景為基調的設計風格，在網上的設計案例中并不少見。

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

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

深色風格和深色模式不同，主要原因就是如果產品一開始以深色風格進行設計，就是它的默認風格，意味著設計師要在系統處于默認淺色模式下它也是深色的。

這種風格的設計往往就不會去適配系統主題的切換，因為它已經是深色了，那么當系統主題改成深色模式就沒有必要再提供一套設計。

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

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

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

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

夜間模式的配色邏輯和深色模式不同，但因為現在深色模式的普及且附帶了夜間的特性，所以多數應用都放棄了夜間模式功能。

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

如果一開始先做了淺色風格，但還要添加深色模式，那就要在淺色模式的配色基礎上進行深色的選色，確定一套匹配的深色模式配色標準。

二、深色模式的配色邏輯

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

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

1. 基礎系統色彩
2. 中性色應用
3. 陰影和模糊

Part.1 基礎系統色彩

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

可以用選色面板來查看它們的調節差異。

Part.2 中性色應用

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

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

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

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

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

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

Part.3 陰影和模糊

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

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

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

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

以上就是 iOS 官方規范中深色模式應用的內容，在我們自己的項目中，不可能完全照搬這套標準和數值，所以要總結出對應的規律：

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

三、深色模式的應用案例

上一次分享我們完成了淺色模式的設計，并創建了對應的色彩規范，我們依舊要使用它來完成深色模式的配色演示。

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

1. 中性色選擇
2. 彩色色相調整
3. 裝飾、內容色優化

Step1:中性色選擇

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

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

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

Step2:彩色色相選擇

彩色之所以要調節，是因為人對顏色的觀感會根據環境的變化而變化，淺色模式對一個顏色的感受和深色模式下是不同的。所以當換幾個呢變成深色，這些固定用色也要做出調整匹配環境。

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

雖然顏色整體明度、飽和度都有調整，但具體應該調多少只能靠設計師自己“感覺”，可以多放在手機上查看前后的效果。

最終完成的彩色色相調整對比：

Step3：裝飾、內容色優化

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

但在實際應用中，淺色轉深色的影響是難以預估的，會產生非常多的問題。

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

有非常多的產品在深色模式下顯示效果有問題，就是擺爛沒有去優化裝飾的色彩和切圖的結果。

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

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

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

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

結尾

后面有時間還會圍繞深色風格再做一篇獨立的說明，那么別忘記 C 端體驗設計全能班即將開課這件事 ?? https://yfbsy.xetslk.com/s/2NQB4A

歡迎關注作者的微信公眾號：「超人的電話亭」