顏色角色和符記

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

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

什麼是顏色角色？

顏色角色就像是塗鴉畫布上的「數字」，它們是 UI 元素與顏色之間的連結組織。

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

重要條款

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

  • Surface：用於背景和螢幕上大範圍、低強調區域的角色。
  • 主要、次要、三次：強調色角色，用於強調或淡化前景元素。
  • 容器：用於按鈕等前景元素的填充顏色。請勿用於文字或圖示。
  • 開啟：以這個字詞開頭的角色表示文字或圖示的顏色，會疊加在其配對的父項顏色上。舉例來說，如果文字和圖示使用「on-primary」顏色，則會以主要填充顏色為背景。
  • 變體：結尾為這個字詞的角色，可提供非變體組合的較不強調的替代方案。舉例來說，外框變化版本是外框顏色的較不強調版本。

主要角色

主要角色用於 UI 中的主要元件，例如邊緣包覆按鈕、醒目按鈕、啟用狀態，以及色調按鈕樣式的圖示。

主要

  1. Primary
  2. On-Primary

請將「Primary」角色用於 UI 中最重要的動作，例如主要按鈕或行動號召。這個顏色應醒目且能立即辨識，以便引導使用者進行重要互動。

Primary-Dim

  1. Primary-Dim
  2. On-Primary

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

Primary-Container

  1. Primary-Container
  2. 在主要容器上

將「Primary Container」套用至卡片或模式等背景元素，以便醒目顯示各部分或所選狀態。可協助您吸引使用者注意 UI 中的重要內容或持續進行的活動。

次要角色

次要角色用於 UI 中的重要元件，這些元件不如主要角色重要，但仍需要突顯。您可以在版面配置中同時使用主要和次要色彩，以便區分和聚焦。

次要

  1. Secondary
  2. On-Secondary

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

Secondary-Dim

  1. 次要維度
  2. Secondary

Secondary-Dim 角色可為密集區域中的被動元素提供較低的對比度。它可與次要色彩互補，同時增添微妙的深度，讓使用者輕鬆瀏覽，並保持 UI 的簡潔。

Secondary-Container

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

套用 Secondary-Container，即可在密集的版面配置中整理次要元素。這麼做可建立結構和區隔，確保次要內容可辨識，但不會佔據主導地位。

第三層角色

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

第三級

  1. Tertiary (第三)
  2. 第三方

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

第三維度

  1. 第三維度
  2. Tertiary (第三)

將「Tertiary Dim」角色用於與第三層動作相關但不需要立即聚焦的按鈕或動作。

第三層容器

  1. 第三級容器
  2. On-Tertiary-Container

將 Tertiary-Container 套用至將三級相關內容 (例如徽章或貼圖集合) 分組的背景。它強調次要元素，同時維持 UI 的平衡和結構。

語意角色

錯誤-紅色用於指出錯誤、刪除和任何與緊急情況相關的嚴重問題。這項功能旨在立即吸引使用者注意問題或警告，確保使用者能快速找出需要修正的部分。錯誤紅色應與背景保持足夠的對比，以符合無障礙標準，確保清晰可見，並與其他狀態顏色 (例如警告或成功訊息) 有所區別。

錯誤

  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. 表面容器-低
  2. 在表面
  3. On-Surface-Variant

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

Surface-Container

  1. 表面容器
  2. 在表面
  3. On-Surface-Variant

大多數元素的預設容器顏色。它提供中性、中等的升高效果，因此適合一般 UI 元件。

Surface-Container-High

  1. 表面容器-高
  2. 在表面上
  3. On-Surface-Variant

非常適合需要置於 Surface-Container 上方或與其搭配使用的高強調元件。這項顏色有助於將焦點和階層結構帶到 UI 中的關鍵區域。