千呼萬喚！這就是你們要的谷歌深色主題設(shè)計(jì)規(guī)范

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

作為一個(gè)主流趨勢，深色系配色主題必然會逐漸適配到幾乎全部的移動(dòng)端產(chǎn)品上，讓用戶在低亮度環(huán)境下更舒適地和移動(dòng)端界面進(jìn)行交互?？墒?，它的色彩模式、兼容性、系統(tǒng)性、易用性、可交互性以及內(nèi)在邏輯自恰是怎么做到的？也許你不一定要嚴(yán)格遵循這套規(guī)范，但是它會作為標(biāo)桿，告訴你要確保整套主題嚴(yán)密地運(yùn)行，創(chuàng)造體驗(yàn)無縫的 UI 界面。

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

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

用法

深色主題將會讓 UI 的絕大部分以深色來呈現(xiàn)。它是作為默認(rèn)主題（淺色主題）的一個(gè)補(bǔ)充模式而存在。

深色主題將會降低設(shè)備屏幕的顯示亮度，同時(shí)仍保持最低程度的色彩對比度。它將會從人體工程學(xué)的角度提升設(shè)計(jì)，有效地減少視覺疲勞，并根據(jù)當(dāng)前環(huán)境適應(yīng)性地調(diào)整亮度，并在黑暗的環(huán)境中提升屏幕的使用效果，同時(shí)節(jié)省電量。使用 OLED 屏幕的設(shè)備可以在任何時(shí)候確保黑色像素是不發(fā)光的。

原則

在有較大縱深的環(huán)境當(dāng)中，使用深灰色而非黑色來呈現(xiàn)高程和空間。

更深的灰色

深色模式下，不要使用黑色，而是使用深灰色，用來呈現(xiàn)較環(huán)境中的高程和大范圍的區(qū)域。

色彩與調(diào)性

在深色主題的UI當(dāng)中，盡可能使用數(shù)量有限的色彩，確保絕大部分的區(qū)域需要保持深色。

節(jié)約能源

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

增強(qiáng)可訪問性

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

屬性概述

在這一節(jié)當(dāng)中，了解 Material Design 中關(guān)于深色主題的屬性定義

關(guān)于數(shù)字產(chǎn)品中對比度的設(shè)計(jì)，參考國際通行規(guī)則：
World Wide Web Consortium (W3C)Understanding Contrast 了解對比度

Material Design 中的深色主題，基于下面的幾個(gè)屬性來進(jìn)行定義：

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

拆解

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

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

行為

深色主題應(yīng)該可以通過外在顯示的開關(guān)控件，來打開或者關(guān)閉的：

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

在APP的頂部菜單中顯示主題開關(guān)

在彈出菜單的菜單層中顯示開關(guān)

在APP的設(shè)置列表當(dāng)中顯示開關(guān)

屬性

深色主題使用的是深灰色，而不是黑色來作為主要的色彩。深灰色同樣可以表現(xiàn)出非常廣泛的色彩，能夠呈現(xiàn)出高度和深度，因?yàn)橄啾扔诤谏?，灰色表面的陰影其?shí)更容易被感知到。

深灰色的前景色彩能夠降低視覺疲勞，因?yàn)樵谏罨疑砻娴奈淖直仍诤谏砻娴奈淖郑懈偷膶Ρ榷取＃ㄟ€不會出現(xiàn)炫光效果）

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

高程

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

元素越高，對應(yīng)的背景被照亮的程度就越輕微

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

元素越高，顏色相應(yīng)的就越淺、越明亮。

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

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

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

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

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

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

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

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

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

在深色主題之下，陰影同樣應(yīng)該保持深色，用以準(zhǔn)確的描述投影關(guān)系，哪怕它沒有那么顯著。

錯(cuò)誤

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

錯(cuò)誤

不要使用外發(fā)光來替代陰影來表示高程差異，因?yàn)檫@種效果并不能準(zhǔn)確地描述高程陰影投遞下來的效果。

可訪問性與對比度

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

想要?jiǎng)?chuàng)建帶有品牌調(diào)性的深色主題，也請?jiān)谕扑]的深色主題基準(zhǔn)色（#121212）的基礎(chǔ)上，以低不透明度的疊加層，來增加品牌調(diào)性。比如下面的案例中，#1F1B24 這一色彩就是在深色基準(zhǔn)色 #121212 的基礎(chǔ)上，和不透明度為 8%的品牌色疊加之后的結(jié)果。

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

注意

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

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

注意

在 OLED 屏幕上，打開和關(guān)閉像素發(fā)光會導(dǎo)致屏幕滾動(dòng)時(shí)出現(xiàn)延遲，導(dǎo)致像素模糊。

UI應(yīng)用

主題配色

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

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

可訪問性強(qiáng)的不飽和色彩

深色主題應(yīng)該盡量避免使用高飽和度的色彩，因?yàn)樗鼈兌鄶?shù)不能夠達(dá)到 WCAG 對于文本的對比度要求（4.5:1）。高飽和度的色彩能夠在深色背景上產(chǎn)生炫光的視覺效果，產(chǎn)生視覺疲勞。

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

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

錯(cuò)誤

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

主色

主色應(yīng)該是整個(gè)界面和組件中最常顯示的色彩。在整個(gè) Material Design 的深色主題中可以使用色調(diào)為200的基準(zhǔn)色彩。（在不同高程的界面上，能夠通過 WCAG AA標(biāo)準(zhǔn)的 4.5:1對比度的文本）

