開始使用

使用 Jetpack Compose Glimmer UI 架構建構 AI Glasses 應用程式,打造可在 AI Glasses 上運作的擴增體驗。Jetpack Compose Glimmer 是首批針對透明螢幕和 AI 眼鏡外型規格最佳化的 UI 架構。

1. 決定使用者歷程

專注於與 AI 眼鏡外型因素的瀏覽原則相容的關鍵使用者歷程 (CUJ)。這類體驗可能只會顯示最少的 UI 或只播放音訊,同時讓使用者留意周遭環境。 如要尋找商機,請考慮從目前應用程式中,可透過 Google Glass 獲益的進入點著手。

舉例來說,使用者可能需要免持操作的即時步行路線導航,才能順利抵達目的地。

所選使用者歷程也應考量安全性、舒適度和效能原則。舉例來說,請勿選擇需要使用者長時間使用相機,或會侵犯隱私權的任務。

瞭解基本原則

從行動應用程式中擷取可善用智慧眼鏡板型規格的功能。例如一目瞭然的體驗。
將整個手機應用程式移植到智慧眼鏡,因為應用程式不會縮放至智慧眼鏡板型規格。

2. 最小化和翻譯

如果是顯示模式 UI,請從核心應用程式的 CUJ 開始:

  • 調整版面配置,讓使用者專注於重要資訊:版面配置會優先顯示重要資訊,減少動作和視覺元素數量,讓使用者專注於重要資訊。

  • 使用深度表示階層:深度可用於表示元素的優先順序。

  • 由下而上設計:建立模擬時,請從底部開始,向上排列元件。

  • 翻譯視覺元件:如要顯示 AI 眼鏡,請使用 Jetpack Compose Glimmer 元件和版面配置模式。

進一步瞭解元件應用程式檢視畫面

購物清單應用程式會將清單檢視畫面縮減為最簡化的清單體驗,只需要意見回饋 UI。
購物清單應用程式翻譯成 Display AI 眼鏡元素。系統資訊列在視覺上有所區別,AI 眼鏡通常是空的。應用程式列可以轉譯為標題晶片,而 Material 清單元素則可轉譯為 Jetpack Compose Glimmer 清單。

最佳化元件

A. 表面色:元件的表面色為黑色,可盡量提高卡片內容的對比度。

B. 外框和醒目顯示:外框顏色已針對對比度進行最佳化。醒目顯示功能可提供視覺化表達方式,並用於指出某些類型的輸入內容。

C. 形狀:採用較柔和的形狀系統,減少尖銳的邊角,提升舒適度,讓使用者更容易一目瞭然。疊加表面色:內容的疊加表面色為白色,可與世界形成最大對比。

D. 字體排版:Glimmer 的字體排版比例使用一小組精選的內文和標題樣式,可最佳化字距、大小和粗細,提供最佳可讀性。

E. 圖示:使用圓角 Material Symbols,與圓角字體比例一致。

微光元件經過最佳化,可透明顯示。

3. 音訊流程和提示

與語音互動。雖然音訊應占 AI 智慧眼鏡應用程式的大部分內容,但也不要讓使用者感到負擔,同時也要考慮某些裝置的純音訊體驗。您可以建立僅含音訊的流程圖,說明這項體驗。透過語音提示和對話,記錄互動和意見回饋。

建立僅限語音的流程圖,協助您規劃不會讓使用者感到負擔的對話體驗。

4. 地圖輸入控制項

請務必對應裝置控制項和手勢的輸入內容。您可以先將輕觸等基本應用程式互動動作,轉換為觸控板輕觸。

繼續輸入。

XR 差異化應用程式的使用者體驗專為 XR 設計,並實作僅適用於 XR 的功能。

5. 考量 SysUI

其他系統介面的帳戶。

應用程式會顯示在主畫面和其他系統功能中,例如通知 (如果使用)。這些圖示會顯示在系統列中。

進一步瞭解系統 UI

建立僅限語音的流程圖,協助您規劃不會讓使用者感到負擔的對話體驗。

6. 其他狀態

應用程式在 AI 眼鏡上會遇到各種情況,例如連線或權限問題。請在核心應用程式和智慧眼鏡應用程式中,考量這些不同狀態。

請務必要求裝置功能權限。

請注意,您需要透過視覺化 UI 和音訊考量這些因素。舉例來說,你可以提供語音回饋,告知使用者必須在行動裝置上完成權限流程,或是朗讀錯誤訊息。

在核心應用程式和智慧眼鏡應用程式中,考量不同的應用程式狀態。