做深色主題設計？請看谷歌的行業級設計規范

Sponsor

前段時間Google I/O 大會如約召開，除了更加智能的AI，漸趨一致的多平臺交互手勢，不得不提的就是和設計師息息相關的Dark theme深色主題模式。很多人會奇怪，早在去年macOS Mojave版本就正式上線了深色主題模式，為什么現在要拎出谷歌的深色主題模式單獨說。

原因就是，谷歌此次更新深色主題版本的同時也更新了深色主題的設計規范，行業級設計規范。這一模塊收錄在行業標桿Material Design設計規范的color一欄。IOS和安卓兩大陣營的設計規范同屬于平臺級，直接影響平臺上所有產品設計，因此也間接影響著廣大設計師同胞們，在產品體驗的標準日益提高的當下，深色模式應用在產品設計中的趨勢已經相當明顯，較典型的如網易云音樂的夜間模式。而這份規范，是目前最詳盡可參考的深色模式設計規范，畢竟此規范適用安卓全平臺，適配、對比度可用性等等考慮都很周到。

官方對此主題的闡述是：Material Design引入了制作深色主題的指南，以補充產品現有的Material主題。雖然常規主題非常適合長時間閱讀并提供更清晰的對比度，但黑暗主題的亮度降低，可在黑暗環境中提供安全性并可最大限度地減少眼睛疲勞。

文章目錄：

• 應用原則
• 層級剖析
• 切換方式
• 屬性
• UI應用程序
• 自定義應用
• 狀態
• 資源

一、應用原則

解釋：黑暗主題的大部分區域顯示為黑色。它被設計出來作為默認（或輕量）主題的補充模式。

暗主題降低了設備屏幕發出的亮度，同時仍然滿足最低色彩對比度。它們有助于改善視覺人體工程學，減少眼睛疲勞，根據當前照明條件調節亮度，能提高用戶在黑暗環境下的使用體驗 – 同時節省電池電量。具有OLED屏幕的設備可以在一天中的任何時間關閉黑色像素。（將顯示為黑色的區域像素點關閉，從而達到省電的目的，因為未開啟的像素點默認是黑色）

01.灰色而不是黑色

使用深灰色而不是黑色來表示具有更寬深度范圍的環境中的高度與空間。

（解釋：由于深色主題中無法像常規MD設計中使用陰影，因此使用不同亮度的灰色來表示Z軸的空間關系，不以純黑色作為大范圍使用的底色可以提供更寬的色域來體現Z軸深度關系）

02.顏色與強調

在深色主題中只用有限的顏色用來做強調，從而使大部分區域都使用深色。

03.節約能源

在能夠提高資源利用效率的設備上（例如帶有OLED屏幕的設備），通過減少發光像素的使用來延長電池壽命。

04.增強可訪問性

通過滿足可訪問性顏色對比標準，適應常規的黑暗主題用戶（例如視力不佳的用戶）

和以上四個原則相關聯的幾個指標，比較容易理解，不做解釋。

對比度：深色表面和100％白色正文文本的對比度至少為15.8：1

? ? ? ? 深度：在較高的高度水平下，組件通過顯示較淺的表面顏色來表達深度

? ? ? ? 去飽和：原色去飽和，因此它們在所有高度級別都通過了至少4.5：1（與正文一起使用時）的Web內容可訪問性指南（WCAG）AA標準

? ? ? ? 限制顏色：大表面使用深色表面顏色，僅使用有限的彩色并限定在有限的范圍（控制明度，降低飽和度，避免過于飽和的顏色）

二、界面剖析（層級分解）

解釋：黑暗主題主要使用深色做背景，其他顏色較少，它們發出的亮度很低，但同時仍然保持著足夠高的可用性（強調對比度）

以下是各層級拆解

1.背景（最低層級）

作為背景色及分割色

2.表面（第二層級1dp厚度）

承載內容的卡片bg色，也是主要區域用色

3.表面內的色塊

位于表面內容卡片之上，文字或圖形

4.表面更高層級的色塊

參考上圖懸浮按鈕的底色，層級在卡片之上

5.在背景上的內容

6.在表面內的文字內容

7.表面內的色塊之上的內容

8.在懸浮按鈕之上的內容/操作

可能看起來有點混亂，但以上各層級是遵循MD的z軸理論的，在深度上有區別，同時保證了內容的高對比度。概括下來即在轉變為深色模式的同時繼承了常規場景下的MD的z軸原則（白色背景下通過陰影和顏色體現縱深），同時還能保證了信息的獲取效率，體驗良好。

三、切換方式

解釋：如何切換深色模式?這里提供了兩種場景下的切換途徑。

01.較明顯的切換方式，使用該應用導航欄的icon來進行切換。

02.不太明顯的切換方式，通過菜單或設置中心來切換

四、屬性

解釋：黑色主題使用深灰色而不是黑色作為組件的主要表面顏色。深灰色表面可以表現出更廣泛的顏色，高度和深度，因為我們更容易看到灰色（而不是黑色）上的陰影。

