视觉和运动的设计考量

♪ 悦耳的器乐嘻哈 ♪ ♪ Manda Paul：嗨 我是 Manda Apple Vision Science 团队的 一名成员 Herman Damveld：我是 Herman Apple 的一名研究员 创造三维体验需要运用 独特的感知维度 如深度和全视场 我们将向你介绍 用户如何通过 3D 内容中的 视觉线索和运动信息 来获得这种全新的沉浸式体验 并介绍人类自身的局限性 如何影响用户在体验 App 时 获得的舒适感 Manda：我们的指南旨在帮助你创造 舒适愉悦的用户体验 我们将探讨视觉深度线索、 内容参数、 眼部耗力、 虚拟物体的运动、 头部锁定内容、 窗口中的运动 以及振动运动 首先 你开发的内容 必须为观看者提供 恰当的视觉深度线索 这一点至关重要 因为设计巧妙的 3D 内容 能让大脑感知到深度信息 让我先来介绍一点科学知识 我们拥有多重感官系统 凭借这些系统 我们能够体验真实世界 和虚拟世界 视觉系统处于非常高的层级 它负责 接收你开发的内容中散发出的光线 并将其转化为感知到的信息 换言之 你的设计决策 可以极大的影响 观看者的视觉舒适感 要想实现舒适的视觉体验 你的预期深度必须 与观看者感知的深度相匹配 随着图像在深度方向上移动 大脑会调动眼部肌肉使视线聚焦 并将视线固定在 该图像所处的深度上 这样就可以感知单个图像 为使视线正确聚焦 大脑需要恰当的视觉深度线索 如果这种线索缺失 自相矛盾或具有误导性 那么视觉舒适感就可能受到影响 观看者可能会经历 重影或眼部疲劳等不适感 让我们一起看看如何利用 图像线索保持视觉舒适感 在较为稀疏的场景中 许多可能传递深度信息的 视觉线索会缺失 正如这张柑橘类水果的图片 大脑可能无法判断出 视线所应聚焦的深度 从而引发不适感 看到柑橘的颜色 能提供熟悉的大小线索 如果该切片是绿色的 大脑就会运用先前获得的 关于青柠大小的知识 推断出切片可能所处的深度 并将视线聚焦在正确的深度位置上 对图像进行模糊处理 是传递深度信息的另一方式 相对大小也能 为稀疏图像添加深度线索 观看者可以更近地感知到 两片青柠中较大的一片 徐缓的运动也能为 视线所应聚焦的深度位置提供参考 我的同事 Herman 将详细介绍 在你开发的内容中 使用动作的细微差别 现在 我们只需要再添加 更多线索来引导视线 添加背景、光影、遮挡 和纹理密度也是 补充缺失的视觉深度线索的方式 矛盾线索也会引发问题 如前文所述 由于下方的水果切片看起来更大 所以它显得更近 我们认为它应该处于前方 能遮挡住那个看起来小一点的切片 然而 在这张图像中 相对大小线索与遮挡线索相互矛盾 向大脑传递了 与我们预期相反的信息 深度线索之间的矛盾 可能引起视觉上的不适 矛盾线索并非仅限于稀疏场景 线索之间的矛盾越多 就越难实现舒适的视觉体验 因此 你应该确保 开发内容中的所有深度线索 都能向大脑传递恰当的信息 从而让观看者的视线聚焦在 你预期的深度位置上 在深度方面 另一个要点是纠正 具有误导性的视觉线索 例如重复的图案 现在 两只眼睛都看向重复图案中的 同一对象 很好！ 然而在这种情况下 每只眼睛锁定在重复图案中的 不同对象上 当大脑试图将两只眼睛捕捉到的图像 结合在一起时 其感知深度则会 与该重复图案的预期深度不符 要想化解这种矛盾并避免重影 你可以使用图案中更小的部分 或使用别的设计 打破这种重复的模式 深度感知方面还有最后一个要点 3D 内容和视觉深度线索 将会适当地被自动渲染在 每只眼睛的显示屏上 从而让人们能够捕捉到 你预期的深度位置 例如 如果你选择为立体视频 手动渲染立体内容 那么你不仅要提供正确的深度线索 还要保证每只眼睛的合理视差 从而避免视觉线索之间 产生强烈的矛盾 因为这些矛盾可能会造成 严重的视觉不适 好啦！ 接下来 让我们继续聊聊内容参数 比如大小和对比度 能给人们带来视觉舒适感的内容 具备适合每种特定视觉体验的参数 你应该选择 能够降低视觉耗力的参数 下面列举了一些场景 对于阅读等 需要双目长时间注视的内容而言 如果将其放置在一臂距离以外 就能获得最舒适的视觉体验 此外 你还可以 让用户自主调节内容深度 这样 他们就能在体验过程中 选择自己认为 最舒适的深度位置 距离观看者最近的内容 可以应用到仅需短暂视觉耗力的体验 或涉及直接交互的体验当中 当用户的手与 3D 空间中的物品 进行实际交互时 第二种体验就会发生 另外 你可能会使用透明度 或模糊效果等视觉线索 以将视线重新引导到 更深度的位置上 从而提升视觉舒适感