深色主題的主色范例：

1. 主色指示器
2. 色調(diào)變體

主色變體

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

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

次要色

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

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

1. 次要色指示器
2. 色調(diào)變體

這個(gè) UI 界面中主色和次要色的變體。

強(qiáng)調(diào)色

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

尋找強(qiáng)調(diào)色

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

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

1. 默認(rèn)的主色
2. 深色主題的主色

正確

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

錯(cuò)誤

避免在深色主題中使用高飽和度的色彩，因?yàn)樗鼈兛梢栽谏钌谋尘吧闲纬伸殴庑Ч?/p>

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

避免在深色主題的頂部菜單欄中使用主色，因?yàn)樗鼈冊谏钌黝}下會導(dǎo)致炫光。

品牌色

范例：Owl

Owl 是一個(gè)教育類APP，為想要探索和學(xué)習(xí)新技能的人提供課程。相關(guān)的實(shí)例戳這里（需要梯子）。

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

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

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

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

深色主題基準(zhǔn)配色方案

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

深色主題的色彩應(yīng)該足以覆蓋整個(gè)深色主題的UI界面，包括：

• 色彩（主色、次要色以及色彩變體）
• 界面主體（背景和控件）
• 狀態(tài)呈現(xiàn)（比如報(bào)錯(cuò)狀態(tài)）
• 內(nèi)容呈現(xiàn)（字體排版和圖像）

使用 Material 色彩主題的基準(zhǔn)配色

1. Material Design 默認(rèn)主題的基準(zhǔn)色
2. Material Design 深色主題的基準(zhǔn)色

報(bào)錯(cuò)顏色

報(bào)錯(cuò)顏色主要用來指示出錯(cuò)的狀況和狀態(tài)。Material Design 的深色主題下的報(bào)錯(cuò)基準(zhǔn)色為 #CF6679。

這種報(bào)錯(cuò)的基準(zhǔn)色，是基于默認(rèn)主題（淺色主題）下的報(bào)錯(cuò)顏色 (#B00020)，在疊加了 40% 不透明度的純白圖層之后所構(gòu)成的，它符合 AA 對比度標(biāo)準(zhǔn)。

文本和圖標(biāo)色彩

當(dāng)文本、圖標(biāo)等元素，被置于背景或者某個(gè)控件上方的時(shí)候，為了進(jìn)行區(qū)分的時(shí)候，所應(yīng)該使用的色彩。

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

深色 UI 下使用文本和小圖標(biāo)時(shí)的基準(zhǔn)色。

在深色背景上的淺色文本

當(dāng)淺色文本出現(xiàn)在深色背景上的時(shí)候（這里是白色文本置于黑色背景之上），它應(yīng)該遵循下面的不透明度設(shè)置規(guī)則：

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

重要、中等重要和被禁用的文本區(qū)別

定制應(yīng)用

Material Design 中的一些用例可以幫你更好的設(shè)計(jì)深色主題。

大面積控件區(qū)域

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

對于一些使用了較大區(qū)域的控件或是彈出式菜單，應(yīng)該使用深色主題的基準(zhǔn)色來作為色彩。

正確

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

錯(cuò)誤

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

注意

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

錯(cuò)誤

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

深淺色主題的結(jié)合

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

當(dāng)需要在深色主題中使用淺色的控件的時(shí)候，淺色的控件可以確保層次結(jié)構(gòu)的清晰。

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

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

1. 背景
2. 元素底色
3. （默認(rèn)主題）主色

狀態(tài)

在組件和交互元素的狀態(tài)，通常會借助疊加層的形式來可視化地呈現(xiàn)。在深色主題當(dāng)中，呈現(xiàn)狀態(tài)的疊加層應(yīng)該使用與默認(rèn)主題（或者淺色主題）相同的參數(shù)，并且可以通過調(diào)整來確保它來通過 AA 對比度等級標(biāo)準(zhǔn)。

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

使用基準(zhǔn)色的容器

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

容器底色使用基準(zhǔn)色而文本使用白色的時(shí)候，被啟用、懸停、長按、按下和拖動(dòng)時(shí)的不同狀態(tài)。

容器底色使用基準(zhǔn)色而文本使用主色的時(shí)候，被啟用、懸停、長按、按下和拖動(dòng)時(shí)的不同狀態(tài)。

使用主色的容器

當(dāng)控件容器的底色使用主色的時(shí)候，用來指示狀態(tài)的疊加層應(yīng)該使用白色。不同的狀態(tài)下，疊加層的不透明度的狀態(tài)各不相同，正常狀態(tài)下是未疊加，其他狀態(tài)下的疊加透明度則從4%到12%不等。

底部容器使用半透明主色的時(shí)候，被啟用、懸停、長按、按下和拖動(dòng)時(shí)的不同狀態(tài)。

底部容器使用主色的時(shí)候，被啟用、懸停、長按、按下和拖動(dòng)時(shí)的不同狀態(tài)。

禁用狀態(tài)

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

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

相關(guān)資源

Sticker sheet

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

已轉(zhuǎn)存百度云，戳這里下載， 提取碼: mhsr

設(shè)計(jì)教程（需要梯子）

這是一個(gè)可以用到 Figma 當(dāng)中的 designlab，你可以基于我們已經(jīng)已有的 Material 主題，并且使用 Material 案例中的素材。

優(yōu)設(shè)編譯：@陳子木