3000字干貨！超全面的深色模式設計思路總結

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

一、深色模式應用邏輯和流程

如果應用需要增加深色模式，就意味著基礎設計是淺色模式，因為項目如果一開始就采用深色的風格設計，那就沒有增加深色模式的需要，這類項目從一開始就追求暗色效果，所以也很少會額外增加淺色模式，比如各類深色大屏項目。

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

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

雖然屏幕亮度多數可以調節，但調弱的效果并不是每個人都滿意。所以有了屏幕掛燈這樣的產品，通過增加背景亮度來降低屏幕和環境的亮度差，緩解用戶眼睛的疲勞。

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

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

而為系統增加一套新皮膚樣式，對于設計師來說并不困難，只要簡單的替換色彩和部分視覺元素即可。但對于前端開發來說卻并不容易，需要在前端架構中做好樣式組件的分離和控制準備。

簡單概括，就是頁面的架構、內容由 HTML 編寫，樣式則由 CSS 編寫，HTML 文件通過調用 CSS 文件來實現頁面的樣式效果。而調用的 CSS 文件是可以切換的，所以前端可以準備多個 CSS 文件用于切換。

原理雖然簡單，但是執行過程中的細節非常多且繁瑣，會耗費前端大量的時間。所以為了提高效率，需要在設計和交付階段就盡量遵照前端的標準來構建深色模式的源文件和格式。

把深色模式作為一個獨立小項目的話，那么它的設計流程如下：

首先需求分析，就是對項目相關信息的收集和整理，比如產品、用戶有沒有什么具體的需求，深色模式的主要使用場景，開發想要什么樣的交付物、用什么方式實現等等。分析得越全面，對后續的設計幫助越大。

基礎規范的整理，就是整理淺色模式的色彩規范，將用色的所有類型和命名方式全部標準化，不管是使用樣式替換還是 Token 命名的模式，都要在這個階段中定好。

接著就是根據需求完成主要頁面的深色模式設計，通過完整的設計稿進行方案的評審。因為是評審，所以設計稿能表示對應規范應用的實際效果即可，只需要用少數頁面就能實現，無需把所有頁面重改一遍。

方案評審通過以后，就可以使用前面整理的格式，將深色模式的規范都整理出來，并完成最終得輸出。

了解完項目的流程，下面就來討論深色模式設計中的具體規則和細節。

二、深色模式的制作思路

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

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

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

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

而這個調整也要講究順序，就是先中性色，然后主色、輔助色，最后其它色彩的填充。其中，中性色的填充是最先也最重要的環節，它奠定了整個界面深色模式的樣式。

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

在這個基礎框架中，就包含了組件在 Z 軸柵格的基本層級關系，背景在最底層，然后頂欄、側邊導航、內容區域在上層。而根據最樸素的配色邏輯，深色在下，淺色在上，所以上方的配色案例中，背景顏色比上方的組件深。

而之所以選 Arco，就是因為 Arco 官方深色模式中這個邏輯是反著來的，背景淺，上層深，這樣并不利于背景模塊的識別，因為在深色模式下更亮的元素更突出，而我們沒有任何突出背景層的需要。可以看看和 TDesign 的深色模式對比，是不是就能感受 TDesign 的內容更易于辨識。

ArcoDesign 淺色背景深色模塊

TDesign 深色背景淺色模塊

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

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

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

除此之外，深色模式對比淺色模式還有個特點，就是中性色所需的數量更少，有時候淺色模式下包含了 10 個中性色，而深色模式僅需 5-6 個即可。因為深色模式下對灰度的感知是不如淺色模式明顯的，很多時候我們創建了過多的灰度值并不能很好的表現元素權重的差異，只能造成視覺效果的混亂。

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

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

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

所以在色彩定義中，要適當調整明度、飽和度，具體應該調整多少沒有固定數值，需要設計師自己測試，也可以參考蘋果 iOS 官方規范中的色彩調整范圍。

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

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

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

結尾

關于深色模式定義中需要掌握的色彩規范命名、定義，以及 DesignToken 是什么，我會在下一篇內容中做進一步的說明。

我們下篇再賤！

第九期 B 端產品設計課程開啟正式招生，早報名早學習，學員群里等著大家了 ?? https://pro.uisdc.com

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