在 2021 年的 I/O 大會上，我們展示了 Material Design 大膽而富有表現力的演變。Material Design 3 在 Material Design Primary 顏色和 Secondary 顏色的基礎上，引入了 Tertiary 顏色和附加色槽，用于驗證無障礙訪問功能并保障顯示的和諧性。在本篇文章中，我們將為您展示更多有關 Material You 動態配色的內容，包括動態配色是什么，以及如何在您的應用中實現它。

Material You 通過動態配色，將顏色重新定義為更加個性化的體驗。那么，什么是動態配色？Android 12 可以通過動態配色提取算法來選擇顏色值，基于動態配色，您可根據用戶的桌面壁紙顏色生成自定義調色板。動態的淺、深色方案可體現在整個用戶系統界面，以及某些應用中。這些方案將根據用戶偏好和視覺需求進行更改或調整。動態配色是一種算法系統，支持個性化顏色體驗的同時還尊重蘊含品牌標識或具有傳統意義的顏色，如綠色代表 "Go"，紅色代表 "Stop"。

首先，它從用戶的壁紙上提取一種源顏色，并推算出五種關鍵顏色，然后將每個關鍵顏色轉化為由 13 種色調組成的調色板。接下來，它會為從調色板中選擇的顏色分配一組特定的角色和值，并將這些角色和值映射到我們稱之為 "方案"的組件上。

配色方案

配色方案可視為一組拼合在一起的相關色調，而非一組固定不變的值。每種色調都會生成一組淺、深色方案，這些方案將根據偏好和視覺需求進行更改或調整。Error 顏色也會自動分配到相應色槽中。界面需要的每個顏色角色，都會經歷這個過程: 通過元素之間的適當對比，從關鍵顏色派生出來。這些顏色角色就是您在設計中要映射到的內容。

△不同顏色的淺深色方案

△新增的 Container 及 Tertiary 顏色色槽

Token

Token 可以有多種類型，它可以與某個值配對或引用另一個 Token。在使用了 M3 后，我們就有了調色板、色彩引用和系統 Token 三個概念。您創建的顏色角色是系統 Token，它們可以繼承我們在調色板中引用的 Token，包括 Primary、Secondary、Tertiary、Neutral、Neutral Variant 以及 Error 顏色。

設計 Token 使得整個產品更具靈活性和一致性，它允許設計師們為界面中元素指定顏色角色，而非設定一個用于實現的值。生成設計 Token 時可通過確定一個單一事實來源，來節省開發者和設計師的時間。例如，開發者可以引用設計 Token 文件以映射到 Compose 中的主題對象；而如果您在代碼中更改了 Token，則可以與設計師共享這些更改，以便設計師在其設計中更新這些值。

△使用 Token 為界面元素指定顏色角色

△相同的 Token，不同的色值

無障礙訪問

如下圖所示，在亮度接近時，盡管兩種顏色的色調并不相同，但調色卻非常相似。這樣的色彩組合使得對比度過低，而對于有一定程度色盲的人來說更是如此。如果對組件應用這樣的色彩組合，則會導致無法滿足無障礙訪問。因此，為了保證顏色在無障礙層面的可及性，所有成對顏色均存在 60 的亮度差。

自定義擴展

這對于您應用的配色來講，也許是一種全新思維方式。但我們如今所創建的數字化產品，會反映出現實生活中的產品趨勢，這意味著更多個性化的色彩、圖案和元素。在我們需要一套配色時，如果您覺得自己的調色板不合適或缺少可用資源時，動態配色可為您提供用戶喜歡的、現成的、可無障礙訪問的調色板。

我們充分理解，您可能需要品牌配色方案成為用戶矚目的焦點，所以最新的配色系統可以在支持無障礙訪問的同時融入應用的顏色背景。您可以使用自己的品牌和設計系統顏色創造出和諧的、可無障礙訪問的調色板。M3 支持自定義參數的系統化應用，這有助于您定義和維護品牌。在 Android 應用上，自定義配色方案也可以作為禁用動態配色后的備用方案。不過，無論是使用動態配色，還是自定義配色，要將您的 Android 應用遷移并使用 Material 3，您首先需要遷移到基礎顏色或 M3 自定義方案來訪問新的 Token。

△M3 基礎顏色角色

我們始終鼓勵您利用 Material Design 并根據需要進行擴展。M3 的顏色系統可以與自定義組件和品牌風格相結合，通過自動處理關鍵調整，滿足無障礙訪問的顏色對比度，保障易讀性、交互狀態和組件結構。

接下來向您介紹如何將應用遷移至 Material 3。遷移的第一步是引用新 Token 并將其與應用中的組件連接。Material 3 的排版、形狀和顏色文件與 Material 2 十分類似，請您確保獲取到最新基礎顏色或自定義品牌方案并設置值。

M3 中有一些新的 Token 需要注意，例如 Primary、Secondary、Tertiary Container 以及 On Variants 系列顏色。對您來說，管理這些顏色可能非常費力，因此我們創建了一個名為 Material Theme Builder 的工具來為您生成這些內容。您可在網頁中打開它并點擊 "Custom"，然后點擊 "Export for Compose"。

最后，您可將這些文件直接放入 Android Studio，并在必要時更新軟件包。這一操作將更新顏色、排版和主題背景文件，更新代碼后您即可運行應用來查看組件映射的新品牌主題背景。

val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.Sval colorScheme = if (dynamic) {       val context = LocalContext.current       if (dark) dynamicLightColorScheme (context) else dynamicDarkColorScheme (context)} else {       // 使用 lightColorScheme、darkColorScheme 等}

您可以有選擇地應用動態配色，并與品牌配色方案同時生效。例如，個人資料或帳戶界面可展示個人的用戶顏色，使重要的時刻變得個性化；如果您有語義顏色，則不必將其排除在外，而是可以將其包含在準備實現的其他顏色之內。這意味著您可為應用的主要主題、語義上的擴展顏色，甚至品牌顏色使用動態配色；或者您使用自己豐富的顏色庫。

△配色方案隨用戶設置的壁紙變化

結語