您可以使用 OpenXR、原生 Android API 或 WebXR 构建 Android XR 应用程序。本页面概述的视觉设计建议适用于您选择的任何平台。
对于 Unity、OpenXR 或 WebXR 应用:您可以自由选择任何设计语言。尽管 Material Design 库仅适用于 Android 应用,但您仍可以遵循其设计建议来帮助应用颜色、间距、缩放、按钮和排版。
对于 Android 应用:2D 移动或大屏幕 Android 应用只需极少的额外开发工作即可利用全空间功能。为了实现高 XR 影响力,请考虑使用空间 UI。要创建更具沉浸感的应用体验,您还可以向应用添加3D 模型和环境。
您可以在 Android XR 中保持现有 Android 应用的设计语言。对于新应用或重新设计,请考虑遵循 Material Design 有关 UI 尺寸、辅助功能、排版、配色方案和组件的指南,这将使您的应用受益于 Android 熟悉且经过验证的设计和可用性。
如果您使用 Material Design 3 库构建您的 Android 应用,您可以轻松地为其组件和自适应布局添加空间 UI 行为。
如何测试应用的视觉设计
测试应用的视觉设计对于确保舒适且无障碍的用户体验至关重要。以下是如何在不同 XR 平台和环境中进行测试。
使用模拟器、仿真器和真实设备
- 如果您正在开发 Android 应用,请在 Android XR 模拟器上测试您的应用。这有助于您识别潜在问题并快速迭代,而无需物理设备。
视觉设计测试清单
- 测试任何运动或动画,确保它们不会引起晕动症。检查平滑过渡、稳定的帧率和可预测的运动。
- 在真实世界设置中尝试透视,确保虚拟元素与物理环境融合。
- 在不同光照条件下(包括明亮和昏暗环境)测试您的应用。
- 检查不同距离和角度下的文本可读性。
- 评估配色方案的辅助功能和舒适度。
收集用户反馈
进行用户测试以发现需要改进的任何方面。纳入具有不同 XR 经验和视觉能力的用户,以获得全面的视角。
Android XR 中的目标
在 XR 应用中,目标是用户可交互的可点击或可指向区域。更大的目标会增加精度、舒适度和可用性。为了使您的应用具有无障碍性,请遵循 Material Design 目标指南。它们将适用于 Android、Unity、OpenXR 和 WebXR 应用。如果您的应用已遵循 Material Design 建议,则您的目标尺寸已达到最低要求,尽管 56dp 是最佳尺寸。
所有交互式 UI 元素都应考虑
- 推荐目标:56dp x 56dp 或更大
- 视觉可供性:48dp x 48dp 或更大
- 目标与视觉可供性之间的偏移:4dp
- 为了准确交互,不同 UI 元素的指针目标不应重叠
确保添加悬停状态
为了提高辅助功能,除了 基本交互状态外,还请为交互式组件加入 悬停和焦点状态。悬停状态对每个人都有帮助,对于依赖指针输入选择 UI 元素的用户尤其重要。
悬停状态在启用系统内的眼动追踪功能方面扮演着重要角色。然而,当眼动追踪启用时,应用无法访问悬停状态,以保护用户隐私并防止数据共享。系统将绘制一个仅用户可见的高亮状态,以传达哪些 UI 组件是可交互的。
目标之间的距离
Material Design 建议目标之间至少留出 8dp 的空间,包括按钮。这种间距确保用户可以轻松区分交互元素并避免意外选择。
按钮之间的具体距离可能因其上下文和大小而异。需要考虑的一些因素:
- 按钮大小:较大的按钮可能需要更多空间以保持视觉清晰度。
- 按钮分组:功能密切相关的按钮可以靠得更近,而无关的按钮应有更多间距。
- 布局:屏幕的整体布局会影响按钮之间的间距。例如,工具栏中的按钮可能比对话框中的按钮间距更近。
面板尺寸和缩放
Android XR 旨在让您的应用舒适、易读且对广泛受众无障碍。为了获得最佳体验,Android XR 使用 0.868 dp 到 dmm 的转换比例。
如果您正在使用面板,您的 XR 应用很可能比物理屏幕离用户更远。请考虑用户戴着头戴式设备。为了获得最佳舒适度,请将主要内容放置在 41° 的视野范围内,这样用户无需移动头部即可进行交互。
建议
- 面板具有 32dp 的圆角。您可以覆盖此默认设置。
面板深度行为
- Home Space(主空间):应用在距离用户 1.75 米处启动,开发者无法覆盖此设置。
- Full Space(全空间):默认情况下,应用在与 Home Space 相同的位置启动。您可以使用空间逻辑根据用户位置放置面板,但我们建议启动距离为 1.75 米。
当应用距离用户 1.75 米时:
- 1024dp 被感知为 1556.24 毫米
- 720dp 被感知为 1093.66 毫米
- 物理现实中的 1 米 = XR 中的 1 米
按钮和图标
如果您有现有的 Android 应用,则无需为 Android XR 设计特殊组件。遵循 Material Design 关于按钮和图标的指南。如果您有 Unity、OpenXR 或 WebXR 应用,您可以保持现有按钮和图标不变,或借鉴 Material Design。
如果您决定构建自己的按钮或图标,请选择简单的形式、简洁的线条、基本形状和有限的调色板。避免过于细节化的设计。确保它们在不同分辨率和观看距离下均可缩放且易于辨认。为了无障碍性,请确保组件与其背景之间有足够的对比度,并为使用屏幕阅读器或其他辅助技术的用户提供文本描述或工具提示。
颜色
Android XR 遵循 Material Design 的颜色系统,以确保界面一致且视觉吸引力强。为了创建专为 XR 量身定制的沉浸式视觉风格,请设计时确保足够的对比度,选择平衡的调色板,使用对色觉缺陷者友好的颜色,并避免引起眼睛疲劳或迷失方向的刺眼组合。
XR 中的深色和浅色主题
像在 Android 移动应用中一样使用深色和浅色主题。用户可以在 Android XR 中切换深色和浅色主题,选择最符合其个人偏好的视觉风格。
了解更多关于 Material Design 配色方案的信息.
XR 排版
字体易读性对于 XR 中的舒适用户体验至关重要。我们建议使用字体大小为 14dp 或更大、字体粗细为正常或更粗的排版选项,以提高易读性。
为了创建易于使用的应用,请考虑遵循 Material Design 的排版指南。
XR 中排版的最佳实践
- 针对可变距离调整大小:请记住,用户会移动并从不同位置查看文本。确保字体大小足够大,以便从远处阅读。
- 将文本放置在用户的自然视野中:这可以避免过度的头部运动和颈部劳损。
- 考虑深度和缩放:使用深度线索和缩放来在 3D 空间中创建层级。
- 确保文本在用户背景下清晰可辨:更粗的字重提供更多对比度。根据环境的颜色、照明和复杂性进行调整。
- 使用自适应排版:面板可能离用户太近、太远,或处于不自然的视角。
- 限制附加到移动物体的文本:这可能导致晕动症。
XR 中的无障碍排版
- 选择易读字体:优先选择在小尺寸和远距离下字形清晰的字体。
- 使用句子大小写文本:句子大小写文本比大写文本更容易阅读。
- 限制行长:争取较短的行长以提高可读性。
- 选择无障碍颜色:使用对色觉差异用户易读的颜色组合。
- 避免过度拥挤:给文本留出充足的呼吸空间。
- 允许文本缩放:让用户调整文本大小以满足其个人需求。
OpenXR™ 和 OpenXR 徽标是 The Khronos Group Inc. 拥有的商标,并已在中国、欧盟、日本和英国注册为商标。