使用 XR 将您的 Android 应用呈现为 3D 内容

适用的 XR 设备
本指南可帮助您为以下类型的 XR 设备打造优质体验。
了解 XR 设备类型 →
扩展现实头戴设备
有线扩展现实眼镜
了解 XR 设备类型 →

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

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

  • 空间功能：Android XR 为您的应用提供了各种空间功能，但您无需实现每项功能。有策略地实现那些与应用的视觉层次结构、布局和用户体验历程相辅相成的动画。考虑加入自定义环境和多个面板，打造真正身临其境的体验。请参阅空间界面设计指南，确定空间元素的最佳集成方式。
  • 自适应界面：XR 让您能够灵活设计宽敞的界面，无缝适应无限画布和可自由调整大小的窗口。其中一个最重要的考虑因素是，使用我们的大屏设计指南，针对这种宽敞的环境优化应用布局。即使您的应用目前仅支持移动设备，您仍然可以利用引人入胜的环境来提升用户体验，但针对大屏设备优化的界面是针对 Android XR 优化应用的最佳方式之一。
  • 界面框架：我们建议您使用 Jetpack Compose for XR 构建界面。如果您的应用依赖于 View，请参阅在 XR 中使用 View，详细了解如何在处理 View 时利用 Compose 互操作性，或评估直接使用 Jetpack SceneCore 库。
  • 在 Play 商店中发布：如需验证您的 XR 增强型应用是否可在 Play 商店中被发现，请执行以下操作：

将 2D 界面组件转换为 3D

遵循这些提示，可以让您的应用感觉像是专为 XR 优化过的。

  • 优先考虑大屏兼容性：确保应用的界面遵循大屏设计原则，以帮助确保在广阔的 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()
}

将弹出式窗口转换为 SpatialPopup

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

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

提升 2D 界面元素

如果您想通过更精细的控制来提升界面，我们提供了 SpatialElevation，让您能够将应用中的任何可组合项提升到您使用 SpatialElevationLevel 设置的空间面板上方的 Z 轴级别。 这有助于吸引用户的注意力、创建更好的层次结构并提高易读性，如以下示例所示。

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

代码要点

  • 请勿对大面积区域和平面（例如底部动作条和侧边动作条）进行空间化或提升。
  • 请勿提升可随内容滚动的界面元素。

将 2D 组件迁移到轨道器

轨道器是浮动元素，通常包含用户可以与之互动的控件。轨道器可以锚定到空间面板或其他实体（例如空间布局）。它们可为内容提供更多空间，让用户能够快速访问功能，而不会遮挡主要内容。

非空间化侧边导航栏

非空间化侧边导航栏

空间化（XR 适配）导航栏

空间化（XR 适配）侧边导航栏

以下示例代码展示了如何将 2D 界面组件迁移到 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()
}

关于轨道飞行器的要点

  • 轨道器是旨在将现有界面元素附加到空间面板的组件
  • 请参阅我们的 Android XR 应用设计指南，了解要为轨道器迁移哪些元素，以及要避免哪些模式。
  • 我们建议仅调整少数导航组件，例如侧边导航栏、顶部应用栏或底部应用栏。
  • 如果未启用空间界面，则不会显示 Orbiter。例如，它们不会显示在 Home Space 中，也不会显示在手机、平板电脑和可折叠设备等设备上。

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

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

面板用作界面元素、互动组件和沉浸式内容的容器。在设计时，您可以添加轨道器等组件，以便用户进行控制，并从空间上提升界面元素，以引起用户对特定互动的注意。

代码要点

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

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

默认情况下，您的应用会在主共享空间中显示单个面板。了解如何在主共享空间和全沉浸空间之间切换。如需将该内容引入全沉浸空间，您可以使用 SpatialPanel。

以下示例说明了如何实现此功能。

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

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

您可以为应用界面使用单个空间面板，也可以将 2D 界面迁移到多个空间面板。如果您选择为应用界面使用多个面板，则可以定位和旋转面板（类似于在 2D 模式下布局界面）。首先，您需要明确设计愿景，确定要实现的目标，然后可以使用空间界面布局 API（SpatialBox、SpatialRow、SpatialColumn、SpatialSpacer、SpatialAlignment）和子空间修饰符来定位和旋转面板。 在实现多个面板时，您需要避免一些关键模式。

  • 避免面板重叠，以免遮挡用户查看关键信息。
  • 避免使用过多面板让用户产生负担。
  • 避免将面板放置在不舒适或不显眼的位置。例如：放置在用户身后的面板很难被注意到。
  • 如需详细了解如何开发空间界面，请参阅我们的完整指南。

非空间化内容

非空间化内容

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 界面组件转换为 3D 之后，您还可以开始研究可以添加到应用中的其他空间功能，以便为 Android XR 打造更具差异化的体验。

检查空间功能

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

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

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

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

如果您想通过改变用户周围的环境在应用中营造沉浸感，可以使用环境来实现。在代码中添加环境是一项简单的更改，您可以在不显著影响应用现有界面的情况下进行。如需详细了解如何设置环境，请务必查看我们的完整指南。

添加 3D 内容

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

请参阅相应指南，了解如何添加 3D 模型、空间视频或空间音频。

上一页
概览
下一页
访问会话