前段時間I/O大會如期舉行，除了更加智能的AI、越來越一致的多平臺交互手勢之外，與設(shè)計師息息相關(guān)的Dark主題模式也不能忽略。很多人都好奇，既然去年macOS版本就正式推出了Dark主題模式，為何現(xiàn)在又單單挑出的Dark主題模式呢？

原因在于谷歌在更新暗黑主題版本的時候，也更新了暗黑主題的設(shè)計規(guī)范，這個業(yè)界級別的設(shè)計規(guī)范。這個模塊被收錄在了業(yè)界標桿設(shè)計規(guī)范的Color欄目中。iOS和兩大陣營的設(shè)計規(guī)范都是平臺級別的，直接影響著平臺上所有的產(chǎn)品設(shè)計，也因此間接影響著廣大設(shè)計師同仁。在產(chǎn)品體驗標準越來越高的當下，將暗黑模式應(yīng)用在產(chǎn)品設(shè)計中的趨勢已經(jīng)相當明顯，比如網(wǎng)易云音樂的夜間模式。這個規(guī)范是目前最詳細、最具有參考價值的暗黑模式設(shè)計規(guī)范，畢竟這個規(guī)范是適用于整個平臺的，適配、對比度、易用性等考慮的非常周到。

官方對這個主題的解釋是：引入了制作深色主題的指南，以補充產(chǎn)品現(xiàn)有的主題。雖然常規(guī)主題非常適合長時間閱讀，并且提供更清晰的對比度，但深色主題會降低亮度，以在黑暗環(huán)境中提供安全性并最大限度地減少眼睛疲勞。

目錄

1. 應(yīng)用原則

2. 層次分析

3.切換方法

4. 屬性

5. UI應(yīng)用程序

6. 定制應(yīng)用

7. 狀態(tài)

8.資源下載（文末獲?。?/p>

1. 應(yīng)用原則

說明：深色主題將大部分區(qū)域顯示為黑色。它被設(shè)計為默認（或淺色）主題的補充模式。

深色主題在滿足最低色彩對比度的同時，降低了設(shè)備屏幕發(fā)出的亮度。它們有助于改善視覺人體工程學，減少眼睛疲勞，根據(jù)當前的照明條件調(diào)整亮度，改善黑暗環(huán)境下的用戶體驗，同時節(jié)省電池電量。配備 OLED 屏幕的設(shè)備可以在一天中的任何時間關(guān)閉黑色像素。（關(guān)閉將顯示為黑色的區(qū)域中的像素，從而節(jié)省電量，因為未打開的像素默認為黑色）

1. 灰色代替黑色

在具有更寬深度范圍的環(huán)境中，使用深灰色代替黑色來表示高度和空間。（解釋：由于深色主題無法像常規(guī) MD 設(shè)計那樣使用陰影，因此使用不同亮度的灰色來表示 Z 軸的空間關(guān)系。不使用純黑色作為大范圍基色可以提供更寬的色域來反映 Z 軸深度關(guān)系）

2. 顏色和重點

在深色主題中，使用有限的顏色進行強調(diào)，使大多數(shù)區(qū)域保持深色。

3. 節(jié)省能源

在能夠更有效地利用資源的設(shè)備（例如具有 OLED 屏幕的設(shè)備）上，通過減少發(fā)射像素的使用可以延長電池壽命。

4. 增強可訪問性

通過滿足可訪問性顏色對比度標準來適應(yīng)常規(guī)深色主題用戶（例如視力低下的用戶）。

以上四項原則相關(guān)的幾個指標比較容易理解，就不再解釋了。

2. 層次分析

解釋：深色主題主要以深色作為背景，其他顏色較少，亮度很低，但同時又保持足夠高的可用性（強調(diào)對比）

以下是各個級別的細分：

1. 背景（最低級）：用作背景色和分割色

2.表面（第二級1dp厚度）：承載內(nèi)容的卡片的背景顏色，也是主要區(qū)域顏色

3. 表面內(nèi)的色塊：位于表面內(nèi)容卡、文字或圖形上方

4、表面較高層次的色塊：參考上圖懸浮按鈕的背景色，位于卡片上方。

5. 背景內(nèi)容

6. 表面內(nèi)的文本內(nèi)容

7. 表面色塊上方的內(nèi)容

8. 浮動操作按鈕上方的內(nèi)容/操作

看上去可能有點混亂，但以上這些層次都遵循了 MD 的 Z 軸理論，在保證內(nèi)容高對比度的同時，也保留了深度的差異?？偨Y(jié)一下，在切換到暗黑模式時，既繼承了普通場景下 MD 的 Z 軸原理（在白色背景上通過陰影和顏色體現(xiàn)深度），又保證了高效的信息獲取和良好的體驗。

3.切換方法

說明：如何切換暗黑模式？以下介紹兩種場景下的切換方法：

1、比較明顯的切換方式就是通過應(yīng)用程序?qū)Ш綑谥械膱D標來切換；

2.切換方式不太明顯，通過菜單或者設(shè)置中心切換；

