本頁面由 Cloud Translation API 翻譯而成。

Material You 設計

從 Android 12 開始，Material You 設計會著重於 Android 作業系統的表情符號和流暢度，目標是協助使用者建立並擁有符合自身需求的單一、完整體驗。我們建議 Android 合作夥伴在下列領域將 Material You 設計納入 Android 裝置：

動態色彩
動作
小工具

動態色彩

動態色彩是 Material You 設計的核心，也是 Android 多年策略的重要一環，可讓使用者以更簡單、更深入的方式自訂使用者，沒有任何其他裝置支援。Material You 提供：

為使用者和開發人員提供一致且豐富的個人化體驗，可在任何 Android 裝置上使用。
Android 原始設備製造商可根據硬體和品牌顏色、製造商和外觀，繼續創新系統 UI 和第一方應用程式。

如要充分運用動態色彩，請使用 Android 12 Material You 色彩擷取情境，作為您向使用者提供的軟體服務的關鍵部分。在裝置上使用 AOSP 中的色彩擷取邏輯，尤其是擷取單一桌布或主題來源色彩，並透過 65 色彩 API 輸出色彩的邏輯。如要瞭解動態色彩的相關規定，請參閱「使用動態色彩」。

完整的動態色彩流程包含四個步驟，如下所示：

Material You 色彩流動

圖 1. Material You 動態色彩流程

使用者透過原始設備製造商 (OEM) 挑選器變更桌布或主題。
使用者選取下列任一選項：
- 裝置主題。選取後，Android 會自動選擇符合需求的單一來源顏色。
- 新桌布 + 主題選取後，AOSP 邏輯會自動從所選桌布中挑選單一來源色彩。
AOSP 會根據 AOSP 邏輯，將單一來源色彩擴展為 5 個色調調色盤，每個色調調色盤各有 13 種色調色彩變化，然後填入 65 個色彩屬性。
應用程式 UI 會以在 Android 應用程式生態系統中一致的方式使用 65 個色彩屬性。建議您為裝置系統 UI 和 OEM 專屬應用程式使用相同的調色盤。

Android 12 修補程式

如要取得用於擷取桌布色彩的端對端邏輯，並讓裝置以與生態系統一致的方式填滿 65 色 API，請在 Android 12 實作中加入下列修補程式：

在 ThemePicker 中指定自訂顏色

如果您使用的是 Android 開放原始碼計畫 ThemePicker 應用程式，只要符合以下兩個條件，WallpaperPicker 應用程式就會顯示顏色部分：

frameworks/base/packages/SystemUI/res/values/flags.xml 上的 flag_monet 是 true。
在 packages/apps/ThemePicker/res/values/override.xml 檔案的 themes_stub_package 中，定義了套件名稱的系統 stub APK。

輔助 APK 格式

您可以在 packages/apps/ThemePicker/themes 中找到這個 APK 的範例版本。

這個 APK 應只包含資源，詳細說明可用的基本色彩及其名稱。

這個輔助程式應包含 res/xml 底下的 XML 檔案，格式如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

在這個檔案中，只要下列字串的名稱為 bundle_name_item，color_bundles 中的每個 item 都會有不同的名稱。

每種顏色都應該有 bundle_name_item 字串，且每個顏色都要有描述性名稱。您可以將對應的已翻譯字串新增至 res/values-language code 目錄，即可翻譯這些字串。

實際的顏色值可位於同一個 XML 或個別資源 XML 檔案中，格式如下：

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

顏色套件陣列中的每個項目都應包含 color_primary_item 和 color_secondary_item 項目 (且兩個顏色都應相同)。這些 color 項目的值是「基本顏色」部分中顯示的各種顏色實際顏色代碼。

步驟 1：建立使用者主題設定體驗

主題挑選器可讓使用者體驗 Material You 的新個人化功能，並選擇顏色選項或預設值。您可以使用主題挑選器或桌布挑選器，為使用者提供更豐富的個人化和色彩體驗，因為這類功能適合您的產品和使用者客層。

使用桌布挑選器時，系統會預設啟用桌布顏色擷取功能。不過，您可以對挑選器進行一些自訂，為使用者提供更多選項。

步驟 2：將桌布顏色擷取為來源顏色

如要啟用桌布色彩擷取功能，請選取上述 Android 12 修補程式 (日後的 Android 開放原始碼計畫版本預設會啟用這項功能)。觸發桌布擷取作業的 AOSP 邏輯會透過 WallpaperManager#onWallpaperColorsChanged 從 ThemeOverlayController#mOnColorsChangedListener 的 frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java 開始。建議您使用未經修改的 AOSP 邏輯，確保一致的開發體驗。

根據預設，邏輯會挑選最適合使用的頻率最高顏色。如要利用演算法傳回的其他來源顏色，並在主題挑選器中向使用者顯示這些顏色，請使用 ColorScheme#getSeedColors(wallpaperColors: WallpaperColors)。

