如果您有 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 x 56dp 或更大
- 视觉提示:48dp x 48dp 或更大
- 目标和视觉提示之间的偏移:4dp
- 为了实现准确的互动,不同界面元素的指针目标不应重叠
请务必添加悬停状态
为提高无障碍功能,请为交互式组件添加基本交互状态之外的悬停和聚焦状态。悬停状态对所有用户都很有帮助,对于依赖指针输入来选择界面元素的用户来说,更是至关重要。
悬停状态在实现系统中的眼动跟踪功能方面发挥着重要作用。不过,启用眼动追踪后,应用将无法访问悬停状态,以保护用户隐私并防止数据共享。系统会绘制仅向用户显示的突出显示状态,以传达哪些界面组件可供互动。
目标之间的距离
Material Design 建议目标(包括按钮)之间至少留出 8dp 的空间。这种间距可确保用户能够轻松区分交互元素,并避免意外选择。
按钮之间的具体距离可能会因其上下文和大小而异。需要考虑的一些因素:
- 按钮大小:较大的按钮可能需要在按钮之间留出更多空间,以保持视觉清晰度。
- 按钮分组:功能密切相关的按钮可以分组在一起,而不相关的按钮应分开。
- 布局:屏幕的整体布局可能会影响按钮之间的间距。例如,工具栏中的按钮之间的间距可能比对话框中的按钮之间的间距更小。
面板尺寸和缩放
Android XR 旨在让您的应用舒适、清晰且易于大众使用。为了获得最佳体验,Android XR 使用 0.868 dp 到 dmm 的比例。
如果您使用的是平板显示屏,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 量身定制的沉浸式视觉风格,请确保设计具有足够的对比度,选择平衡的调色板,使用色盲人士也能看清的颜色,并避免可能导致眼睛疲劳或迷失方向的刺眼组合。
XR 中的深色和浅色主题
使用深色主题和浅色主题,就像在 Android 移动应用中一样。用户可以在 Android XR 中切换深色主题和浅色主题,选择最符合其个人偏好的视觉样式。
XR 排版
在 XR 中,易辨识的字体对于舒适的用户体验至关重要。我们建议使用字号为 14dp 或更大、字体粗细为正常或更高的类型比例选项,以提高易读性。
如需打造简单易用的应用,不妨考虑遵循 Material Design 的排版指南。
XR 中的排版最佳实践
- 适应不同距离的大小:请注意,用户会移动并从不同位置查看文字。确保字体大小足够大,可以在一定距离外读清。
- 将文本放置在用户自然视野范围内:这样可以避免过度移动头部和颈部劳损。
- 考虑深度和比例:使用深度提示和比例在 3D 空间中创建层次结构。
- 确保文本在用户的背景下清晰可辨:粗体字会提供更高的对比度。根据环境的颜色、光线和复杂性进行调整。
- 使用自适应排版:面板可能离用户太近或太远,并且视角不适合用户。
- 限制附加到移动物体上的文本:这可能会导致晕动。
XR 中的无障碍排版
- 选择清晰易辨的字体:优先选择在小号和远距离下字形清晰的字体。
- 使用句首字母大写形式的文字:与全大写文字相比,句首字母大写形式的文字更易于阅读。
- 限制代码行长度:尽量缩短代码行长度,以提高可读性。
- 选择无障碍颜色:使用色觉有差异的用户也能看清的颜色组合。
- 避免过度拥挤:为文字留出充足的空间。
- 允许缩放文本:让用户调整文本大小,以满足个人需求。