Jetpack Compose Glimmer

清晰易讀的設計,適用於光學透視螢幕。

Jetpack Compose Glimmer 是 Google 設計系統和 UI 工具包,適用於光學透視 (OST) 螢幕,例如有線 XR 眼鏡。設計系統提供可重複使用的決策,包括顏色、類型和形狀基本元素,以及元件和指引。

原則

Jetpack Compose Glimmer 是首批針對透明螢幕和眼鏡外型規格最佳化的 UI 架構之一。OST 會直接在實體世界中顯示投影光線,而非使用不透明的螢幕顯示器。開發人員可使用 Glimmer 建立高對比、一目瞭然的 UI,同時保留真實世界中的存在感。

優先顯示透明螢幕

經過最佳化調整,並以研究和色彩科學為基礎,適用於透明螢幕和眼鏡板型規格,提供周到、美觀的光學透視體驗。

優先顯示透明螢幕

硬體輸入

互動輸入內容是根據有線 XR 眼鏡的功能設計。

專為特定用途打造

樣式和元件專為眼鏡打造,可直接使用。 Jetpack Compose Glimmer 經過最佳化,可搭配透視螢幕使用,並提供舒適的使用體驗。雖然是專為此用途而設計,但並非一成不變。除了類型和顏色,您也可以自訂焦點醒目顯示。

專為特定用途打造

樣式

Jetpack Compose Glimmer 的設計語言採用簡化主題,在眼鏡上顯示時可達到最佳可見度。您可以自訂顏色和類型,以表達語意和應用程式凝聚力。視覺設計原則強調清晰、易讀,並盡量減少干擾。 有線眼鏡的視野較廣,干擾「現實世界」的程度可能較低,但您仍應考慮將 UI 移開。

Glimmer 隨附針對 OST 眼鏡最佳化的基準主題。您可以自訂顏色和類型,以表達語意和應用程式凝聚力。在光學透視螢幕上,黑色會呈現透明。設計時請注意,深色會顯得暗淡或透明,但也可以用來營造深度。

色彩配置

眼鏡色彩配置 (一組顏色符記或角色,用於設定應用程式的顏色主題) 包含三種強調色角色、六種表面色 (或中性色角色),以及對應的「on-color」角色。

色彩配置

自訂顏色

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

進一步瞭解 Glimmer 的色彩系統和最佳做法。

字體排版

Jetpack Compose Glimmer 具有最佳化的預設型別比例。字體角色由兩種角色組成,每種角色各有三種樣式,並根據用途和階層而定。詳情請參閱「Glimmer 字體排版」。

表面和深度

表面色會容納內容,可提供使用者視野內的明確焦點,其中可包含內容或動作。進一步瞭解 Glimmer 中的表面和深度。

元件

元件是專為建構 UI 而設計的建構元素。應用程式應使用 Jetpack Compose Glimmer 元件,因為這些元件已針對 OST 眼鏡的獨特用途進行最佳化。詳情請參閱「Glimmer 元件」。

準備好導入元件了嗎?請參閱 Jetpack Compose Glimmer 說明文件。

Glimmer 元件適用於多種使用者體驗用途。部分元件包括動作按鈕、通訊進度指標、用於包含項目的堆疊、導覽,以及輸入語音指標。