為了確保來源顏色適合使用，無論是從桌布或使用者選擇的預設值擷取，來源顏色必須具有 CAM16 色度值 5 的最低值，這樣才能確保來源顏色在從單一顏色轉換為 65 種色調顏色時不會受到微妙暗色調的影響，並且仍能代表使用者選擇的顏色。如要讀取及修改 CAM16 中的顏色，請使用 Cam#fromInt 或 Cam#getInt。

使用非動態色彩組合 如果裝置不支援桌布色彩擷取功能，您仍可透過下列方式，確保 Google 應用程式和支援動態色彩的第三方應用程式能呈現出色的外觀：

在 frameworks/base/packages/SystemUI/res/values/flags.xml 上停用 flag_monet，即可使用預設的 Material 調色盤。

確保使用者仍可使用預設主題挑選器自訂 OS。

步驟 3：將來源顏色展開至色彩 API

使用前一個步驟衍生的單一來源顏色，Android 會產生 5 個獨特的色調調色盤 (強調色 1 至 3、中性色 1 至 2)，每個調色盤包含 13 種顏色，每種顏色包含不同的亮度值 (0 到 1000)，總共 65 種顏色。Android 12 修補程式中提供的邏輯可正確實作這項顏色擴充功能；下文將詳細說明實作方式。

為維持開發人員一致性，5 種色調調色盤 (accent1、重音 2、強調色 3、中性 1、中性 2) 和對應的 13 色彩必須以單一來源顏色為基礎，並分別變更 CAM16 色度和色調值，如下所述：

system_accent1
- 色度：如果顏色變化版本結尾為 0、10、50 和 100，請使用「40」；否則請使用「48」
- 色調：與來源相同
system_accent2
- 色：使用「16」
- 色調：與來源相同
system_accent3
- 色度：使用「32」
- 色相：旋轉 60 度 (正)
system_neutral1
- Chroma：使用「4」
- 色調：與來源相同
system_neutral2
- 色彩：使用「8」
- 色調：與來源相同

CTS 包含驗證亮度和 hue API 呼叫的測試。如要執行，請使用 atest SystemPalette。

步驟 4：在應用程式和系統 UI 中使用動態色彩

在裝置上設定動態色彩後，應用程式會按照 Material 指南使用這些顏色。第三方應用程式可在 2021 年 10 月 26 日前，前往 material.io 下載 Material Design 指南。針對系統 UI 和第一方應用程式，我們強烈建議您在整個使用者體驗中整合動態色彩，以符合硬體和品牌的風格，並協助您讓裝置與眾不同。

如需一般動態色彩指引，請參閱以下資源：

請在應用程式和系統 UI 中，使用重點色彩做為前景元素：

@android:color/system_accent1_0 … 1000 // most-used foreground color group
@android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
@android:color/system_accent3_0 … 1000 // playful, analogous color

請使用中性色彩，用於應用程式和系統 UI 中的背景元素：

@android:color/system_neutral1_0 … 1000 // most-used background color group
@android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces

如要進一步瞭解 Material You 如何對應顏色，以及在 SysUI 中使用 API，請參閱其他資源。

步驟 5：在 Android 開放原始碼計畫 WallpaperPicker 實作中加入動態色彩選項

針對 Android 13 以上版本建構

自 Android 13 起，android.theme.customization.accent_color 已淘汰。新增 android.theme.customization.theme_style 屬性，以支援不同的顏色子類。我們目前在程式碼集中有四種變化版本，如下所示：

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

這些值會傳送至 Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES，如下方 JSON 所示：

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

適用於 Android 12 以下版本

使用自訂主題挑選器時，裝置必須透過以下格式提供 JSON 檔案 (其中 746BC1 是有效的來源顏色範例)，將有效的來源顏色傳送至 Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES：

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

這樣一來，系統就會略過桌布顏色擷取作業 (步驟 2)，並直接將提供的來源顏色擴充為 65 個顏色屬性 (步驟 3)。

步驟 6：提交支援單

除了系統整合，您還需要提出支援單，並告知我們品牌名稱 (Build.MANUFACTURER)。由於大多數第三方應用程式都使用適用於 Android 的 Material 元件顯示動態色彩，我們會使用硬式編碼的許可清單，指出哪些裝置已整合動態色彩調色盤 功能。

動作

流暢的動作讓裝置看起來更現代、更高級。為了建立及維持開發人員的信任和滿意度，過度捲動和漣漪是流暢動作的兩個重要部分，需要保持一致的外觀和感受。

在 OS 中使用過捲

Android 12 提供更靈敏、動態的超出捲動動作，以檢視區塊拉伸的形式呈現，當使用者嘗試捲動至清單邊緣時，系統就會顯示這項動作。範例如下所示：

