系列文章旨在由浅深、由理论到践系统地介绍团在近几年的设计工中的一经验总结和重点思考。系列面向大设计师，不论你目前在做什么领域/哪个端的设计，以到 VR 端和其他端的异同。希望给正在看文章的你带来收获。
团队介绍：爱奇艺 XRD——爱奇艺 VR/AR/XR 设计团，目前主要负责爱奇艺 VR app 的设计工（包括各个 VR 设备端和手机端）。
1. VR与其他端的区别
传统的数字终端（手机、电脑、pad 等），户界面存在于二维的物屏幕里，就是在一个平面里。而屏幕和界面通都是长方形的。
在 VR 中，有空间感的仅仅是虚拟场景，户界面是布局在三维空间的。「屏幕边界」的概念被破了，计的画板不再是各类机不同尺寸的屏幕，而是一个「无限的」空间。界面本身也可以是三维的、破传统的，不再必须是一个个的长方形。
真正的 z 轴
这不同于 2D 屏幕终端，元素只拥（x、y）坐标点的属性，并一 z 轴的概念。Z 轴，也就深度概念，通过设师利用阴影、动效视觉效果，「模拟」出的后关系。
在 VR 中的内容物（包括 UI 界面、场景、模型、视频资源）真实概念的后关系，每件摆一具体的（x、y、z）坐标点。件拥绝对置，件件之间相对置，件 camera（指用户观测点）之间一具体的距离。
角度曲面
除 z 轴坐标，因为 VR 界面存在在空间里，所以还拥有一个属就是角度，包含在（x、y、z）三个轴上旋转的角度。每一个物件也以不是一个平面，而是曲面的、三的。
角度和位置共同决定，当用户看向某个物件时，个物件的样子。
「有大？」
一个物件在 VR 中「有大」很难简单描述清楚。在传统端只需标注某个 UI 元素的「大小」「间距」，描述单位是像素。而在设计 VR 时。需要从个度定义一个元素：「大小」「（x、y、z）位置」「（x、y、z）角度」。同时，「有大」还跟用户观测点的位置息息相关。
2. VR基本术语认知
在介绍下文理论之前，让我们先认识两个常见的 VR 术语：
FOV：Field of View，视场角
视场大小决定了学仪视野范围。在 VR ，视场是 VR 硬件设备个属性，设备 FOV 是个固定值。
在我们团常工用语中，通常也用来指代用户的视角范围、界面元素的角度范围（，「某面板水平 FOV 是 60°」）
DOF：Degree of Freedom，自由度
物体在空内具有 6 个自由度，即沿 x、y、z 三个坐标轴移动自由度和绕这三个坐标轴转动自由度 。
- 3DOF 的手柄/头显：只有绕 x、y、z 轴的 3 个转自由，没有移自由，共 3 个自由。通俗地说，3DOF 手柄可检测到手柄在手中转，但检测到手柄拿在右手还是左手。
- 6DOF 手柄/头显：时有绕 x、y、z 轴 3 个转动自由度，和三个轴 3 个移动自由度，共 6 个自由度。俗说，是完全模拟真实物理世界，可以看手柄实位和转动。
虽然说 VR 是一个 360° 全景三维空间，但对于目前大多数 VR 的使用景来说，可供计创作的域其实已被大大缩了。
目前国面见的可移的 VR 设备（非机类），如小米 VR 一体机、Pico 小怪兽系列、奇遇 VR、上的华为 VR Glass，标配均为 VR 头显配合3DOF手柄的硬件模式。对应此类 VR 硬件模式，见的户使场景为：「坐在椅子上+偶头转+身体」，好「坐在发上看电视」。即使户使一个 6DOF 的 VR 硬件，支持空间定位可在房间里走，但对于爱奇艺 VR 这类观影类 app 来说，「坐在发上看电视」仍是要的使场景。
此， 主要操作界是需要放在「头部固定情况下可见范围内 」。这样用户需费劲转头，可以看到主要内容、操作主要界。
么，什么是「头部固定情况下的见范围 」呢？我们需要先学习一人机工程学，来一人眼 在不同情况下的视范围。
1. 水平视野（x轴）
（此图心 为用户观测。）可以看出，
头部固定的情况下，双眼能看到的最大范围约为 124°。但还要考虑到一个，目前 VR 硬件设备的 FOV 并未达到个值，通常在 90°~100°。而其中，能看清晰的范围只有眼前中心处的 60°。相差的范围以理为「余光」，在人眼中成像是不清晰的，但仍在视野范围里。——个范围极大程度上决定每一个 UI 面板（包括其中的图、文字等）适合占据的空间，也决定 VR 中视频播放窗的最小和最大值。
头部转动但身不动的情况下，脖子舒适转动能看到的范围约有 154°，脖子转动到最大程度能看到的范围约有 204°。一次要内容以放在个区域，用户需要转动头部才能看到，但也不用太费力。
偏后方的区域范围，必须移动身体能看到，因此只能一些「看见也关系」的内。比如环境、彩蛋。
2. 垂直视野（y轴）
在放松状态下，头部与眼睛的夹角约为 105°。也就是说，当头部竖直向前时，眼睛自看向水平下 15° 的位置。头部固定仅眼球转动时的最佳视野是（上）25° 和（下）30°。应将操界面和主要观看内容放在此范围内。
垂直方向最大视野范围是（上）50° 和（下）70°。个范围也是超 VR 硬件设备的 FOV。
另外，点比抬舒。实世界中，我们通常都低状态比抬多，比如玩手机、看书或看笔记本电脑时。所以 VR 中，比起偏方区域，应考虑多利用起偏下方的区域。
3. 深度感知（z轴）
（见本章图1）
0.5m 之内的物件，双眼难对焦，因此不要出现任何物体。（这个值对于全景 3D 视频的拍摄 义较大，应该尽量规避离镜头过近的物体出现）
有立体感的范围在 0.5m~10m，这里应该放置要容，尤是可操作的容。
10m~20m ，眼仍能感觉出立体感，有限。此范围仍适合放可以体现沉浸感 3D 场景/模型。
超 20m 的距离，人眼很难看出立感，物和物的前关系不明显。因此适合放置「仅仅为背」存在的内容，也就是境。（值得注意的是，因为反正也感不出立感，所以此范围的境以处理为球（即一个球面），来代替 3D 模型，大大降低功效。）
4. 视角和视距
在现实世界，个信息媒介都有个预设好观测距离。例如，握在手手，距眼大约 20cm。放在桌上电脑主显示屏，距眼大约60cm。客墙上电视，距眼大约 5m。在路另头广告，距眼可几十米。
内容在预设的观测距离上，对应预设的大小。例，手机上的正文文字只有几毫米大，而告牌上的文字需要几米大。
我们（观测者）看，这些文字都阅读舒。甚至其实看起「一样」的。
这因它们拥同样的视角——被视对象两端点到眼球中的两条视线间的夹角。具体举例， 1m 处看一 10cm 的体， 2m 处看一20cm 的体， 3m 处看一 30cm 的体，这 3 体「看起一样的」，他们具相同的视角。但我们仍然清楚知晓谁近谁远，因眼睛对焦不同的距离，也就视距不一样。
VR 中，不能再移动端那样用「素」度一件的小，通过「视角」。视角由件的「小」、「置」、「旋转角度」共同决的。「用户观测点不动」的使用场景下，「置」实际就与观测点的「视距」。
界面的「旋转角度」应遵守一个则——一个便于观和操作的界面，应该尽量垂直于视线、面向用户观测点。也就是说，当你确定好一个界面的「位置」后，就然会有一个对其来说的「最佳旋转角度」。
在 VR 中，一个物件的视角由「大小」和「视距」两个变量影响。当确定了「最佳视角」、「最小可阅读视角」时，这就决定了「需要在同距离上放置的信息容，各自应该放多大」。
有了论基础后，接来就是断实践。
首先需要读者了解是，我们团队设计象是爱奇艺 VR app——是在 VR 设备上爱奇艺，是爱奇艺第四个端。不仅含爱奇艺全网 2D 内容，拥有海量 VR 全景视频、3D 大片。选片和观影相关功能齐全。在体验上主要打造有沉浸感 VR 影院观影，并突出 VR 特色内容。
本文章针于 VR 体内爱奇艺 VR app 设计展开讨论，我们时也支持手端 app，若感兴趣可以在各大应用商店搜索下载。
我们学习的大量二手资料，给开展际工创造基础。而最终设计效果其是在反复验证、试错决定的。
当根据理论资料始实践，却发实际效果差强人意时，我们的建议——注重实践。原因之一，目 VR 界从技到产品设计仍旧处在验阶段，远未达到移动端设计规范的成熟，国内外的相关理论经验总结，还没有绝对定论的程度。Oculus 的设计指中，是建议「验，验，验」。之二是，能搜集到的二手资料，不完是建立在「人带着 VR 设备手握手柄」种使用场上，所以导致际结果「不是么回」。
1. 模块化界面布局
基「坐着不动+头部转动」的使用场，和「自视角偏下」、「低头比抬头舒适」的理论。
我们采取「从视角出发，向左、右、下延伸」的布局思。视角置当界面的核内，左右两侧置辅信息内；必时，可加入下部模块。此类模块化布局用于所界面，只具体的面板尺寸、旋转角度可以所不同。根据每界面需承载的内，因制宜合理规划。
图我们使用的几种常见 UI 布局。
2. 界面的FOV
基于人眼水平垂直方向的视野范围的理论，同时参考主配的硬件设备属性（目 VR 设备的 FOV 都小于人眼的视野范围），即：
- 小米 VR 一机：FOV≈90°（际）
- Pico 小怪兽 2：FOV=101°（官方数据）
- 为 VR Glass：FOV=90°（官方数据）
——我们决了奇 VR 中主界面的 FOV。
选片主界面 FOV （左-中-右 布局）
△ 「际截图」爱奇艺 VR 选主界面
平上：
- 中部面板：边边界在「头部固定清晰 FOV」内。
- 两侧面：中心的边界均现在「头固定时可见 FOV」，即在默认可见的视角范围。两边边界在「头轻微转时清晰 FOV」，即户只需轻微左右转头可查看全容。
垂直方向上：
- 面在「头固定时清晰 FOV」。户无需上转头。
- 该页可左右滑动，用户可以关注部板。
厅播控页面 FOV（左-下-右布局）
在爱奇艺 VR 中，观非全景的 2D/3D 视频，用户会置身于一个厅景中。视频画面会出现在厅屏幕上。
影厅播控页面（操控台页） 指播放视频时（包括影厅场景影片和全景影片）的操作界面。
△ 「实际截图」爱奇艺 VR 影厅播控页面
影厅播控页面采「左--右」布。包括 3 个功区：相推荐（左）、操控台播控（）、详情 & 集（右）。该页面在视频屏幕（或全景视频）的前方，靠单击触摸来呼和闭。
这 3 个板边界均在正视「头部固定时可见 FOV」内，也是保证了，用户注视影片本身并呼出该板时，能看到所有板。而用户仅需轻微转动头部，可看到完板。
视频播放窗最大/最小值
视频播放窗 即「影屏幕」，被我们设定了屏幕大小可调功能，以此来适应不用户观影习惯。屏幕大小可在指定范围内平滑调。
屏幕最小值（50°）：完屏幕范围都在「头部固定情况下晰 FOV」。
屏幕最大值（76°）：屏幕范围在「头部固定情况下见 FOV」，即「充满视野」。此状态的观感类似 IMAX 影厅。
垂直方向上：距水平偏上而不是偏下。里其和理论值生冲突。理论资料中，人眼最舒适的对焦点在「水平向下 15°」。在老版中，我们曾经将主 UI 和视频屏幕按理论值摆在偏下方，但际效果并未令人感到舒适，反倒明显感到「内容偏下」。就是上文所说，「当理论导致践差强人意」时，我们选择不断验，以际效果为准。另外，场下方有影厅座椅等际模型，并且还有操控台播控的 UI。综上，影厅屏幕被放在水平偏上的位置。
3. 深度距离与层级（z轴）
根据前文理论提到的，z 轴距离的合适范围（0.5m~20m）比水平和垂直 FOV 来说，数值范围要大得，也就是说试验的范围很大。因此在界面距离一点上，我们进行大量反复的践——最终决定当前版中各级页面的深度级和具数值，下图：
跟随提示：
- 适于临性的提示内容，秒后动消失。如 toast。
- 与 camera（户观测点）锁定，跟随 camera 移。可交互。
- 保证户注意到，又至于遮挡视线。
阻断式提示：
- 适用于必须让用户看到用户必须其处理提示。如弹窗。
- 正视角区域固定显示，不跟随 camera 移动。有按钮以互。
- 需其它操作界面之。
辅助操作界：
- 适用于重操作的界面，而非重展示的界面。如播控按钮组、键盘，而非视频列表。
- 通在平视视线偏的位置。（模拟「在手边」的位置）
减少眼球调焦，缩小距离差
得注意的，我们的老版本中，不同层级的界面曾被摆的距离差距很。如，toast 1.75m，主 UI 3m，视频屏幕 12m。之所以改动至图数，主了达到「看向不同层级界面时，尽减少眼球调焦的程度」的目的。
眼球在向不同距离上的内容，需要对焦不同的面，距离差距越大，眼球需要调整得越大。如果频率高的话，容易导致（一部）人的眼球疲劳。
Z轴上的获焦效果
VR 独有的「z 轴」，不仅允许了界面可以被放在不同距离上，还支持了利用 z 轴上的位移和旋转 来表达获焦效果。控件被获焦，只需要在 z 轴上轻的位移或轻的角度旋转，便可体现出众不同的有趣效果。
浙公网安备33011002017549号