眼鏡顏色

顏色考量因素包括螢幕、環境和認知。眼鏡上的色彩採用精緻的調色盤,支援加法顯示器的行為,並提升視覺舒適度。在眼鏡上使用顏色時,應謹慎地與現實世界協調,指出重要動作、顯示圖像或提供語意意義。

在光學透視螢幕上,黑色是透明的。設計時請注意,深色會顯得暗淡或透明,但也可以用來營造深度。

色彩配置

眼鏡色彩配置 (一組色彩權杖或角色,用於設定應用程式的色彩主題) 包含 3 個強調色角色、6 個表面色 (或中性色角色),以及對應的「on-color」角色。色彩角色與行動版配置角色類似,使用方式也相同。

設計元素應錨定在畫面底部。

強調色可做為 on color,但強調效果有限。

大部分的文字內容都使用白色文字。字型顏色可用於強調文字。
為所有內容使用彩色文字。

自訂顏色

自訂眼鏡顏色時,請務必盡量減少視覺障礙,並與現實世界協調一致,在不同光線條件下優先確保可讀性。仔細校正色彩,平衡亮度與飽和度,確保色彩可立即辨識。

主要顏色可自訂為品牌或主要互動顏色。 請考量所選顏色的對比度、飽和度和耗電量。

設計元素應錨定在畫面底部。

最佳化品牌和語意色彩

代表品牌、動作或系統快訊的顏色必須符合下列條件:

  • 亮度足以辨識內容
  • 飽和度足夠,可辨識為顏色
  • 使用 HCT 色彩空間,確保前景和背景之間的色調差異至少為 66%。

詳情請參閱 Jetpack Compose Glimmer 主題

耗電量

有些顏色比其他顏色更耗電,也更容易發熱。如右側所示,如果比較色調相同的顏色,綠色最省電,藍色最耗電。盡量減少點亮的像素數量。螢幕越亮,螢幕溫度就越高。請勿讓畫面全白,否則可能會導致熱能降低。

設計元素應錨定在畫面底部。

請考量使用者會遇到的所有背景之間的對比。
在各種背景上,UI 元素的對比度太低,可能導致眼睛疲勞和難以辨識。
如要確保文字在任何背景上都有足夠的對比度,前景和背景顏色的色調對比差異必須達到 70 (7:1)。您可以將設計設為「螢幕」混合模式,測試這項功能。
使用飽和度較低的色彩。
使用過度飽和的色彩。可能無法正常顯示,導致難以閱讀。

請避免使用自訂介面。

設計元素應錨定在畫面底部。

深色容器顏色

容器通常必須專注於顯示其中的內容,且不得造成干擾:

  • 如要達到最高對比度,介面必須是黑色。
  • 表面在聚焦狀態下,色調不得淺於 34%,以免前景元素難以辨識。
  • 輪廓應清晰可見,但不要太明顯。

使用深色介面和亮色內容。
使用明亮或填滿的表面。
提供表面和文字之間的對比度。建議檢查約 66 個音調的差異。
允許表面和文字的對比度過於接近。
請確保「Surface」和「Surface Variants」的色調差異夠大,可建立必要的視覺階層。
讓「Surface」和「Surface variant」的色調過於接近 (差異約為 20)。

您可以自訂輪廓,加入品牌或表情符號 UI。

使用預設顏色。這些內容經過高度最佳化,適合在眼鏡上顯示。
使用多種輪廓顏色。

請小心處理,並協調焦點和預設狀態外框之間的自訂顏色。

設計元素應錨定在畫面底部。 使用藍色自訂外框焦點:焦點狀態醒目顯示由 2 個外框組成,顏色會套用至第 2 層,為焦點狀態著色。

確保所有互動狀態都有足夠的對比度。
將互動狀態的對比度變更為最低。