本文是我學(xué)習(xí) Material Design 設(shè)計(jì)規(guī)范的學(xué)習(xí)筆記和個(gè)人理解，希望對(duì)大家設(shè)計(jì)暗色主題有所幫助。

暗色主題是什么？

最近，Material Design 中新增了關(guān)于暗色主題的設(shè)計(jì)規(guī)范。暗色主題（Dark theme）是指在 UI 界面中使用大面積的深色來(lái)構(gòu)成界面的一種設(shè)計(jì)，它是產(chǎn)品默認(rèn)主題的一種補(bǔ)充。很多朋友可能認(rèn)為暗色主題就是現(xiàn)在新聞客戶端的「夜間模式」，這個(gè)說(shuō)法其實(shí)并不正確。因?yàn)榘瞪黝}是可以由用戶自己選擇是否開(kāi)啟的，它的使用場(chǎng)景并不局限于夜晚。很多用戶偏愛(ài)暗色模式是因?yàn)榘瞪缚帷埂１热缜岸螘r(shí)間蘋(píng)果電腦增加了類(lèi)似的「黑暗模式」（Dark Mode）的設(shè)計(jì)，大受用戶的喜愛(ài)。用戶沉迷使用暗色主題，而不是以前灰色的默認(rèn)設(shè)計(jì)。暗色主題不但顏值高，而且可以在保持色彩對(duì)比度的同時(shí)降低設(shè)備屏幕的亮度，還可以根據(jù)當(dāng)前照明條件自動(dòng)調(diào)節(jié)亮度，這有助于改善視覺(jué)疲勞。除此之外，暗色主題還可以節(jié)省設(shè)備的電量，可謂是一舉多得。那么，暗色模式都有什么樣的規(guī)范呢？

首先，暗色模式用深色視覺(jué)元素來(lái)構(gòu)成界面的 UI。

1. 使用深灰色進(jìn)行設(shè)計(jì)

在設(shè)計(jì)暗色主題的時(shí)候，我們應(yīng)該使用深灰色來(lái)進(jìn)行界面設(shè)計(jì)。黑色由于太過(guò)于深邃，無(wú)法讓用戶感知當(dāng)前界面的高度和空間感，而不同級(jí)別的灰色就可以暗示給用戶這些信息。

2. 使用強(qiáng)調(diào)色彩突出組件

在暗色主題下，我們可以使用少量的強(qiáng)調(diào)色彩來(lái)凸顯一部分功能或者組件，大部分的界面全部為深灰色，所以這些被凸顯的部分會(huì)更加突出。

3. 節(jié)約能源

在很多帶有 OLED 屏幕的設(shè)備中，暗色主題可以通過(guò)減少亮色的使用來(lái)有效地延長(zhǎng)電池壽命。試驗(yàn)表明，使用暗色主題可以讓設(shè)備的續(xù)航時(shí)間變長(zhǎng)。

4. 增強(qiáng)可訪問(wèn)性

暗色主題對(duì)于色弱及有其他視覺(jué)障礙的用戶非常友好，可以提升他們使用產(chǎn)品的體驗(yàn)。

5. 規(guī)則

對(duì)比度：深色背景和 100% 白色正文文本的對(duì)比度達(dá) 15.8 : 1 以上。

信息層級(jí)：組件和元素通過(guò)較深和較淺的灰色來(lái)表達(dá)信息層級(jí)。

飽和度：界面中主要色彩與文字信息的對(duì)比度應(yīng)該高于 4.5 : 1（根據(jù)Web可用性指南的標(biāo)準(zhǔn)）。

設(shè)計(jì)少量強(qiáng)調(diào)色彩：我們?cè)谠O(shè)計(jì)時(shí)會(huì)使用大量深灰色來(lái)設(shè)計(jì)背景，也會(huì)用少量強(qiáng)調(diào)色彩來(lái)表示更重要的信息，與背景產(chǎn)生對(duì)比。

關(guān)于信息層級(jí)

暗色主題的 UI 界面主要使用深灰色的背景和少量的強(qiáng)調(diào)色彩，它們不刺眼但仍然保持著很強(qiáng)的可用性。用戶使用起來(lái)不會(huì)有任何的不舒適。界面按信息層級(jí)的重要性依次讓用戶注意到以下四部分：主強(qiáng)調(diào)色、次強(qiáng)調(diào)色、較亮的灰色前景、較暗的灰色背景。

△ ①背景（高度：0dp）；②表面（高度：1dp）；③主強(qiáng)調(diào)色； ④次強(qiáng)調(diào)色；⑤在背景上的元素； ⑥在層級(jí)上的文字色；⑦主強(qiáng)調(diào)色上的文字色；⑧次強(qiáng)調(diào)色上的圖標(biāo)色

觸發(fā)暗色主題的開(kāi)關(guān)