深灰色表面還可以減少眼睛疲勞，因為深灰色表面上的淺色文字比黑色表面上的淺色文字具有更低的對比度。官方推薦的深色主題的表面顏色：#121212

官方推薦的深色主題的表面顏色：#121212

01海拔高度

在黑暗主題中，組件應當保留與較亮主題中的組件相同的默認高度級別和陰影，這需要通過表面的不同亮度來體現這種縱深高度的區別。

海拔越高表面越輕

表面高度越高（越接近隱含光源），表面越輕。通過應用半透明白色 覆蓋層來表達這種輕盈。隨著表面變高，顏色變淺。

通過在組件表面上放置半透明覆蓋物來構造暗主題表面。通過應用半透明白色覆蓋層，表面變得更亮。

1：表面? ? ? 2：高層級疊加

表面上的疊加層還可以使用戶更輕松地區分組件之間的高度并能看到陰影。疊加層還增加了曲面與陰影之間的對比度，使每個曲面的邊緣更加明顯。默認主題使用陰影來表示高度，而深色主題則通過調整表面顏色來表示高度。

這些表面覆蓋值旨在最大限度地提高易讀性，同時確保不同的高度水平彼此可辨別。

高度疊加透明度范圍從最低級別的0％到最高級別的16％。

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

A. 1dp高度，5％覆蓋的卡片

B. 6dp的浮動動作按鈕，使用不帶覆蓋層的輔助顏色

C.高度為8dp的底部應用程序欄，覆蓋率為12％

注意事項：

1.高程覆蓋使用白色疊加的處理手法不能應用于使用主要顏色或次要顏色的組件表面。

2.在黑暗的主題中，陰影保持黑色以準確地表示投射陰影。

02可訪問性與對比度

黑暗主題表面必須足夠暗以顯示白色文本。文本和背景之間至少應該達到15.8：1的對比度級別。這確保了當應用于最高（和最輕）高度的表面時，正文文本通過WCAG的AA標準至少能達到4.5：1。如果背景顏色不夠深，無法在白色文本和表面之間達到至少15.8：1的對比度，則最高（和最輕）高度表面的文本將無法通過4.5：1標準。

針對想要使用帶有品牌色的深色的情況

要創建帶有品牌的深色表面，請在推薦的深色主題表面顏色（＃121212）上以低不透明度覆蓋主要品牌顏色。上圖的案例中顏色＃1F1B24是組合暗主題表面顏色＃121212和8％原色的結果。

需要提高電池使用效率的UI可以使用真正的黑色。在這些情況下，某些設備（例如帶有OLED屏幕的可穿戴設備）可以關閉任何顯示黑色的像素以節省電池電量。但需要注意的是，在OLED屏幕上，打開和關閉像素會導致屏幕滾動時出現延遲，從而使像素模糊如下圖。

五、在UI應用程序中的運用

01主題顏色

所有深色主題顏色都應顯示具有足夠對比度的元素，當應用于所有高度的層級表面時，WCAG的AA標準至少為4.5：1。使用飽和度低的顏色，以提高可訪問性。

一個黑暗的主題應該避免使用過度飽和的顏色，因為他們沒有通過WCAG的至少4.5：1的可訪問性標準。飽和顏色還會在深色背景下產生光學振動，這會引起眼睛疲勞。

相反，不飽和的顏色可以用作更清晰的替代品。

避免使用下圖中這樣飽和度過高的顏色，會在深色背景下造成視覺震動。

附上谷歌色板的鏈接（https://www.materialpalette.com/colors）

02主色的選擇

主要顏色是應用程序屏幕和組件中最常顯示的顏色?；贛aterial Design黑暗主題的規范，請使用原色的200色調（在所有高度層級表面上，通過WCAG的AA標準至少4.5：1用于普通文本）。

特殊情況：具有淺表面的組件可以顯示暗主題的主要顏色的變體。如下圖中白色浮層上的文字鏈按鈕使用的700的深色。

03輔助色的選擇

輔助顏色可用于突出UI的重要部分。在深色主題中，輔助色應該降低飽和度以滿足4.5：1的對比度水平。如下圖，紫色為主色，綠色為輔助色。

04強調色

在深色主題中，灰色界面占據了UI的大部分。強調色通常是淺色（不飽和柔和色）或明亮（飽和，鮮艷的色彩），以幫助強調元素使其脫穎而出。應謹慎使用它們來強調關鍵元素，例如文本或按鈕。

為了在深色主題中提供更多靈活性和可用性，建議在深色主題中使用較淺色調（200-50），而不是默認顏色主題（飽和色調范圍為900-500）。

1是常規用色 2是降低飽和度的用色

通過下面案例可以發現低飽和度用色在深色主題上顯示效果更為出色

05品牌顏色