4. 屬性

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

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

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

1.海拔

在深色主題中，組件應(yīng)保留與淺色主題中的組件相同的默認高度級別和陰影，這需要表面上不同的亮度級別來反映這種高度差異。

海拔越高，表面越亮：表面海拔越高（距離隱含光源越近），表面越亮。這種亮度通過應(yīng)用半透明的白色覆蓋層來表達，表面越高，覆蓋層越亮。

通過在組件表面上放置半透明覆蓋層來構(gòu)建深色主題表面。通過應(yīng)用半透明白色覆蓋層，表面會變得更淺。

1：表面 2：高層覆蓋

表面上的疊加層還使用戶更容易區(qū)分組件之間的高度并看到陰影。疊加層還增加了表面和陰影之間的對比度，使每個表面的邊緣更加明顯。默認主題使用陰影來指示高度，而深色主題則通過調(diào)整表面的顏色來指示高度。

這些表面覆蓋值旨在最大限度地提高易讀性，同時確保不同高度級別可以相互辨別。

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

覆蓋層說明了組件之間的高度差異。

A. 高度為 1dp、覆蓋率為 5% 的卡片

B. 6dp 浮動操作按鈕，使用輔助顏色，無覆蓋

C. 底部應(yīng)用欄高度為 8dp，覆蓋率為 12%

防范措施：

1. 白色覆蓋立面處理不適用于采用原色或間色的元件表面；

2. 在深色主題中sketch 圖標打組，陰影保持黑色，以準確呈現(xiàn)投射陰影；

2. 可訪問性和對比度

深色主題表面必須足夠暗才能顯示白色文本。文本和背景之間的對比度應(yīng)至少為 15.8:1。這可確保正文文本在應(yīng)用于最高（和最亮）海拔表面時通過 WCAG 的 AA 標準（至少 4.5:1）。如果背景顏色不夠暗，無法實現(xiàn)白色文本和表面之間至少 15.8:1 的對比度，則最高（和最亮）海拔表面上的文本將無法達到 4.5:1 標準。

如果您希望在品牌顏色中使用較深的顏色，請執(zhí)行以下操作：

要創(chuàng)建品牌深色表面，請將主品牌顏色以低不透明度疊加在推薦的深色主題表面顏色 (#) 上。在上面的示例中，顏色 # 是將深色主題表面顏色 # 與 8% 的主色相結(jié)合的結(jié)果。

需要更省電的 UI 可以使用純黑色。在這些情況下，某些設(shè)備（例如帶有 OLED 屏幕的可穿戴設(shè)備）可以關(guān)閉任何顯示黑色的像素以節(jié)省電池電量。但需要注意的是，在 OLED 屏幕上，打開和關(guān)閉像素會導(dǎo)致屏幕滾動時出現(xiàn)延遲，從而使像素變得模糊，如下所示：

5. UI應(yīng)用程序中的應(yīng)用

1. 主題顏色

所有深色主題顏色都應(yīng)顯示具有足夠?qū)Ρ榷鹊脑?，當?yīng)用于所有高度的表面時，對比度至少應(yīng)達到 WCAG AA 標準 4.5:1。使用飽和度較低的顏色可提高可訪問性。

深色主題應(yīng)避免使用過于飽和的顏色，因為它們無法通過 WCAG 至少 4.5:1 的可訪問性標準。飽和色還會在深色背景下產(chǎn)生光學振動，從而導(dǎo)致眼睛疲勞。

相反，可以使用不飽和的顏色作為更清晰的替代方案。

避免使用過于飽和的顏色（如下圖所示），因為這可能會在深色背景下產(chǎn)生視覺沖突。

附件是 調(diào)色板的鏈接

（）

2. 主色的選擇

主色是應(yīng)用屏幕和組件上出現(xiàn)頻率最高的顏色。根據(jù)深色主題規(guī)范，使用主色的第 200 種色調(diào)（所有高度級別的所有表面上的普通文本至少為 4.5:1，通過 WCAG 的 AA 標準）。

特殊情況：具有淺色表面的組件可以顯示深色主題主色的變體。例如，下圖中白色覆蓋層上的文本鏈接按鈕使用深色 700。

3. 次要顏色的選擇

可以使用輔助色來突出顯示 UI 的重要部分。在深色主題中，應(yīng)降低輔助色的飽和度以達到 4.5:1 的對比度。如下圖所示，紫色是主色，綠色是輔助色。

4.強調(diào)色

在深色主題中，灰色界面占據(jù)了大部分 UI。強調(diào)色通常為淺色（飽和度較低的粉彩色）或亮色（飽和度較高的鮮艷顏色），有助于強調(diào)元素并使其脫穎而出。應(yīng)謹慎使用它們來強調(diào)關(guān)鍵元素，例如文本或按鈕。

為了在深色主題中提供更多的靈活性和可用性，建議在深色主題中使用較淺的色調(diào)（200-50）sketch 圖標打組，而不是默認的顏色主題（飽和色調(diào)范圍 900-500）。

1 是常規(guī)顏色 2 是飽和度降低的顏色

