问题
在进行VR界面设计的时候，我们可能会遇到以下问题：
问题一：界面无边界，缺失参考系。
体验过VR的朋友都知道，在VR里面是没有边界的。APP界面的边界是手机屏幕，Web的边界是电脑屏幕，但是在VR中，这块屏幕就突然消失了，这一约束的消失，使得界面设计有更多的可能性，同时也给设计师提出了新的挑战。界面的布局因约束的消失而失去了参考系，其形状、位置（X,Y,Z轴）、大小等等都需要设计者自己定义。假如一开始定义得不好，整个设计很可能要重头开始。比如：设计好的菜单（在Unity中编辑），在场景中看不出它有什么问题，但切换为VR模式时，各种问题就出来了：不是太大就是太小看不清，要么就是需要头部转动来浏览，要么就是重点、层次不明显。总之，需要多次调试才达到预想的效果。
问题二：没有针对VR设计的工具，在平面上的设计稿与在VR中的最终效果出入很大。
无论是App还是Web，界面的设计稿跟产品开发出来后的样子基本是一样的。但在VR开发中，设计稿往往不能勾勒出产品最终的样子，只能提供一种大致的想象。就好比在工业设计中，手绘设计图和最终产品是千差万别的，然而在工业设计领域已经有很多三维设计软件，使得效果图已经可以非常清楚地勾勒出产品的模样。而目前还没存在一款针对VR设计的软件，在设计界面的时候，设计者只有两条路可以走：要么是先用平面设计的软件如PS，将界面以及界面与虚拟场景的关系设计出来，交给工程师将它开发出来；要么是在游戏开发引擎上直接开始设计。前者的问题是，设计稿是平面的，UI开发是三维立体的，这需要工程师和设计师不停地沟通和修改。后者的问题即是，需要耗费大量的时间和精力，好比直接使用HTML和CSS等编程语言将网页设计出来一样。
针对以上两个问题，笔者结合了自己的经验和所查阅的资料，制作出了一个VR界面布局的框架。通过此框架，设计者可以根据视觉重点合理布局界面，同时能够很好地与开发对接，迅速地将界面开发出来。下面将详细地介绍此框架的原理和使用案例。
相关概念解析
先介绍一些比较重要的概念。笔者认为，这些概念每个VR设计师或开发者都应该熟知。
FOV与PPD
FOV（Field of View），视场角。在VR中FOV就是代表了人眼所能看到的范围。如图1，角a是水平方向的视场角，角b为垂直方向的视场角。通常VR设备中，视场角都是指水平方向的视场角。人眼水平方向的视场角大概为120°，而市场上的VR设备视场角都在90°~110°左右。这也是我们在使用VR设备，感受到眼睛两边有黑影的原因。
PPD（Pixel per Degree），像素每度，是指每度所包含的像素。当PPD>=60时，我们看屏幕才不会感到有颗粒感。而目前市面上的VR设备的PPD都不超过13，这也是我们觉得VR设备的显示是“渣像素”的原因。
知道这两个概念，对我们有什么帮助呢？以Oculus DK2为例，其单眼分辨率为960px*1080px，FOV为100°，所以其PPD=960/100=9.6。反过来，我们可以通过PPD来计算垂直方向上人眼所看到的像素总数：9.6（PPD）*55°（人眼保持不动时垂直方向的视场角）=528px，远远小于屏幕的1080px。也就是说，屏幕上边缘和下边缘的区域基本是视觉盲区，如果不转动眼睛基本不会看见。假如我们设计的界面位于这种区域，基本就掉坑里了，到测试的时候才发现什么都看不到（图2）
界面的空间参考系
前文已经提及，VR界面失去了物理屏幕作为坐标参考系，在设计时需要新定义一个参考系。将界面放置在适当的参考系中对于可用性和舒适性非常重要。下面将更详细地讨论它们，如图3。
以头部作为参考系（Head Reference Frame）：即界面跟随用户的头部运动。
适合用于注视导向的选择
将现有的桌面HUD移植到VR需要非常小心谨慎，因为这样做通常是行不通的
以躯干作为参考系（Torso Reference Frame）：界面随着身体旋转和平移。
针对于与身体相关的工具很适合：用户可以利用身体感受感知它。
信息显示和工具像一个随身携带的功能腰带，只需要往下看就可以查看信息和抓取工具
信息显示通常更适合用于躯干参考系，而不是头部参考系
以虚拟世界作为参考系（Vritual World Reference Frame）
有利于玩家对地理位置和方向的思考、大范围导航和建立对虚拟世界的认知地图
人的视场角
前文已经提及，人眼水平方向的视场角大概为120°，但这仅仅是人眼和头静止不动的时候。正常情况下，我们会通过转动头部和眼睛来观察事物，因此我们的视野范围远不止120°。
下图4所描述的是当人头保持不动时的视野范围。在水平方向上，眼睛静止时视场角为约120°，转动时视场角为约200°，最佳视场角为60°；垂直方向上，眼睛静止的视场角为55°（往上25°、往下30°），转动时为120°（往上50°、往下70°）、最佳视场角为30°。
下图5所描述的是人头在舒适范围内的偏转角。水平方向上，人头最舒适的偏转角为一侧30°，当偏转角大于55°时就会造成不适。同样，垂直方向上最佳偏转角为32°（往上20°、往下12°），最大为100°（往上60°、往下40°）。
有了这些数据我们就可以算出人头转动时的视野范围：比如在水平方向上，转动头部时的最佳视场角=30°+30°+120°=180°，如此类推。
框架的推导
我们已经知道最佳视场角和最大视场角这些数据，但怎么将角度数据转化为平面数据，从而能在平面上进行设计呢？其实上文已经提及过，即：像素总数=FOV*PPD。如果设备的PPD为9.6，那么60°的最佳视场角就对应着576px宽的画布（60*9.6=576）。详情参见下表：a、b分别是水平方向和垂直方向的视场角，W、H分别是所对应的画布的宽度和高度。
一、当人头保持不动时，只转动眼睛观察时，有以下数据。以Oculus DK2为例：
得出以下画布（图6）：
此画板就是界面布局的框架，其针对的是以头部为参考系的界面。
黑线框表示的是设备屏幕的大小（单眼）。
红色虚线框是人眼所能看见的区域。
灰色区域是理论上人眼所能够看到的区域，但实际上人眼只看到红框区域内的，红框外所看到的都是漆黑一片。注视这区域可能会造成眼部不适，而且不适合阅读，所以高频且重要的界面元素不建议放在这。
浅蓝区域是人眼在舒适转动范围内所看到的区域，或者是在眼睛不动的情况下所看到的区域。这部分区域适合放置界面元素，既不会造成眼部不适，也不会遮挡到场景，干扰用户执行主任务。
深蓝区域是人眼最舒适状态下所看到的区域。当用户的主任务是界面操作时，可以将重要的界面或者高频操作的界面元素放置着区域。但如果用户的主任务不是界面操作时，界面元素就应该斟酌地放在此区域，因为有可能会造成对主任务的干扰。
二、当人的眼睛保持不动，转动头部进行观察时：
得出以下画布（图7）：
深蓝色为头部静止时的可视区域；浅蓝色为头部在最舒适转动范围内的可视区域；灰色为头部最大转动时的可视区域。然而，人观察事物的时候往往是头部和眼睛同时转动的，所以转动头部时的视野范围应该将前两者叠加起来，得出下图8：
黑色线框是指第一屏的显示区域。
红色虚线框是指第一屏的可视区域。
灰度越深的区域越靠近视觉中心，越容易被用户发现，舒适度也越高。
红框意外的区域都属于探索区域，需要用户转动头部才能发现。灰度越低探索的成本就越高，舒适度也越低。
而此框架对应在三维环境中是长这样子的，图9。
此框架适合于以虚拟世界作为参考系的界面，通过此框架设计者就可以有依据地布局界面的结构、顺序和轻重，事半功倍。
框架的使用
说了半天，终于把框架介绍完了。那么这一框架如何使用呢？它又怎么能与三维UI开发连接起来呢？笔者将结合自身经验，将使用框架前和使用框架后的流程对比来说明：
值得一提的是，人站立时的自然视线是往下约10°，坐着时的自然视线为往下15°~50°。如果有必要，可以斟酌地将使用这一修正量。
最后，感谢能阅读到最后朋友，希望以上内容对你有帮助。
