![](https://developer.android.com/static/images/design/ui/mobile/color-hero.png?authuser=9&hl=zh-tw)
使用顏色表達風格和傳達意涵。設定應用程式顏色對於個人化、定義語意用途及定義品牌識別來說都至關重要。
受迫失誤數
- 為確保無障礙體驗:
- 請檢查色彩對比,並避免使用類似色調的顏色。
- 由於紅色和綠色是常見的模式,但某些色盲類型使用者無法存取。
- 運用有意義的顏色練習:應用程式可以活潑且生動,但會遵循調色盤。如果使用過多語意顏色來擴充配置,可能會令人感到困惑,而具有過多裝飾顏色可能會令人眼花撩亂。
- 顏色可能會有規律,因此請重複既有的色彩圖案。如果在應用程式中使用語意顏色,請使用一致的顏色。
- 如果想讓應用程式在不同情境下順利運作,請採用淺色和深色的色彩配置 (最好是對比主題)。
- 使用符記指派顏色以指出元素的顏色角色,而非使用硬式編碼值。
- 顏色可能來自各種動態和靜態來源,但避免在同一個檢視畫面中混用過多顏色。
- 使用動態內容顏色時,請避免從多個內容片段提取顏色。
Android 上的色域
如要正確瞭解 Android 如何將顏色套用至 UI,首先必須瞭解 UI 在裝置上的顯示方式。
顏色在裝置上的顯示方式
您的應用程式顯示在背光螢幕上。它使用數位顏色,並遵循特定模型和規則,可協助使用者分辨該顏色。數位顏色為「增加顏色」,可透過「增加」或混合不同光源創造出完整的色彩。視裝置的色彩校正、螢幕類型、設定和色域而定,人類感知不同螢幕顏色的方式可能大不相同。
設計應用程式時,考量到這些因素,使用的顏色可能會與上述因素不同,甚至提及個別使用者的顏色感知。
關於色域
色域是使用色彩模型的色彩配置。RGB 是一種新增色彩模型,可透過紅色、綠色和藍色來建立各種色彩,而 CMYK (用於列印) 是「subtractive」。因此,互動式設計人員通常會使用 RGB 或類似的模型來選擇顏色。
Material 3 (M3) 推出了 HCT,這是使用色調、色盲和色調定義顏色的新色域,且與其他模型 (如 HSL) 相比,能立即獲得準確的顏色
如要進一步瞭解 HCT 的色彩科學與發展,請參閱 The Science of Color & Design (色彩與設計科學)。
色調、色差和色調
![](https://developer.android.com/static/images/design/ui/mobile/color-hue-chroma-tone-visualized.png?authuser=9&hl=zh-tw)
HCT 可在系統參數內,提供更個人化且靈活的色彩使用方式。HCT 使用色調、色差和色調建立顏色模型:
- Hue:色調與個別使用者可能用來描述顏色的形容詞類似,例如「紅」或「電紫」。色調的 HCT 值介於 0 至 360 之間。
- 色差:色階代表色彩的繽紛色彩,從中性灰色到全生動!在 HCT 色域中,色域的最大值為約 120。
- 色調:色調是指色彩的亮度或亮度。HCT 使用語氣產生對比。某些無障礙情境無法存取設為相同色調值的顏色。值較低的色調較深,值較高的色調較亮。
色彩系統程序
M3 顏色建構在 HCT 模型上,衍生出易於理解的色彩配置,並協助動態色彩特徵。M3 色彩系統從來源顏色開始。這個來源顏色會轉譯為五種主要顏色:原色、二級、三級、中性、中性變色。這五種主要顏色可建立色調調色盤,由每個按鍵顏色的色調增量組成。
![在這裡插入替代文字](https://developer.android.com/static/images/design/ui/mobile/color-generate-scheme-from-one-source.png?authuser=9&hl=zh-tw)
如果您要手動指派按鍵顏色,請記下輸入內容的色度和色調,因為顏色的色調可能不是顏色角色的色調值。
![在這裡插入替代文字](https://developer.android.com/static/images/design/ui/mobile/color-reveal-hct-values.png?authuser=9&hl=zh-tw)
M3 色彩系統採用 Material Color Utilities (MCU),這組顏色程式庫包含演算法和公用程式,方便您在應用程式中開發色彩主題和配置。
以下影片會說明色彩配置的計算方式。
顏色限制
顏色限制指的是顏色的實體限制,包括實際物理限制、本身的生物視覺限制,或是螢幕色彩算繪的限制。例如,某些色調無法具有特定色度或色調。顏色限制是淺藍色或亮紅色等原因顏色不可能。所有色調值都必須採用一致的色調色彩對應。
![](https://developer.android.com/static/images/design/ui/mobile/color-tone-mapping-charts.png?authuser=9&hl=zh-tw)
上圖顯示 H105、H25 和 H285 色調值的三種不同色調對應圖表。
圖表 1 - 色調 105 (黃色)。用於表示顏色供應情形。色彩和色調會像圖形一樣運作黃色調的色度有限,圖表包含特定色調,所以黃色的色調較不明顯。
圖表 2 - 色調 25 (紅色)。顯示比色調 105 (黃色) 更多的色盲選項。在這張色調地圖中,最高彩度點的色調較低。
圖表 3 - 色調 285 (藍色)。顯示畫面最深的色彩以較暗的色調顯示。另一方面,染色體的色差會因為較淺的語氣而消失。
色彩配置
色彩配置是衍生自特定色調的一組強調效果和表面,並指派給顏色角色,然後再對應至 UI 元素和元件。顏色角色是指顏色的使用方式,而非顏色的色調。例如放在主要上而非藍色。
色彩配置的設計必須和諧、確保易於存取的文字,以及區分 UI 元素和介面。顏色角色對 (由容器和容器角色組成) 的色調值具有無障礙對比。
![](https://developer.android.com/static/images/design/ui/mobile/color-color-schemes.png?authuser=9&hl=zh-tw)
燈光和深色配置可創造出專屬調性,
Material 色彩系統和自訂配置會提供顏色的預設值,做為自訂功能的起點。
進一步瞭解 M3 色彩系統。
![](https://developer.android.com/static/images/design/ui/mobile/color-m3-light-color-scheme.png?authuser=9&hl=zh-tw)
如需可自訂的色彩配置,請參考 Android UI 套件。
將顏色套用至使用者介面
UI 顏色包含強調色、語意和表面顏色。
- 強調色是指核心顏色,通常屬於 Android 品牌調色盤的一部分。
- 語意顏色 (或 Material 3 中的自訂顏色) 是具有特定意義的顏色。
- 表面顏色是指用於背景顏色的任何中性衍生顏色。
強調色
強調色通常展現 UI 中最鮮明的風格,無論是用於品牌宣傳、醒目顯示動作、個人表現或使用者表現等等。
每個強調色 (原色、二次色及三次色) 都會提供四至八種不同色調的相容顏色,可用於配色、定義強調效果和視覺表現。
動態色彩
可從動態來源定義強調色。
從 Android 12 (API 級別 31) 開始,動態色彩可讓系統從使用者的桌布或應用程式內內容 (例如 Keyart 資產) 擷取來源色彩。動態色彩會使用 MCU 演算法和程序,建立配置並輕鬆實作。如要為應用程式套用動態色彩,請參閱「讓使用者在應用程式中自訂顏色體驗」。
試用「Visualizing Dynamic color」(視覺化呈現動態色彩) 程式碼研究室,實際查看動態色彩。
![](https://developer.android.com/static/images/design/ui/mobile/color-app-color-derived-from-single-source.png?authuser=9&hl=zh-tw)
靜態
靜態配置是一種有不變 (或相對) 值的配置。建立靜態配置的一個常見方式,就是為品牌顏色,將原色、二級和第三色對齊品牌主要調色盤。
即使您使用動態色彩,我們還是強烈建議您建立靜態配置做為備用配置,前提是使用者裝置無法使用動態色彩。否則,系統會使用基準紫色配置。
您可以使用 Material Design 主題設定建構工具,套用 MCU 色彩演算法,產生靜態的自訂主題。這將產生您選擇的顏色,但也符合 M3 色彩系統權杖和和諧的無障礙原則。
不過,你仍可建立完全自訂的靜態配置。方法是在顏色樣式 (color.kt
或 color.xml
) 內指派不同值,或是在更新 Figma 樣式屬性後,從 Figma 的 Material 主題建構工具匯出主題檔案。
![在這裡插入替代文字](https://developer.android.com/static/images/design/ui/mobile/color-app-comparison.png?authuser=9&hl=zh-tw)
使用方法
Material 元件具有預先指派的顏色角色,但您可以在 UI 和自訂元素中全面使用顏色權杖。請謹慎使用所有強調色,務必考量人眼特別容易吸引鮮明的顏色。
![在這裡插入替代文字](https://developer.android.com/static/images/design/ui/mobile/color-cool-vibrant-colors-as-fg.png?authuser=9&hl=zh-tw)
與類型一樣,系統會在階層中套用顏色,以主要顏色及其對應角色指派給重要行動號召 (CTA)。我們建議使用懸浮動作按鈕 (FAB) 等元件來處理主要角色。
選擇主要顏色時,建議您指定品牌的主要顏色。或者,您可以選取代表互動元件的顏色,藉此更謹慎使用品牌顏色。次要顏色和第三顏色繼續向下強調重要性階層。
![在這裡插入替代文字](https://developer.android.com/static/images/design/ui/mobile/color-accent-color.png?authuser=9&hl=zh-tw)
過度飽和的樣式可能會導致僅使用原色、次要或第三等基本顏色角色。為協助顏色階層,請套用色彩配置,以加入較不鮮明的容器顏色和外框角色。
為了提供更優質的使用者體驗,請使用更鮮豔的主要顏色,指出應用程式視覺階層中較顯眼的動作。在下圖中,第一張圖片中的 FAB 具有與導覽相同的色調和色階的靜音顏色,因此可融入其中。第二張圖片顯示的懸浮動作按鈕 (FAB) 具有鮮明的主色,讓訪客更容易關注自己的身體。
![在這裡插入替代文字](https://developer.android.com/static/images/design/ui/mobile/color-fab-muted-vs-vibrant.png?authuser=9&hl=zh-tw)
如需實際查看動態色彩,請前往「自訂 Material Design 色彩」程式碼研究室。
語意顏色
語意顏色是有特定意義的顏色。舉例來說,「Error」是語意顏色。
![在這裡插入替代文字](https://developer.android.com/static/images/design/ui/mobile/color-semantic.png?authuser=9&hl=zh-tw)
顏色意義與顏色含義一致:如果您建立了模式,請在整個應用程式中重複進行相同操作。舉例來說,如果您用紫色表示會員功能,請為這個會員功能的所有例項使用紫色。
在以下範例中,應用程式在某個文字欄位中使用紅色表示發生錯誤,而另一個文字欄位卻是紫色,這樣會在略過表單時造成混淆。
![](https://developer.android.com/static/images/design/ui/mobile/color-poor-consistency.png?authuser=9&hl=zh-tw)
雖然 Material 色彩配置提供語意「error」顏色,但您可以透過自訂顏色建立其他語意顏色,藉此擴充色彩配置。進一步瞭解自訂顏色。
![在這裡插入替代文字](https://developer.android.com/static/images/design/ui/mobile/color-semantic-example.png?authuser=9&hl=zh-tw)
「組合化」功能可將動態使用者產生的色彩與應用程式中的自訂色彩對齊,建立更和諧的調色盤。
表面顏色
表面顏色是專為元件容器、工作表和窗格等背景元素設計,代表應用程式大部分的顏色。別害怕使用大部分的平面空間,人類的眼睛需要放鬆的空間。途徑還有助於包含內容,並引導讀者前往。
M3 導入色調表面的概念,這表示所有顏色都衍生自色調調色盤。色調創造深度和對比度來輔助無障礙設計。如要進一步瞭解表面角色,請參閱介面角色 M3 指南。
![在這裡插入替代文字](https://developer.android.com/static/images/design/ui/mobile/color-surfaces.png?authuser=9&hl=zh-tw)
無障礙設計和顏色
人們會視視覺風格而定,以多種方式顯示顏色。由於某些閱讀器屬於色盲,因此您必須檢查色彩組合,確保 UI 元素不會混合。雖然不透明度和權重可能不是顏色的常值色調,但它對於使用者如何感知顏色有很大的視覺效果。
色彩對比是指前景與背景元素的亮度差異,以比例格式呈現。系統會提供這項比率條件。例如,測量按鈕上文字與其容器間的對比,有助於判斷文字的易讀性。色彩對比指南分為文字和非文字,且各有專屬的成績組合。詳情請參閱「使用無障礙顏色進行設計」。
請勿將可用動作的顏色設為唯一預設用途或指標。 運用元件按鈕、變更字型粗細或甚至圖示,讓使用者知道可以與元素互動。
![在這裡插入替代文字](https://developer.android.com/static/images/design/ui/mobile/color-contrast.png?authuser=9&hl=zh-tw)
實作顏色
符記是設計資料的小型變數語意表示法。它們可重複使用,並將靜態值 (例如顏色的十六進位代碼) 替換為自行解釋的名稱。如要指派元素的顏色角色,請使用符記,而非硬式編碼的顏色值。
如需顏色角色對應的範例,請參閱 Now in Android Figma 範例。
![](https://developer.android.com/static/images/design/ui/mobile/color-ui-assigned-tokens.png?authuser=9&hl=zh-tw)
使用 Compose (或使用 View 的 color.xml
) 在顏色檔案 color.kt
中設定顏色值。這些顏色設為樣式是主題的一部分。詳情請參閱專為 Android 行動裝置主題設計。
如要在 Android 上設定顏色值,請使用十六進位代碼,採 6 位數格式的 RGB 代碼。如要擷取不透明度,請在前方附加該值,產生 8 位數程式碼。
使用 Material Design 主題建構工具:
您可以使用 Material Design 主題建構工具 (MTB) 建立自訂淺色和深色色彩配置。
MTB 可讓您以視覺化方式呈現動態色彩、產生質感設計權杖,以及自訂色彩配置。
在 Figma 檢查器面板中更新樣式屬性,即可完全自訂色彩配置。系統會匯出這些修改後的值。
![](https://developer.android.com/static/images/design/ui/mobile/color-customizing-themes.png?authuser=9&hl=zh-tw)