UI设计师结合自身实践 分享VR界面设计思路

　　我们在进行 PC 端的 UI 设计时，不难把控设计内容的宽度、文字大小、排版布局等页面元素，而当我们去做移动端的设计时，就很容易出现文字太小看不清，点击区域太小不易操作等排版布局的问题。为什么呢?因为设备的分辨率，屏幕尺寸等硬件参数发生了变化，VR 设计同样也会遇到这个问题。在 VR 世界中，显示媒介不再是平面化的了，显示范围也似乎变得不受局限。这时的界面设计自由度变高了，但这种变化也给设计师带来了前所未有的挑战。应该如何去设计 VR 界面呢?今天我们来探讨下这个问题。

　　VR 的界面设计不同于电脑端和移动端的设计，后两者大都以平面设计软件和像素单位为基础，但当我们在设计 VR 界面时，你可能会遇到如下的一些问题：

　　• VR 是 360 度的，那我在 PS 或 Sketch 中画布应该设置多大才合适?

　　• 文字字号多大才能保证在 VR 眼镜中的可读性?

　　• 满足用户舒适的点击区域需要多大?

　　• 如何拿捏物件远近的 Z 轴信息?

　　• 在 2D 设计软件里是以像素为单位，在 3D 设计软件里以米为单位，他们之间如何换算?

　　• 如何与开发工程师沟通还原设计稿?

　　• 。。。

　　如何解决问题

　　怎么很好的解决这些问题?Daydream 团队给出了答案，下面结合他们的方法以及我们自己的研究给大家一起分享下。

　　我们知道，在现实生活中，由于近大远小的关系，相同画面，不同尺寸的面板，调整他们的远近距离，在某个位置时，它们看起来会变得大小相同。这其实是因为它们有相同的角度尺寸。换言之，角度尺寸相同，它们看起来尺寸大小也相同，不管它们的距离如何。这样我们用平面软件做设计时，就完全不需要考虑物件距离这个变量因素了。

　　然而，角度尺寸这个单位与二维、三维软件单位并不通用，而且也不方便记忆，我们需要将它转换成通用的长度尺寸。那如何转换呢?这里引入一个全新的概念单位，dmm(distance-independent millimeter，也叫距离无关毫米)。我们把在 1m 远距离下，观看 1mm 长度的物体，定义为 1dmm。因此，目距 2m 远的 2mm 长度，也为 1dmm，3m 远的 3mm 长度，也为 1dmm。

　　举个例子，一个宽 50dmm, 高 100dmm 的物体，就表示在目距 1m 远，它的宽是 50mm，高是 100mm。当把它移动到目距 2m 的位置，为了大小看起来一样，它的宽则需要变成 100mm，高变成 200mm。同理，在 3m 远时，宽高分别得变成 150mm 和 300mm。这样，当我们设计了一个UI 元素，即使在 VR 中需要调整它的距离，也能快速知道如何缩放这个 UI 元素。dmm 解决了 2D，3D 空间组件尺寸的换算问题。因此，设计的操作步骤就变成了如下 3 步：

　　1. 根据实际屏幕参数和人机工程学方法测量确定各组件的最小与舒适尺寸，制定设计规范;

　　2. 在二维设计软件里进行 UI 界面设计，规定 1px=1dmm，按 dmm 单位输出设计文档;

　　3. 根据 UI 设计稿 dmm 尺寸与距离倍率在 Unity 3D 中还原设计。

　　如何制定规范

　　那设计画布应该设置多大， UI 界面应该放在什么区域呢?在此之前，我们需要知道人体工程学方面的一些结论：在不转动脖子的情况，大约 60 度视野范围是人眼舒适观看的区域。若转动脖子，那这个范围大致在水平 120 度内。这就是说，需要用户频繁观看操作、重要的界面元素需要放置在如下图的圆形区域内，次要些的信息元素可在 120 度区域以内，用户轻微转动头部便可获取。另外，正常人眼的视觉焦点不是在水平线上，而是在水平线往下 6 度到 15 度之间。

