編者按：在今年的 Google I/O 大會上，Android Q 的深色主題的推出后，官方的 Material Design 的設計規范也隨之進行了更新。作為目前最主流的設計風格和主題規范之一，Material Design 的深色主題設計規范非常值得參考學習。這是一套高度自恰的設計規范，有著相當嚴密的內部邏輯，在 Material Design 的內在隱喻邏輯的推動下，嚴格遵循國際通行的可用性原則來確保深色主題的可用性和合理性。

作為一個主流趨勢，深色系配色主題必然會逐漸適配到幾乎全部的移動端產品上，讓用戶在低亮度環境下更舒適地和移動端界面進行交互。可是，它的色彩模式、兼容性、系統性、易用性、可交互性以及內在邏輯自恰是怎么做到的？也許你不一定要嚴格遵循這套規范，但是它會作為標桿，告訴你要確保整套主題嚴密地運行，創造體驗無縫的 UI 界面。

著急找素材的同學可以在直接下載官方提供的資源：百度云， 提取碼: mhsr

注意：這一素材是和Sketch 搭配使用的

用法

深色主題將會讓 UI 的絕大部分以深色來呈現。它是作為默認主題（淺色主題）的一個補充模式而存在。

深色主題將會降低設備屏幕的顯示亮度，同時仍保持最低程度的色彩對比度。它將會從人體工程學的角度提升設計，有效地減少視覺疲勞，并根據當前環境適應性地調整亮度，并在黑暗的環境中提升屏幕的使用效果，同時節省電量。使用 OLED 屏幕的設備可以在任何時候確保黑色像素是不發光的。

原則

在有較大縱深的環境當中，使用深灰色而非黑色來呈現高程和空間。

更深的灰色

深色模式下，不要使用黑色，而是使用深灰色，用來呈現較環境中的高程和大范圍的區域。

色彩與調性

在深色主題的UI當中，盡可能使用數量有限的色彩，確保絕大部分的區域需要保持深色。

節約能源

在需要更高效能源利用率的設備上（比如使用 OLED 屏幕的設備上），通過減少發光像素來延長電池使用壽命。

增強可訪問性

通過使用可訪問性較強的色彩對比度，來迎合需要深色主題的用戶（比如視力不佳的用戶）。

屬性概述

在這一節當中，了解 Material Design 中關于深色主題的屬性定義

關于數字產品中對比度的設計，參考國際通行規則：
World Wide Web Consortium (W3C)Understanding Contrast 了解對比度

Material Design 中的深色主題，基于下面的幾個屬性來進行定義：

• 對比度：深色區域和100%純白色的正文文本的對比度至少要達到15.8:1
• 深度：當元素處于相對較高的位置上的時候，通過較淺的表層顏色來呈現這種縱深上的差異。
• 去飽和度：主色調需要降低飽和度，以便符合 web 內容可訪問性指南（WCAG）AA標準，比如正文部分的文本對比度需要保證至少 4.5:1。
• 限制色彩：在大面區域都使用深色色調的時候，盡量少地使用提亮色（淺色、低飽和度高明度的色彩、或者是高飽和度的色彩）。

拆解

深色UI主題主要呈現出的前景視覺是深色的，同時其他的色彩也較為稀少。屏幕所散發出來的光線非常有限，但同時又保持著較高的可用性。

1. 背景（0dp 高程疊加）
2. 前景（1dp 高程疊加）
3. 主色調
4. 次要色
5. 在背景上的元素
6. 在前景表面上的元素
7. 在主色調上的元素
8. 在次要色上的元素

行為

深色主題應該可以通過外在顯示的開關控件，來打開或者關閉的：

• 突出的方式，是使用直接可見的圖標來打開或者關閉主題
• 不那么突出的方式，是在菜單或者APP設置中放置開關

在APP的頂部菜單中顯示主題開關

在彈出菜單的菜單層中顯示開關

在APP的設置列表當中顯示開關

屬性

深色主題使用的是深灰色，而不是黑色來作為主要的色彩。深灰色同樣可以表現出非常廣泛的色彩，能夠呈現出高度和深度，因為相比于黑色，灰色表面的陰影其實更容易被感知到。

