借助 XR 将您的 Android 应用带入 3D 世界

您的 2D 移动或大屏 Android 应用在 Android XR 中默认以 2D 面板形式显示在 3D 空间内。您可以添加沉浸式 XR 功能来增强现有的 2D Android 应用，将其从平面屏幕体验转变为动态的 3D 环境。

在将您的 Android 应用引入 XR 时，请考虑以下重要原则。

  • 空间功能：Android XR 为您的应用提供了各种空间功能，但您不必实现所有功能。有策略地实施那些能补充您应用的视觉层次结构、布局和用户旅程的功能。考虑整合自定义环境和多个面板，以创建真正沉浸式的体验。请参阅空间界面设计指南，以确定空间元素的最佳集成方式。
  • 自适应界面：XR 让您可以灵活地设计一个宽敞的界面，该界面可以无缝适应无限画布和自由调整大小的窗口。最重要的考量之一是使用我们的大屏幕设计指南来优化您的应用在此广阔环境中的布局。即使您的应用目前仅限移动设备使用，您仍然可以利用迷人的环境来增强用户体验，但针对大屏幕优化的界面是优化 Android XR 应用的最佳方式之一。
  • 界面框架：我们建议使用 Jetpack Compose for XR 构建您的界面。如果您的应用依赖于视图，请查看在 XR 中使用视图，了解如何在处理视图时利用 Compose 互操作性，或评估直接使用 Jetpack SceneCore 库。
  • 在 Play 商店发布：为确保您的 XR 增强应用在 Play 商店中可被发现

将 2D 界面组件转换为 3D 的技巧

遵循这些技巧可以大大提高您的应用在 XR 环境中的优化感。

  • 优先考虑大屏幕兼容性：确保您应用的界面符合大屏幕设计原则，以帮助确保在广阔的 XR 环境中文本和内容具有最佳可读性。
  • 策略性地使用空间功能：确定您应用用户旅程中的关键时刻，在此刻结合空间功能将增强体验并利用平台的独特功能。
  • 放置空间面板时考虑用户舒适度：在设计空间面板布局时，将其放置在与用户舒适的距离处，以避免压迫感或感觉太近。
  • 对空间布局使用自适应界面：利用自适应界面概念，例如窗格和渐进式显示，有效将您的布局分解为多个空间面板，优化信息呈现。
  • 将环绕元素用于持久性元素和模式：将环绕元素保留给持久性且具有上下文的 UX 元素，例如导航和控件。限制环绕元素的使用以保持清晰并避免混乱。
  • 明智地使用高程：对保持静止且不随内容滚动的临时组件应用空间高程。避免提升大面积区域，以防止视觉不适并保持平衡的视觉层次结构。
  • 使用 Material Design 构建：如果您正在使用最新版 Material Design 组件的 alpha 版本和自适应布局进行构建，您可以添加 "EnableXrComponentOverrides" 包装器以选择在应用中进行 XR 更改。阅读我们的Material Design for XR 文档以了解更多信息。

Jetpack Compose for XR 引入了新的组件，可管理 XR 增强功能，从而省去您的麻烦。例如，您可以使用 SpatialPopup 和 SpatialDialog 来替换其 2D 对应项。这些组件在空间界面不可用时显示为典型的 2D 界面，而在可用时显示您应用的空间界面。使用它们就像将相应的 2D 界面元素替换为一行代码一样简单。

将对话框转换为 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 界面元素

当您希望以更精细的方式提升界面时，我们提供 SpatialElevation，允许您将应用中的任何可组合项提升到高于空间面板的 Z 轴级别，该级别由您使用 SpatialElevationLevel 设置。这有助于吸引用户注意力，创建更好的层次结构，并提高可读性，如下例所示。

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

代码要点

  • 不要对大面积区域和平面（如底部工作表和侧边工作表）进行空间化或提升。
  • 不要提升随内容滚动的界面元素。

将 2D 组件迁移到环绕元素

环绕元素是浮动元素，通常包含用户可以交互的控件。环绕元素可以锚定到空间面板或其他实体，例如空间布局。它们允许内容拥有更多空间，并让用户快速访问功能而不会遮挡主要内容。

Non-spatialized navigation rail