從以下示例中，您可以看到低飽和度的顏色在深色主題上看起來更好。

5. 品牌顏色

為了保持品牌標識，深色主題中可以完全使用品牌顏色，但應(yīng)用應(yīng)僅限于一兩個品牌元素，例如徽標或品牌按鈕。通過謹慎使用品牌顏色，讓元素在層次結(jié)構(gòu)中保持突出。

其余深色主題 UI 仍應(yīng)使用去飽和的顏色，如下所示：

6. 根據(jù)深色主題更新調(diào)色板

包括：顏色（原色、次色和強調(diào)色）、表面（背景和組件）、狀態(tài)（如錯誤狀態(tài)）、內(nèi)容（字體和圖像）

MD 默認調(diào)色板和深色主題調(diào)色板的比較：

7. 錯誤的顏色

錯誤顏色用于指示錯誤狀態(tài)。 基準深色主題錯誤顏色為 #。此深色主題顏色是通過采用淺色主題錯誤顏色 (#) 并使用 40% 白色疊加使其變亮而創(chuàng)建的，它通過了 AA 級對比度標準。

8. 字體和圖標顏色

開啟顏色（理解為頂層內(nèi)容顏色）。默認情況下，深色主題“開啟”顏色為純白色和純黑色。

深色背景上的淺色文字：

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

6. 定制應(yīng)用

語言下的一些其他產(chǎn)品也可以從深色主題規(guī)范中受益。下面講解了其他產(chǎn)品使用深色主題規(guī)范需要注意的事項，以及常規(guī)主題規(guī)范與深色主題規(guī)范結(jié)合使用的情況：

1. 占據(jù)較大屏幕面積的控件

使用大面積屏幕區(qū)域的組件（例如應(yīng)用欄或背景）可以使用深色主題的顏色約定作為其組件的表面顏色。

2. 常規(guī)主題與深色主題結(jié)合使用

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

例如，深色主題的美食應(yīng)用可以顯示淺色（純白色）表面來突出顯示重要信息。為此，它可以應(yīng)用淺色主題和開啟顏色。

這里的 On 顏色為白色，這是常規(guī)主題中使用到的顏色，但其實也可以用在特殊的場景中。例如下圖中的浮動層（）就使用白色背景來凸顯其層級，并使用原色來強調(diào)主要操作文字。

7. 狀態(tài)

狀態(tài)是MD原則中的一個重要原則，狀態(tài)可以理解為反饋，即設(shè)計元素在不同的場景、不同的操作、不同的狀態(tài)下應(yīng)該如何呈現(xiàn)。

狀態(tài)向用戶傳達 UI 元素所處的階段。每個元素的不同狀態(tài)在視覺上應(yīng)該相似，不會完全改變組件，但必須具有明確的可供性，并可與其他狀態(tài)和周圍布局區(qū)分開來。例如，四個主要狀態(tài)：可用（正常）、暫停、按下和不可用。

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

有兩種類型的容器可以繼承狀態(tài)堆疊：使用“”顏色的容器和“”顏色的容器。（如果您不記得哪種顏色，請查找）

1. 使用有顏色的容器

使用“#”（#）顏色的表面容器應(yīng)應(yīng)用與其圖標或文本標簽顏色相匹配的疊加層（如果不存在圖標）。如下圖所示，背景顏色使用顏色（#），背景上的內(nèi)容使用白色或低飽和度的原色，疊加層為白色或原色，透明度級別從 4% 到 12% 不等。

2. 使用原色容器

對于使用原色的表面容器，狀態(tài)覆蓋是白色覆蓋。

3. 禁用狀態(tài)

使用 12% 的白色作為容器輪廓和填充來顯示任何禁用的組件，使用 38% 的白色作為標簽或圖標等內(nèi)容。

1. 12% 透明度輪廓 2. 38% 透明度標簽

3. 12% 透明度填充

8.資源下載

除了官方提供的深色主題組件庫文件外，我還找到了另外兩套大家需要的設(shè)計資源，下面我將相關(guān)文件匯總在一個鏈接中，需要的可以自行下載，內(nèi)容包括以下三個方面：

1. 全套

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

2. 深色主題組件庫

專為暗色主題模擬而設(shè)計的 組件庫。此文件與組件的 一起使用。它包含組成暗色主題布局的元素，包括以下符號：狀態(tài)欄、應(yīng)用欄、底部工具欄、卡片、下拉菜單、搜索字段、分隔符、側(cè)邊導(dǎo)航、對話框、浮動操作按鈕和其他組件。

3.動畫組件庫

其內(nèi)含一系列可直接調(diào)用的AE組件，例如搜索欄的交互動畫，就是合成在預(yù)先合成好的文件中，用戶可直接拖動制作屬于自己的界面動畫。

同時用戶可以根據(jù)自己的需要自定義各個AE組件中的值。

請在“IXDC”訂閱號后臺回復(fù)：“暗黑模式”獲取資源下載鏈接，有效期7天，快點哦~

如有侵權(quán)請聯(lián)系刪除！