使用 XR 將 Android 應用程式轉換為 3D

適用的 XR 裝置
本指南可協助您為這類 XR 裝置打造體驗。
瞭解 XR 裝置類型 →
XR 頭戴式裝置
有線 XR 眼鏡
瞭解 XR 裝置類型 →

根據預設，2D 行動裝置或大螢幕 Android 應用程式可在 Android XR 中運作，並在 3D 空間中顯示為 2D 面板。您可以加入沉浸式 XR 功能，強化現有的 2D Android 應用程式，從平面螢幕體驗轉換為動態 3D 環境。

將 Android 應用程式導入 XR 時，請考量下列重要原則。

  • 空間功能：Android XR 提供多種空間功能，可供應用程式使用，但您不必實作每項功能。請策略性地導入與應用程式視覺階層、版面配置和使用者歷程相輔相成的廣告格式。建議加入自訂環境和多個面板，打造真正身歷其境的體驗。請參閱空間 UI 設計指南，判斷空間元素的最佳整合方式。
  • 自動調整式 UI：XR 可讓您靈活設計寬敞的 UI，完美融入無限畫布和可自由調整大小的視窗。其中一項最重要的考量，是使用我們的大螢幕設計指南，針對這個廣闊的環境最佳化應用程式的版面配置。即使應用程式目前僅限行動裝置使用，您仍可利用引人入勝的環境提升使用者體驗，但針對大螢幕最佳化 UI，是針對 Android XR 最佳化應用程式的最佳方式之一。
  • UI 架構：建議使用 Jetpack Compose for XR 建構 UI。如果應用程式依賴 View，請參閱「在 XR 中使用 View」，進一步瞭解如何在處理 View 時運用 Compose 互通性，或評估是否直接使用 Jetpack SceneCore 程式庫。
  • 在 Play 商店發布：如要確認使用者能在 Play 商店找到您的 XR 強化應用程式，請按照下列步驟操作：

將 2D UI 元件轉換為 3D

只要遵循這些提示，就能大幅提升應用程式的 XR 體驗。

  • 優先考量大螢幕相容性：確保應用程式 UI 符合大螢幕設計原則，確保在廣闊的 XR 環境中，文字和內容仍清晰易讀。
  • 策略性使用空間功能：找出應用程式使用者歷程中的關鍵時刻，在這些時刻加入空間功能，提升體驗，並充分運用平台獨特功能。
  • 以使用者舒適度為考量，放置空間面板：使用空間面板設計版面配置時，請將面板放置在與使用者舒適的距離，避免造成壓迫感或感覺太近。
  • 使用自動調整 UI 建立空間版面配置：運用自動調整 UI 概念 (例如窗格和漸進式顯示)，有效將版面配置分解為多個空間面板，以最佳方式呈現資訊。
  • 使用軌道器顯示常駐元素和模式：軌道器應保留給常駐和情境式使用者體驗元素，例如導覽和控制項。請限制軌道元素的使用，以免畫面雜亂，確保清晰度。
  • 謹慎使用高度：對保持靜止且不會隨內容捲動的暫時性元件套用空間高度。避免大面積抬高，以免造成視覺不適，並維持平衡的視覺階層。

Jetpack Compose for XR 推出新元件，可管理 XR 強化功能，您不必自行處理。舉例來說，您可以使用 SpatialPopup 和 SpatialDialog 取代對應的 2D 元素。如果無法使用空間 UI，這些元件會顯示為一般 2D UI，並在可行時顯示應用程式的空間 UI。使用方式很簡單，只要修改一行程式碼，即可取代對應的 2D UI 元素。

將對話方塊轉換為 SpatialDialog

// Previous approach
Dialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}

// New XR differentiated approach
SpatialDialog(
    onDismissRequest = onDismissRequest
) {
    MyDialogContent()
}

將彈出式視窗轉換為 SpatialPopup

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}

提升 2D UI 元素

如要進一步控制 UI 提升效果，可以使用 SpatialElevation，將應用程式中的任何可組合項提升至 Z 軸上空間面板上方，並使用 SpatialElevationLevel 設定。這有助於吸引使用者注意、建立更佳的階層，並提高可讀性，如以下範例所示。

// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr).
SpatialElevation(elevation = SpatialElevationLevel.Level4) {
    ComposableThatShouldElevateInXr()
}

程式碼重點

  • 請勿將底部功能表和側邊功能表等大型區域和平面空間化或提升。
  • 請勿提高可與內容一起捲動的 UI 元素。

將 2D 元件遷移至軌道

軌道器是浮動元素，通常包含使用者可互動的控制項。軌道器可以錨定至空間面板或其他實體，例如空間版面配置。這樣一來，內容就有更多空間，使用者也能快速存取功能，而不會遮擋主要內容。

非空間化導覽邊欄

非空間化導覽邊欄

空間化 (XR 專用) 導覽邊欄

空間化 (XR 專用) 導覽邊欄

以下程式碼範例說明如何將 2D UI 元件遷移至 Orbiter。

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterPosition.TopStart(
        horizontalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside,
        offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding))
    )
) {
    NavigationRail()
}

