5.4 沉浸式 UI 与防眩晕

5.4 沉浸式 UI 与防眩晕

本节摘要：XR 的 UI 不能"贴脸"——最佳距离 1-3m。本节讲清沉浸式 UI 的 4 条规则（距离、角度、缩放、聚焦）和 4 种常见眩晕成因（运动眩晕、辐辏调节冲突、深度错位、视野过载）的缓解方法。最后给一份"XR UI 设计检查清单"。

读完你能掌握

阅读完本节，你应当能够：

1. 说出沉浸式 UI 的 4 条规则（距离、角度、缩放、聚焦）。
2. 解释 4 种常见眩晕成因。
3. 在 Unity 里用 World Space Canvas 配一套合规的 XR UI。
4. 列出至少 5 个"防眩晕"的设计选择。

一、问题与直觉

XR UI 设计的核心矛盾是"屏幕没有边"——传统 UI 在 1920×1080 矩形里画，XR UI 是在用户 360° 视野里画。这个变化让 4 件事完全变了：

• 距离：UI 不能"贴脸"，要在 1-3m。
• 角度：UI 不能"挡住视线"，要在视野周边 30° 内。
• 缩放：UI 缩放要考虑"用户动"——距离远时放大，距离近时缩小。
• 聚焦：UI 不能"抢戏"——背景虚化、文本高对比。

眩晕的核心矛盾是"前庭觉 vs 视觉"——耳朵和眼睛告诉大脑"我在动"和"我没动"时，大脑就晕。

二、沉浸式 UI 的 4 条规则

规则 1：距离 1-3m

UI 与用户的最佳距离是 1-3m。小于 1m：眼睛需要持续聚焦，容易疲劳。大于 3m：眼睛需要重新聚焦到远点，浪费时间。

// Unity World Space Canvas 配置
public class XRUISetup : MonoBehaviour
{
    [SerializeField] private Canvas worldSpaceCanvas;

    void Start()
    {
        // 距离用户 1.5m
        worldSpaceCanvas.transform.position = new Vector3(0, 1.6f, 1.5f);
        // 文本大小：每度视野 0.5 字符
        worldSpaceCanvas.transform.localScale = new Vector3(0.005f, 0.005f, 0.005f);
    }
}
​

规则 2：角度 30° 以内

UI 应在用户"自然视野"——水平 30°、垂直 20°。超过这个角度，用户需要转头去看，会增加疲劳。

规则 3：缩放自适应

UI 应根据用户与它的距离动态缩放。距离 2m 的 UI 看起来"对"，距离 4m 时应放大 2 倍。

规则 4：聚焦层次

UI 元素应有"层次"——主操作按钮最亮，次要信息次亮，背景虚化。Vision Pro 的"玻璃材质"就是这个设计。

三、4 种常见眩晕成因

成因 1：运动眩晕（Motion Sickness）

症状：用户感觉自己"在动"，但实际身体没动——典型场景是用摇杆飞行、用瞬移以外的移动方式。

原理：前庭觉（耳朵）告诉大脑"我没动"，但视觉（眼睛）告诉大脑"我在动"。两个信号冲突，大脑"晕"。

缓解：

• 用"瞬移"代替"平滑移动"。
• 减少视野边缘的运动——用户在视野中心 30° 内最不容易晕。
• 加"虚拟鼻子"——视野下方一个固定物体能减少 30% 晕动症。

成因 2：辐辏调节冲突（Vergence-Accommodation Conflict）

症状：用户看 VR 里"近物"时，眼睛要同时"对眼"（辐辏）和"对焦"（调节），但 VR 屏幕的物理距离是固定的——大脑被骗。

缓解：

• 把 VR 物体放在 1-3m 距离（眼睛对焦距离与辐辏距离差异最小）。
• 避免让用户频繁切换近/远对焦。
• Vision Pro 用眼动追踪+动态变焦缓解——但还没彻底解决。

成因 3：深度错位

症状：用户戴头显 10 分钟后，伸手去拿"桌上的虚拟物体"，手伸过头/伸不到位。

原理：用户对"空间尺度"还没校准——眼睛和手的运动学不一致。

缓解：

• 让用户先在真实空间里做 30 秒"摸东西"动作（校准）。
• 把虚拟物体放在已知距离上（"距离 1m 的桌上"），不要放在模糊位置。
• 训练用户"用头/眼去找，而不是用手去摸"。

成因 4：视野过载

症状：用户戴头显 30 分钟后开始"视线模糊"或"眼部发胀"。

原理：XR 里用户的"聚焦点"不断切换（远近、左右、上下），眼部肌肉持续紧张。

缓解：

• 减少 UI 元素数量——一页不超过 5 个。
• 提供"休息区"——每 20 分钟强制提示"抬头看 20 英尺远 20 秒"。
• 避免高对比度色块闪烁。

四、XR UI 设计检查清单

把上面规则凝练成一份可勾选的检查清单：

• UI 距离 1-3m
• UI 在视野 30° 内
• 缩放随距离自适应
• 层次清晰（主/次/背景）
• 文本大小可读（每度视野 0.5 字符）
• 颜色对比度 > 4.5:1
• 提供"虚拟鼻子"
• 移动方式用瞬移
• 减少视野边缘运动
• 20 分钟提示休息
• 避免高对比闪烁
• 提供"重置"按钮（重置 SLAM 和 UI 位置）

五、动手演示：用 World Space Canvas 配一套合规 XR UI

// 1. 创建 World Space Canvas
// 2. 添加 TextMeshPro
// 3. 配置距离/缩放
// 4. 启用"虚拟鼻子"

public class XRUIChecklist : MonoBehaviour
{
    [SerializeField] private Canvas uiCanvas;
    [SerializeField] private Camera xrCamera;

    void Start()
    {
        // 距离 1.5m、高度 1.6m（人眼高度）
        uiCanvas.transform.position = xrCamera.transform.position +
            xrCamera.transform.forward * 1.5f + Vector3.up * 0f;

        // 缩放
        uiCanvas.transform.localScale = Vector3.one * 0.005f;

        // 朝向用户
        uiCanvas.transform.LookAt(xrCamera.transform);
        uiCanvas.transform.Rotate(0, 180f, 0);
    }
}
​

跑起来后：UI 始终在用户正前方 1.5m。用户转头时，UI 朝向自动跟随——这是合规的 XR UI 范式。

本节要点回顾

• 沉浸式 UI 4 条规则：距离 1-3m、角度 30° 内、缩放自适应、聚焦层次清晰。
• 4 种常见眩晕成因：运动眩晕、辐辏调节冲突、深度错位、视野过载。
• 每种眩晕都有可工程化的缓解方法——"虚拟鼻子"能减少 30% 晕动症。
• 12 条 XR UI 设计检查清单，可直接拿到项目里勾选。
• World Space Canvas + LookAt 是 Unity XR UI 的标准范式。

下一章我们走到阶梯顶端——商业化、隐私与未来三年的方向。