收藏本站 关于我们

如何建立一套 VR UI 设计规范?

发布时间:2017-12-24 21:07:19   来源:   人气:0

前言:前段时间做的一个 VR 项目告一段落,我在其中做了 UI 及设计规范相关的工作,希望能用一篇文章来记录梳理一下当时的思考。

前段时间做的一个 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的尺寸共同决定 )


移动端:最小可交互区域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 端的设计规范,很多思路也在摸索中,难免会有疏漏的地方,欢迎交流。



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

本文来自PS教程网www.46PS.com,转载请注明!关键词:如何建立一套VRUI设计规范?


PS教程