顏色考量因素包括螢幕、環境和認知。眼鏡上的色彩採用精緻的調色盤,支援加法顯示器的行為,並提升視覺舒適度。在眼鏡上使用顏色時,應謹慎地與現實世界協調,指出重要動作、顯示圖像或提供語意意義。
在光學透視螢幕上,黑色是透明的。設計時請注意,深色會顯得暗淡或透明,但也可以用來營造深度。
色彩配置
眼鏡色彩配置 (一組色彩權杖或角色,用於設定應用程式的色彩主題) 包含 3 個強調色角色、6 個表面色 (或中性色角色),以及對應的「on-color」角色。色彩角色與行動版配置角色類似,使用方式也相同。

強調色可做為 on color,但強調效果有限。
正確做法
大部分的文字內容都使用白色文字。字型顏色可用於強調文字。
錯誤做法
為所有內容使用彩色文字。
自訂顏色
自訂眼鏡顏色時,請務必盡量減少視覺障礙,並與現實世界協調一致,在不同光線條件下優先確保可讀性。仔細校正色彩,平衡亮度與飽和度,確保色彩可立即辨識。
主要顏色可自訂為品牌或主要互動顏色。 請考量所選顏色的對比度、飽和度和耗電量。
最佳化品牌和語意色彩
代表品牌、動作或系統快訊的顏色必須符合下列條件:
- 亮度足以辨識內容
- 飽和度足夠,可辨識為顏色
- 使用 HCT 色彩空間,確保前景和背景之間的色調差異至少為 66%。
詳情請參閱 Jetpack Compose Glimmer 主題。
耗電量
有些顏色比其他顏色更耗電,也更容易發熱。如右側所示,如果比較色調相同的顏色,綠色最省電,藍色最耗電。盡量減少點亮的像素數量。螢幕越亮,螢幕溫度就越高。請勿讓畫面全白,否則可能會導致熱能降低。
正確做法
請考量使用者會遇到的所有背景之間的對比。
錯誤做法
在各種背景上,UI 元素的對比度太低,可能導致眼睛疲勞和難以辨識。
正確做法
使用飽和度較低的色彩。
錯誤做法
使用過度飽和的色彩。可能無法正常顯示,導致難以閱讀。
請避免使用自訂介面。
深色容器顏色
容器通常必須專注於顯示其中的內容,且不得造成干擾:
- 如要達到最高對比度,介面必須是黑色。
- 表面在聚焦狀態下,色調不得淺於 34%,以免前景元素難以辨識。
- 輪廓應清晰可見,但不要太明顯。
正確做法
使用深色介面和亮色內容。
錯誤做法
使用明亮或填滿的表面。
正確做法
提供表面和文字之間的對比度。建議檢查約 66 個音調的差異。
錯誤做法
允許表面和文字的對比度過於接近。
正確做法
請確保「Surface」和「Surface Variants」的色調差異夠大,可建立必要的視覺階層。
錯誤做法
讓「Surface」和「Surface variant」的色調過於接近 (差異約為 20)。
您可以自訂輪廓,加入品牌或表情符號 UI。
正確做法
使用預設顏色。這些內容經過高度最佳化,適合在眼鏡上顯示。
錯誤做法
使用多種輪廓顏色。
警告
請小心處理,並協調焦點和預設狀態外框之間的自訂顏色。
使用藍色自訂外框焦點:焦點狀態醒目顯示由 2 個外框組成,顏色會套用至第 2 層,為焦點狀態著色。
正確做法
確保所有互動狀態都有足夠的對比度。
錯誤做法
將互動狀態的對比度變更為最低。