比例、尺寸和视觉设计

如果您有 Android 应用并希望保留其视觉样式,则可以在 Android XR 中保留该设计语言。对于新应用或重新设计的应用,不妨考虑遵循 Material Design 指南,以确保界面大小、无障碍功能、排版、配色方案和组件符合相关要求。

2D 移动应用或大屏幕 Android 应用无需进行额外的开发工作,即可充分利用全空间功能。如需实现出色的 XR 效果,请考虑将面板空间化并创建空间化界面。如需打造更具沉浸感的用户体验历程,不妨考虑添加3D 模型环境

如果您已构建或正在构建 Unity、Open XR 或 WebXR 应用,则可以随意遵循您选择的任何设计语言。Material Design 提供的设计建议可帮助您应用颜色、间距、比例、按钮和排版。

如何测试应用的视觉设计

为了确保提供舒适且易于访问的用户体验,测试应用的视觉设计至关重要。以下是如何跨不同的 XR 平台和环境进行测试。

使用模拟器、模拟器和真实设备

  • 如果您要开发 Android 应用,请在 Android XR 模拟器上测试应用。这有助于您发现潜在问题,并在不使用实体设备的情况下快速迭代。

视觉设计测试核对清单

  • 测试所有动作或动画,确保它们不会引起晕动。 检查过渡是否流畅、帧速率是否稳定以及动作是否可预测。
  • 在真实环境中试用透视功能,确保虚拟元素与实际环境融为一体。
  • 在不同的光照条件(包括明亮和昏暗的环境)下测试您的应用。
  • 检查文字在不同距离和角度下的可读性。
  • 评估配色方案是否易于访问和舒适。

收集用户反馈

开展用户测试,找出有待改进的方面。纳入具有不同 XR 体验和视觉能力的用户,以获得全面的视角。

Android XR 中的目标

在 XR 应用中,目标是用户可与之互动的可点按或可指向区域。目标越大,准确性、舒适度和易用性就越高。如需使应用可访问,请遵循 Material Design 目标平台准则。它们将适用于 Android、Unity、OpenXR 和 WebXR 应用。如果您的应用已遵循 Material Design 建议,则您的目标尺寸符合最小要求,但 56dp 是最佳尺寸。

显示建议的 56dp 目标和 4dp 易用功能的示例图标。

所有互动式界面元素都应考虑以下事项:

  • 建议的目标:56dp x 56dp 或更大
  • 视觉提示:48dp x 48dp 或更大
  • 目标和视觉提示之间的偏移:4dp
  • 为了实现准确的互动,不同界面元素的指针目标不应重叠

请务必添加悬停状态

为提高无障碍功能,请为交互式组件添加基本交互状态之外的悬停和聚焦状态悬停状态对所有用户都很有帮助,对于依赖指针输入来选择界面元素的用户来说,更是至关重要。

悬停状态在实现系统中的眼动跟踪功能方面发挥着重要作用。不过,启用眼动追踪后,应用将无法访问悬停状态,以保护用户隐私并防止数据共享。系统会绘制仅向用户显示的突出显示状态,以传达哪些界面组件可供互动。

目标之间的距离

Material Design 建议目标(包括按钮)之间至少留出 8dp 的空间。这种间距可确保用户能够轻松区分交互元素,并避免意外选择。

按钮之间的具体距离可能会因其上下文和大小而异。需要考虑的一些因素:

  • 按钮大小:较大的按钮可能需要在按钮之间留出更多空间,以保持视觉清晰度。
  • 按钮分组:功能密切相关的按钮可以分组在一起,而不相关的按钮应分开。
  • 布局:屏幕的整体布局可能会影响按钮之间的间距。例如,工具栏中的按钮之间的间距可能比对话框中的按钮之间的间距更小。

面板尺寸和缩放

Android XR 旨在让您的应用舒适、清晰且易于大众使用。为了获得最佳体验,Android XR 使用 0.868 dp 到 dmm 的比例。

一张可视化图,显示了距离 XR 应用 1.75 米的用户,面板尺寸为 1024 dp x 720 dp,圆角半径为 32 dp。

如果您使用的是平板显示屏,XR 应用与用户的距离很可能比实体屏幕更远。假设用户戴着耳机。为了最大限度地提高舒适度,请将主要内容放置在 41° 的视野范围内,以便用户无需移动头部即可进行互动。

推荐内容

  • 面板采用 32dp 圆角。您可以替换此默认值。

面板深度行为

  • 住宅空间:应用会在距离用户 1.75 米处启动,开发者无法替换此设置。
  • 全局:默认情况下,应用会在 Home 空间中的位置启动。您可以使用空间逻辑根据用户的位置放置面板,但我们建议启动距离为 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 量身定制的沉浸式视觉风格,请确保设计具有足够的对比度,选择平衡的调色板,使用色盲人士也能看清的颜色,并避免可能导致眼睛疲劳或迷失方向的刺眼组合。

Material Design 系统使用一种名为 HCT 的颜色空间,该颜色空间使用三个维度(色相、色度和色调)来定义所有颜色。

XR 中的深色和浅色主题

使用深色主题和浅色主题,就像在 Android 移动应用中一样。用户可以在 Android XR 中切换深色主题和浅色主题,选择最符合其个人偏好的视觉样式。

详细了解 Material Design 配色方案

XR 排版

在 XR 中,易辨识的字体对于舒适的用户体验至关重要。我们建议使用字号为 14dp 或更大、字体粗细为正常或更高的类型比例选项,以提高易读性。

如需打造简单易用的应用,不妨考虑遵循 Material Design 的排版指南

大写字母 R 和 o 的近距离照片,底部是排版数字。深紫色字母与浅紫色背景形成鲜明对比。

XR 中的排版最佳实践

  • 适应不同距离的大小:请注意,用户会移动并从不同位置查看文字。确保字体大小足够大,可以在一定距离外读清。
  • 将文本放置在用户自然视野范围内:这样可以避免过度移动头部和颈部劳损。
  • 考虑深度和比例:使用深度提示和比例在 3D 空间中创建层次结构。
  • 确保文本在用户的背景下清晰可辨:粗体字会提供更高的对比度。根据环境的颜色、光线和复杂性进行调整。
  • 使用自适应排版:面板可能离用户太近或太远,并且视角不适合用户。
  • 限制附加到移动物体上的文本:这可能会导致晕动。

XR 中的无障碍排版

  • 选择清晰易辨的字体:优先选择在小号和远距离下字形清晰的字体。
  • 使用句首字母大写形式的文字:与全大写文字相比,句首字母大写形式的文字更易于阅读。
  • 限制代码行长度:尽量缩短代码行长度,以提高可读性。
  • 选择无障碍颜色:使用色觉有差异的用户也能看清的颜色组合。
  • 避免过度拥挤:为文字留出充足的空间。
  • 允许缩放文本:让用户调整文本大小,以满足个人需求。