Building a VR UI Design Guideline to Accelerate VR System Development. 构建 VR UI 设计指南以加速 VR 系统开发。

Problem

Solution

Process

👇 How I came up with the solution

RESEARCH #1

Summary and analysis of existing UI interface calculation methods

现存 UI 界面计算方法汇总及分析

During the research phase of a VR project, I extensively researched the best design practices of almost every VR competitor on the market and studied the interface calculation rules from VR UI research papers.

Instead of simply compiling information, I quickly analyzed and compared it with BLOO XR's product specifications and development processes. Ultimately, I customized the calculation method to meet their specific needs.

在研究阶段，我广泛地搜集了市场上几乎每个VR竞争对手的最佳设计实践，以及VR UI研究论文中的界面计算规则。

这不仅仅是收集和整理信息的问题，而是需要快速分析和比较这些信息，以符合BLOO XR的产品规格和开发流程，从而为其量身定制算法。

1. UI Proportion Calculation Method 界面比例计算法

This method is based on the UI interface proportion recommended in various online articles.

这种方式是基于各类网络文章中推荐的 UI 界面比例进行计算。

a. Sam Applebee and Alex Deruette [1] have proposed that the UI interface should occupy 1/9 of the entire field of view. 如 Sam Applebee 和 Alex Deruette [1] 有提出 UI 界面应占整个视野的1/9。

b. IBM's recommended UI scroll area [2] is no more than 2/3 of the total visible area. IBM 的推荐 UI 滚动区域[2] 不超过总可视区域的2/3。

The above calculation methods may have detailed derivation methods, but they are outdated and no longer suitable for current device standards. Or they may only provide reference data and the specific calculation methods cannot be verified.

Therefore, such methods will not be used for our calculations.

以上计算方式或有详尽的推导方式，但年代久远已不符合现有的设备水平。或只提供了参考数据，具体计算方法不可考证； 所以此类方案不作为我们的计算办法。

2. Physical Size Ratio Method 物理尺寸比例法

This method uses the fixed physical dimensions of the comfortable and visible area of human vision, which do not change with hardware upgrades. By converting them to pixel dimensions based on screen resolution, we can calculate the proportions of the UI.

这种方法利用了人眼视觉舒适和可视区域的固定物理尺寸关系，这些尺寸不会随着硬件升级而改变。通过将它们转换为以屏幕分辨率为基础的像素尺寸，我们可以计算UI的比例。

a. The method shown below involves collecting comfortable coordinate markers from 30 individuals to determine the proportional relationship between each area, and then calculating the UI canvas size based on these data.

a.下图中方法是统计30人的舒适坐标标记样本，得到一个各区域的比例关系，然后计算出 UI 画布尺寸。

The problem with this method is that the data sample is limited, so it cannot form a scientific basis for ergonomics. However, from practical experience, we learned that we can use software testing to validate the user experience of the design.

该方式的问题在于数据量有限，不能过形成较为科学的人体工程学依据。但是，从具体操作中我们学习到可以通过测试软件来对设计方案进行用户体验验证。

b. In the article "A Brief Discussion on VR-UI Design Standards, Providing Clear Guidelines for VR Interface Design"[3], the trigonometric method is used to calculate the proportional relationship between physical height and pixel size.

b. 如《浅谈VR-UI-设计规范，为VR界面设计给出明确指导建议 》[3]一文中，也用到了三角函数的方法等比例的推算物理高度与像素尺寸之间的关系。

The data provided by this method regarding the visual area of the human eye and head rotation is too simple and does not cover interfaces of different distances and sizes.

该方法提供的关于人眼视觉区域与头部转动的数据过于简单，没有覆盖到不同距离、尺寸的界面。

c. This method in "Designing for the Future: VR Design Guide" [4] uses human factors engineering to obtain the field of view and head rotation angle, and then calculates the proportions using trigonometric functions to determine the UI design size.

c. 再如 《设计未来：VR 虚拟现实设计指南》[4] 一书中通过人体工程学得到人眼视场角与头部转动角度，利用三角函数计算出比例，进而得到 UI 的设计尺寸。

This method is detailed and scientific, and can provide convincing calculations for the required size.

However, the conversion relationship between physical size and pixel size is too complex, and it only considers UI interfaces at a single distance. This may make it difficult to quickly locate icon and control positions at different distances during later stages of development and integration.

By referring to the calculation method of physical size mentioned earlier and conducting scientific research such as [5], [6], [7], [8], we can obtain reliable human factors engineering data, which will be presented in later chapters.

此计算方式是较为详尽科学的，能够通过有说服力的推导过程得到所需的尺寸。

但是物理尺寸与像素尺寸之间的换算关系过于复杂，且是在单一距离上的 UI 界面，考虑到后期与开发对接时，会出现无法快速锁定不同距离的图标控件位置的情况。

