GameRes游资网

 找回密码
 立即注册

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

发布者: 小篱 | 发布时间: 2017-12-25 11:13| 评论数: 0

新建 Microsoft Word 97 - 2003 文档106.png

文/ 张小哈
更多VR设计干货,请关注“啊哈时刻”微信公众号

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

新建 Microsoft Word 97 - 2003 文档619.png

嗯,所以...这是来一篇很正经的工作总结!

(来自于一枚死理性派的认真脸)

PS:阅读这篇文章需要了解UI交互相关知识

为什么要做这个设计规范?

没有设计规范时,每次设计师将界面素材给技术后,只能由设计师,产品经理在虚拟世界里凭着感觉对界面进行缩放(界面元素太大会不舒适,太小会看不清)。

这样做会带来几个问题

(1)超浪费时间

(2)临时的缩放会导致界面素材的尺寸不一致

(3)不同设计师在协作时,界面元素无法统一

新建 Microsoft Word 97 - 2003 文档955.png

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

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

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

确定设计规范内容及测试目标

我总结了规范里所需要包含的的几个内容:

新建 Microsoft Word 97 - 2003 文档1288.png

现在的问题是,如何获得以上的四部分内容呢?

1.空间和布局

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

(1)人视野的角度

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

新建 Microsoft Word 97 - 2003 文档1529.png

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

水平方向上,脖子转动/脖子不转动时的舒适视野范围:

新建 Microsoft Word 97 - 2003 文档1778.png

垂直方向上,脖子转动/脖子不转动时的舒适视野范围:

新建 Microsoft Word 97 - 2003 文档1920.png

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

新建 Microsoft Word 97 - 2003 文档2081.png

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

新建 Microsoft Word 97 - 2003 文档2245.png

整理出来会得到这样一张图,图里的信息决定了VR界面的空间和布局。

新建 Microsoft Word 97 - 2003 文档2394.png

数据整理在这里:

上20(+5)=25°

下12(+5)=17°

左47(+5)=52

右47(+5)=52

(1)根据交互方式,确定界面距离人的距离

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

新建 Microsoft Word 97 - 2003 文档2663.png

在虚拟世界里,交互方式大致分为两种:

近距离:用手柄直接与界面进行交互

远距离:用射线与远处的界面进行交互

新建 Microsoft Word 97 - 2003 文档2831.png

我们可以把这两种交互方式分成两个区:近和远

近:0.5m—1m手部操纵区

远:1m—10m视线/射线操纵区

在近和远两个区域里,会有不同的界面元素,放在不同的距离上。

新建 Microsoft Word 97 - 2003 文档3035.png

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

数据整理在这里:

手部操纵区:50cm 60cm 70cm 80cm 100cm

射线操纵区:100cm-1000cm

2.字符样式(即常用字号)

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

为了尽量简化测试过程,我把字号分为了三个层级:标题,正文按钮,注释。

新建 Microsoft Word 97 - 2003 文档3373.png

字符样式这一部分,就只能通过测试来获得结果。

3.交互区域(由字+ICON的尺寸共同决定)

移动端:最小可交互区域44px,取决于手指粗细。

Web端:最小可交互区域,取决于最小字和icon的尺寸。

同理,在虚拟世界里的可交互区域,也取决于最小字和icon的尺寸。

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

新建 Microsoft Word 97 - 2003 文档3703.png

4.参考组件

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

所以,我们可以得到这样的工作流:

新建 Microsoft Word 97 - 2003 文档3897.png

综上,测试内容就这么愉快的决定了:字和icon的尺寸

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

新建 Microsoft Word 97 - 2003 文档4109.png

规范包含的内容,需要测试的内容都已经确定,接下来就要开始测试了!

如何进行测试?

这时,机智的程序员同事出现了

ԅ(˘ω˘ԅ):“我们可以用Unity做一个测试工具,专门用来测试呀。”

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

新建 Microsoft Word 97 - 2003 文档4359.png

技术小哥(非常靠谱)很快就把这个测试工具做了出来,有了测试工具,就可以在Unity里随意调节距离,界面尺寸,角度!而且不但可以用来测试,还可以当作UI的原型工具。

简直太赞!೭(˵¯̴͒ꇴ¯̴͒˵)౨”

测试准备

1.字和icon所对应场景的示意图

示意图可以让测试人员更好的理解不同尺寸的字和icon所对应的场景,各找了一些VR软件里的案例。PS:因为篇幅有限,这里每种情况就只放一个案例了~

字所对应的场景:

新建 Microsoft Word 97 - 2003 文档4693.png

ICON所对应的场景:

新建 Microsoft Word 97 - 2003 文档4819.png

2.用来测试的icon和文字素材

icon:两个复杂程度差不多

文字:中文英文都试试

新建 Microsoft Word 97 - 2003 文档4979.png

3.测试人员

小哈邀请了6位盆友来帮忙进行测试。

4一个单位换算的小工具

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

(ಥ_ಥ)

还是那个机智的程序员,用excel做了一个单位换算工具,可以很方便的将cm和px这两个单位互相转换。

测试结果

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

新建 Microsoft Word 97 - 2003 文档5303.png

在不同距离的条件下,icon和字的尺寸基本上是呈线性变化的,所以我们只要得出一个距离上的数值就好。取大家的平均值获得最终结果。

成果展示

规范的制作上,我参考了Google Daydream平台的规范。

在这里展示一下它的设计规范(主要是针对远距离的界面)。

1.空间和布局

新建 Microsoft Word 97 - 2003 文档5564.png

2.字符样式

3.交互区域

新建 Microsoft Word 97 - 2003 文档5692.png

4.参考组件

新建 Microsoft Word 97 - 2003 文档5813.png

5.Daydream还给出了十几种layout示意

新建 Microsoft Word 97 - 2003 文档5956.png

新建 Microsoft Word 97 - 2003 文档6070.png

新建 Microsoft Word 97 - 2003 文档6184.png

新建 Microsoft Word 97 - 2003 文档6298.png

尾声

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

新建 Microsoft Word 97 - 2003 文档6489.png
插画及文章由 @张小哈 原创


最新评论

  • 游戏寒冬继续蔓延
  • 游戏的经验曲线该如何设计?
  • 以游戏公司角度出发,评测《斗破苍穹》
  • 游戏“净化”或将下月开启 严查内容违规、
  • 8个月超300家厂商、上百款新游扎堆入局,你
  • 高ARPU值的“游戏孤岛”日本该如何攻克?—

小黑屋|稿件投递|广告合作|关于本站|GameRes游资网 ( 闽ICP备05005107-1 )

GMT+8, 2018-9-25 13:20

快速回复 返回顶部 返回列表