Jetpack Compose Glimmer 內含項目

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

Jetpack Compose Glimmer 以 Jetpack Compose 為基礎,內含專為配備螢幕的 AI 眼鏡設計的可組合項、元件、行為和主題。您可以使用 Compose 建構顯示眼鏡的原生 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 中的元件類似,但經過特別最佳化,可滿足智慧眼鏡獨特的視覺和互動需求。Jetpack Compose Glimmer 元件可透過 Jetpack Compose Glimmer 的主題自訂,並以低階 Compose 功能為基礎,預設支援輕觸和滑動等使用者輸入內容方法。

圖 3. Jetpack Compose Glimmer 包含各種元件,可協助您打造專為智慧眼鏡最佳化的應用程式體驗。

如要進一步瞭解如何使用特定元件,請參閱下列指南:

如果這些高階元件不符合您的用途,可以使用 surface 建構自訂元件。在 Jetpack Compose Glimmer 中,介面是最基本的構成元素,可做為空白畫布,供您建構任何特定的自訂設計或互動。

Jetpack Compose Glimmer 修飾符

Jetpack Compose Glimmer 中的修飾符與 Compose 修飾符的運作方式相同,可讓您自訂可組合項的版面配置、外觀和行為,進而擴增可組合項。Jetpack Compose Glimmer 包含修飾符,以及眼鏡專屬的視覺回饋和效能預設值。

Jetpack Compose Glimmer 的主題

Jetpack Compose Glimmer 專為智慧眼鏡提供專屬主題設定系統。 Jetpack Compose Glimmer 的主題會實作簡化且最佳化的調色盤,包含顏色、字體排版和形狀。這樣可確保顯示眼鏡的能見度最高,且資訊簡潔明瞭。所有 Jetpack Compose Glimmer 元件都經過設計,可自動整合眼鏡專用的輸入法。Jetpack Compose Glimmer 的主題是透過 GlimmerTheme 類別公開。

Jetpack Compose 中的其他主題一樣,GlimmerTheme 包含多個子系統,以下各節將簡要說明這些子系統,以及可自訂的屬性:

  • 顏色
  • 字體排版
  • 元件間距值
  • 形狀
  • 深度效果等級
  • 圖示大小

顏色

Jetpack Compose Glimmer 的色彩系統專為加成式螢幕和真實環境設計,與標準 Android 主題不同,GlimmerTheme Colors 會優先採用半透明的深色背景和鮮豔的強調色,確保內容在難以預測的現實世界光線下清晰可讀。

系統會使用三部分調色盤,包含原色、二次色和中性色。中性色通常是空間 UI 的實體表面,而原色和輔色則提供清楚的互動和品牌視覺提示。

圖 4. GlimmerTheme中的顏色總覽。

字體排版

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

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

元件間距值

這些值可確保 Jetpack Compose Glimmer 元件的間距一致。包括元件邊框間距、元件間的間距和其他間距元素。請注意,變更這些值會影響大多數元件的預設大小。

形狀

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

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

深度效果等級

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

圖示大小

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