|
|
文/ 张小哈
更多VR设计干货，请关注“啊哈时刻”微信公众号
前段时间做的一个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
(1)根据交互方式，确定界面距离人的距离
在非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的尺寸共同决定)
移动端：最小可交互区域44px，取决于手指粗细。
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端的设计规范，很多思路也在摸索中，难免会有疏漏的地方，欢迎交流。
插画及文章由 @张小哈 原创
|
|
发表于 2017-12-25 11:13:23
