Jetpack Compose Glimmer 以 Jetpack Compose 為基礎,內含專為配備螢幕的 AI 眼鏡設計的可組合項、元件、行為和主題。您可以使用 Compose,透過 Glimmer 為 AI 眼鏡建構原生 UI,並運用較少的程式碼、強大的工具和直觀的 Kotlin API,打造栩栩如生的應用程式體驗。
Jetpack Compose Glimmer 可組合函式
Jetpack Compose Glimmer 提供專為 AI 眼鏡螢幕設計的 @Composable 函式,例如 Text、Button 和 ListItem。以下是 Jetpack Compose Glimmer 可組合函式的一些獨特特徵:
- 簡化樣式:
Surface元件預設為黑色或透明背景,以利光學顯示最佳化。 - 最佳化預設顏色:Jetpack Compose Glimmer 預設會根據背景顏色計算內容顏色,因此開發人員很少需要手動設定文字顏色,不需額外作業即可提升可讀性。
差異化焦點:焦點會以輪廓為基礎的視覺回饋表示,而非漣漪效果,可清楚顯示焦點。

圖 1. Jetpack Compose Glimmer 中的三種焦點狀態,會使用以輪廓為基礎的視覺回饋來區分。 最佳化陰影:Jetpack Compose Glimmer 使用有限的 box-shadows 進行視覺區隔

圖 2. Jetpack Compose Glimmer 提供五種高度層級,並使用有限的陰影來區分。
Jetpack Compose Glimmer 元件
Jetpack Compose Glimmer 具有專屬的自訂設計元件,與 Jetpack Compose 中的元件類似,但經過特別最佳化,可滿足 AI 眼鏡獨特的視覺和互動需求。Jetpack Compose Glimmer 元件可透過 Jetpack Compose Glimmer 主題自訂,並以低階 Compose 功能為基礎,預設支援輕觸和滑動等使用者輸入內容方式。
如要進一步瞭解如何使用特定元件,請參閱下列指南:
如果這些高階元件不符合您的用途,可以使用 surface 建構自訂元件。在 Jetpack Compose Glimmer 中,介面是最基本的構成元素,可做為空白畫布,用於建構任何特定自訂設計或互動。
Jetpack Compose Glimmer 修飾符
Jetpack Compose Glimmer 中的修飾符與 Compose 修飾符完全相同,可讓您自訂可組合項的版面配置、外觀和行為,進而擴增可組合項。Jetpack Compose Glimmer 可能會導入特定修飾符,或套用眼鏡專屬的預設值,以提供視覺回饋和提升效能。
Jetpack Compose Glimmer 深度
Jetpack Compose Glimmer 元件會使用深度來表示階層,有助於在視覺上區分顯示在其他資訊卡上方 (頂端) 的元素。AI 眼鏡的深度是 z 空間中的位置和陰影的組合。對於大多數高階元件 (例如清單項目),系統會根據焦點狀態自動套用深度。當元件成為焦點時,會獲得深度;失去焦點時,則會恢復正常狀態。不過,如要使用自訂元件,可以搭配 Modifier.surface 或 Modifier.depth 使用深度參數。
Jetpack Compose Glimmer 的主題
Jetpack Compose Glimmer 專為 AI 眼鏡提供專屬主題設定系統。Jetpack Compose Glimmer 的主題會實作簡化且最佳化的調色盤,包含顏色、字體排版和形狀。這可確保 AI 眼鏡能清楚顯示資訊,並提供簡潔的摘要。所有 Jetpack Compose Glimmer 元件都經過設計,可自動與 AI 眼鏡的特定輸入法整合。Jetpack Compose
Glimmer 的主題是透過 GlimmerTheme 類別公開。
與 Jetpack Compose 中的其他主題一樣,GlimmerTheme 包含多個子系統:顏色、形狀、字體排版和圖示 (符號學)。Jetpack Compose Glimmer 的主題也包含可自訂的 Jetpack Compose Glimmer 元件。
顏色
Jetpack Compose Glimmer 的色彩系統包含七種顏色,這些顏色經過最佳化調色盤設計,可在 AI 眼鏡螢幕上提供最大能見度和簡潔性,因為黑色值不會在 AI 眼鏡螢幕上算繪。

GlimmerTheme 中的顏色總覽。請注意,「On ...」顏色不會透過 GlimmerTheme 公開。系統會根據背景顏色自動計算這些顏色。
這些顏色會透過 GlimmerTheme.colors.primary 公開,每個顏色角色的值如下表所述:
顏色角色 |
預設值 |
|---|---|
primary |
#9BBFFF |
secondary |
#4C88E9 |
正面的 |
#63FEA8 |
負 |
#FFA7A0 |
surface |
#262626 |
大綱 |
#606460 |
outlineVariant |
#42434A |
請注意,雖然 surface、outline 和 outlineVariant 標示為可自訂,但我們強烈建議您不要自訂這些值。
形狀
Jetpack Compose Glimmer 的形狀系統定義了一組標準的圓角處理方式和幾何形狀,適用於元件,旨在為 AI 眼鏡 UI 建立一致且簡約的視覺語言,所有形狀都會透過 GlimmerTheme.shapes 公開。
字體排版
Jetpack Compose Glimmer 的字體排版系統包含六種字體排版樣式,可在 AI 眼鏡螢幕上提供清晰簡潔的文字。這些樣式旨在盡量提高對比度,並透過加粗字體、加寬字母間距和適當的行高,提升文字可讀性。這些樣式會透過 GlimmerTheme.typography 顯示。
圖示
Jetpack Compose Glimmer 的圖示系統旨在與 AI 眼鏡 UI 的簡化視覺語言一致整合,通常會運用圓角形式,例如 Material Symbols Rounded,以達到最佳可讀性。