深灰色的前景色彩能夠降低視覺疲勞，因為在深灰色表面的文字比在黑色表面的文字，有更低的對比度。（還不會出現炫光效果）

推薦深色主題下的前景深灰色彩為 #121212

高程

在深色主題當中，組件在高程上和之前在淺色主題下應該是一樣的，所以它應該也擁有相同級別的陰影。但是在深色主題下，原本的光影關系就發生變化了，不同高程下的元素所對應的陰影程度也不一樣。

元素越高，對應的背景被照亮的程度就越輕微

前景元素越高（它在隱喻層面上就越接近光源），表面就越亮。在設計的時候可以通過有透明度的白色疊加層來實現這種輕盈的效果。

元素越高，顏色相應的就越淺、越明亮。

通過表面的白色半透明層，控制透明度來讓表面發生亮度變化。

1. 元素控件層
2. 覆蓋疊加層

疊加層的另外一個優勢在于，它可以讓人更加便捷的分辨不同組件之間的高程，并且可以更容易觀察到陰影。疊加層與元素控件的結合，不僅增加了和底部陰影之間的對比度，還讓邊緣更加清晰銳利和明顯。

默認主題僅僅使用陰影來控制高程效果，而深色主題之下，還需要借助調整表面色彩來控制高程效果。

這些表面疊加層旨在最大程度地提高易讀性，同時確保不同高程的元素彼此容易被分辨。高程疊加的透明度范圍，最低是0%，最高是16%。

這是高程等級和白色疊加層的不透明度對比表。

疊加層闡明了組件之間的高程差異。

• A 高程為 1dp 的卡片，疊加層不透明度為5%
• B 高程為 6dp 的浮動按鈕，使用沒有疊加層的次要色
• C 底部菜單欄，高程為 8dp，疊加層不透明度為12%

值得注意的是，疊加層不應應用于使用主色和次要色的UI元素控件表面。

在深色主題之下，陰影同樣應該保持深色，用以準確的描述投影關系，哪怕它沒有那么顯著。

錯誤

不要在使用主色和次要色的容器組件表面使用高程疊加層。

錯誤

不要使用外發光來替代陰影來表示高程差異，因為這種效果并不能準確地描述高程陰影投遞下來的效果。

可訪問性與對比度

深色主題下，深色必須暗到一定程度，才能讓白色的文本足夠清晰地呈現。文本和背景之間的對比度級別至少要達到 15.8:1 才行。這樣的對比度確保了即使是高程處于最高、最亮的控件當中，作為正文的白色文本都能通過 WCAG 的AA對比度標準，也就是 4.5:1 。

想要創建帶有品牌調性的深色主題，也請在推薦的深色主題基準色（#121212）的基礎上，以低不透明度的疊加層，來增加品牌調性。比如下面的案例中，#1F1B24 這一色彩就是在深色基準色 #121212 的基礎上，和不透明度為 8%的品牌色疊加之后的結果。

如果背景顏色不夠深，就無法確保白色的文本和背景色之間達到 15.8:1 的對比度，也就無法確保在極端情況下滿足 4.5:1 的對比度下限。

注意

確保背景顏色足夠深，才能正文處于最高高程（24dp）的情況下，達到至少 4.5:1（AA）的對比度。

在使用純黑色的界面下，有寫硬件設備的電池效率會更高。在這種情況下，這些UI 能夠通過不發光的黑色像素來節省硬件的電量。

注意

在 OLED 屏幕上，打開和關閉像素發光會導致屏幕滾動時出現延遲，導致像素模糊。

UI應用

主題配色

色彩在文本的易讀性中起到了重要的作用。

所有的深色主題的配色方案都應該讓UI中的元素都足夠有對比度，足以通過 WCAG 的 AA 規則，也就是超過 4.5:1 的底線。

可訪問性強的不飽和色彩

深色主題應該盡量避免使用高飽和度的色彩，因為它們多數不能夠達到 WCAG 對于文本的對比度要求（4.5:1）。高飽和度的色彩能夠在深色背景上產生炫光的視覺效果，產生視覺疲勞。