軌道飛行器的重點

  • 軌道器元件可將現有的 UI 元素附加至空間面板
  • 請參閱 Android XR 應用程式設計指南，確認要為軌道器遷移哪些元素，以及應避免的模式。
  • 建議您只調整少數導覽元件，例如導覽邊欄、頂端應用程式列或底部應用程式列。
  • 未啟用空間 UI 時，不會顯示 Orbiters。舉例來說，這些應用程式不會顯示在 Home Space 或手機、平板電腦和折疊式裝置等裝置上。

將 2D 元件遷移至空間面板

空間面板是 Android XR 應用程式 UI 的基礎構成元素。

面板是 UI 元素、互動式元件和沉浸式內容的容器。設計時，您可以加入軌道等元件，供使用者控制，並在空間上提升 UI 元素，吸引使用者注意特定互動。

程式碼重點

  • 請參閱 Android XR 應用程式設計指南，確認要將哪些元素遷移至面板，以及應避免的模式。
  • 請遵循下列最佳做法，妥善放置空間面板：
    • 面板應在距離使用者眼睛 1.5 公尺的中心位置生成。
    • 內容應顯示在使用者視野中央 41° 的範圍內。
  • 使用者移動時，面板會固定在原位。錨定功能僅適用於透視模式。
  • 請遵循系統建議，為面板設定 32 dp 圓角。
  • 觸控目標應為 56 dp，且不得小於 48 dp。
  • 請保持對比度，確保內容清晰易讀，尤其是使用透明背景時。
  • 請遵循 Android 設計色彩原則，並使用 Material Design 色彩系統，為應用程式實作深色和淺色主題。
  • 搭配現有 UI 元素使用 Spatial Panels API。

將 2D UI 遷移至單一空間面板

根據預設，應用程式會在主畫面中顯示單一面板。瞭解如何在主畫面和全螢幕之間切換。如要將該內容移至全螢幕，可以使用 SpatialPanel。

以下是做法範例。

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            modifier = SubspaceModifier.movable().resizable(),
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}

將 2D UI 遷移至多個空間面板

您可以為應用程式 UI 使用單一空間面板，也可以將 2D UI 遷移至多個空間面板。如果您選擇在應用程式 UI 中使用多個面板，可以調整面板的位置和旋轉角度 (類似於在 2D 中配置 UI)。首先，您需要明確設計出要達成的目標，然後使用 Spatial UI 版面配置 API (SpatialBox、SpatialRow、SpatialColumn、SpatialLayoutSpacer、SpatialAlignment) 和子空間修飾符，來定位及旋轉面板。實作多個面板時，請避免使用某些重要模式。

  • 避免重疊面板，以免使用者無法看到重要資訊。
  • 避免讓使用者看到過多面板。
  • 避免將面板放在不舒服或不易察覺的位置。例如，使用者很難注意到放在身後的面板。
  • 如要進一步瞭解如何開發空間 UI，請參閱完整的指南。

非空間化內容

非空間化內容

Orbiter 內部的空間化 (XR 調整) 媒體遙控器，以及分成多個空間面板的內容

Orbiter 內部的空間化 (XR 調整) 媒體遙控器，以及分成多個空間面板的內容

SpatialRow {
    SpatialPanel(
        SubspaceModifier
            .width(384.dp)
            .height(592.dp)
    ) {
        StartSupportingPanelContent()
    }
    SpatialPanel(
        SubspaceModifier
            .height(824.dp)
            .width(1400.dp)
    ) {
        App()
    }
    SpatialPanel(
        SubspaceModifier
            .width(288.dp)
            .height(480.dp)
    ) {
        EndSupportingPanelContent()
    }
}

新增空間功能

構思並開始將 2D UI 元件轉換為 3D 後，您也可以開始研究其他可加入應用程式的空間功能，為 Android XR 打造更與眾不同的體驗。

檢查空間功能

決定是否顯示特定 UI 元素時，請避免檢查特定 XR 裝置或模式。如果檢查的是裝置或模式，而非功能，當特定裝置的功能隨時間變動時，可能會發生問題。請改用 LocalSpatialCapabilities.current.isSpatialUiEnabled 直接檢查必要的空間化功能，如以下範例所示。這種做法可確保應用程式正確適應各種 XR 體驗，不必在每次推出新裝置或功能變更時更新。

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    SupportingInfoPanel()
} else {
    ButtonToPresentInfoModal()
}

// Similar check for audio
val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled

使用環境變更使用者周遭

如要透過變更使用者周遭環境，在應用程式中營造沉浸感，可以使用環境。在程式碼中新增環境是一項簡單的變更，不會對應用程式現有的 UI 造成重大影響。如要進一步瞭解如何設定環境，請務必參閱完整的指南。

新增 3D 內容

3D 模型和空間影片等 3D 內容，有助於打造更身歷其境的體驗，並增進空間理解。應用程式只能在空間功能可用時顯示 3D 內容，因此請先檢查空間功能是否可用。

請參閱適當指南，瞭解如何新增 3D 模型、空間影片或空間音訊。