美文网首页VRVR设计一起来玩VR\AR
VR设计经验:界面深度

VR设计经验:界面深度

作者: genrry | 来源:发表于2017-03-15 16:11 被阅读256次

    相信大家都知道,虚拟现实是具有深度感知的,对于VR-UI(虚拟现实界面)来说也是如此,这是与传统UI最为不同的地方之一。那么基于深度感知的特性,UI设计又会有怎样的机遇和挑战呢?笔者根据自己的经验和所查阅的资料,总结了以下几点。

    适合阅读的UI深度

    我们都知道,焦距越短,眼球的晶状体的曲度就越大,我们的眼部就会越紧张。而在虚拟现实中物体距离眼睛多远才不会对眼部造成不适呢?以下是眼睛在每种距离的阅读表现:

    0.5米:文字太近使得眼睛很难聚焦,特别是视觉焦点远近切换的时候。

    1米:这差不多是舒适的UI距离的最低限度。当你需要把文字放在所有元素前面,可以使用这个距离。但时间一长也会造成眼部疲劳。

    1.5米:适合阅读。但视觉焦点远近切换时任然会造成视觉疲劳。

    2米:这距离的立体效果会减少,但有利于减少视觉疲劳。而且目标容易聚焦。

    3米:这是一个非常舒服的距离。保持文字阅读性同时也不会与场景元素互相干扰。

    6米:更远的距离都是可以的,但场景的物体可能会遮挡文字,使用户迷惑。

    12米:对于UI来说,这是不切实际的距离了。

    总的来说1~3米是比较适合阅读的距离。同样我们也可以得知,无论是UI还是场景物体,离眼睛的距离都不宜太短(>=0.5m),否则会造成眼部不适。

    立体感的强弱

    由下图可以看出0.5~10m的范围能表现出很强的立体感,而且距离越近立体感越强;在10~20米的范围,立体感就很弱了,而且随距离变化不大;而20米之后没有立体感可言了。

    立体感的强弱直接影响了我们的沉浸体验。如图我们要营造一个很强沉浸感的场景,那么我们场景的主要物体应该都放置离主体10米内的空间里。但当我们的场景必须是一个比较大环境,那么可以在用户必然会经过的路径上错落有致地放置物体。比如,虚拟过山车是一个比较大的场景,我们可在轨道旁边放置一些物件从而增强沉浸感。

    适合阅读的文字大小

    有过UI设计经验的朋友都知道,在Web端,字体最小不能低于12px,而常用的长文本阅读字体为16px,App端字体大小一般都在20~42px。同理,在VR中也有字体的规范。要说明这个问题,应该先要说明一下概念:

    文字像素大小:即现实在设备屏幕上的文字的大小,单位px。

    字体高度:即文字在虚拟场景中的大小,以字高表示,单位m。

    在开发中,我们所编辑的是字体高度,而我们带上VR头盔所看见的是像素大小。两者之间存在着这样一种数学关系,图:

    h=d*tan(px/ppd)

    ppd=屏幕分辨率/FOV

    字体高度h,字体与眼睛距离d,字体在屏幕显示的大小px,设备ppd(pixel per degree像素每度)

    而在目前的VR设备中,文字最小的像素大小为14px,最佳的文字大小为20px。那么套入公式就可以算出,离眼睛2m的文字最小高度为0.05m,最佳高度为0.072m。更多的数据可看下表:

    界面布局

    传统的UI设计都会按照信息的主次设计界面的层次,例如大小、色彩、明暗、质感等等,而虚拟现实中的界面则会多出了新的维度,即深度。那么究竟是相对近且大的东西更吸引注意还是相对远且大的东西更吸引注意呢?笔者作了以下测试,如图,远且大的东西和近且小的东西都是相对整体(中间层)突兀的存在。而越靠近眼睛的东西会越吸引注意,就算让近的东西变得更小。而相对远的东西最不吸引,尽管它是突兀的存在。这逻辑与平面中的“大/小”相似,简单点来说就是越近的东西会越吸引注意。

    而对深度的利用,我们还有几点值得注意的地方:

    1.不要让使用者的焦距在近远不同的两个物体频繁切换。

    2.适当的分层能增强场景的立体感,但要避免分层过多。建议最多3层,层次过多会导致焦距不断切换外还会造成更多的视觉杂音。

    3.深度差不适宜过大。经过测试发现,当深度差比较大时(超过1.5米后)就会造成眼部不适,同时会破坏布局的一体性。

    4.适用于不同状态的标记。比如按钮的选中状态可以让按钮往前位移一定距离。

    5.适用于大面积的界面划分。比如先将界面划分为几个层次,再进行细节的设计。

    总的来说,利用深度可以设计出非常经惊艳的效果,但要设计出信息可达性高的界面就要非常的谨慎。

    相关文章

      网友评论

      • 境界1984:正在学习VR。
        f1c386c79b59:我这里有个群,遇到什么问题可以添加这个qq群:210270845, 群里都是做VR 和 AR 的

      本文标题:VR设计经验:界面深度

      本文链接:https://www.haomeiwen.com/subject/kbolnttx.html