相反，飽和度較低的色彩能夠帶來更清晰的視覺體驗。

配色方案中低飽和度的色彩能夠提高易讀性，減少炫光效果。

錯誤

避免在深色背景上使用讓人覺得過于飽和的色彩。

主色

主色應該是整個界面和組件中最常顯示的色彩。在整個 Material Design 的深色主題中可以使用色調為200的基準色彩。（在不同高程的界面上，能夠通過 WCAG AA標準的 4.5:1對比度的文本）

深色主題的主色范例：

1. 主色指示器
2. 色調變體

主色變體

使用淺色的組件能夠呈現基于主色延展出來的變體色彩。

在這個深色主題中，使用了原色（紫色 200）和主色變體（紫色700）。

次要色

次要色可以用來凸顯你的UI 界面一些特定的元素和區域。在深色主題中，次要色需要降低飽和度去滿足 4.5:1 的對比度要求。

深色主題中次要色的使用范例：

1. 次要色指示器
2. 色調變體

這個 UI 界面中主色和次要色的變體。

強調色

在深色主題當中，深色的背景和元素占據了 UI 的絕大部分。而強調色通常使用的是淺色（柔和且飽和度較低）或者明亮（飽和度高，鮮艷）的色彩，確保被強調的元素能夠脫穎而出。在關鍵的元素上應當謹慎地使用強調色，尤其是文本和按鈕。

尋找強調色

你可以使用官方的配色方案生成器來創建（或者查看）主題配色方案。它可以生成色調方案，也就是主色和次要色的一系列深淺顏色的變化。你可以為你的深色模式色彩主題選擇更合理的色彩，來構建配色。

為了確保深色主題中色彩具有足夠高的靈活性和可用性，建議在深色主題中選取較淺的色調（色彩飽和度范圍在200-50之間），而不是默認情況下的色彩主題（色彩飽和度范圍從900-500之間）。

1. 默認的主色
2. 深色主題的主色

正確

較淺的色調（200-50范圍內的顏色）在深色主題中（在所有不同的高程之下）具有更好的可讀性。

錯誤

避免在深色主題中使用高飽和度的色彩，因為它們可以在深色的背景上形成炫光效果。

默認主題下，在頂部菜單中使用配色方案中的主色。

避免在深色主題的頂部菜單欄中使用主色，因為它們在深色主題下會導致炫光。

品牌色

范例：Owl

Owl 是一個教育類APP，為想要探索和學習新技能的人提供課程。相關的實例戳這里（需要梯子）。

為了保持品牌本身的可識別性，品牌色應該可以在深色主題之下充分地使用，但是這種跨主題配色的元素應該控制在一兩個元素的范圍內，比如只有品牌LOGO 和品牌按鈕是這樣用的。通過謹慎地使用品色，讓這些元素在品牌結構中保持突出。

不飽和的色彩，應該在深色的 UI 主題的其他地方多使用。

高飽和度的品牌色應該使用浮動按鈕（2），飽和度較低的主色則應該應用到文本等元素（1）之中。

1. 深色主題下的主色
2. 品牌色

深色主題基準配色方案

Material Design 的記住主題中包含了給深色主題的全部色彩和色調。

深色主題的色彩應該足以覆蓋整個深色主題的UI界面，包括：

• 色彩（主色、次要色以及色彩變體）
• 界面主體（背景和控件）
• 狀態呈現（比如報錯狀態）
• 內容呈現（字體排版和圖像）

使用 Material 色彩主題的基準配色

1. Material Design 默認主題的基準色
2. Material Design 深色主題的基準色

報錯顏色

報錯顏色主要用來指示出錯的狀況和狀態。Material Design 的深色主題下的報錯基準色為 #CF6679。