我們可以設(shè)計(jì)控件來(lái)讓用戶打開(kāi)（或關(guān)閉）暗色主題，這個(gè)控件可以使用很明顯的方式來(lái)進(jìn)行突出強(qiáng)調(diào)：比如在明顯的位置設(shè)計(jì)開(kāi)關(guān)圖標(biāo)來(lái)讓用戶切換；也可以使用不太明顯的方式：在菜單或者設(shè)置界面中放置開(kāi)關(guān)。

△ 形式1：頂部應(yīng)用欄中的暗色主題開(kāi)關(guān)

△ 形式2：在氣泡中切換暗色主題

△ 形式3：在設(shè)置界面中切換暗色主題

1. 暗色的屬性

暗色主題使用深灰色而非黑色作為組件的主要設(shè)計(jì)配色。深灰色表面可以表現(xiàn)出更廣泛的高度和深度，因?yàn)槲覀內(nèi)匀豢梢栽谏罨疑显O(shè)計(jì)更重的投影。除此之外，深灰色的設(shè)計(jì)還可以減少視覺(jué)疲勞，因?yàn)樯罨疑砻嫔系臏\色文字與黑色表面上的淺色文字相比對(duì)比度更低，對(duì)眼睛刺激較小。

△ 推薦的深色主題默認(rèn)顏色為 #121212

2. 海拔高度

在暗色主題中的組件和在默認(rèn)主題中的組件可以使用相同的海拔和陰影大小，然而在暗色主題下它們的色彩會(huì)根據(jù)信息層級(jí)的排序而改變，這一點(diǎn)是通過(guò)明度不同的灰色來(lái)表現(xiàn)的：海拔越高則越亮（暗示接近光源）。我們?cè)谶@里通過(guò)給深灰色上疊加一層不同透明度的白色來(lái)改變亮度（不是直接做灰色的形狀）。

△ 元素的海拔越高，顏色就越亮

△ 通過(guò)使用半透明白色覆蓋層來(lái)暗示海拔：①形狀；②帶有透明度的白色疊加層

默認(rèn)主題使用陰影來(lái)表示海拔，而暗色主題則通過(guò)表面顏色來(lái)表示海拔

△ 不同的海拔高度與白色層不同的透明度之間的換算關(guān)系（透明度從0％到16％）

△ A.高度為 1dp、5% 白色疊加的卡片式設(shè)計(jì)； B.高度為 6dp 的 FAB 按鈕，使用了次要強(qiáng)調(diào)的顏色 ；C.高度為 8dp 的底部應(yīng)用程序欄，12% 白色疊加

• 錯(cuò)誤1：輔助色的配色所表示的海拔不應(yīng)該過(guò)高
• 錯(cuò)誤2：陰影的顏色應(yīng)該暗于界面元素的顏色

3. 可訪問(wèn)性和對(duì)比度

暗色主題表面必須足夠暗才可以顯示白色的文本。為保證信息能夠被良好的閱讀，文本和背景之間的對(duì)比度應(yīng)不少于 15.8 : 1。也就是說(shuō)，我們不可以用純白色來(lái)設(shè)計(jì)所有的文本信息，而要根據(jù)背景色和文本的對(duì)比度來(lái)調(diào)整。

如果需要?jiǎng)?chuàng)建帶有品牌色的暗色界面，請(qǐng)?jiān)谕扑]的暗色主題默認(rèn)顏色（#121212）上疊加帶有不透明度的主要品牌色。這個(gè)案例中，界面深色「#1F1B24」是暗色主題默認(rèn)顏色 #121212和 8% 的品牌紫色疊加的結(jié)果。

科普一下，在顯示純黑色的時(shí)候，屏幕需要消耗更高的電量。為了節(jié)能，某些設(shè)備（例如帶有 OLED 屏幕的可穿戴設(shè)備）可以關(guān)閉所有顯示黑色的像素以節(jié)省電池電量。

△ 使用調(diào)色板中較少飽和的紫色可以提高在深色背景中的易讀性并減少視覺(jué)上的突兀

△ 輔助色飽和度過(guò)高，和背景不融合

4. 主體色

主體色是應(yīng)用里最常顯示的顏色。Material Design 暗色主題使用原色的 200 色調(diào)（在所有背景和層級(jí)上均需通過(guò) WCAG 的 AA 標(biāo)準(zhǔn)：文本和背景至少對(duì)比度達(dá)到 4.5 : 1）。

△ 暗色主題中的主體色示例：①主要顏色；②色調(diào)變體

5. 主體色變體

在我們?cè)O(shè)計(jì)界面時(shí)，某些淺色界面上的組件需要使用主體色的變體。

△ 這個(gè)暗色主題使用了主體色（紫色200）和主體色的變體（紫色700）

6. 輔助色

大多數(shù)的時(shí)候我們都無(wú)法僅僅依靠主體色這一種顏色撐起畫(huà)面，我們還需要輔助色。輔助色一般來(lái)說(shuō)是主體色的鄰近色或互補(bǔ)色。在暗色主題中，輔助色可以用來(lái)顯示用于突出的部分內(nèi)容。當(dāng)然，輔助色同樣必須滿足背景與文本 4.5 : 1 的對(duì)比度要求。

