如何建立一套 VR UI 设计规范？
推荐语：本文转载自张小哈的公众号“啊哈时刻”（ah-ha-moment）。建筑转行 UI 设计的小哈，擅长用脑洞大开的插画讲解设计大师的人生和设计理念。明明靠创意就能生活，偏偏小哈还是个死理性派，这篇文章是她从事 VR UI 设计之后的总结，图文并茂，干货满满，相信你们也会喜欢的~
—— Hoka
前段时间做的一个 VR 项目告一段落，小哈在其中做了 UI 及设计规范相关的工作，希望能用一篇文章来记录梳理一下当时的思考。∠( ᐛ 」∠)
嗯，所以...这是来一篇很正经的工作总结！
( 来自于一枚死理性派的认真脸 )
PS：阅读这篇文章需要了解 UI 交互相关知识
为什么要做这个设计规范？
没有设计规范时，每次设计师将界面素材给技术后，只能由设计师，产品经理在虚拟世界里凭着感觉对界面进行缩放（界面元素太大会不舒适，太小会看不清）。
这样做会带来几个问题：
(1) 超浪费时间
(2) 临时的缩放会导致界面素材的尺寸不一致
(3) 不同设计师在协作时，界面元素无法统一
设计规范可以很好的解决这几个问题，这和非 VR 端的互联网产品是一个道理。
无论是 iOS，安卓还是网页端的互联网产品，设计规范都已比较完善。而 VR 端产品因为硬件条件不同，其他厂家的设计规范无法套用，只能通过测试，针对具体的硬件做一套设计规范。
( •̀ .̫ •́ )✧ 知道了为什么要做这件事，接下来就是确定根据所需要的设计规范内容来确定测试目标了。
确定设计规范内容及测试目标
我总结了规范里所需要包含的的几个内容：
现在的问题是，如何获得以上的四部分内容呢？
1 空间和布局
空间和布局又分为“人视野的角度”和 “距离”，这一部分可以通过资料和经验获得。
(1) 人视野的角度
在非 VR 端产品里，可放置界面的范围通常由硬件 ( 手机，电脑 ) 的尺寸来决定。
而在虚拟世界中，任何一个地方都可以放置界面，为了保证用户在看界面时尽量舒适（不会因为字太小而看不清，太大而有压迫感，位置太偏而让脖子特别累），最好对放置界面的位置做下限定。下面是我根据人体工学资料获得的信息～
水平方向上，脖子转动 / 脖子不转动时的舒适视野范围：
垂直方向上，脖子转动 / 脖子不转动时的舒适视野范围：
我们把上面两张图里的数据结合起来，就可以得到脖子转动时，舒适情况下的极限视野 (最大范围)：
和脖子不转动的极限视野（为了保证测试的严谨性，在四个方向各 +5° 的安全区，即图里桔色的部分）
整理出来会得到这样一张图，图里的信息决定了 VR 界面的空间和布局。
数据整理在这里：
上 20（+5）= 25°
下 12（+5）= 17°
左 47（+5）= 52
右 47（+5）= 52
(2) 根据交互方式，确定界面距离人的距离
在非VR端产品中，由于现实世界的限制，距离通常是在一定范围内的（比如我们不会把手机放在 10m 的距离去看，因为没有人长 10m 的胳膊）。
在虚拟世界里，交互方式大致分为两种：
近距离：用手柄直接与界面进行交互
远距离：用射线与远处的界面进行交互
我们可以把这两种交互方式分成两个区：近和远
近：0.5m—1m 手部操纵区
远：1m—10m 视线 / 射线操纵区
在近和远两个区域里，会有不同的界面元素，放在不同的距离上。
这一部分数据是根据人体工学的参考资料（Google提供的舒适距离是 0.5-10m）获得的。
数据整理在这里：
手部操纵区：50cm 60cm 70cm 80cm 100cm
射线操纵区：100cm-1000cm
2 字符样式 ( 即常用字号 )
这点和非 VR 端的互联网产品就比较类似啦，比如 Web 端的正文常用自号是14px，VR 端也需要一个常用的基准字号。
为了尽量简化测试过程，我把字号分为了三个层级：标题，正文按钮，注释。
字符样式这一部分，就只能通过测试来获得结果。
3 交互区域 ( 由字 + ICON的尺寸共同决定 )
移动端：最小可交互区域 44 px，取决于手指粗细。
Web端：最小可交互区域，取决于最小字和 icon的尺寸。
同理，在虚拟世界里的可交互区域，也取决于最小字和 icon 的尺寸。
所以，我们需要测试 icon 的尺寸 ( 保证 icon 看得清，尺寸又能和字进行搭配使用 )，结合字和 icon 的尺寸，我们就能推导出可交互区域的尺寸了。
4 参考组件
有了前面的三部分内容： 空间布局，字符样式，可交互区域，我们就能自然而然的推导出参考组件的样式了。
所以，我们可以得到这样的工作流：
综上，测试内容就这么愉快的决定了：字和 icon 的尺寸
因为人对舒适度的体验是很不精确的，所以我把测试条件量化到了 4 个具体的场景上，这时前面 [空间和布局] 部分整理的内容就可以派上用场了！
规范包含的内容，需要测试的内容都已经确定，接下来就要开始测试了！
如何进行测试？
这时，机智的程序员同事出现了
ԅ( ˘ω˘ ԅ)：“我们可以用 Unity 做一个测试工具，专门用来测试呀。”
现在万事俱备，就差程序员小哥帮忙做的测试工具了。（下图是我给他的界面原型）
技术小哥 （非常靠谱)）很快就把这个测试工具做了出来，有了测试工具，就可以在 Unity 里随意调节距离，界面尺寸，角度！而且不但可以用来测试，还可以当作UI的原型工具。
简直太赞！೭(˵¯̴͒ꇴ¯̴͒˵)౨”
测试准备
1 字和 icon 所对应场景的示意图
示意图可以让测试人员更好的理解不同尺寸的字和 icon 所对应的场景，各找了一些 VR 软件里的案例。PS : 因为篇幅有限，这里每种情况就只放一个案例了～
字所对应的场景：
ICON 所对应的场景：
2 用来测试的 icon 和文字素材
icon：两个复杂程度差不多
文字：中文英文都试试
3 测试人员
小哈邀请了 6 位盆友来帮忙进行测试。
4 一个单位换算的小工具
其实还有一个困扰蛮久的问题：在软件里做设计稿，在 ue 里写代码时，单位都是 px。而在虚拟世界里的单位是 cm。单位不统一怎么解决呢？
(ಥ_ಥ)
还是那个机智的程序员，用 excel 做了一个单位换算工具，可以很方便的将 cm 和 px 这两个单位互相转换。
测试结果
因为篇幅有限，这里仅展示 3 位测试人员的数据～用 excel 把数据用图表现出来。
在不同距离的条件下，icon 和字的尺寸基本上是呈线性变化的，所以我们只要得出一个距离上的数值就好。取大家的平均值获得最终结果。
成果展示
规范的制作上，我参考了 Google Daydream 平台的规范。
在这里展示一下它的设计规范 ( 主要是针对远距离的界面 ) 。
1 空间和布局
2 字符样式
3 交互区域
4 参考组件
5 Daydream 还给出了十几种 layout 示意
尾声
✧( ु•⌄• )◞感谢你看到了这里（ 抓住一枚死理性派 )，第一次做 VR 端的设计规范，很多思路也在摸索中，难免会有疏漏的地方，欢迎交流。
最后，如果你想看看 Google Daydream 的 VR 设计规范（sketch版本） ，在“啊哈时刻”公众号后台回复“白日梦”，就可以获得下载链接。
你可能会喜欢
VR、AR 的一百种可能性（Google Daydream 用户调研负责人张晶华）