顏色角色和符記

Wear Material 3 Expressive 色彩系統採用三種強調色層 (主要、次要、第三重要) 用於主要元件，以及兩種中性表面層。每個角色都提供一系列對比度一致的值，可實現富有表現力且易於存取的色彩組合，在任何主題中提供一致的體驗。

含有角色的色彩主題範例。

什麼是色彩角色？

顏色角色就像是數字著色畫布上的「數字」，這些是 UI 元素之間的連結組織，以及顏色在 UI 中的位置。

  • 顏色角色會對應至 Material 元件：無論使用靜態基準配置或動態色彩，您都會用到這些顏色角色。如果產品包含自訂元件，則必須正確對應至這組顏色角色。
  • 顏色角色支援無障礙設計：色彩系統採用更符合無障礙設計的顏色配對。這些顏色組合的色彩對比度至少為 3:1。
  • 顏色角色會經過符記化：角色會透過符記在設計和程式碼中實作。設計符記代表可重複使用的小型設計決策，屬於設計系統的視覺風格。

必要條款

以下是您會在顏色角色名稱中看到的關鍵字：

  • Surface：用於背景和螢幕上大範圍、低強調區域的角色。
  • 原色、二次色、三次色：強調色角色，用於強調或弱化前景元素。
  • 容器：用做前景元素 (例如按鈕) 的填滿顏色。不適用於文字或圖示。
  • 開啟：以這個字詞開頭的角色表示文字或圖示的顏色，位於配對的父項顏色上方。舉例來說，on primary 用於文字和圖示，對比主要填滿顏色。
  • 變體：以這個字詞結尾的角色，是相應非變體角色的低調替代方案。舉例來說，外框變體是外框顏色較不強調的版本。

主要角色

主要角色用於 UI 中的主要元件，例如 Edge Hugging 按鈕、顯眼的按鈕、啟用中狀態，以及色調按鈕樣式上的圖示。

主要

  1. Primary
  2. On-Primary

對於 UI 中最重要的動作 (例如主要按鈕或行動號召)，請使用「Primary」角色。這個顏色應醒目且容易辨識，引導使用者進行重要互動。

Primary-Dim

  1. Primary-Dim
  2. On-Primary

通常用於需要與主要動作在視覺上有所區別，但不需要使用者立即注意或互動的元素。

Primary-Container

  1. Primary-Container
  2. On-Primary-Container

將「主要容器」套用至資訊卡或模式等背景元素，即可醒目顯示區段或選取狀態。有助於在 UI 中突顯重要內容或進行中的活動。

次要角色

次要角色用於 UI 中的主要元件，雖然不如主要角色重要，但仍需醒目。您可以在版面配置中同時使用原色和輔色，營造差異化和焦點。

次要

  1. Secondary
  2. On-Secondary

在 UI 密集區域中，使用「次要」角色支援動作，例如次要按鈕或互補動作。在複雜的版面配置中，可維持可見度，不會遮蓋主要元素。

Secondary-Dim

  1. Secondary-Dim
  2. Secondary

Secondary-Dim 角色可為密集區域中的被動元素提供柔和的對比度。可與次要顏色互補，同時增添細微的深度，讓使用者介面保持簡潔，並協助使用者瀏覽。

Secondary-Container

  1. Secondary-Container
  2. On-Secondary-Container

在密集版面配置中，使用 Secondary-Container 整理次要元素。可建立結構和分隔，確保次要內容可區分，但不會成為主要內容。

第三層角色

三次色角色用於對比強調色，可平衡原色和二次色，或將引起對某個元素的高度關注，例如輸入欄位。次要角色也能協助指出內容何時變更或應特別顯示，例如達成目標時。

第三

  1. Tertiary (第三)
  2. On-Tertiary

「Tertiary」角色用於吸引對重要元素的注意。次要角色 特別適合需要突顯的元件，例如徽章、貼紙或特殊動作元素。

Tertiary-Dim

  1. 第三色調
  2. Tertiary (第三)

如果按鈕或動作與次要動作相關，但不需要立即聚焦，請使用「次要維度」角色。

Tertiary-Container

  1. Tertiary-Container
  2. On-Tertiary-Container

如果背景要將次要相關內容分組 (例如徽章或貼紙的集合)，請套用「次要容器」。強調第三層元素，同時維持 UI 的平衡和結構。

語意角色

錯誤 - 紅色用於表示重大問題，例如錯誤、刪除和任何與緊急情況相關的事項。這項功能旨在立即提醒使用者注意問題或警告，確保使用者能快速找出需要採取修正措施的區域。Error-Red 色調應與背景維持足夠對比，以符合無障礙標準，確保清楚可見，並與警告或成功訊息等其他狀態顏色有所區別。

錯誤

  1. 錯誤
  2. On-Error

語意上帶有主題色調的紅色，表示移除、刪除、關閉或取消動作，例如「滑動顯示」。新增為容器替代方案，與錯誤調暗顏色相比，稍微不那麼令人恐慌和緊急。

Error-Dim

  1. Error-Dim
  2. On-Error

語意上略帶主題色調的紅色，表示高優先順序的錯誤或緊急動作，例如安全警示、對話方塊疊加層失敗或停止按鈕。

Error-Container

  1. Error-Container
  2. On-Error-Container

較不顯眼的容器顏色，適用於使用錯誤狀態的元件。也可以表示有效錯誤狀態，與填寫狀態相比，互動性較低，例如有效的緊急分享按鈕或資訊卡，或是失敗的疊加層對話方塊。

介面容器和高度

介面容器是定義 UI 深度和高度的關鍵，可透過顏色提供結構和階層，根據元件的重要性和互動方式加以區分。

Surface-Container-Low

  1. Surface-Container-Low
  2. On-Surface
  3. On-Surface-Variant

適合需要位於 Surface-Container 下方的展開式容器，例如通知中的展開式資訊卡。也可用於非互動式資訊卡，其中內容仍可從容器中受益。

Surface-Container

  1. Surface-Container
  2. On-Surface
  3. On-Surface-Variant

大多數元素的預設容器顏色。這類陰影提供中性、適中的高度，適合一般 UI 元件。

Surface-Container-High

  1. Surface-Container-High
  2. On-Surface
  3. On-Surface-Variant

非常適合需要位於 Surface 容器上方或與其合併的高強調元件。這個顏色有助於凸顯 UI 中的重要區域，並建立階層。