Material You 過度捲動

圖 2. Android 12 過度捲動效果，如「設定」畫面所示

為確保開發人員的一致性，請確保裝置上的整體捲動效果類似下列效果：

在為 ActivityManager.isHighEndGfx() 傳回 true 的裝置上，超出捲動效果會對螢幕進行非線性拉伸 (如上圖所示)。
在效能較低的裝置上，系統會將延展效果簡化為線性延展 (以減少系統負載)。

在第一方應用程式中使用過度捲動功能

使用自訂檢視畫面時，您可能需要調整部分使用延展效果的應用程式和系統 UI。

如要支援延展式超出捲動，請升級至最新的程式庫：
- androidx.recyclerview:recyclerview:1.3.0-alpha01 (針對 RecyclerView)
- 針對 NestedScrollView 和 EdgeEffectCompat 使用 androidx.core:core:1.7.0-alpha01
- androidx.viewpager:viewpager:1.1-alpha01 (針對 ViewPager)
針對使用 EdgeEffect 的自訂版面配置，請考慮下列使用者體驗變更：
- 使用延展式超出捲動功能時，使用者不應在版面配置延展時與其內容互動。使用者應只操作伸展功能本身，例如不得在內容中按下按鈕。
- 當使用者在 EdgeEffect 動畫播放期間觸碰內容時，應可擷取動畫，並可操控延展效果。您可以透過 EdgeEffectCompat.getDistance() 取得目前的拉取值。
- 如要操控拉取值並傳回已消耗的金額，請使用 onPullDistance()。這樣一來，開發人員就能在手指將內容拉伸到起始位置後，順暢地從拉伸轉換為捲動。
- 使用巢狀捲動功能時，如果內容經過延展，延展功能應會在巢狀內容之前消耗觸控動作，否則當手指改變方向時，巢狀功能可能會捲動，而不是釋放延展功能。

如要進一步瞭解超出捲動範圍的操作，請參閱「為捲動手勢設定動畫」。

在作業系統中使用漣漪效果 (觸控回饋)

Android 12 採用更簡潔、更輕巧的觸控分享關係圖，可在使用者輕觸後提供意見回饋。

Material You 漣漪效果

圖 3. Android 12 漣漪效果，搭配較柔和的填滿動畫

為方便開發人員預測，並提供絕佳的使用者體驗，請確保您裝置上的漣漪效果與上述範例類似。雖然您不需要執行任何支援漣漪效果的具體整合步驟，但仍應在裝置上測試效果，檢查是否有實作過程中發生任何非預期迴歸的問題。

小工具

小工具是 Android 裝置的重要元件。Android 12 包含所有原始設備製造商 (OEM) 應支援的新 API 和 API 功能。

在 OS 中支援與小工具版面配置、大小和軟體參數 (例如圓角尺寸) 相關的開發人員 API。您的實作項目應正確支援透過 API 提供參數的小工具，並確保小工具可調整大小和可供使用者設定。

在應用程式中，盡可能善用新的 API 功能來更新或建構新的第一方小工具。針對您負責的所有第一方應用程式小工具，請執行下列開發人員檢查清單。

優先順序會根據平台的建議而定。
如要進一步瞭解最佳化建議，請點按「變更」欄中的連結。

領域	變更	實作優先順序
改善住家使用體驗	新增可調整大小的預覽畫面	P1
	新增小工具說明	P1
	輕鬆自訂小工具	P2 (選用)
	啟用更流暢的轉場效果	P0
	避免廣播彈跳床	P0
採用小工具規範	改善小工具大小和版面配置	P2
	套用動態色彩	P0
	實作圓角	P0
	新增複合按鈕	P2
簡化現有的小工具程式碼	簡化 RemoteView 集合	P2
簡化現有的小工具程式碼	簡化 RemoteView 執行階段	P2

其他資源

SysUI 顏色使用

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

Material You 顏色使用方式

圖 4. 在系統 UI 中使用動態色彩

Material 程式庫顏色屬性更新

Material 將在即將推出的版本中更新主題屬性，方法是建立用於為特定檢視畫面提供顏色的顏色角色。

顏色角色	Android 主題屬性	淺色主題動態色彩	深色主題動態色彩
Primary	colorPrimary	system_accent1_600	system_accent1_200
On Primary	colorOnPrimary	system_accent1_0	system_accent1_800
Secondary	colorSecondary	system_accent2_600	system_accent2_200
On Secondary	ColorOnSecondary (顏色)	system_accent2_0	system_accent2_800
錯誤	colorError	不適用 (red_600)	無 (red_200)
On Error	colorOnError	不適用 (白色)	不適用 (red_900)
背景	android:colorBackground	system_neutral1_10	system_neutral1_900
On Background	colorOnBackground	system_neutral1_900	system_neutral1_100
Surface	colorSurface	system_neutral1_10	system_neutral1_900
On Surface	colorOnSurface	system_neutral1_900	system_neutral1_100

