空間 UI

建構 Android XR 差異化應用程式時,您可能會想使用空間 UI,將內容放置在使用者的實體或虛擬環境中。您可以將應用程式分割成空間面板軌道,並新增空間高度 (詳見本頁)。

空間面板

空間面板是 Android XR 應用程式的基本構成元素。您可以使用這些功能,在無限顯示器上打造 XR 差異化體驗,讓內容在使用者空間中展開。空間面板可做為 UI 元素、互動式元件和沉浸式內容的容器。

一個有北極光和積雪山的 Android XR 應用程式。三個使用者控制選單位於軌道器中。這些面板會高於主面板,並分別位於主面板的左側、右側和底部。

瞭解 UI 的縮放和移動方式

空間面板會根據與使用者的距離自動調整大小。這種動態縮放功能可確保 UI 元素在不同距離下仍可清楚顯示,並可供使用者互動。大小會維持在 0.75 公尺到 1.75 公尺之間。接著,縮放率會以每公尺 0.5 公尺的速度增加,元素也會變小。

為避免與系統 UI 發生衝突,請維持在預設面板移動限制內:

  • 最小深度:離使用者 0.75 公尺
  • 最大深度:離使用者 5 公尺

使用者可以縮放空間面板,無論與使用者的距離為何,都能清楚查看面板。使用者移動空間面板時,Android XR 會自動調整其大小。

空間面板大小

Android XR 的設計可讓您的應用程式讓廣大使用者感到舒適、易讀且易於存取。為提供最佳體驗,系統會使用 0.868 dp 至 dmm 的比例。使用者在頭戴式裝置上觀看應用程式時,應用程式會比在手機或平板電腦上觀看時離使用者更遠,因此應用程式必須放大,才能方便使用。

在「Full Space」中,空間面板沒有大小限制,但由於實體限制,最大尺寸為 2560dp x 1800dp。

使用者距離 XR 應用程式 1.75 公尺的視覺化呈現。

放置空間面板的位置

在 Full Space 中,您可以決定面板在直通和虛擬環境中的放置位置。當使用者從「Home Space」切換至「Full Space」時,除非您指派自訂位置,否則元素會維持在可預測的位置。

使用者觀看 XR 應用程式,自然視線位於面板中心下方 5 度。

將面板中心產生在使用者視線 1.75 公尺外的位置。 為盡量提高舒適度,請將面板的垂直中心置於使用者視線以下 5°,因為使用者通常會向下看。

使用者在視野中心 41 度處查看面板。

為提供最佳舒適性,請將內容置於使用者視野中心 41° 的位置。這樣可確保清晰的視野,並盡量減少頭部或身體過度移動的必要性。

使用者可以在聊天室中移動,而空間面板會保持原位。

Android XR 提供可立即使用的互動模式,方便使用者操作元素,並簡化開發程序。使用者可以移動元素,以便調整個人空間。您可以設定移動和調整大小的行為。

為了讓使用者感覺穩定且方向正確,您可以讓使用者將空間面板固定在現實世界中的特定位置,例如地板、椅子、牆壁、天花板或桌子。錨定功能僅適用於透視模式。

建立自己的空間配置

您可以將應用程式分解為多個空間面板,並選擇任何版面配置。空間 UI API 不會限制面板數量。包括使用列和欄建立版面配置,以及建立平面和曲線列的功能。空間面板位置可以是特定位置或任意位置。瞭解如何開發空間 UI 版面配置

有人看著三個並排排列的平面圖片 一名男子看著三個平面面板,排列方式為一排弧形排列,左側和右側的面板較靠近 有人在任意位置看著三個不同大小的平面面板,左側和右側的面板離人較遠

平面列版面配置

弧形列版面配置

任意位置版面配置

人造衛星

Orbiter 是浮動式 UI 元素,可控制空間面板中的內容。這類功能可為內容提供更多空間,使用者在瀏覽主要內容的同時,也能快速存取各項功能。Orbiter 可讓您靈活整合現有的 UI 元件,或建立新的 UI 元件。

請謹慎使用 Orbiter,並仔細考量使用者的需求和意圖。大量空間化 UI 元素可能會導致內容疲勞,並因過多競爭動作而讓使用者不堪負荷。建議您調整幾個主要導覽元件,例如導覽邊欄或導覽列。

在主畫面空間中採用 Material Design 的非空間化導覽邊欄
全螢幕模式下 Material Design 的空間導覽邊欄
主畫面空間中採用 Material Design 的非空間化導覽列
全螢幕模式下,採用 Material Design 的空間導覽列

規範

  • 調整面板的邊框間距,以決定其彈性或百分比位置。
  • 判斷軌道器的 Y 軸位置。建議的視覺距離為 20dp。
  • 視需要透過空間高度層級調整軌道高度層級。根據預設,這些元素的 Z 深度會提高 15dp。
  • 調整面板大小時,大小可以是固定或彈性。
  • 決定是否要讓 Orbiter 動態擴大以配合內容。
應避免的設計模式
  • 避免重疊的軌道器大小超過其本身大小的 50%。
  • 避免將軌道器放置在離空間面板太遠的地方。
  • 請勿使用絕對 X 或 Y 座標。
  • 避免使用太多軌道器。

空間高度

將空間高度新增至元件後,會顯示在 Z 軸的空間面板上方。這有助於吸引使用者注意、建立更完善的階層,並改善可讀性。

大螢幕應用程式中的 Material Design 對話方塊
在 Android XR 中使用空間高度的對話方塊
在 Android XR 中使用高度差的下拉式選單
應避免的設計模式
  • 避免將大型區域和平面 (例如底部頁面和側邊頁面) 空間化或提升。
  • 避免使用可捲動的 UI 元素。

設計大型目標大小

在 XR 應用程式中,目標是使用者可互動的可指向區域。Android XR 遵循 Material Design 的目標指南,並建議使用較大的目標,以提高精確度、舒適度和可用性。

瞭解 XR 目標懸停狀態

讓排版更容易存取

字型易讀性對於 XR 中的舒適使用者體驗至關重要。建議您使用字型大小為 14dp 或更大的型態縮放選項,並將字型粗細設為正常或更高,以便提高可讀性。

如果現有應用程式遵循 Material Design 設計指南,就已針對 Android XR 進行最佳化。您可以根據 Material Design 定義新的應用程式字體排版。

瞭解 XR 字體排版

使用 Material Design 元件和版面配置

設計 Android XR 應用程式時,請善用 Material Design 元件庫和自適應版面配置。這些互動式建構區塊有助於加快開發作業,讓您能專注於核心功能和創新。

XR 適用的 Material Design 可透過空間 UI 行為強化 Material 3 元件和自適應版面配置。這麼做可以讓應用程式更符合平台原生體驗,並充分運用空間。

您也可以將現有的 UI 元件放入軌道並套用空間高度,如本頁所述,這樣就能將其轉換為空間化元件。

Material 3 設計套件元素的拼貼畫面 下載 Material 3 設計套件,開始使用