VR 界面设计流程是怎样的?
VR 本质上还是一个显示设备,设备不一样交互方式会略不同,由于它是 3D 的,所以显示上也会有不同,和 2D 的界面设计相比就是基础规范不同。跟 2D 的界面设计一样,我们要先确定做什么、有什么用,有哪些界面、界面里分别是什么元素、交互方式、不同状态的样式等等。
不同之处在于 3D 的界面设计中会有更多的属性:
元素离你的距离。离太远了看不清,离太近了能显示的内容就变少了且生理上不舒服啊。远近还会影响元素的大小,设计的时候还要考虑到距离的问题。
Unity 中的尺寸是按米算的,一个格子1米(这个跟 C4D 一样,不等同于物理尺寸),开始正式设计前在 Unity 中绘制一个矩形,做为界面显示位置与大小的参考,然后截图(带网格)。
把截图拖到 sketch 中,综合设计稿的尺寸、截图的网格大小,确定一个比例,如 50px 占一个网格,那设计稿中一个 10px 大的按钮在 Unity 中就是 0.2m 。
当然这个方法是我自个儿琢磨的(捂脸~)。
小朋友的视角低,只能看到大人们的腿,高个儿们视角高,走在人群中看到的都是头顶,那我们在做 VR 的时候就会放一个表示视角的摄像机,这个摄像机的高度看到的视角高低。
我们这个项目是固定在一个点的,摄像机高度也是固定的。喊几个不同身高的人带着 VR 眼镜试试会不会觉得别扭,别扭就调下摄像机高度,找个折中大家都不觉得别扭的高度。这个步骤直接开发小伙儿调就行了。
VR 设备的分辨率目前比手机屏要低很多(目前),所以实际上可设计的面积比手机屏要小,字和按钮的占比就不能太小,得大(大概是心里觉得 “卧槽这么大还能看么” 那么大)。
我们人的眼睛默认正视前方,眼睛平视正前方最容易看清,左右水平的这一圈可以转头转身,天花板和地面得抬头跟低头,看得很累,这跟平时看手机电脑从左上往右下阅读方式不一样,所以界面是从正中向右延展,
我们使用的 VR 设备是手柄操作,交互方式比较简单,画面中会显示一个表示视线焦点的小光点,这个小光点可以通过眼镜移动也可以通过手柄移动:
安装一些设计 VR 时用到的软件和插件:
【一张图表达下转换过程】
GoPro VR Player 预览需要把界面以及背景做成等柱状投影图,所以需要通过 Flaming Pear Flexify 2 来生成,是在不了解 VR 的设计规范时用来辅助检查设计稿的效果用的,相当于稿子检查。
这个方法从 《VR原型的快速制作 - 大植子Daz_Qu》 看来的,建议看下原文。
到 GoPro VR Player 预览这个步骤都跟大植子文章里差不多,但我们这个还得弄到 VR 眼镜,后面会多了 Unity 建模和 VR 眼镜检查两个步骤,也是反复调整的过程。
方形的网格不等于场景的墙面大小,只是以我们看到的视角划分为六大面,每一块表示一个视角,默认进入时看到的面定义为正面。
回忆在电影院看电影时座位离屏幕太近的感受,界面占比太大会有压迫感,四角的内容会由于透视角度问题变形,中间粉色的那一条就是视线看着比较轻松的大致范围。
跟开发小伙儿确定好交互方式,需要哪些页面?怎么跳转?开发小伙儿会把带有不同页面的 Unity 包给我,里面有大概需要的元素(各种块、文字、按钮等)
大小远近
vr上界面ui的设计规范
与传统ui制作方式不同的是vr界面ui需要多层面的考虑问题没有设计规范时,每次设计师将界面素材给技术后,只能由设计师,产品经理在虚拟世界里凭着感觉对界面进行缩放(界面元素太大会不舒适,太小会看不清)。
这样做会带来几个问题:
(1) 超浪费时间
(2) 临时的缩放会导致界面素材的尺寸不一致
(3) 不同设计师在协作时,界面元素无法统一
无论是 iOS,安卓还是网页端的互联网产品,设计规范都已比较完善。而 VR 端产品因为硬件条件不同,其他厂家的设计规范无法套用,只能通过测试,针对具体的硬件做一套设计规范。
在虚拟世界中,任何一个地方都可以放置界面,为了保证用户在看界面时尽量舒适 (不会因为字太小而看不清,太大而有压迫感,位置太偏而让脖子特别累),*对放置界面的位置做下限定。下面是我根据人体工学资料获得的信息~
水平方向上,脖子转动 / 脖子不转动时的舒适视野范围
(二)根据交互方式,确定界面距离人的距离
在非VR端产品中,由于现实世界的限制,距离通常是在一定范围内的(比如我们不会把手机放在10m的距离去看,因为没有人长10m的胳膊)在虚拟世界里,交互方式大致分为两种:
近距离:用手柄直接与界面进行交互
远距离:用射线与远处的界面进行交互
交互区域 ( 由字 + ICON的尺寸共同决定 )
移动端:最小可交互区域44px,取决于手指粗细。
Web端:最小可交互区域,取决于最小字和icon的尺寸。
同理,在虚拟世界里的可交互区域,也取决于最小字和icon的尺寸。
所以,我们需要测试icon的尺寸 ( 保证icon看得清,尺寸又能和字进行搭配使用 ),结合字和icon的尺寸,我们就能推导出可交互区域的尺寸了。
cr: 张小哈的啊哈时刻
VR设计经验:界面深度
相信大家都知道,虚拟现实是具有深度感知的,对于VR-UI(虚拟现实界面)来说也是如此,这是与传统UI最为不同的地方之一。那么基于深度感知的特性,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.适用于大面积的界面划分。比如先将界面划分为几个层次,再进行细节的设计。
总的来说,利用深度可以设计出非常经惊艳的效果,但要设计出信息可达性高的界面就要非常的谨慎。
VR技术带来UI交互设计新玩法有哪些?
VR虚拟现实技术越来越火热,这种立体空间的呈现,带来的是全新的用户交互体验。那么,其对UI设计有什么影响呢?VR对于许多UI设计师而言是一个全新与未知的领域。那么什么是VR呢?VR是一种沉浸式的体验, 对于设计师来说,在VR里,主要有两种类型的元素:环境与界面
1. 环境
我们可以把“环境”当做戴上VR设备以后进入到的世界。当我们被包裹到了一个空间里,可以随意的选择任何角度观察这个世界。
我们把这个世界平铺下来,它其实是扭曲的(原理请参照三维软件的HDR环境贴图)。
关于界面,VR并没有像手机屏幕或电脑屏幕一样的规范尺寸。VR里面的画布大小是360度一周的,在VR里面的画布可以理解为一个圆柱体。而作为设计师,要明白用户是在什么视距的情况下观看,所以需要前期根据不同设备的情况测试*的视距,设计出合适的图标、文字、动效切换等界面元素。
我们了解了这两大构成元素后,就可以把他们有趣的组合起来了。
参考着关于VR视野舒适区域的早期研究,归纳下来
VR360度平铺视图: 3600 × 1800 px
UI界面平铺视图: 1200 × 600 px
所以,我们把VR分析完以后,可以分为两个端口:VR360度端口与UI界面端口。VR360度端口输入的是虚拟现实环境中预览界面的呈现;UI界面端口输入的是UI交互界面。对于我们UI设计师而言,把重心侧重于后者UI界面的平铺视图的设计,其实整个流程也简单了许多。
VR真的只有这么简单吗?其实并不是,今天只是用了最简单易懂的方式让大家初步了解VR,真真正正的VR远远比这个复杂的多。时代的发展,我们可以大胆的联想UI和UX应用到这种新的设备媒介能到怎样的程度,还真是未知数。
更长远设想,屏幕只是UI界面的一个载体,更重要的是使用者的交互体验,谁说非要用屏幕才能交互?让一些交互的元素像VR一样出现在我们的整个立体空间世界里,是不是更有趣?
操作界面存在于你随处可见的视觉之中,而且没有繁琐的设备和笨拙的屏幕,我们浏览四周就能形成空间交互。比如:在步行散步的街道,你可以在街道的路面浏览电子图书与新闻资讯;你可以随时随地进行娱乐或者工作,而不需要一直坐在电脑屏幕前;你可以在工作室遇到,实际身在异国他乡的合作伙伴,能实现空间模拟的面对面交流等。
在VR世界里,丰富的是虚拟现实环境的画面,所以VR的UI界面极简化中,扁平是少不了的设计风格。目前在VR模式下,传统UI布置方法已经慢慢演变为将UI组件分布在三维空间中的模式。就像我们看到的科幻电影,这种交互在未来实现起来并不是梦。
同时对于我们UI设计师来说也是机遇。了解这些发展趋势,并且需要掌握三维软件是必不可少的。如果你只是会一些基础的平面类设计,未来你可能会被这个行业所抛弃。希望大家好好的抓住这样的机遇,而C4D、3D Max、Maya、Unity等方向都是我们不错的选择。
UI设计学习路线图
如何用Unity3D设计VR中的用户界面
如何用Unity3D设计VR中的用户界面随着Unity5.1的发布,之前的Oculus Rift和Gear VR 开发流程发生了巨大的变化,这也算是小白鼠们必须付出的代价了~
那么Unity5.1和Oculus的整合究竟发生了哪些变化,对开发者们开发应该如何来调整开发策略呢?下面是Oculus官方的详细说明,不得不看。
1.Unity提供了*方的支持
Unity从5.1版本开始提供了对虚拟现实的*方开发支持,当开发者在Player Settings中勾选”Virtual Reality Supported”选项时,就会自动使用一个全景的VR摄像机来取代默认的主摄像机。
V5.1最开始只支持Oculus Rift,从6月12日开始Unity发布了5.1.0p1,开始支持Gear VR.。开发者可以从这里下载*的补丁版本。
我想了解一下制作一个VR游戏需要学习到什么知识?
你可以先去【绘学霸】网站找“vr设计,元宇宙开发”板块的【免费】视频教程-【点击进入】完整入门到精通视频教程列表: www.huixueba.net/web//?type=1&tagid=305&zdhhr-11y04r-想要系统的学习可以考虑报一个网络直播课,推荐CGWANG的网络课。老师讲得细,上完还可以回看,还有同类型录播课可以免费学(赠送终身VIP)。
自制能力相对较弱的话,建议还是去好点的培训机构,实力和规模在国内排名前几的大机构,推荐行业龙头:王氏教育。
王氏教育*直营校区面授课程试听【复制后面链接在浏览器也可打开】: www.cgwang.com/course//?zdhhr-11y04r-
在“元宇宙开发,虚拟现实设计”领域的培训机构里,【王氏教育】是国内的老大,且没有加盟分校,都是总部直营的连锁校区。跟很多其它同类型大机构不一样的是:王氏教育每个校区都是实体面授,老师是手把手教,而且有专门的班主任从早盯到晚,爆肝式的学习模式,提升会很快,特别适合基础差的学生。
大家可以先把【绘学霸】APP下载到自己手机,方便碎片时间学习——绘学霸APP下载: www.huixueba.com.cn/Scripts/download.html
VR交互设计 是怎么交互的?
正如同平面图形交互在不同的场景下有着不同的方式,VR交互同样不会存在一种通用的交互手段,同时,由于VR的多维特点注定了它的交互要比平面图形交互拥有更加丰富的形式。目前,VR交互仍在探索和研究中,与各种高科技的结合,将会使VR交互产生无限可能。今天小编就总结九种VR交互方式以及它们的现状。1“动作捕捉”
用户想要获得完全的沉浸感,真正“进入”虚拟世界,动作捕捉系统是必须的。目前专门针对VR的动捕系统,目前市面上可参考的有 Neuron,其他的要么是昂贵的商用级设备,要么完全是雾件(意为在开发完成前就开始进行宣传的产品,也许宣传的产品根本就不会问世)。但是这样的动作捕捉设备只会在特定的超重度的场景中使用,因为其有固有的易用性门槛,需要用户花费比较长的时间穿戴和校准才能够使用。相比之下,Kinect这样的光学设备在某些对于精度要求不高的场景可能也会被应用。
全身动捕在很多场合并不是必须的,它的另一个问题,在于没有反馈,用户很难感觉到自己的操作是有效的,这也是交互设计的一大痛点。
2“触觉反馈”
这里主要是按钮和震动反馈,这就是下面要提到的一大类,虚拟现实手柄。目前三大VR头显厂商Oculus、索尼、HTC Valve都不约而同的采用了虚拟现实手柄作为标准的交互模式:两手分立的、6个自由度空间跟踪的(3个转动自由度3个平移自由度),带按钮和震动反馈的手柄。这样的设备显然是用来进行一些高度特化的游戏类应用的(以及轻度的消费应用),这也可以视作一种商业策略,因为VR头显的早期消费者应该基本是游戏玩家。
但是,这样高度特化/简化的交互设备的优势显然是能够非常自如地在诸如游戏等应用中使用,但是它无法适应更加广泛的应用场景。
3“眼球追踪”
提起VR领域最重要的技术,眼球追踪技术*得被从业者们密切关注。Oculus创始人帕尔默?拉奇就曾称其为“VR的心脏”,因为它对于人眼位置的检测,能够为当前所处视角提供*的3D效果,使VR头显呈现出的图像更自然,延迟更小,这都能大大增加可玩性。同时,由于眼球追踪技术可以获知人眼的真实注视点,从而得到虚拟物体上视点位置的景深。所以,眼球追踪技术被大部分VR从业者认为将成为解决虚拟现实头盔眩晕病问题的一个重要技术突破。但是,尽管众多公司都在研究眼球追踪技术,但仍然没有一家的解决方案令人满意。
超多维SuperD公司图形图像算法中心主管培云认为,VR的眼球追踪可利用类似tobii眼动仪的设备实现,但前提是解决设备的体积和功耗。事实上,在业内人看来,从眼球追踪技术本身来说,虽然在VR上有一些限制,但可行性还是比较高的,比如外接电源、将VR的结构设计做的更大等。但更大的挑战在与通过调整图像来适应眼球的移动,这些图像调整的算法目前来说都是空白的。有两个指标,一是图像自然真实,二是快速延迟小。这对VR+眼球追踪提出了更高的要求,如果达到这两点,VR的可玩性会再提高一个档次。
4“肌电模拟”
关于这个我们通过一个VR拳击设备Impacto来说明,Impacto结合了触觉反馈和肌肉电刺激精确模拟实际感觉。具体来说,Impacto设备分为两部分。一部分是震动马达,能产生震动感,这个在一般的游戏手柄中可以体验到;另外一部分,也是最有意义的部分,是肌肉电刺激系统,通过电流刺激肌肉收缩运动。两者的结合能够给人们带来一种错觉,误以为自己击中了游戏中的对手,因为这个设备会在恰当的时候产生类似真正拳击的“冲击感”。
然而,业内人士对于这个项目有些争议,目前的生物技术水平无法利用肌肉电刺激来高度模拟实际感觉。即使采用这种方式,以目前的技术能实现的也是比较粗糙的感觉,这种感觉对于追求沉浸感的VR也没有太多用处,“还不如震动马达”。还有一位从事疼痛缓解理疗仪的朋友表示,利用肌肉电刺激来模拟真实感觉需要克服的问题有很多,因为神经通道是一个精巧而复杂的结构,从外部皮肤刺激是不太可能的,但是“随便”电刺激一下让肌肉运动以当做反馈是可以的。
5“手势跟踪”
使用手势跟踪作为交互可以分为两种方式:*种是使用光学跟踪,比如Leap Motion和NimbleVR这样的深度传感器,第二种是将传感器戴在手上的数据手套。
光学跟踪的优势在于使用门槛低,场景灵活,用户不需要在手上穿脱设备,未来在一体化移动VR头显上直接集成光学手部跟踪用作移动场景的交互方式是一件很可行的事情。但是其缺点在于视场受局限,以及我们之前所提到的两个基本问题:需要用户付出脑力和体力才能实现的交互是不会成功的,使用手势跟踪会比较累而且不直观,没有反馈。这需要良好的交互设计才能弥补。
数据手套,一般在手套上集成了惯性传感器来跟踪用户的手指乃至整个手臂的运动。它的优势在于没有视场限制,而且完全可以在设备上集成反馈机制(比如震动,按钮和触摸)。它的缺陷在于使用门槛较高:用户需要穿脱设备,而且作为一个外设其使用场景还是受局限:就好比说在很多移动场景中不太可能使用鼠标。不过这些问题都没有技术上的绝对门槛,完全可以想象类似于指环这样的高度集成和简化的数据手套在未来的VR产业中出现,用户可以随身携带随时使用。
这两种方式各有优劣,可以想见在未来这两种手势跟踪在很长一段时间会并存,用户在不同的场景(以及不同的偏好)使用不同的跟踪方式。
6“方向追踪”
方向追踪除了可以用来瞄点,还可以用来控制用户在VR中的前进方向。不过,如果用方向追踪调整方向的话很可能会有转不过去的情况,因为用户不总是坐在能够360度旋转的转椅上的,可能很多情况下都会空间受限。比如头转了90度接着再转身体,加起来也很难转过180度……所以,这里“空间受限无法转身是一个需求”,于是交互设计师给出了解决方案——按下鼠标右键则可以让方向回到原始的正视方向或者叫做重置当前凝视的方向(就是你最初始时候面向的那个方向),或者可以通过摇杆调整方向,或按下按钮回到初始位置。
但问题还是存在的,以用户面朝的方向作为行走方向比起键鼠和gamepad,转向和视觉相匹配极大地增强了沉浸感,但是却有可能玩得很累,削弱了舒适性。
7“语音交互”
在VR中海量的信息淹没了用户,他不会理会视觉中心的指示文字,而是环顾四周不断发现和探索。如果这时给出一些图形上的指示还会干扰到他们在VR中的沉浸式体验,所以*的方法就是使用语音,和他们正在观察的周遭世界互不干扰。这时如果用户和VR世界进行语音交互,会更加自然,而且它是无处不在无时不有的,用户不需要移动头部和寻找它们,在任何方位任何角落都能和他们交流。
8“传感器”
传感器能够帮助人们与多维的VR信息环境进行自然地交互。比如,人们进入虚拟世界不仅仅是想坐在那里,他们也希望能够在虚拟世界中到处走走看看,比如万向跑步机,目前Virtuix,Cyberith和国内的KAT都在研发这种产品。然而体验过的人都反应过,这样的跑步机实际上并不能够提供接近于真实移动的感觉,目前体验并不好。还有的想法是使用脚上的惯性传感器使用原地走代替前进,比如StompzVR。还比如全身VR套装Teslasuit,戴上这套装备,可以切身感觉到虚拟现实环境的变化,比如可感受到微风的吹佛,甚至是射击游戏中还能感受到中弹的感觉。
这些都是由设备上的各种传感器产生的,比如智能感应环、温度传感器、光敏传感器、压力传感器、视觉传感器等,能够通过脉冲电流让皮肤产生相应的感觉,或是把游戏中触觉、嗅觉等各种感知传送到大脑。但是,目前已有的应用传感器的设备体验度都不高,在技术上还需要做出很多突破。
9“一个真实场地”
就是造出一个与虚拟世界的墙壁、阻挡和边界等完全一致的可自由移动的真实场地,比如超重度交互的虚拟现实主题公园The Void就采用了这种途径,它是一个混合现实型的体验,把虚拟世界构建在物理世界之上,让使用者能够感觉到周围的物体并使用真实的道具,比如手提灯、剑、枪等,*媒体称之为“地表最强娱乐设施”。
这种真实场地通过仔细的规划关卡和场景设计就能够给用户带来种种外设所不能带来的良好体验。但规模及投入较大,且只能适用于特定的虚拟场景,在场景应用的广泛性上受限。
▌ 虚拟现实是一场交互方式的新革命,人们正在实现由界面到空间的交互方式变迁。未来多通道的交互将是VR时代的主流交互形态,目前,VR交互的输入方式尚未统一,市面上的各种交互设备仍存在各自的不足。
业内专家表示,短期内VR发展仍靠技术红利推动,交互技术将成关键。同时,在硬件性能趋同的背景下,交互技术将构成差异化竞争力。在产业链方面,“交互算法是关键,下游应用空间广”,整个输入设备产业链主要由上游的元器件生产商(主要以传感器、芯片生产商为主),中游的输入设备制造商、交互方案提供商组成,下游则以游戏、影视、主题公园及其他企业级应用为主。他们表示,未来传感器的供应问题将在国外厂商授权部分国内厂商生产等因素下得到部分解决,届时具备领先自主算法技术的交互解决方案提供商将日趋重要。