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

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

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

  • 空間功能：Android XR 提供多種可供應用程式使用的空間功能，但您不必實作每項功能。請策略性地導入這些元素，以補足應用程式的視覺階層、版面配置和使用者歷程。建議您加入自訂環境和多個面板，打造真正身歷其境的體驗。請參閱空間 UI 設計指南，判斷如何最佳整合空間元素。
  • 自動調整式 UI：XR 可讓您靈活設計寬敞的 UI，讓其能無縫地配合無限畫布和可自由調整大小的視窗。其中最重要的考量之一，就是遵循大螢幕設計指南，針對這個廣泛的環境最佳化應用程式的版面配置。即使您的應用程式目前僅限於行動裝置，您仍可利用迷人的環境提升使用者體驗，但針對大螢幕最佳化的使用者介面，是針對 Android XR 最佳化應用程式的最佳方式之一。
  • UI 架構：建議您使用 Jetpack Compose 建構 XR 的 UI。如果您的應用程式目前依賴 View，請參閱「在 XR 中使用 View」一文，進一步瞭解如何在使用 View 時善用 Compose 互通性，或評估直接使用 Jetpack SceneCore 程式庫的做法。
  • 在 Play 商店中發布：如要確保 XR 強化應用程式可在 Play 商店中搜尋到，請按照下列步驟操作： 
<uses-sdk tools:overrideLibrary="androidx.xr.scenecore, androidx.xr.compose"/>

將 2D UI 元件轉換為 3D 的提示

遵循這些訣竅，就能讓應用程式看起來像是針對 XR 進行最佳化。

  • 優先考量大螢幕相容性：請確保應用程式的 UI 遵循大螢幕設計原則，以便在擴增/虛擬實境環境中，確保文字和內容的最佳可讀性。
  • 策略性地使用空間功能：找出應用程式使用者歷程中的重要時刻，在這些時刻中加入空間功能可提升使用體驗，並善用平台的獨特功能。
  • 以使用者舒適度為考量來放置空間面板：設計含有空間面板的版面配置時，請將其放置在離使用者舒適的距離，以免造成過度擁擠或過於靠近的感受。
  • 為空間版面配置使用自適應 UI：利用自適應 UI 概念 (例如窗格和漸進式揭露)，將版面配置有效分解為多個空間窗格，以便最佳化資訊呈現方式。
  • 將 Orbiter 用於持續性元素和模式：將 Orbiter 保留給持續性和情境性的 UX 元素，例如導覽和控制項。請限制使用軌道器，以維持清晰度並避免雜亂。
  • 妥善運用升降效果：將空間升降效果套用至不會隨著內容捲動的暫時性元件。避免將大範圍區域設為突出，以免造成視覺不適，並維持平衡的視覺階層。
  • 使用 Material Design 建構：如果您使用的是 Material Design 元件和自適應版面配置的最新 Alpha 版，可以新增「EnableXrComponentOverrides」包裝函式，選擇在應用程式中採用 XR 變更。請參閱 Material Design for XR 說明文件，進一步瞭解相關資訊。

適用於 XR 的 Jetpack Compose 推出了可管理 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()
}
SpatialDialog.kt

將彈出式視窗轉換為 SpatialPopup

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

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

提升 2D UI 元素

如果您想提升 UI 並進一步控管，我們提供 SpatialElevation，讓您將應用程式中的任何可組合項提升至使用 SpatialElevationLevel 所設定 Z 軸上的空間面板層級。這有助於吸引使用者注意、建立更完善的階層，並改善可讀性，如以下範例所示。

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

程式碼的重點

  • 請勿將大型區域和平面 (例如底部頁面和側邊頁面) 空間化或提升。
  • 請勿將可捲動的 UI 元素置於內容上方。

將 2D 元件遷移至 Orbiter

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

非空間化導覽邊欄

非空間化導覽邊欄

空間化 (適應 XR) 導覽邊欄

空間化 (適應 XR) 導覽邊欄

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

// Previous approach
NavigationRail()

// New XR differentiated approach
Orbiter(
    position = OrbiterEdge.Start,
    offset = dimensionResource(R.dimen.start_orbiter_padding),
    alignment = Alignment.Top
) {
    NavigationRail()
}
Orbiter.kt

關於衛星的要點

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

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

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

面板可做為 UI 元素、互動式元件和沉浸式內容的容器。設計時，您可以為使用者控制項新增 orbiter 等元件，並在空間上提升 UI 元素，以吸引使用者注意特定互動。

程式碼的重點

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

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

根據預設，應用程式會在首頁空間中顯示單一面板。瞭解如何在首頁空間和完整空間之間切換。如要將該內容帶入 Full Space，您可以使用 SpatialPanel。

以下提供範例說明如何執行這項操作。

if (LocalSpatialCapabilities.current.isSpatialUiEnabled) {
    Subspace {
        SpatialPanel(
            SubspaceModifier
                .resizable(true)
                .movable(true)
        ) {
            AppContent()
        }
    }
} else {
    AppContent()
}
SpatialPanel.kt

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

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

  • 避免重疊面板，以免使用者無法查看重要資訊。
  • 避免使用者因資訊過多而感到不堪負荷。
  • 避免將面板放置在令人不適或不易察覺的位置。範例：放置在使用者後方的面板很難察覺。
  • 如要進一步瞭解如何開發空間 UI，請參閱完整的指南。

非空間化內容

非空間化內容

在軌道器中提供空間化 (XR 專用) 媒體控制選項，並將內容分割成多個空間化面板

在軌道器內提供空間化 (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()
    }
}
SpatialRow.kt

檢查空間功能

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

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

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

使用環境變更使用者的周遭環境

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

新增 3D 內容

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

如要新增 3D 模型、空間影片或空間音訊，請參閱相應指南。