苏州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 示意
咨询联系方式：13861302024（杨老师）或者QQ：2589245390 还可以直接在线咨询
更多课程推荐|：