Material 會使用下列指標更新其狀態屬性：

顏色角色	Android 主題屬性	淺色主題動態色彩	深色主題動態色彩
主要狀態內容	colorPrimaryStateContent	system_accent1_700	system_accent1_200
主要狀態層	colorPrimaryStateLayer	system_accent1_600	system_accent1_300
次要狀態內容	colorSecondaryStateContent	system_accent2_700	system_accent2_200
次要狀態圖層	colorSecondaryStateLayer	system_accent2_600	system_accent2_300
主要狀態內容	colorOnPrimaryStateContent	system_accent1_0	system_accent1_800
在主要狀態層上	colorOnPrimaryStateLayer	system_accent1_900	system_accent1_800
在次要狀態內容上	colorOnSecondaryStateContent	system_accent2_0	system_accent2_800
在次要狀態層上	colorOnSecondaryStateLayer	system_accent2_900	system_accent2_800
關於主要容器狀態內容	colorOnPrimaryContainerStateContent	system_accent1_900	system_accent1_900
在主要容器狀態層	colorOnPrimaryContainerStateLayer	system_accent1_900	system_accent1_900
次要容器狀態內容	colorOnSecondaryContainerStateContent	system_accent2_900	system_accent2_900
On Secondary Container State Layer	colorOnSecondaryContainerStateLayer	system_accent2_900	system_accent2_900
關於三級容器狀態內容	colorOnTertiaryContainerStateContent	system_accent3_900	system_accent3_900
在第三層容器狀態層	colorOnTertiaryContainerStateLayer	system_accent3_900	system_accent3_900
顯示狀態內容	colorOnSurfaceStateContent	System_中立 1_900	system_neutral1_100
On Surface 狀態圖層	colorOnSurfaceStateLayer	System_中立 1_900	System_中立 1_100
On Surface Variant State Content	colorOnSurfaceVariantStateContent	system_neutral2_700	system_neutral2_200
On Surface Variant State Layer	colorOnSurfaceVariantStateLayer	system_neutral2_700	System_中立_200
錯誤狀態內容	colorErrorStateContent	red800	red200

常見問題

色彩擷取

使用者變更桌布後，系統是否會自動擷取顏色，還是需要從某處觸發？

使用 Android 12 修補程式時，預設會開啟桌布色彩擷取功能。

ThemeOverlayController.java 會使用 ThemeOverlayController#mOnColorsChangedListener 和 WallpaperManager#onWallpaperColorsChanged 觸發邏輯。

對於動態桌布或影片桌布，我們可以知道色彩擷取何時從螢幕擷取顏色嗎？部分使用者可能會想要使用最後一格畫面中的顏色，因為這會顯示最長的時間。

當使用者設定桌布或畫面重新開機 (回應 WallpaperEngine#notifyColorsChanged) 時，就會觸發色彩擷取作業。系統會在使用者關閉畫面並重新開啟後，套用最後一個 WallpaperColors 事件 (來自動態桌布)。

主題/桌布挑選器

如何讓主題挑選器顯示多個來源顏色，讓使用者選擇除了最高頻率的顏色之外的顏色？是否有辦法從擷取邏輯取得這些顏色？

可以。您可以在主題挑選器中使用 ColorScheme#getSeedColors(wallpaperColors: WallpaperColors)。

Pixel 名稱有主題圖示功能，是否有包含在你們分享的三個修補程式中？原始設備製造商 (OEM) 如何實作這項功能？

否。主題化圖示目前處於 Beta 版階段，尚未在 Android 12 中推出。

是否有辦法在啟用色彩擷取和選取功能的情況下使用 Google 桌布應用程式？

可以。您可以按照本頁先前所述的整合步驟，在最新版 Google 桌布應用程式中實作這些功能。

詳情請洽詢你的 TAM。

Google 可以分享應用程式或原始碼，讓原始設備製造商 (OEM) 在設定選單中實作自己的動態色彩預覽功能，類似 Google 桌布挑選器應用程式中的預覽部分嗎？

算繪預覽的主要類別為 WallpaperPicker2 和 Launcher3。

桌布預覽畫面為 WallpaperSectionController。

如何在變更顏色後實作「預覽」功能，如 Google 桌布應用程式所示？

桌布選擇器應用程式會預期可從啟動器 (採用 Launcher3 為基礎的啟動器) 取得 ContentProvider。預覽畫面是由啟動器中的 GridCustomizationsProvider 提供，應在啟動器的主要活動的metadata中參照，以便壁紙和樣式應用程式讀取。上述功能全都是透過 Android 開放原始碼計畫的 Launcher3 實作，並可供原始設備製造商 (OEM) 使用。