開始使用

使用 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。
圖 1.:購物清單應用程式已翻譯成 Display AI 眼鏡元素。系統資訊列在視覺上有所區別,AI 眼鏡通常是空的。在這裡,應用程式列可以轉換為標題晶片,而 Material 清單元素則可轉換為 Jetpack Compose Glimmer 清單。

最佳化元件

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

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

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

D. 字體排版:Glimmer 的字體排版比例使用一小組精緻的內文和標題樣式,可針對字距、大小和粗細進行最佳化,確保最佳可讀性。

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

微光元件經過最佳化,可透明顯示。
圖 2.:Caption goes here.

3. 音訊流程和提示

與語音進行對話。語音應占 AI 眼鏡應用程式的大部分,但不能讓使用者感到負擔。此外,您也必須考量某些裝置僅支援語音體驗。您可以建立僅含音訊的流程圖,說明這項體驗。使用音訊提示和對話,記錄互動和意見回饋。

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

4. 地圖輸入控制項

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

繼續輸入。

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

5. 考量 SysUI

其他系統介面的帳戶。

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

進一步瞭解系統 UI

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

6. 其他狀態

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

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

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

請考量核心應用程式和眼鏡應用程式中的不同應用程式狀態。