吸取了上文关于物理尺寸的计算方法，通过科学研究 [5]、[6]、[7]、[8]，我们已经能够得到较为可信的人体工程学数据，会在后续章节中展示。

3. Google Daydream Dmm Methods 谷歌 Daydream 距离无关毫米方法

Google Daydream [9] provides a method for calculating UI interfaces by using 1 pixel = 1 dmm = 1 mm at a distance of 1 meter.

谷歌 Daydream [9] 给出的1m 距离处 1px=1dmm=1mm 为我们提供计算 UI 界面的方法。

First, we designed a testing tool for the Oculus Quest 2, which measured the physical dimensions of various panels and converted them into pixel dimensions using Dmm. We then cross-validated the results using other brands of devices.

首先我们设计了一个 Oculus quest2 的测试工具，把测量得到的 Oculus quest2 各类面板的物理尺寸用 Dmm 换算成像素尺寸，利用其他品牌设备进行交叉验证。

Panel Level 1 Test Data Analysis

Pane Level 2 Test Data Analysis

Since the testers relied on visual estimation, the results were not consistent, and the data varied greatly, making it impossible to use as a valid basis for subsequent design.

由于测试者都是通过目测来进行衡量，导致结果无法统一，各类数据之间相差很大，无法作为后续设计的有效依据。

a.Various articles [10] [11] have mentioned the calculation methods for PPD and FOV, which calculate the appropriate UI pixel size based on the FOV of various human eyes and the PPD of the device, and then verify it in Oculus quest2 by converting it to physical size using 1px = 1dmm.

a.PPD 与 FOV 计算方法在多个文章[10] [11] 中都有提到，通过各类人眼的 FOV 、设备的PPD计算出适合的 UI 界面像素尺寸，然后通过1px = 1dmm 换算出物理尺寸，在Oculus quest2 中验证。

This approach can only provide an estimate of the field of view and has a significant discrepancy with the size of the Oculus Quest 2 system interface, making it challenging to obtain practical and specific values.

这种方法只能得到视野范围的估计，而且与Oculus quest2系统界面的尺寸有很大差别，因此很难得出可行的具体数值。

b. Debugging Oculus PWAs via Chrome DevTools

The Oculus developer documentation [12] mentions the size of PWA 2D interfaces.

b. 通过 Chrome DevTools 获得 Oculus PWAs 尺寸

Oculus 开发者文档 [12]中有提到 PWA 2D 界面的尺寸。

I obtained accurate pixel data by inspecting the layout of the Oculus browser interface using Chrome Devtools, as mentioned in the article "PWAs on Oculus Quest 2". The interface size was found to be consistent with the system interface size.

PWAs on Oculus Quest 2 [13] 一文中有提到通过 Chrome DevTools 来检查浏览器的界面布局。经过观察，Oculus 浏览器的界面与系统界面尺寸一致，从而获得了较为精准的像素数据。

Browser windows and windows of installed PWAs can be freely resized by the user.

The height can vary between 625 px and 1,200 px.

The width can be set between 400 px and 2,000 px.

The default dimensions are 1,000 × 625 px.

用户可以自由调整浏览器窗口和已安装的 PWA 窗口的大小。

高度可以在 625 像素到 1,200 像素之间变化。

宽度可以设置在 400 像素到 2,000 像素之间。

默认尺寸为 1,000×625 像素。

c.Now, we have developed a scientifically method for calculating the physical and pixel dimensions of UI interfaces:

using the DPP (Degree Per Pixel) conversion method to determine the physical length corresponding to 1px on the screen, completing the conversion of px to mm at different distances, and verifying the method with different device models.

c.到此，我们形成了一个科学完善的 UI 界面物理尺寸与像素尺寸的计算方法: 屏幕上1px所占据的度数在实际中对应的物理长度，完成不同距离下px与mm的换算，并对照了不同型号的设备完成了验证。

Different Devices Comparison

DEFINE #2

VR Fundamentals VR 基础

1. FOV （Filed of View） 视场角

Field of View (FOV) is the angle between the centerline of the human eye's pupil and the edges of the observable area in a display device's imaging. The size of the FOV determines the range of vision, with a larger FOV resulting in a wider field of view.

In other words, objects beyond this angle cannot be captured by the lens. The current FOV of the device is 100º.

显示设备的成像中，人眼可观察到部分的边缘与人眼瞳孔中心连线的夹角，如图所示。视场角的大小决定了视野范围，视场角越大，视野就越大。

通俗地说，目标物体超过这个角就不会被收在镜头里。目前设备的视场角为 FOV = 100º

2. Pixel density PPD (Pixels per Degree) 像素密度

PPD is the number of pixels that a display device outputs per unit angle in the user's field of view in a certain direction. It is an important indicator for measuring the actual clarity of the screen viewed by the human eye. The calculation method is: PPD = screen resolution / device's field of view = 2280px / 100º = 22.8 px/º.

