暗色主題是什麼？
最近，Material Design中新增了關於暗色主題的設計規範：暗色主題（Dark theme）是指在UI介面中使用大面積的深色來構成介面的一種設計，它是產品預設主題的一種補充。很多朋友可能認為暗色主題就是現在新聞客戶端的“夜間模式”，這個說法其實並不正確。因為暗色主題是可以由使用者自己選擇是否開啟的，它的使用場景並不侷限於夜晚。很多使用者偏愛暗色模式是因為暗色更“酷”。比如前段時間蘋果電腦增加了類似的“黑暗模式”（Dark Mode）的設計，大受使用者的喜愛。使用者沉迷使用暗色主題，而不是以前灰色的預設設計。暗色主題不但顏值高，而且可以在保持色彩對比度的同時降低裝置螢幕的亮度，還可以根據當前照明條件自動調節亮度，這有助於改善視覺疲勞。除此之外，暗色主題還可以節省裝置的電量，可謂是一舉多得。那麼，暗色模式都有什麼樣的規範呢？
首先，暗色模式用深色視覺元素來構成介面的UI
使用深灰色進行設計
在設計暗色主題的時候，我們應該使用深灰色來進行介面設計。黑色由於太過於深邃，無法讓使用者感知當前介面的高度和空間感，而不同級別的灰色就可以暗示給使用者這些資訊。
使用強調色彩突出元件
在暗色主題下，我們可以使用少量的強調色彩來凸顯一部分功能或者元件，大部分的介面全部為深灰色，所以這些被凸顯的部分會更加突出。
節約能源
在很多帶有OLED螢幕的裝置中，暗色主題可以透過減少亮色的使用來有效地延長電池壽命。試驗表明，使用暗色主題可以讓裝置的續航時間變長。
增強可訪問性
暗色主題對於色弱及有其他視覺障礙的使用者非常友好，可以提升他們使用產品的體驗。
規則
對比度：深色背景和100％白色正文文字的對比度達15。8：1以上。
資訊層級：元件和元素透過較深和較淺的灰色來表達資訊層級。
飽和度：介面中主要色彩與文字資訊的對比度應該高於4。5：1（根據Web可用性指南的標準）。
設計少量強調色彩：我們在設計時會使用大量深灰色來設計背景，也會用少量強調色彩來表示更重要的資訊，與背景產生對比。
關於資訊層級
暗色主題的UI介面主要使用深灰色的背景和少量的強調色彩，它們不刺眼但仍然保持著很強的可用性。使用者使用起來不會有任何的不舒適。介面按資訊層級的重要性依次讓使用者注意到以下四部分：主強調色、次強調色、較亮的灰色前景、較暗的灰色背景。
1 背景（高度：0dp）；2 表面（高度：1dp）；3 主強調色； 4次強調色；5 在背景上的元素； 6 在層級上的文字色； 7 主強調色上的文字色； 8 次強調色上的圖示色
觸發暗色主題的開關
我們可以設計控制元件來讓使用者開啟（或關閉）暗色主題，這個控制元件可以使用很明顯的方式來進行突出強調：比如在明顯的位置設計開關圖示來讓使用者切換；也可以使用不太明顯的方式：在選單或者設定介面中放置開關。
形式1：頂部應用欄中的暗色主題開關
形式2：在氣泡中切換暗色主題
形式3：在設定介面中切換暗色主題
暗色的屬性
暗色主題使用深灰色而非黑色作為元件的主要設計配色。深灰色表面可以表現出更廣泛的高度和深度，因為我們仍然可以在深灰色之上設計更重的投影。除此之外，深灰色的設計還可以減少視覺疲勞，因為深灰色表面上的淺色文字與黑色表面上的淺色文字相比對比度更低，對眼睛刺激較小。
推薦的深色主題預設顏色為＃121212
海拔高度
在暗色主題中的元件和在預設主題中的元件可以使用相同的海拔和陰影大小，然而在暗色主題下它們的色彩會根據資訊層級的排序而改變，這一點是透過明度不同的灰色來表現的：海拔越高則越亮（暗示接近光源）。我們在這裡透過給深灰色上疊加一層不同透明度的白色來改變亮度（不是直接做灰色的形狀）。
元素的海拔越高，顏色就越亮
透過使用半透明白色覆蓋層來暗示海拔：1。形狀 2。帶有透明度的白色疊加層
預設主題使用陰影來表示海拔，而暗色主題則透過表面顏色來表示海拔
不同的海拔高度與白色層不同的透明度之間的換算關係（透明度從0％到16％）
A。 高度為1dp、5％白色疊加的卡片式設計； B。 高度為6dp的FAB按鈕，使用了次要強調的顏色 C。高度為8dp的底部應用程式欄，12％白色疊加
錯誤1：輔助色的配色所表示的海拔不應該過高
錯誤2：陰影的顏色應該暗於介面元素的顏色
可訪問性和對比度
暗色主題表面必須足夠暗才可以顯示白色的文字。為保證資訊能夠被良好的閱讀，文字和背景之間的對比度應不少於15。8：1。也就是說，我們不可以用純白色來設計所有的文字資訊，而要根據背景色和文字的對比度來調整。
如果需要建立帶有品牌色的暗色介面，請在推薦的暗色主題預設顏色（＃121212）上疊加帶有不透明度的主要品牌色。這個案例中，介面深色＃1F1B24是暗色主題預設顏色＃121212和8％的品牌紫色疊加的結果。
科普一下，在顯示純黑色的時候，螢幕需要消耗更高的電量。為了節能，某些裝置（例如帶有OLED螢幕的可穿戴裝置）可以關閉所有顯示黑色的畫素以節省電池電量。
使用調色盤中較少飽和的紫色可以提高在深色背景中的易讀性並減少視覺上的突兀
輔助色飽和度過高，和背景不融合
主體色
主體色是應用裡最常顯示的顏色。Material Design暗色主題使用原色的200色調（在所有背景和層級上均需透過WCAG的AA標準：文字和背景至少對比度達到4。5：1）。
暗色主題中的主體色示例：1。主要顏色 2。色調變體
主體色變體
在我們設計介面時，某些淺色介面上的元件需要使用主體色的變體。
這個暗色主題使用了主體色（紫色200）和主體色的變體（紫色700）
輔助色
大多數的時候我們都無法僅僅依靠主體色這一種顏色撐起畫面，我們還需要輔助色。輔助色一般來說是主體色的臨近色或互補色。在暗色主題中，輔助色可以用來顯示用於突出的部分內容。當然，輔助色同樣必須滿足背景與文字4。5：1的對比度要求。
暗色主題中的輔助色調色盤1。輔助色指示符2。色調變體
這個介面中使用了主體色和輔助色變體
強調色
在暗色的主題中，暗色佔據了UI的大部分空間。而在暗色之上我們也會運用強調色。強調色通常是淺色或明亮的色彩，這樣的顏色能讓我們希望突出的元素在暗色中脫穎而出。
為了提升靈活性和可用性，建議在暗色主題中使用較淺的色調（200-50），而不是預設主題顏色（飽和色調範圍為900-500）。1。預設主題原色指示燈2。暗色主題原色
選擇色彩時要考慮飽和度對介面閱讀的影響
暗色主題下頂部應用欄使用的顏色不可以是主體色
品牌色
為了保持品牌的識別性，品牌顏色可以在暗色主題中使用，但應當僅限於一個或兩個品牌元素，例如Logo或品牌按鈕。介面中的其他部分如文字和次要元素仍然可以使用飽和度低的顏色來設計。
1。 暗色主題色2。品牌顏色
飽和度很高的品牌色應用於FAB（2），而不飽和的暗主題色應用於文字（1）
暗色主題色板
我們設計一個產品的時候需要完成一套專屬的色板，它包括：顏色（主體色、輔助色、主體色變體、輔助色變體）、表面（背景和元件）、狀態（例如錯誤狀態） 內容（排版和影象）等的色彩選擇。
暗色主題的色板例項
1 Material Design預設主題色板 2 Material Design暗色主題色板
錯誤顏色
錯誤顏色在產品中用來指示錯誤狀態，當看到這個色彩，使用者就知道有些事情出錯了。暗色主題的預設錯誤顏色為＃CF6679。
這種顏色是透過預設的錯誤顏色（＃B00020）並使用40％白色疊加來建立的，這種顏色通過了AA級對比度標準。
文字顏色
當淺色文字出現在深色背景上的時候時，應使用以下不透明度：高度強調的文字（87%）、中等強調的文字（60%）和禁用文字（38%）。
高度強調的文字、中等強調的文字和禁用文字的顏色
狀態
透過使用疊加顏色來傳達元件或互動元素的狀態。在暗色主題中，狀態應使用與其預設主題相同的疊加值，並且可以調整它們以透過AA級對比度標準。
懸停、聚焦、按下和拖動狀態時元件的不同設計
使用什麼軟體設計？
Material Design旨在為設計師設計一套可以應用在所有平臺的設計語言。在目前的UI設計界較為通用的軟體都可以支援Material Design的設計，比如我們可以行業裡比較流行的Adobe XD、Sketch、Figma等UI軟體來設計介面。Material Design提供了暗色主題的Sketch檔案，大家可以在支援Sketch格式的設計軟體如XD、Sketch、Figma中開啟它。
使用Adobe XD開啟暗色主題模板
參考資料：
MD可用性設計指引：
https：//
material。io/design/usab
ility/accessibility。html
W3C可用性標準：
https：//www。
w3。org/TR/UNDERSTANDING
-WCAG20/visual-audio-contrast-contrast。html
暗色主題Sketch模板：
https：//
pan。baidu。com/s/1oJvNZL
lXVmX5_-qXs7fJ9w
提取碼：kl57