与深度相似 内容大小和对比度 也应与你设计的 特定视觉体验相匹配 从而为用户带来舒适的视觉体验 例如 对于阅读文本 你可以使用较高的对比度 而当要将观看者的视觉注意力 重新引导至其他地方时 你需要使用较低的对比度、 透明度或模糊处理 进行长时间阅读时 你应选择合适的字体大小、 窗口大小和深度 这样既能让文本清晰易读 也能让眼睛舒适地浏览文本 而且用户还不需要旋转头部或身体 还有一个需要关注的参数 是内容亮度 如图所示 当视角中大部分区域较为昏暗时 则应缓慢过渡到明亮的场景 给眼睛充分的时间以适应亮度 确保视觉上的舒适感 最后还需要关注的一点是 眼部耗力 要想提供舒适的视觉体验 请尽量减少观看者的眼部耗力需求 以下是具体方法 在选择内容的位置时 请牢记最舒适的眼部动作是向下 或向左向右转动眼珠 所以 请尽量将你的内容 放在这些位置 眼球向上翻动和斜对角翻动 所需消耗的眼部肌肉力量最多 让眼睛注视这些方位 可能会造成视觉疲劳 需要长时间阅读 或长时间凝视某一目标时 应将该内容放在 比视线略低的中间位置 以提供舒适的视觉体验 如果你的体验需要 观看者的眼球进行大角度转动 请将这种体验设计为简短交互 或将内容移动到视角中心 从而减少眼球转动的耗力 还有一点非常重要 即你要考虑到用户或许希望 能在中途休息一下 放松自己的双眼 要实现这一点 你可以在体验中 设计一些自然的休息节点 让观看者的眼睛得以放松片刻 以上就是有关 视觉舒适感的全部内容！ 接下来 我的同事 Herman 将为你讲解 如何设计出能让用户体验到 运动舒适感的 App Herman：谢谢你 Manda！ 接下来 让我们来了解一下 沉浸式 App 内容中的运动信息 会如何影响用户的体验感 以及人体自身的局限性 会在哪些方面干扰体验的舒适性 首先 让我们深入了解 一些科学知识 我们人类可以运用多重感官系统 来体验真实世界和虚拟世界 我们已经知道视觉系统负责 接收光线 并解析我们感知到的事物 其中部分感知就是你自身的运动 而内耳中的前庭系统 也会测量你自身的运动 通常情况下 视觉运动信息 和你用前庭系统感知到的运动 总是一致的 然而 如果视觉运动信息缺失 或与前庭系统感知的信息有所冲突 就会导致头晕、反胃等 运动上的不适感 设计巧妙的内容能让大脑 感知到世界是静止的 这能提供一种稳定感 也是实现运动舒适感的必要前提 让我们看看 下面这些包含运动的场景 并学习如何保持运动舒适感 第一个场景涉及虚拟物体的运动 如果一个或多个 类似这种蓝色多面体的虚拟物体 占据了观看者的大部分视角 并同时移动 观看者的大脑可能会将 视觉上接收到的虚拟物体运动信息 解读为观看者自身的移动 这就会削弱观看者的稳定感 并且有可能造成运动上的不适感 作为设计者 你可以让这些物体 在运动时呈半透明状 以减少这些不利状况 这样 在物体运动时 观看者便能清楚地透视 它们背后的内容 你应该尽可能避免 使用头部锁定内容 这种内容锚定在用户的头部 头部锁定内容将永远处于 视角中的相同位置 如果必须使用头部锁定视图 你可以使用小一点的窗口 并将其放在距离观看者较远的 视线中心附近 尽可能使用世界锁定视图 以防止内容产生卡顿感 另一种方法是使用延迟跟随动画 这种技术会随着时间 将内容缓慢移动到目标位置 你还需关注将在虚拟窗口中 可见的内容运动 以这个虚拟景观为例 当窗口中的内容 移动时……

……观看者的大脑可能 会将看到的运动信息解读为 观看者自身的移动

要想提供最佳的运动舒适感 你需要关注摄像机运动 首先 将窗口内容的地平线 与现实世界中的地平线对齐 所有像素的来源点 称为延伸焦点 这是镜头前进的方向 用户会自然而然注视这个点 你也想以这种方式移动摄像机 即延伸焦点缓慢且可以预测地 进行运动 并且你还想要保证延伸焦点 一直处于观看者的视角中 这就意味着 你应当避免镜头快速转向 或纯旋转运动 因为在这两种情况下 延伸焦点会移出视角范围 在快速淡出中 你也可以使用瞬时方向变化 来代替镜头的快速旋转 为了提升运动舒适感 你还要避免 近距离拍摄大型物体 即屏幕右侧展示的情况 最好让物体小一点、远一点 就像屏幕左侧展示的一样 尽量选择亮度对比较低的 简单纹理 这样可以使运动更不易被眼睛察觉 你需要关注的最后一种运动场景类型 涉及物体和动画的 持续振动 要想保证舒适的用户体验 你应尽量避免使用任何形式的振动 尤其是频率 在 0.2 Hz 左右的振动 即每 5 秒振动一次 如果你必须展示振动运动 请尽量降低振幅 并将内容设置为半透明的状态 如屏幕左侧所示 这样会让人眼更不容易察觉到振动 还有一个好办法 就是通过 减弱动态效果 辅助功能设置 为用户提供不含振动的内容 总而言之 在设计能为用户 提供运动舒适感的体验时 你需要牢记以下几点： 尽量给予用户稳定感 避免使用头部锁定内容 保证运镜平缓 以及尽可能不使用振动 想要进一步了解空间设计的原则 并观看视觉和运动设计的 实际操作指南 我向你推荐下列讲座 Manda：本次讲座到此结束 我们等不及想要看看 你会创造出哪些惊艳的体验！ Herman：感谢你的观看！ ♪