PPD 是在用户视野中，沿某一方向，每个单位角度内能够看到的显示设备所输出像素的数量。是衡量人眼观看屏幕实际清晰度的重要指标。 计算方法：PPD = 屏幕分辨率 / 设备的视场角 = 2280px / 100º = 22.8 px/º

3. Field of View and Viewing Distance 视野与视距

In VR, size is no longer measured in pixels like on a 2D screen, but rather in terms of field of view (FOV).

When the angle between the two lines connecting different objects and the center of the viewer's eyeball is the same, these objects will appear almost the same size to the viewer, even if they are at different viewing distances (viewing distance).

在 VR 中，不再像 2D 屏幕用像素衡量大小，而是使用视角来决定。

当不同被视物体两端与观测者眼球中心的连线夹角相同时，即使这些物体与观测者距离（视距）不同，对观测者来说，看起来几乎是一样大的。

4. Pixel size and physical size conversion (DPP) 像素尺寸与物理尺寸的转换

Through the screen resolution and device field of view (FOV), we can calculate the angle that 1 pixel occupies, and by using trigonometry, we can determine the actual physical size contained within that angle for a given viewing distance.

通过屏幕分辨率与设备视场角 FOV， 我们可以计算出1px 所占的角度；通过三角函数我们能够推算出某个视距下，该角度所包含的实际物理尺寸。

Therefore, at a distance of: 3m, 1px = 2.296mm；

2m, 1px = 1.53mm；

1.5m, 1px = 1.1475mm；

1m, 1px = 0.765mm；

IDEATE #3

Analysis of FoV 视角分析

1.Horizontal FoV 水平视角

According to research, the comfortable horizontal fov is 60º (30º per side); the binocular fov is 120º (60º per side); and the maximum binocular rotational fov is 200º-240º (100º-120º per side).

根据研究表明，水平方向上的舒适视角为60º （左右30º）；双眼可视角度为120º(左右60º)；双眼转动最大视角为200º-240º（左右100º-120º）。

2. Vertical FoV 垂直视角

According to research, the comfortable vertical FoV is 35 degrees (15 degrees up and 20 degrees down); the range of dynamic Fov is 55 degrees (25 degrees up and 30 degrees down); the maximum Fov is 120 degrees (50 degrees up and 70 degrees down).

根据研究表明，垂直方向上的舒适视角为35º （上15º下20º）；动眼可视角度为55º(上25º下30º)；视觉最大视角为120º（上50º下70º）。

3. Head Rotation Angle 头部转动分析

According to research, the comfortable rotation angle of the head in the horizontal direction is 60º (30º each side), and the maximum rotation angle is 110º (55º each side). The comfortable rotation angle of the head in the vertical direction is 32º (up 20º and down 12º), and the maximum rotation angle is 100º (up 60º and down 40º).

根据研究表明，水平方向上头部舒适转动角度为60º （左右30º）；最大转动角度为110º(左右55º)。 垂直方向上头部舒适转动角度为32º （上20º下12º）； 最大转动角度为100º （上60º下40º）。

4. Perception of Z-axies and Horizontal UI Panel 深度感知与水平界面

According to research, comfortable minimum distance for visual perception is 0.5m.

Interface layout should be within 0.5m-10m for strong stereoscopic vision. Beyond 20m, stereoscopic feeling is weak.

Recommended horizontal field of view for UI panels: 60º (comfortable angle without eye movement), 100º (max angle with eye movement), 160º (comfortable angle with head rotation), 210º (max angle with seated head rotation).

根据研究表明，舒适视觉的最小距离为0.5米；界面布局应安排在0.5米到10米的范围之内，这个范围内会有很强的立体视觉；当超过20米的距离，立体感会变得很弱。

综合之前所得数据，可以推荐UI面板水平方向的视角范围：60度（舒适不动眼视角），100度（动眼最大视角），160度（舒适转头视角），210度（坐姿转头最大视角）。

5. UI Layout 界面布局

Based on the above data, the comfortable FOV is a circular range of 60º angle, and the device FOV is a circular range of 100º angle.

The best comfortable panel should be placed within the range of comfortable FOV (recommended straight panel size is 1094px * 708.3px); the second comfortable panel should be placed within the device FOV (recommended straight panel size is 2165px * 708.3px). The comfortable head rotation range is 3648px (160º) * 1368px (60º); the maximum head rotation range is 4768px (210º) * 2280px (100º).

综合以上数据，舒适的 FOV 是一个60º 视角的圆形范围；设备 FOV 为 100º 视角的圆形范围。

最佳舒适面板需要放置在舒适 FOV 的范围内（推荐直面板尺寸为1094px * 708.3px ）; 第二舒适面板放置在设备 FOV 内（推荐直面板尺寸为2165px * 708.3px)。

