空間 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-to-dmm。在頭戴式裝置上,應用程式與使用者的距離會比在手機或平板電腦上更遠,因此必須放大,方便使用者操作。

在全螢幕模式下,空間面板沒有大小下限,但受限於實體限制,上限為 2560dp x 1800dp。

使用者與 XR 應用程式距離 1.75 公尺的示意圖。

空間面板的放置位置

在全螢幕模式下,您可以在穿透模式和虛擬環境中決定面板位置。使用者從主畫面切換至全螢幕時,除非您指定自訂位置,否則元素會保持在相同的位置。

使用者觀看 XR 應用程式,自然視線水平低於面板中心 5 度。

在距離使用者視線 1.75 公尺處生成面板中心。 使用者通常會向下看,因此請將面板的垂直中心置於使用者視線下方 5°,以提供最舒適的體驗。

使用者看著視野中央 41 度的面板。

為提供最佳舒適度,請將內容置於使用者視野中央 41° 的範圍內。這樣一來,您就能清楚看到畫面,不必過度移動頭部或身體。

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

Android XR 內建現成的互動模式,可讓使用者順暢操作元素,並簡化開發流程。使用者可以移動元素,配合個人空間。您可以設定移動和調整大小行為。

如要協助使用者根據空間中的實際物體,調整 UI 元素的位置,您可以允許他們將空間面板錨定在實際位置,例如地板、椅子、牆壁、天花板或桌子。錨定功能僅適用於透視模式。

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

建立自己的空間版面配置

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

使用者看著三個並排成一列的面板

平面列版面配置

使用者看著三個並排成弧形的平面面板,左右兩側的面板離使用者較近

弧形列版面配置

使用者看著三個不同大小的平面面板,這些面板位於任意位置,最外側的左右面板距離使用者較遠

任意位置版面配置

空間影片

空間影片可為內容增添立體感和沉浸感。您可以將這些影片融入設計中,在平面、180° 半球形或 360° 球形表面上,以單視角或立體視角呈現。

軌道器

軌道器是浮動 UI 元素,通常用於控制空間面板和其他錨定實體中的內容。這類控制項可為內容提供更多空間,使用者在主要內容保持可見的情況下,能夠快速存取功能。軌道器可讓您靈活整合現有的 UI 元件,或建立新的元件。

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

主畫面中 Material Design 的非空間化導覽邊欄

主畫面中 Material Design 的非空間化導覽邊欄

全螢幕模式下,Material Design 的空間導覽邊欄

在「全螢幕」中,Material Design 的空間導覽邊欄

Home Space 中 Material Design 的非空間化導覽列

主畫面中 Material Design 的非空間化導覽列

全螢幕模式下的 Material Design 空間導覽列

全螢幕中 Material Design 的空間導覽列

規範

  • 調整面板的邊框間距,決定其彈性或百分比位置。
  • 決定軌道器的偏移量。建議的視覺距離為 20dp。
  • 視需要使用空間高度等級調整軌道器高度等級。根據預設,這些元件在 Z 軸深度上會提高 15dp。
  • 面板大小可固定或彈性調整。
  • 決定是否要讓軌道廣告動態展開,以配合內容大小。

應避免的設計模式

  • 避免與軌道器重疊超過 50% 的大小。
  • 避免將軌道器放在離空間面板太遠的位置。
  • 請勿使用絕對 X 或 Y 座標。
  • 避免使用過多軌道器。

空間高度

為元件新增空間高度時,元件會顯示在 Z 軸的空間面板上方。這有助於吸引使用者注意、建立更佳的階層,並提升可讀性。

空間高度等級 元件 DP
0 未指派 .1dp
1 人造衛星 16dp
2 未指派 24dp
3 SpatialPopup 32dp
4 未指派 40dp
5 SpatialDialog 56dp

大螢幕應用程式上的 Material Design 對話方塊

大螢幕應用程式中的 Material Design 對話方塊

在 Android XR 中使用空間高度的對話方塊

大螢幕應用程式中的 Material Design 下拉式選單

大螢幕應用程式中的 Material Design 下拉式選單

在 Android XR 中使用高度的下拉式選單

應避免的設計模式
  • 避免將底部功能表和側邊功能表等大型區域和平面立體化或提高。
  • 避免提高含有可捲動內容的 UI 元素。

設計大型目標

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

瞭解 XR 目標和懸停狀態。

讓字體排版符合無障礙設計

字型清晰度對於 XR 的舒適使用者體驗至關重要。建議使用字型大小為 14dp 以上、字型粗細為一般或以上的字體資源配置選項,以提高可讀性。

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

瞭解 XR 字體排版。

使用 Material Design 元件和版面配置

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

Material Design for XR 透過空間 UI 行為,強化 Material 3 元件和自動調整版面配置。這些元件可讓應用程式更符合平台原生風格,並充分運用空間。

您也可以將現有的 UI 元件放入軌道器,並套用空間高度,將其空間化,如本頁所述。

Material 3 Design Kit 元素拼貼 下載 Material 3 Design Kit 即可開始使用。