在 2021 年的 I/O 大會(huì)上，我們展示了 Material Design 大膽而富有表現(xiàn)力的演變。Material Design 3 在 Material Design Primary 顏色和 Secondary 顏色的基礎(chǔ)上，引入了 Tertiary 顏色和附加色槽，用于驗(yàn)證無(wú)障礙訪問(wèn)功能并保障顯示的和諧性。在本篇文章中，我們將為您展示更多有關(guān) Material You 動(dòng)態(tài)配色的內(nèi)容，包括動(dòng)態(tài)配色是什么，以及如何在您的應(yīng)用中實(shí)現(xiàn)它。

Material You 通過(guò)動(dòng)態(tài)配色，將顏色重新定義為更加個(gè)性化的體驗(yàn)。那么，什么是動(dòng)態(tài)配色？Android 12 可以通過(guò)動(dòng)態(tài)配色提取算法來(lái)選擇顏色值，基于動(dòng)態(tài)配色，您可根據(jù)用戶的桌面壁紙顏色生成自定義調(diào)色板。動(dòng)態(tài)的淺、深色方案可體現(xiàn)在整個(gè)用戶系統(tǒng)界面，以及某些應(yīng)用中。這些方案將根據(jù)用戶偏好和視覺(jué)需求進(jìn)行更改或調(diào)整。動(dòng)態(tài)配色是一種算法系統(tǒng)，支持個(gè)性化顏色體驗(yàn)的同時(shí)還尊重蘊(yùn)含品牌標(biāo)識(shí)或具有傳統(tǒng)意義的顏色，如綠色代表 "Go"，紅色代表 "Stop"。

首先，它從用戶的壁紙上提取一種源顏色，并推算出五種關(guān)鍵顏色，然后將每個(gè)關(guān)鍵顏色轉(zhuǎn)化為由 13 種色調(diào)組成的調(diào)色板。接下來(lái)，它會(huì)為從調(diào)色板中選擇的顏色分配一組特定的角色和值，并將這些角色和值映射到我們稱之為 "方案"的組件上。

配色方案

配色方案可視為一組拼合在一起的相關(guān)色調(diào)，而非一組固定不變的值。每種色調(diào)都會(huì)生成一組淺、深色方案，這些方案將根據(jù)偏好和視覺(jué)需求進(jìn)行更改或調(diào)整。Error 顏色也會(huì)自動(dòng)分配到相應(yīng)色槽中。界面需要的每個(gè)顏色角色，都會(huì)經(jīng)歷這個(gè)過(guò)程: 通過(guò)元素之間的適當(dāng)對(duì)比，從關(guān)鍵顏色派生出來(lái)。這些顏色角色就是您在設(shè)計(jì)中要映射到的內(nèi)容。

△不同顏色的淺深色方案

△新增的 Container 及 Tertiary 顏色色槽

Token

Token 可以有多種類型，它可以與某個(gè)值配對(duì)或引用另一個(gè) Token。在使用了 M3 后，我們就有了調(diào)色板、色彩引用和系統(tǒng) Token 三個(gè)概念。您創(chuàng)建的顏色角色是系統(tǒng) Token，它們可以繼承我們?cè)谡{(diào)色板中引用的 Token，包括 Primary、Secondary、Tertiary、Neutral、Neutral Variant 以及 Error 顏色。

設(shè)計(jì) Token 使得整個(gè)產(chǎn)品更具靈活性和一致性，它允許設(shè)計(jì)師們?yōu)榻缑嬷性刂付伾巧?，而非設(shè)定一個(gè)用于實(shí)現(xiàn)的值。生成設(shè)計(jì) Token 時(shí)可通過(guò)確定一個(gè)單一事實(shí)來(lái)源，來(lái)節(jié)省開(kāi)發(fā)者和設(shè)計(jì)師的時(shí)間。例如，開(kāi)發(fā)者可以引用設(shè)計(jì) Token 文件以映射到 Compose 中的主題對(duì)象；而如果您在代碼中更改了 Token，則可以與設(shè)計(jì)師共享這些更改，以便設(shè)計(jì)師在其設(shè)計(jì)中更新這些值。

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

△相同的 Token，不同的色值

無(wú)障礙訪問(wèn)

如下圖所示，在亮度接近時(shí)，盡管兩種顏色的色調(diào)并不相同，但調(diào)色卻非常相似。這樣的色彩組合使得對(duì)比度過(guò)低，而對(duì)于有一定程度色盲的人來(lái)說(shuō)更是如此。如果對(duì)組件應(yīng)用這樣的色彩組合，則會(huì)導(dǎo)致無(wú)法滿足無(wú)障礙訪問(wèn)。因此，為了保證顏色在無(wú)障礙層面的可及性，所有成對(duì)顏色均存在 60 的亮度差。

自定義擴(kuò)展

這對(duì)于您應(yīng)用的配色來(lái)講，也許是一種全新思維方式。但我們?nèi)缃袼鶆?chuàng)建的數(shù)字化產(chǎn)品，會(huì)反映出現(xiàn)實(shí)生活中的產(chǎn)品趨勢(shì)，這意味著更多個(gè)性化的色彩、圖案和元素。在我們需要一套配色時(shí)，如果您覺(jué)得自己的調(diào)色板不合適或缺少可用資源時(shí)，動(dòng)態(tài)配色可為您提供用戶喜歡的、現(xiàn)成的、可無(wú)障礙訪問(wèn)的調(diào)色板。

我們充分理解，您可能需要品牌配色方案成為用戶矚目的焦點(diǎn)，所以最新的配色系統(tǒng)可以在支持無(wú)障礙訪問(wèn)的同時(shí)融入應(yīng)用的顏色背景。您可以使用自己的品牌和設(shè)計(jì)系統(tǒng)顏色創(chuàng)造出和諧的、可無(wú)障礙訪問(wèn)的調(diào)色板。M3 支持自定義參數(shù)的系統(tǒng)化應(yīng)用，這有助于您定義和維護(hù)品牌。在 Android 應(yīng)用上，自定義配色方案也可以作為禁用動(dòng)態(tài)配色后的備用方案。不過(guò)，無(wú)論是使用動(dòng)態(tài)配色，還是自定義配色，要將您的 Android 應(yīng)用遷移并使用 Material 3，您首先需要遷移到基礎(chǔ)顏色或 M3 自定義方案來(lái)訪問(wèn)新的 Token。

△M3 基礎(chǔ)顏色角色

我們始終鼓勵(lì)您利用 Material Design 并根據(jù)需要進(jìn)行擴(kuò)展。M3 的顏色系統(tǒng)可以與自定義組件和品牌風(fēng)格相結(jié)合，通過(guò)自動(dòng)處理關(guān)鍵調(diào)整，滿足無(wú)障礙訪問(wèn)的顏色對(duì)比度，保障易讀性、交互狀態(tài)和組件結(jié)構(gòu)。

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

M3 中有一些新的 Token 需要注意，例如 Primary、Secondary、Tertiary Container 以及 On Variants 系列顏色。對(duì)您來(lái)說(shuō)，管理這些顏色可能非常費(fèi)力，因此我們創(chuàng)建了一個(gè)名為 Material Theme Builder 的工具來(lái)為您生成這些內(nèi)容。您可在網(wǎng)頁(yè)中打開(kāi)它并點(diǎn)擊 "Custom"，然后點(diǎn)擊 "Export for Compose"。

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

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 等}

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

△配色方案隨用戶設(shè)置的壁紙變化

結(jié)語(yǔ)