Jetpack Compose Glimmer 內含項目

適用 XR 裝置
這份指南可協助您為這類 XR 裝置打造體驗。
AI 眼鏡

Jetpack Compose Glimmer 以 Jetpack Compose 為基礎,內含專為搭載螢幕的 AI 眼鏡設計的可組合函式、元件、行為和主題。您可以使用 Compose,透過 Glimmer 為 AI 眼鏡建構原生 UI,並運用較少的程式碼、強大的工具和直觀的 Kotlin API,讓應用程式體驗更貼近生活。

Jetpack Compose Glimmer 可組合函式

Jetpack Compose Glimmer 提供專為 AI 眼鏡螢幕設計的 @Composable 函式,例如 TextButtonListItem。以下是 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 中,Surface 是最基本的建構區塊,可做為空白畫布,供您建構任何特定自訂設計或互動。

Jetpack Compose Glimmer 修飾符

Jetpack Compose Glimmer 中的修飾符與 Compose 修飾符完全相同,可讓您自訂可組合項的版面配置、外觀和行為,進而擴增可組合項。Jetpack Compose Glimmer 可能會導入特定修飾符,或為眼鏡專屬的視覺回饋和效能套用獨特的預設值。

Jetpack Compose Glimmer 深度

Jetpack Compose Glimmer 元件會使用深度來表示階層,有助於在視覺上區分顯示在其他資訊卡上方 (頂端) 的元素。AI 眼鏡的深度是 z 空間中的放置位置和陰影的組合。對於大多數高階元件 (例如清單項目),系統會根據焦點狀態自動套用深度。當元件成為焦點時,會增加深度;失去焦點時,則會恢復正常狀態。不過,如要使用自訂元件,可以在 Modifier.surfaceModifier.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 眼鏡螢幕上顯示。

圖 3. GlimmerTheme 中的顏色總覽。

請注意,「On ...」顏色不會透過 GlimmerTheme 公開。系統會根據背景顏色自動計算這些顏色。

這些顏色會透過 GlimmerTheme.colors.primary 公開,每個顏色角色的值如下表所述:

顏色角色

預設值

primary

#A8C7FA

secondary

#4C88E9

正面的

#4CE995

#F57084

surface

#000000

大綱

#606460

outlineVariant

#42434A

請注意,雖然 surfaceoutlineoutlineVariant 標示為可自訂,但強烈建議您不要自訂這些值。

形狀

Jetpack Compose Glimmer 的形狀系統定義了一組標準的邊角處理方式和幾何形式,適用於元件,旨在為 AI 眼鏡 UI 建立一致且簡約的視覺語言,所有形狀都會透過 GlimmerTheme.shapes 公開。

圖 4. Jetpack Compose Glimmer 中的大型、中型和小型形狀範例。

字體排版

Jetpack Compose Glimmer 的字體排版系統包含六種字體排版樣式,可在 AI 眼鏡螢幕上提供清晰簡潔的顯示效果。這些樣式旨在盡量提高對比度,並透過加粗字體、加寬字母間距和適當的行高,提升文字可讀性。這些樣式會透過 GlimmerTheme.typography 顯示。

圖 5. Jetpack Compose Glimmer 的六種排版樣式範例。

圖示

Jetpack Compose Glimmer 的圖示系統旨在與 AI 眼鏡 UI 的簡化視覺語言一致整合,通常會運用圓角形式,例如 Material Symbols Rounded,以達到最佳可讀性。