　　那文字和各组件应该设计多大呢?

　　这里需要介绍一个 PPI 与 PPD 的概念。对于电脑显示器、平板和手机屏幕，我们习惯用 PPI，(Pixel Per Inch，每英寸像素)来表达屏幕分辨率，PPI 越高，屏幕像素颗粒感越小。当显示屏的分辨率足够高时，人眼视网膜便无法分辨其上的像素颗粒，这种屏幕我们称之为视网膜屏。

　　在 VR 中，画面是 360 度呈现的，这时用 PPD 来衡量画面的细腻程度，则会更方便。 PPD，指每一度所包含的像素，Pixel Per Degree(像素每度)，在透镜观察系下 PPD= px / fov。其中，fov 是指视场角，PPD 大于 60 度的显示屏，才能称之为视网膜屏(可根据视网膜 PPI 换算得出)。 也就是说，在视场角中的 1 度需要看到 60 个像素，才能分辨不出像素感，60 度才能达到“视网膜”级别的体验。

　　遗憾的是，目前市场上的 VR 设备 PPD 只有 10 多。比如，HTC Vive 和 Oculus Rift 的屏幕分辨率都是双眼 2160×1200 ，单眼有效分辨率为 1080 x 1200，FOV 都是 110 度。由此得出它们的 PPD 为 9.8。目前移动端表现最好的三星 S7 在 Gear4 下的 PPD 也才12.6，所以要达到“视网膜”级别体验还有很长路要走。

　　Daydream 团队给出了当前屏幕分辨率下，字体的可读性与 PPD 关系如下：

　　若按三星 S7 在 Gear 4 下的 PPD 为 12.6 来计算，那么舒适文字的高度是 12.6*1.6= 20.16px，最小文字高度是 12.6*1.15=14.49px

　　假定在目距为 1m 的情况下，根据 h= 2*d*tan(px/2*PPD) 得出，最小文字高度为 20.07mm。结合我们前文讲的 dmm 的概念，可以得出最小文字约等于 20 dmm，在二维设计软件里，最小需要 20 号字。

　　以下是 Daydream 设计团队推荐的文字和点击尺寸，可供参考。

　　如何实际操作

　　说了这么多概念和理论，下面来看看如何实际操作

　　首先，在 Sketch 中，设计基础界面，让重要的 UI 元素在 60 度眼球舒适区内，假设我们设计了如下的界面布局，除了左右两边浅红色的次要面板外，其余重要元素均在舒适区内。 (Sketch 文件放在文末附件里)

　　然后，输出切图以及尺寸标注。再将切图导到 Unity 中，在 Unity 中，我们需要建立三个层级关系：

　　1. 最外 Base 层，用于调整所有 UI 元素的视距，以及整体的缩放关系。Transform 面板中的 Position.Z 轴即为视距，Scale 为缩放比例。根据前文讲的 dmm 概念，若要调整视距，这儿的缩放参数也做相应调整，则可让显示效果一致。

　　2. 中间 Canvas 层，用于让各单位统一。在 dmm 的概念中，物体的长度单位是 mm, 而 Unity 以 m 为单位的，所以在 Unity 中需要将其换算成 0.001m。

　　3. 内部 UI 各元素层，这一层的各物件的尺寸属性和二维软件中的一样。例如，你在 Sketch 里设计了一个 270x150 的矩形，那么到 Unity 里这一层的长宽尺寸也直接写 270x150，完全不用管距离、缩放、单位换算之类的问题了。因为上面两层已经把这些问题解决了。这样一来，工程师则可完全按原始设计标注尺寸来开发。文字字号也一样，设计稿里选的多大，在这里也设置成多大。是不是觉得 So easy。

　　有时，我们需要精确的将 UI 界面置于到场景的某个位置，通过这种方法，可以推算出场景的相应比例大小，就不用老是反复调整修改了。建立好这样的一种层级结构后，则可任性的做设计，和工程师也成好基友了。