新鮮出爐——谷歌深色主題模式設計規範

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

前段時間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％。

疊加層闡明瞭元件之間的高度差異

注意事項：

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主色的選擇

主要顏色是應用程式螢幕和元件中最常顯示的顏色。基於Material 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佔有較大螢幕面積的控制元件

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

七：狀態

狀態是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：下載連結與點贊只隔了一釐米，這都不讚的嘛！

感謝閱讀，點贊萬歲。