转头舒适范围为3648px (160º) * 1368px (60º); 转头最大范围为 4768px (210º) * 2280px (100º)。

PROTOTYPE & Test #4

1. The top view of the panel hierarchy 顶视面板层级关系

As shown in the diagram, the first and second level panels are located 1m away from the observer; the bubble/pop-up layer is located 1.5m away; the third level panel is located 2m away, and is a part of a circle with a center at the observation point and a radius of 2m.

如图所示为面板层级的俯视位置关系，一级面板与二级面板位于观测者的1m 处；气泡/弹窗层位于1.5m 处；三级面板位于2m 处，是圆心在观测点，半径为2m 的圆形的一部分。

The horizontal sizes of each level panel are 各级面板的水平尺寸：

• Level 1 panel 一级面板: 798px (598.5mm)
• Level 2 panel 二级面板: 912px (684mm)
• Bubble/pop-up panel 气泡弹窗: 524px (589.6mm)
• Level 3 arc-shaped panel 三级弧形面板: 1133.3px (1700mm) 48º; 2267px (3386mm) 97º

2.The side view of the panel hierarchy 侧视面板层级关系

Vertical size of each pane 各级面板的垂直尺寸：

• Level 1 panel 一级面板: 171px (128.3mm)
• Level 2 panel 二级面板: 570px (427.5mm)
• Bubble/Pop-up panel 气泡弹窗: 459px (400mm)
• Level 3 panel 三级面板: 708.3px (1062.5mm) 31º; 820.8px (1231.2mm) 36º.

3. Icons & Hit targets 图标和控件

Combining comfortable viewing and existing UI standards [12]

Icons should not be smaller than 18.24x18.24 px (0.8º). We recommend using 34.2x34.2 px (1.5º) as the default icon size.

The minimum hit target size for hand input is 68.4x68.4 px (3° ); the minimum hit target size for controller input is 45.6x45.6 px (2° ).

结合人眼舒适观测的数据以及现有的控件标准[12]，得到以下推荐尺寸。

图标不应小于 18.24x18.24 px (0.8º)。我们建议使用 34.2x34.2 px(1.5º)作为默认图标大小。

手部输入的最小控件尺寸为 68.4x68.4 px（ 3°); 控制器输入的最小控件尺寸为 45.6x45.6 px（ 2°）。

4. Prototype Building And Test 原型搭建与测试

I designed a rapid prototype using Figma and Unity, placing UI panels in a panoramic environment for a more realistic user experience. 11 out of 12 testers reported satisfaction, resulting in a 92% satisfaction rate.

我使用Figma 和 Unity 设计了快速原型，将 UI 面板放置在全景环境中给测试者更加真实的产品体验。通过观察和后续问卷，12位测试者中有11位给出了满意的评价，满意度达到92%

Conclusion #5

Final Result 最终成果

I documented the Design guidelines as a research for the company, and it has been implemented in the newest product. 设计指导有我整理文档化为公司的设计研究报告，并已经应用在最新的产品上。

《Bloo VR Design Research 蓝鲸 VR 设计研究报告》

Take Aways 收获

References 参考文献

1. Getting Started With VR UI Interface Design （ Sam Applebee and Alex Deruette) https://marvelapp.com/blog/getting-started-vr-interface-design/ 2. IBM AR/VR meets enterprise http://ibm-design-language.mybluemix.net/design/language/experience/vrar/ 3. 浅谈VR-UI-设计规范，为VR界面设计给出明确指导建议https://www.zcool.com.cn/work/ZMjM0MTcxMTI=.html 4. 《设计未来：VR 虚拟现实设计指南》https://cread.jd.com/read/startRead.action?nbookId=30457774&readType=1 5. Optical Architectures for Augmented-, Virtual-, and Mixed-Reality Headsets by Bernard C. Kress 6. MILK VR: 360° Video Platform Alex Chu https://www.alexchudesign.com/milk-vr 7. VR Interface Design Pre-Visualisation Methods Mike Alger https://vimeo.com/141330081 8. 爱奇艺VR的UI是如何摆放的？——谈VR界面的空间布局 https://www.zcool.com.cn/article/ZMTExMDAwNA==.html 9. Google Daydream I/O 2017 https://www.youtube.com/watch?v=Y2VF8tmLFHw 10. 如何 VR 界面设计规范与实操 https://www.jianshu.com/p/c21addac9b0e 11. VR设计经验：界面布局 https://www.jianshu.com/p/dfd7a5c967db 12. Oculus development： PWA Foundational Elements https://developer.oculus.com/resources/2d-pwadesign-foundations/ 13. PWAs on Oculus Quest 2 Thomas Steiner https://web.dev/pwas-on-oculus-2/#pwa-window-sizes