△ 暗色主題中的輔助色調(diào)色板：①輔助色指示符；②色調(diào)變體

△ 這個(gè)界面中使用了主體色和輔助色變體

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

在暗色的主題中，暗色占據(jù)了 UI 的大部分空間。而在暗色之上我們也會(huì)運(yùn)用強(qiáng)調(diào)色。強(qiáng)調(diào)色通常是淺色或明亮的色彩，這樣的顏色能讓我們希望突出的元素在暗色中脫穎而出。

△?①默認(rèn)主題原色指示燈；②暗色主題原色

為了提升靈活性和可用性，建議在暗色主題中使用較淺的色調(diào)（200-50），而不是默認(rèn)主題顏色（飽和色調(diào)范圍為900-500）。

△ 選擇色彩時(shí)要考慮飽和度對(duì)界面閱讀的影響

△ 暗色主題下頂部應(yīng)用欄使用的顏色不可以是主體色

8. 品牌色

為了保持品牌的識(shí)別性，品牌顏色可以在暗色主題中使用，但應(yīng)當(dāng)僅限于一個(gè)或兩個(gè)品牌元素，例如 Logo 或品牌按鈕。界面中的其他部分如文字和次要元素仍然可以使用飽和度低的顏色來(lái)設(shè)計(jì)。

△ ①暗色主題色；② 品牌顏色。飽和度很高的品牌色應(yīng)用于FAB ②，而不飽和的暗主題色應(yīng)用于文本①

9. 暗色主題色板

我們?cè)O(shè)計(jì)一個(gè)產(chǎn)品的時(shí)候需要完成一套專(zhuān)屬的色板，它包括：顏色（主體色、輔助色、主體色變體、輔助色變體）、表面（背景和組件）、狀態(tài)（例如錯(cuò)誤狀態(tài)） 內(nèi)容（排版和圖像）等的色彩選擇。

10. 暗色主題的色板實(shí)例

△ ①M(fèi)aterial Design默認(rèn)主題色板；②Material Design暗色主題色板

11. 錯(cuò)誤顏色

錯(cuò)誤顏色在產(chǎn)品中用來(lái)指示錯(cuò)誤狀態(tài)，當(dāng)看到這個(gè)色彩，用戶就知道有些事情出錯(cuò)了。暗色主題的默認(rèn)錯(cuò)誤顏色為 #CF6679。

這種顏色是通過(guò)默認(rèn)的錯(cuò)誤顏色（#B00020）并使用 40% 白色疊加來(lái)創(chuàng)建的，這種顏色通過(guò)了 AA 級(jí)對(duì)比度標(biāo)準(zhǔn)。

文本顏色

當(dāng)淺色文本出現(xiàn)在深色背景上的時(shí)候，應(yīng)使用以下不透明度：高度強(qiáng)調(diào)的文本（87%）、中等強(qiáng)調(diào)的文本（60%）和禁用文本（38%）。

△ 高度強(qiáng)調(diào)的文本、中等強(qiáng)調(diào)的文本和禁用文本的顏色

1. 狀態(tài)

通過(guò)使用疊加顏色來(lái)傳達(dá)組件或交互元素的狀態(tài)。在暗色主題中，狀態(tài)應(yīng)使用與其默認(rèn)主題相同的疊加值，并且可以調(diào)整它們以通過(guò) AA 級(jí)對(duì)比度標(biāo)準(zhǔn)。

△ 懸停、聚焦、按下和拖動(dòng)狀態(tài)時(shí)組件的不同設(shè)計(jì)

2. 使用什么軟件設(shè)計(jì)？

Material Design 旨在為設(shè)計(jì)師設(shè)計(jì)一套可以應(yīng)用在所有平臺(tái)的設(shè)計(jì)語(yǔ)言。在目前的UI設(shè)計(jì)界較為通用的軟件都可以支持 Material Design 的設(shè)計(jì)，比如我們可以用行業(yè)里比較流行的 Adobe XD、Sketch、Figma 等 UI 軟件來(lái)設(shè)計(jì)界面。Material Design 提供了暗色主題的 Sketch 文件，大家可以在支持 Sketch 格式的設(shè)計(jì)軟件如 XD、Sketch、Figma 中打開(kāi)它。

△ 使用Adobe XD打開(kāi)暗色主題模板

參考資料：

MD可用性設(shè)計(jì)指引

W3C可用性標(biāo)準(zhǔn)

暗色主題Sketch模板：https://pan.baidu.com/s/1oJvNZLlXVmX5_-qXs7fJ9w ?提取碼：kl57；

備用下載鏈接：https://share.weiyun.com/5D06yXg

歡迎關(guān)注作者的微信公眾號(hào)：「西見(jiàn)」