這種報錯的基準色，是基于默認主題（淺色主題）下的報錯顏色 (#B00020)，在疊加了 40% 不透明度的純白圖層之后所構成的，它符合 AA 對比度標準。

文本和圖標色彩

當文本、圖標等元素，被置于背景或者某個控件上方的時候，為了進行區分的時候，所應該使用的色彩。

在默認情況下，深色主題下的被置于色塊上的文本和圖標元素，色彩是以黑白兩色為主。

深色 UI 下使用文本和小圖標時的基準色。

在深色背景上的淺色文本

當淺色文本出現在深色背景上的時候（這里是白色文本置于黑色背景之上），它應該遵循下面的不透明度設置規則：

• 最重要的內容，白色文本不透明度設置為87%
• 中等重要的內容，白色文本的不透明度為60%
• 被禁用的文本內容，白色文本的不透明度為38%

重要、中等重要和被禁用的文本區別

定制應用

Material Design 中的一些用例可以幫你更好的設計深色主題。

大面積控件區域

參考資料（需要梯子）：
Bottom app bar
Backdrop

對于一些使用了較大區域的控件或是彈出式菜單，應該使用深色主題的基準色來作為色彩。

正確

較小的控件和區域使用鮮艷醒目的色彩。

錯誤

較大的區域使用明亮的色彩，過于明亮影響整體視覺。

注意

深色部分如果使用非標準的色彩（基準為#121212），那么請確保它的對比度至少不低于 15.8:1 。

錯誤

應該避免將配色中的主色引用到彈出菜單的背景上，這回導致明亮的色彩蓋住多半屏幕。

深淺色主題的結合

參考資料（需要梯子）：
Snackbar

當需要在深色主題中使用淺色的控件的時候，淺色的控件可以確保層次結構的清晰。

例如，在深色主題下，使用 Snackbar 來提示信息的時候，使用淺色來確保它能夠脫穎而出。為了能夠達到這個意圖，可以使用淺色主題的配色來確保它足夠醒目。

Snackbar 使用淺色的底色，讓它可以脫穎而出。

1. 背景
2. 元素底色
3. （默認主題）主色

狀態

在組件和交互元素的狀態，通常會借助疊加層的形式來可視化地呈現。在深色主題當中，呈現狀態的疊加層應該使用與默認主題（或者淺色主題）相同的參數，并且可以通過調整來確保它來通過 AA 對比度等級標準。

表面疊加的色彩，主要取決于底部容器所采用的色彩，這主要分兩種情況：在底部容易是基準色和主色的時候。

使用基準色的容器

疊加層使用和圖標或者文本色彩相匹配的顏色（如果不存在圖標的話）。不同的狀態下，疊加層的不透明度的狀態各不相同，正常狀態下是未疊加，其他狀態下的疊加透明度則從4%到12%不等。

容器底色使用基準色而文本使用白色的時候，被啟用、懸停、長按、按下和拖動時的不同狀態。

容器底色使用基準色而文本使用主色的時候，被啟用、懸停、長按、按下和拖動時的不同狀態。

使用主色的容器

當控件容器的底色使用主色的時候，用來指示狀態的疊加層應該使用白色。不同的狀態下，疊加層的不透明度的狀態各不相同，正常狀態下是未疊加，其他狀態下的疊加透明度則從4%到12%不等。

底部容器使用半透明主色的時候，被啟用、懸停、長按、按下和拖動時的不同狀態。

底部容器使用主色的時候，被啟用、懸停、長按、按下和拖動時的不同狀態。

禁用狀態

所有的被禁用的組件，都使用不透明度為 12% 的白色用來呈現外輪廓和填充色，并使用不透明度為 38% 的白色來顯示文本和表層的內容。

1. 輪廓容器：不透明度為12%的白色
2. 標簽/圖標：不透明度為38%的白色
3. 色彩填充容器：不透明度為12%的白色

相關資源

Sticker sheet

Sticker sheet 是和 Sketch for Android 這套組件一起使用的。它包含全套深色主題的布局元素，包括狀態欄、應用欄目、底部工具欄、卡片、下拉菜單、搜索字段、分隔符、導航、對話框等一系列的組件，非常實用。（值得注意的是，Google 官方的設計師大多習慣于使用 Sketch 來設計界面）

已轉存百度云，戳這里下載， 提取碼: mhsr

設計教程（需要梯子）

這是一個可以用到 Figma 當中的 designlab，你可以基于我們已經已有的 Material 主題，并且使用 Material 案例中的素材。

優設編譯：@陳子木