如何建立一套 VR UI 设计规范?平面设计Bsport体育
栏目:Bsport体育 发布时间:2023-06-17
 没有设计规范时,每次设计师将界面素材给技术后,只能由设计师,产品经理在虚拟世界里  设计规范可以很好的解决这几个问题,这和非 VR 端的互联网产品是一个道理。  无论是 iOS,安卓还是网页端的互联网产品,设计规范都已比较完善。而 VR 端产品因为硬件条件不同,其他厂家的设计规范无法套用,只能通过测试,针对具体的硬件做一套设计规范。  ( •̀ .̫ •́ )✧ 知道了为什么要做这件事,接下来

  没有设计规范时,每次设计师将界面素材给技术后,只能由设计师,产品经理在虚拟世界里

  设计规范可以很好的解决这几个问题,这和非 VR 端的互联网产品是一个道理。

  无论是 iOS,安卓还是网页端的互联网产品,设计规范都已比较完善。而 VR 端产品因为硬件条件不同,其他厂家的设计规范无法套用,只能通过测试,针对具体的硬件做一套设计规范。

  ( •̀ .̫ •́ )✧ 知道了为什么要做这件事,接下来就是确定根据所需要的设计规范内容来确定测试目标了。

  空间和布局又分为“人视野的角度”和 “距离”,这一部分可以通过资料和经验获得。

  在非 VR 端产品里,可放置界面的范围通常由硬件 ( 手机,电脑 ) 的尺寸来决定Bsport体育。

  而在虚拟世界中,任何一个地方都可以放置界面,为了保证用户在看界面时尽量舒适 (不会因为字太小而看不清,太大而有压迫感,位置太偏而让脖子特别累),最好对放置界面的位置做下限定。下面是我根据人体工学资料获得的信息~

  我们把上面两张图里的数据结合起来,就可以得到脖子转动时,舒适情况下的极限视野 (最大范围):

  和脖子不转动的极限视野。(为了保证测试的严谨性,在四个方向各 +5° 的安全区,即图里桔色的部分)

  在非VR端产品中,由于现实世界的限制,距离通常是在一定范围内的(比如我们不会把手机放在10m的距离去看,因为没有人长10m的胳膊)。

  这一部分数据是根据人体工学的参考资料 ( Google提供的舒适距离是0.5-10m )获得的。

  这点和非 VR 端的互联网产品就比较类似啦,比如Web端的正文常用自号是14px,VR端也需要一个常用的基准字号。

  所以,我们需要测试icon的尺寸 ( 保证icon看得清Bsport体育,尺寸又能和字进行搭配使用 ),结合字和icon的尺寸,我们就能推导出可交互区域的尺寸了。

  有了前面的三部分内容: 空间布局,字符样式平面设计,可交互区域,我们就能自然而然的推导出参考组件的样式了。

  因为人对舒适度的体验是很不精确的,所以我把测试条件量化到了4 个具体的场景上,这时前面 [空间和布局] 部分整理的内容就可以派上用场了!

  现在万事俱备,就差程序员小哥帮忙做的测试工具了。(下图是我给他的界面原型)>

  其实还有一个困扰蛮久的问题:在软件里做设计稿,在ue里写代码时,单位都是px。而在虚拟世界里的单位是cm。单位不统一怎Bsport体育么解决呢?

  因为篇幅有限,这里仅展示3位测试人员的数据~用excel把数据用图表现出来。

  ✧( ु•⌄•Bsport体育 )◞感谢你看到了这里( 抓住一枚死理性派 ),第一次做 VR 端的设计规范,很多思路也在摸索中,难免会有疏漏的地方,欢迎交流。

  最后,如果你想看看 Google Daydream 的Bsport体育 VR 设计规范 (sketch版本) ,在“啊哈时刻”公众号后台回复“白日梦”,就可以获得下载Bsport体育链接。