Material Design 是 Google 打造的、具有超強表現力和適應性的設計系統，包含設計準則、元件和工具，助力實現使用者介面設計的最佳實踐。Material Design 是開源開放的，提供了一個可自定義的大型元件庫，能夠滿足各種樣式和品牌需求，從而可以幫助您的團隊在 Android、Flutter 和 Web 領域創造高質量的數字體驗。
在 2021 年的 I/O 大會上，我們展示了 Material Design 大膽而富有表現力的演變。Material Design 3 在 Material Design Primary 顏色和 Secondary 顏色的基礎上，引入了 Tertiary 顏色和附加色槽，用於驗證無障礙訪問功能並保障顯示的和諧性。在本篇文章中，我們將為您展示更多有關 Material You 動態配色的內容，包括動態配色是什麼，以及如何在您的應用中實現它。
如果您更喜歡通過視訊瞭解此內容，請在此處檢視:
https://www.bilibili.com/vide...
△ 藉助 Material You 動態配色豐富您的應用
動態配色
Material You 通過動態配色，將顏色重新定義為更加個性化的體驗。那麼，什麼是動態配色？Android 12 可以通過動態配色提取演算法來選擇顏色值，基於動態配色，您可根據使用者的桌面桌布顏色生成自定義調色盤。動態的淺、深色方案可體現在整個使用者系統介面，以及某些應用中。這些方案將根據使用者偏好和視覺需求進行更改或調整。動態配色是一種演算法系統，支援個性化顏色體驗的同時還尊重蘊含品牌標識或具有傳統意義的顏色，如綠色代表 "Go"，紅色代表 "Stop"。
△ 動態配色可提取桌布主色調
動態配色的原理
首先，它從使用者的桌布上提取一種源顏色，並推算出五種關鍵顏色，然後將每個關鍵顏色轉化為由 13 種色調組成的調色盤。接下來，它會為從調色盤中選擇的顏色分配一組特定的角色和值，並將這些角色和值對映到我們稱之為 "方案" 的元件上。
△ 從桌布中提取關鍵顏色
△ 從關鍵顏色生成調色盤
配色方案
配色方案可視為一組拼合在一起的相關色調，而非一組固定不變的值。每種色調都會生成一組淺、深色方案，這些方案將根據偏好和視覺需求進行更改或調整。Error 顏色也會自動分配到相應色槽中。介面需要的每個顏色角色，都會經歷這個過程: 通過元素之間的適當對比，從關鍵顏色派生出來。這些顏色角色就是您在設計中要對映到的內容。
△ 不同顏色的淺深色方案
您可能已經熟悉了目前的 12 個顏色槽，比如其中的 Primary 色調和 On Primary 色調。在 Material Design 3 (或簡稱為 M3) 中，我們在設計方案裡引入了新調色盤和角色，您可將 Container 顏色及其對應的 On Container 顏色，用於無需像非容器元素那樣強調的介面元素。另外，新的 Tertiary 顏色調色盤，則用於為您的產品帶來更廣泛的色彩表現力。
△ 新增的 Container 及 Tertiary 顏色色槽
Token
使用動態配色，意味著我們需要使用會在執行時改變的值構建介面，這就需要我們根據語義，而非硬編碼的值來引用顏色。那麼如何使這一切成為可能呢？方法是使用 Token。Token 在 Material Design 2 顏色角色的基礎上，提供了全域性的樣式色槽，它能夠幫您更改與顏色級聯一致的角色分配。
△ 在介面中使用 Token
Token 可以有多種型別，它可以與某個值配對或引用另一個 Token。在使用了 M3 後，我們就有了調色盤、色彩引用和系統 Token 三個概念。您建立的顏色角色是系統 Token，它們可以繼承我們在調色盤中引用的 Token，包括 Primary、Secondary、Tertiary、Neutral、Neutral Variant 以及 Error 顏色。
設計 Token 使得整個產品更具靈活性和一致性，它允許設計師們為介面中元素指定顏色角色，而非設定一個用於實現的值。生成設計 Token 時可通過確定一個單一事實來源，來節省開發者和設計師的時間。例如，開發者可以引用設計 Token 檔案以對映到 Compose 中的主題物件；而如果您在程式碼中更改了 Token，則可以與設計師共享這些更改，以便設計師在其設計中更新這些值。
△ 使用 Token 為介面元素指定顏色角色
通過使用 Token 替代顏色和排版的硬編碼值，您可以更輕鬆地對設計進行迭代。色調調色盤中的顏色可通過設計 Token 對映到淺、深色彩方案中，同時顏色方案的值也可以被重寫，以便繼承自定義顏色或其他色彩引用的 Token。
△ 色值、調色盤及系統顏色 Token 間的對映關係
您可以利用這些帶有 Token 的顏色對映，將使用者生成的顏色轉變為動態且富有表現力的介面。當系統顏色在執行過程中發生變化時便會更新調色盤以及配色方案，而後者便是您對映到主題背景和元件的配色方案。在相應的元件上使用正確的顏色規則，以確保可以無障礙訪問和風格的連續性，這是至關重要的一點。
△ 相同的 Token，不同的色值
無障礙訪問
但是這些 Token 本身如何確保色彩的無障礙訪問？由於配色方案是由調色定義的，而非色調或十六進位制值，所以，為了使任何配色方案在預設情況下均可滿足無障礙訪問，顏色組合要基於亮度來滿足無障礙使用的標準。
△ 顏色組合需要基於亮度來滿足無障礙訪問
如下圖所示，在亮度接近時，儘管兩種顏色的色調並不相同，但調色卻非常相似。這樣的色彩組合使得對比度過低，而對於有一定程度色盲的人來說更是如此。如果對元件應用這樣的色彩組合，則會導致無法滿足無障礙訪問。因此，為了保證顏色在無障礙層面的可及性，所有成對顏色均存在 60 的亮度差。
△ 色調、亮度對於對比度的影響
自定義擴充套件
動態配色讓個人裝置變得更為個性化。一旦您在產品介面中加入個性化設定，使用者將比以往任何時候都能更好地控制他們的裝置。通過使用動態配色和 M3 配色方案，使用者桌布將能夠影響應用的配色方案，您的應用顏色會自動適應與整合使用者的桌布顏色。
這對於您應用的配色來講，也許是一種全新思維方式。但我們如今所建立的數字化產品，會反映出現實生活中的產品趨勢，這意味著更多個性化的色彩、圖案和元素。在我們需要一套配色時，如果您覺得自己的調色盤不合適或缺少可用資源時，動態配色可為您提供使用者喜歡的、現成的、可無障礙訪問的調色盤。
我們充分理解，您可能需要品牌配色方案成為使用者矚目的焦點，所以最新的配色系統可以在支援無障礙訪問的同時融入應用的顏色背景。您可以使用自己的品牌和設計系統顏色創造出和諧的、可無障礙訪問的調色盤。M3 支援自定義引數的系統化應用，這有助於您定義和維護品牌。在 Android 應用上，自定義配色方案也可以作為禁用動態配色後的備用方案。不過，無論是使用動態配色，還是自定義配色，要將您的 Android 應用遷移並使用 Material 3，您首先需要遷移到基礎顏色或 M3 自定義方案來訪問新的 Token。
△ M3 基礎顏色角色
我們始終鼓勵您利用 Material Design 並根據需要進行擴充套件。M3 的顏色系統可以與自定義元件和品牌風格相結合，通過自動處理關鍵調整，滿足無障礙訪問的顏色對比度，保障易讀性、互動狀態和元件結構。
遷移至 Material 3
接下來向您介紹如何將應用遷移至 Material 3。遷移的第一步是引用新 Token 並將其與應用中的元件連線。Material 3 的排版、形狀和顏色檔案與 Material 2 十分類似，請您確保獲取到最新基礎顏色或自定義品牌方案並設定值。
Material Theme Builder
M3 中有一些新的 Token 需要注意，例如 Primary、Secondary、Tertiary Container 以及 On Variants 系列顏色。對您來說，管理這些顏色可能非常費力，因此我們建立了一個名為 Material Theme Builder 的工具來為您生成這些內容。您可在網頁中開啟它並點選 "Custom"，然後點選 "Export for Compose"。
如您有自定義顏色，可將其新增為擴充套件顏色。我們可以開啟該工具並切換到 "Custom" 標籤頁，在 Material Theme Builder 中您可以識別並輸入一種或多種品牌顏色，這些顏色將用於定義調色盤，通過新增特定顏色可確定每個調色盤的生成方式。如下圖所示，您可在左側輸入品牌的關鍵顏色，每種顏色都會分配到相應的關鍵顏色角色，具體情況視其在介面中的用途而定。如果您有現成的應用，您可以使用 Material 2 中的顏色配置 Primary 和 Secondary 顏色。隨後，您可以點選右上角的匯出程式碼選單，然後在下拉選單中選擇 "Compose"。
△ 自定義顏色方案
最後，您可將這些檔案直接放入 Android Studio，並在必要時更新軟體包。這一操作將更新顏色、排版和主題背景檔案，更新程式碼後您即可執行應用來檢視元件對映的新品牌主題背景。
使用動態配色
您可使用上述的網頁工具，預覽基於源顏色或影像生成的各種方案。接下來，我們將討論如何基於使用者所選影像所生成的顏色更新應用。請您開啟 Kotlin 檔案 theme，並新增檢查來檢視您是否有使用動態配色，然後您可以根據條件返回由系統調色盤建立的深淺方案顏色。
val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colorScheme = if (dynamic) {
val context = LocalContext.current
if (dark) dynamicLightColorScheme (context) else dynamicDarkColorScheme (context)
} else {
// 使用 lightColorScheme、darkColorScheme 等
}新增上述程式碼後，即可在裝置上執行應用並更改桌布，此時將顯示使用者生成的用於主題背景的顏色。您可新增一個切換開關，以便使用者在動態或自定義的主題背景之間進行切換，這兩種方案都提供了深色和淺色兩種方案供使用者選擇。
您可以有選擇地應用動態配色，並與品牌配色方案同時生效。例如，個人資料或帳戶介面可展示個人的使用者顏色，使重要的時刻變得個性化；如果您有語義顏色，則不必將其排除在外，而是可以將其包含在準備實現的其他顏色之內。這意味著您可為應用的主要主題、語義上的擴充套件顏色，甚至品牌顏色使用動態配色；或者您使用自己豐富的顏色庫。
△ 配色方案隨使用者設定的桌布變化
結語
憑藉動態、品牌化的主題，Material You 能夠體現使用者對於顏色的選擇，幫助您構建出色且富有表現力的應用；同時設計 Token 也有助於開發者和設計師的協作。我們十分期待看到您構建的應用！有關動態配色的更多資訊，請使用 Material Theme Builder 或安裝 Figma 外掛，該外掛可與更新的 M3 設計工具包配合使用。您可通過瀏覽 Figma 社群獲得該外掛，從而實現動態配色的視覺化，並建立自定義配色方案。
歡迎您 點選這裡 向我們提交反饋，或分享您喜歡的內容、發現的問題。您的反饋對我們非常重要，感謝您的支援！