非空间化导航栏

Spatialized (XR-adapted) navigation rail

空间化（XR 自适应）导航栏

以下示例代码显示了您如何将 2D 界面组件迁移到环绕元素。

// Previous approach
NavigationRail()

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

关于环绕元素的要点

  • 环绕元素是旨在将现有界面元素附加到空间面板的组件
  • 请参阅我们的Android XR 应用设计指南，以验证哪些元素需要迁移到环绕元素，以及应避免的模式。
  • 我们建议仅适配少数导航组件，如导航栏、顶部应用栏或底部应用栏。
  • 当空间界面未启用时，环绕元素不会显示。例如，它们不会在主空间中显示，也不会在手机、平板电脑和可折叠设备等设备上显示。

将 2D 组件迁移到空间面板

空间面板是 Android XR 应用界面的基本构建块。

面板充当界面元素、交互式组件和沉浸式内容的容器。在设计时，您可以添加像环绕元素这样的组件用于用户控制，并对界面元素进行空间提升以吸引对特定交互的注意力。

代码要点

  • 请参阅Android XR 应用设计指南，以验证哪些元素需要迁移到面板，以及应避免的模式。
  • 遵循空间面板放置的最佳实践
    • 面板应在距离用户眼睛 1.5 米的中心位置生成。
    • 内容应出现在用户视野中心 41° 的范围内。
  • 面板在用户移动时保持原位。锚定仅适用于直通模式。
  • 面板应遵循系统推荐的 32 dp 圆角。
  • 触控目标应为 56 dp，且不小于 48 dp。
  • 保持对比度以确保可读性，特别是当您使用任何透明背景时。
  • 遵循Android 设计颜色原则，并使用Material Design 颜色系统为您的应用实现深色和浅色主题。
  • 将空间面板 API 与现有 UI 元素结合使用。

将 2D 界面迁移到单个空间面板

默认情况下，您的应用在主空间中显示为单个面板。了解如何在主空间和全空间之间过渡。要将该内容带入全空间，您可以使用SpatialPanel。

这是一个您可能如何做到这一点的示例。

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

将 2D 界面迁移到多个空间面板

您可以为您的应用界面使用单个空间面板，也可以将您的 2D 界面迁移到多个空间面板。如果您选择为您的应用界面使用多个面板，您可以定位和旋转面板（类似于在 2D 中布局您的界面）。您将从一个清晰的设计愿景开始，然后您可以使用空间界面布局 API（SpatialBox、SpatialRow、SpatialColumn、SpatialLayoutSpacer、SpatialAlignment）和子空间修改器来定位和旋转面板。在实现多个面板时，有一些关键模式是您需要避免的。

  • 避免面板重叠，这会阻碍用户看到关键信息。
  • 避免面板过多地让用户感到不知所措。
  • 避免将面板放置在不舒适或不易察觉的位置。例如：放置在用户身后的面板很难被注意到。
  • 有关开发空间界面的更多信息，请查看我们的完整指南。

Non-spatialized content

非空间化内容

Spatialized (XR-adapted) media controls within an orbiter and content broken up into multiple spatial panels

环绕元素内的空间化（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

检查空间功能

当您决定是否显示特定界面元素时，避免检查特定的 XR 设备或模式。检查设备或模式而不是功能可能会在给定设备上的功能随时间变化时导致问题。相反，请使用LocalSpatialCapabilities.current.isSpatialUiEnabled 直接检查必要的空间化功能，如下例所示。这种方法可确保您的应用正确适应各种 XR 体验，而无需在每次新设备出现或功能更改时进行更新。

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

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

使用环境改变用户的周围环境

当您希望通过改变用户的周围环境在应用中营造沉浸感时，您可以使用环境来实现。在代码中添加环境是一个简单的更改，您可以在不显着影响应用现有界面的情况下进行。有关设置环境的更多信息，请务必查看我们的完整指南。

添加 3D 内容

3D 内容，如 3D 模型和空间视频，有助于创造更沉浸的体验并增加空间理解。您的应用只能在空间功能可用时显示 3D 内容，因此您需要首先检查空间功能是否可用。

有关添加3D 模型、空间视频或空间音频，请参阅相应的指南。