為了保持品牌標識，品牌顏色可以在深色主題中以完全飽和度使用，但應用應限于一個或兩個品牌元素，例如徽標或品牌按鈕。通過謹慎使用品牌顏色，使元素在層次結構中保持突出。

不飽和的顏色仍應在黑暗主題UI的其余部分中使用，如下圖。

06更新了基于深色主題的調色板

包括：顏色（主要，次要和強調色）；表面（背景和組件）；狀態（例如錯誤狀態）；內容（排版和圖像）

MD默認調色板與深色主題調色板對比

07錯誤顏色

錯誤顏色用于指示錯誤狀態。材質基準深色主題錯誤顏色為＃CF6679。這種深色主題顏色是通過采用淺色主題錯誤顏色（＃B00020）并使用40％白色覆蓋物照亮它來創建的，該顏色通過了AA級對比度標準。

08排版和圖標顏色

on 顏色（理解為頂層內容顏色 ）

默認情況下，深色主題“on”顏色為純白色和純黑色。

深色背景下的輕文本

當淺色文本出現在深色背景上（此處顯示為黑色）時，應使用以下不透明度級別：

高強度文本的不透明度為87％

中等重點文字和提示文字的透明度為60％

禁用文字的不透明度為38％

六、自定義應用

MD設計語言下的一些其他產品也可以從深色主題的規范中受益。下面講解了其他產品在使用深色主題規范時需要注意的事項，及將常規主題規范和深色主題規范結合使用的案例。

01占有較大屏幕面積的控件

使用大面積屏幕的組件（例如應用欄或背景）可以使用深色主題的用色規范作為其組件的表面顏色。

02：結合常規主題和深色主題的用法

當在深色主題中需要較亮表面時，可以在選定的組件表面上使用淺色以保持層次結構。

例如，一個深色主題的美食類app可以顯示一個亮色（純白）的表面，以突出重要信息。為此，它可以應用燈光主題的Surface和On Surface顏色。

這里的On顏色即白色，屬于常規主題中的用色，但在特殊場景下其實是可以使用的，例如下圖中的浮層（snackbar），通過白色背景來突出其層級，用主色來強調主要操作文案。

七、狀態

狀態是MD原則中一個重要原則，狀態可以理解為反饋，即在不用場景、不同操作、不同狀態下該設計元素應當呈現什么樣。

狀態將UI元素處于的階段傳達給用戶，每個元素的不同狀態應當在視覺上相似，并不會徹底改變組件，但必須具有明確的可供性，要求能夠區別于其他狀態和周圍的布局。例如button的四大狀態：可用（常規）、懸浮、按下、不可用。

在深色主題模式中，需要通過顏色的疊加來傳達交互元素的不同狀態。在黑暗主題中，狀態應使用與其默認（或淺色）主題相同的疊加值，并且可以調整它們以通過AA級對比度標準。

有兩種類型的容器可以繼承狀態疊加：它們分別是使用“Surface”顏色和“Primary”顏色的容器。（不記得這倆顏色的往上翻翻）

01使用surface顏色的容器

使用“Surface”的顏色（#121212）的表面容器應該應用與其圖標或文本標簽的顏色匹配的疊加層（如果不存在圖標）。如下圖，背景色使用surface顏色（#121212），背景上的內容則使用白色或者低飽和度的主色，與之對應，疊加層則是4%到12%的不同透明度的白色或者主色。

02使用主色的容器

對于使用“主要”顏色的表面容器，其狀態覆蓋為白色疊加層。

03禁用狀態

對于容器輪廓和填充，使用12％白色顯示所有禁用的組件，對于標簽或圖標等內容使用38％白色顯示。

1：12%透明度輪廓 ? ?2：38%透明度標簽 ? ?3：12%透明度填充

七、資源

除去官方提供的本次深色主題組件庫的sketch文件，我還尋找了其他兩套大家需要的設計資源，下面我將相關文件匯總在一個鏈接，需要的人自行下載，不用客氣。 內容包括下面三個方面：

1.全套Android Nougat

包含一系列界面組件和來自Android 7.0 Nougat的61個精彩界面

2.深色主題組件庫

專為在深色主題模擬中使用而設計的材質組件庫。，該sketch文件與Sketch for Android組件一起使用。它包括構成深色主題布局的元素，包括狀態欄，應用欄，底部工具欄，卡片，下拉菜單，搜索字段，分隔符，側面導航，對話框，浮動操作按鈕和其他組件的符號。

3.動效組件庫

包含了一系列可以直接調用的AE組件，如搜索欄交互動效被合成在一個預合成文件中，用戶可以直接拖動來構成自己的界面動效。

同時，每個AE組件里的數值用戶都可以根據需要自定義。

百度云盤鏈接：https://pan.baidu.com/s/1zvVQm9FykgDqLjbjitsWAQ 提取碼: e5h9

PS：下載鏈接與點贊只隔了一厘米，這都不贊的嘛！

作者：谷歌設計團隊
譯者：南山可（Dribbble 主頁：https://dribbble.com/Asazzywei）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。