沪ICP备06058754号-1
虚拟现实界面设计

李爽 周真伊 许婷 龚妙岚 周依婷

2019-09-27

用户体验 文集

2018年学术论文欣赏

本文段落精选

 

本文通过对VR内容发展、交互方式的总结分析确定了眼动交互方式,从交互方式、设计原则等角度进行深入研究,达到规范虚拟现实界面的设计、提升用户沉浸感及体验的目的。并参考眼控界面中的时间预测模型、Google Cardbord设计规范,以超市购物支付场景进行了概念设计及分析总结,为设计师进行VR界面设计指引了方向。

 

 

 

虚拟现实界面设计

 

李爽,周真伊,许婷,龚妙岚,周依婷

中国银联股份有限公司

 

 

摘要:

2016年VR元年虚拟现实高速蓬勃的发展,但因VR硬件的瓶颈带来诸如移动受限、眩晕症,使得其发展由热浪期转为寒冬期。本论文在分析总结虚拟现实体验的痛点、内容丰富程度基础上,从交互方式、设计原则等角度进行深入研究,达到规范虚拟现实界面的设计、提升用户沉浸感及体验的目的。最终以移动支付场景为应用对象进行了虚拟现实界面的概念设计,为不同行业的虚拟现实产品的开发指引了方向。

 

关键词:VR,痛点,交互方式,设计原则,移动支付

 

 

一 内容发展

1.1 发展背景

随着虚拟现实技术的发展,VR在娱乐与教育、医学、建筑、军事等领域有着越来越广阔的应用场景。但因技术原因,VR仅适用于轻交互,这也导致了内容发展的局限性,在这样大环境下,2018年VR电影仍蓬勃发展,其避开了非自然的交互方式、技术限制的短板,将其沉浸感的优势发挥得淋漓尽致;VR与教育的结合能极大地解决学习资源和空间不足的问题大大推动教育的发展,虚拟场景中师生实时互动促进主动学习;在医学和建筑等专业领域不仅可以通过VR模拟还原真实场景,还可以通过眼动交互的方式释放双手。

1.2VR用户体验

VR中的用户体验主要体现在VR产品适用的沉浸感、舒适度、多通道整合的交互方式、有效可靠的反馈等方面.保证舒适度可以从眩晕、延迟方面着手,而提升沉浸感则需要综合考虑界面、交互方式、动效、音效等。舒适度及沉浸感很大程度上取决于VR眼镜的显示技术;此外,VR界面不仅仅需要可操作的界面,更需要营造一个看似真实的场景,设计师进行VR界面设计时必须考虑到沉浸感的特性,这也决定了交互方式、界面最佳尺寸及交互的准则。

为了增强用户在虚拟环境中的沉浸感,VR中的显示技术需要最大程度地还原人眼对深度、颜色和纹理信息的感知,现有的分色、分光、分时、光栅以及全息投影等技术能通过模拟双眼视差产生立体感的过程构建立体视觉效果。然而有了“立体感”还不足以产生“真实感”,“真实感“可以通过真实感绘制技术来呈现。当用户移动视点时,主要通过纹理映射、环境映射、预测计算等技术快速绘制出与真实场景中质感相似度很高的图像,极大程度地还原场景中物体的纹理和光照等特征,并且通过视点同步来模拟现实中的感知。

在设备发展上,需要专业的立体显示设备增强虚拟场景的沉浸感,如头盔显示器、立体眼镜和全方位显示器等。为了进一步增强沉浸感,VR相关设备不断轻量化和提升移动性,如HTC Vive、Oculus Go一体机等,摒弃了繁杂沉重的设备束缚,让VR体验更轻量、更易用。

1.3 交互方式

虚拟现实最大的特点在于它带来的沉浸感。图形图像技术生成三维立体的虚拟环境给用户带来逼真的视觉感观,此外,自然舒适的交互方式对沉浸式体验也起到重要的作用。虚拟现实的多维特点注定了交互方式多样性,同时随着技术发展和产品升级,触摸操作、语音识别、3D手势、眼动识别等交互解决方案在VR领域得到广泛应用,VR交互呈现出百家争鸣的局面[1]

通过文献综述法分析了VR九种交互方式[2],如动作捕捉、触觉反馈、眼球追踪、肌电模拟、手势跟踪、方向追踪、语音交互、传感器、真实场地。相比较而言,眼球追踪交互方式更自然、及时有效,且技术发展较成熟,高清的视觉体验较好的缓解了眩晕症;而其他交互方式都有不够精确、门槛高、不够舒适及场景受限的问题。综合来看,眼球追踪交互方式或在未来VR的体验优化发展中起到至关重要的作用。

 

二. 眼动交互在VR上的运用

2.1 人机功效学分析

对比VR的其他交互方式,眼动交互更为自然,更符合沉浸环境中用户的使用习惯。界面信息要素可分为不可交互的信息元素和可交互的控件,而用户在人机界面中对这些元素、控件的处理行为是遵循视线点流操作的。用户对不同界面的信息处理视线点路线是由界面布局决定的,针对搜索型网页,用户的视线流是遵循如图1(a)中“F”型模型的;而对于如图1(b)的社交类网页,用户处理信息的视线点路径是以中心为主,然后向左、向右方向依次转移[3] 。相比较而言,“F”型搜索型网页是因为算法智能排序,将最优搜索方案置顶处理,让用户行程了这样的处理信息的习惯;而社交类网页更具有普适性,用户对陌生信息的处理首先在中心点获取焦点,然后视线按照从左到右的顺序进行转移,最后视线点回到界面顶部定位导航,导航帮助用户精确定位目标信息。

 

    

    (a) “F”型搜索型网页        (b) 中心型社交类网页

图1 不同类型网页的视线流

 

眼动交互过程中,任务流的操作元素由不可交互信息元素、可交互控件组成,其中可交互控件可通过设置视线点驻留时间阈值来进行是否进行眼动交互,从而避免米达斯接触的问题——用户是有意识发起眼动交互还是无意识的走神。任务流眼动交互操作中相邻元素间的距离与交互时间是正相关关系的,却不是简单的线性正相关。前人在指控界面的时间预测模型的基础上,根据眼动交互相应实验得出了任务流眼动交互中相邻两元素的眼动交互时间与两者的间距之间的回归模型t=0.705*D0.28,交互设计师可以根据此模型,带入相邻两元素间距来推算理论眼动交互时间,从而对界面元素位置进行合理的规划,利用统计学、人机工效学、计算机科学等交叉学科知识完成界面元素的布局优化,构建最优视线流路径[4]

本课题使用瞄点结合驻留时间的方式进行眼动交互,用户可以通过瞄点精准的定位VR场景中的元素,提升了系统的可靠性。VR场景有最舒适的视角范围,其界面仍然沿用了传统的界面元素,只是添加了深度Z轴方向的效果体现,因此视线流的原理仍可沿用,其任务流的眼控操作仍然可以利用该模型进行推算眼动交互时间。

2.2 环境友好、易用性

体感手柄、VR触摸板等外置交互硬件大多需要用户进行盲操作,不仅打断了用户沉浸体验的过程,同时这种非自然的交互方式没那么可靠,且学习成本较高,虽然在现今技术受限前提下具有较高的效率,但其可以性与提升沉浸感背道而驰。

眼动整合语音或其他交互方式的多通道整合方式将是日后技术革新后的发展趋势,它降低了单一通道的负荷。前人基于unity进行了多通道可拓展的眼动交互系统的开发及眼控界面相关实验的研究,而unity游戏引擎是VR开发的利器,语音识别、体感交互、手势等交互方式的整合只需要在项目中引入不同的SDK即可实现。百度语音VR浏览器很好的印证了这一发展趋势[5],而设计师面临的挑战是如何合理的在不同场景下整合多通道的交互方式让VR使用环境更友好,更易于使用。

 

三. 增强沉浸感

VR体验与沉浸感关系密切,本着提升用户体验的原则,课题总结得出四种提升VR沉浸感的方法,交互设计师主要从设计方法层面进行考虑。

3.1 屏幕技术工艺

VR头戴显示是一种新型显示技术,成像机制不同于传统平板显示,它形成放大的虚像,而传统显示则为实像,VR技术和产业链超出传统的平板显示范围。VR成像系统有以下特点:

(1)可穿戴,小型化而实现大尺寸高清晰画面,非常适合移动互联时代需求。

(2)技术交叉性强、门槛高,综合集成电路、新型显示器件、成像光学、超高精密加工和装配、视觉学、人体工学等。

在目前VR领域中,像源系统主要是手机设备,手机屏幕中LCD屏使用较多,高科技产品多采用低温多晶硅技术,能达到较高的精度,并保障屏幕具有较高的PPI(每英寸拥有的像素数目)。另一种拥有更多PPI的微显示屏,通过光学技术来放大图像。这两种屏幕都会用在VR眼镜里面,可以形成超过100度的视场角,从不同的技术工艺来提升沉浸感;但是超大的视场角会带来一些问题,比如彩虹效应及像素颗粒感[6]

3.2 场景效果

在AR/VR中场景制作分为真实场景和三维渲染场景。前者场景制作方式主要用于如公司、学校环境展示,通过实景全景拍摄可以带来足够真实的体验。另外一种三维渲染场景主要应用于房产家居样板房展示以及游戏场景,此类场景要带来良好的沉浸感需要建模比例与真实物理世界相符,建模渲染逼真细腻。其中相关的PPD(每度像素度)的值直接影响场景效果,PPD的值越大场景细节显示的越精细;而PPD大于60时会屏幕才不会有颗粒感,人眼的PPD达到了50,而市面上HTC Vive、Oculus和PSVR的PPD都不大,因此现有屏幕去除颗粒感还是比较难的。

3.3 FOV视场角

在VR中FOV(视场角)就是代表了人眼所能看到的范围,通常FOV越大带来的沉浸感就越好,但要综合考虑用户体验,人在舒适的角度下进行VR的体验会拥有更好的沉浸感,不会因脖子扭动幅度过大、不舒适头部姿势引起不适感.如图2所示,当人头保持不动时的视野范围:在水平方向上,眼睛静止时视场角为约120°,转动时视场角为约200°,最佳视场角为60°;在垂直方向上,眼睛静止的视场角为55°,转动时为120°,最佳视场角为30°[7]

 

 

图2 最舒适视场角范围

 

参考Oculus的VR设备的界面设计尺寸,如图3所示,黑线框表示的是单眼设备屏幕的大小,红色虚线框是人眼所能看见的区域,灰色区域是理论上人眼所能够看到的区域。实际上人眼可识别范围是在红框区域内的,红框外所看到的都是漆黑一片,注视这区域可能会造成眼部不适,而且不适合阅读,不建议将高频且重要的界面元素放在此处。浅蓝区域是人眼在舒适转动范围内所看到的区域,或者是在眼睛不动的情况下所看到的区域,这部分区域适合放置界面元素,既不会造成眼部不适,也不会遮挡到场景,干扰用户执行主任务。深蓝区域是人眼最舒适状态下所看到的区域,当用户的主任务是界面操作时,可以将重要的界面或者高频操作的界面元素放置在该区域。

 

 

3 Oculus VR设备单眼设计尺寸

3.4 舒适的空间距离

当用户在VR场景中,很大程度上是在模拟物理空间,意味着场景中的元素需要符合现在世界的透视规则,同时元素需要有一个舒适的浏览大小。距离眼睛0.5米以内的东西很难吸引人的注意力,超过20米将失去立体感。针对现有的VR技术,VR世界中距离人眼2米的物体最容易引起注意。2米到10米之间的物体是视觉感官的舒适区。因此,合适的空间距离在增强VR世界的真实感、提升用户的沉浸感方面有重要的作用。

 

四. VR交互设计原则

4.1 关心用户的生理感受

当人体运动时,生理上会产生三种重要变化。第一、视野变化。如果你移动到一个物体面前, 在你的视野中, 这个物体会变得更大。第二、前庭系统会有所反应。例如, 当你运动时,内耳结构振动, 告知大脑这一信息。 第三、皮肤和肌肉将发出感知信号。这些信号会描述你在空间中的具体位置传达给大脑。

VR中的不当设计会让人体的生理系统产生紊乱,继而引发恶心、耳鸣、晕眩、视力模糊等模拟症,严重的甚至有生命危险。避免出现以上危害到用户身心健康的状况,是进行VR设计的基本原则。

4.1.1 始终保持头部追踪

头部追踪可以保证在虚拟现实的世界中,用户周围的物体都被固定在在相应位置上,来模拟真实世界中以自我为中心的被环绕着的感受。而一旦停止对用户头部的追踪,即使是一小会儿的暂停,都会引起某些用户的不适。不仅仅是用户头部的旋转角度,对于三维世界中二维物体的渲染也需要注意对其缩放、倾斜的追踪。如果头部追踪意外暂停或无法启动,让屏幕淡出变黑并保持声音反馈是比较好的做法。及时给予用户提示信息,引导用户接下来的操作。

4.1.2 匀速运动

在虚拟现实的界面设计应尽量保持匀速运动,如果用户看到加速或减速运动,身体却并不能感受到真实世界中的加速或减速运动,这种所见和所感的巨大差异会引发用户的不适。

4.1.3 设置固定参考点

如果用户在虚拟现实的世界中看到某个运动着的物体,可能会认为自己也在运动。所见所感的差异可能会引起用户的不适。因此一个讨巧的办法是,设定用户身处一个驾驶舱、坐在一张椅子或其它固定着的物体上,这样即使用户在虚拟现实的世界中看到了运动着的物体,也会认为自己是固定的。值得注意的是,当用户需要体验剧烈运动的时候,让用户自行启动运动好过于被动接受。

4.1.4 过渡性变化

当用户身处一个安静的环境时周遭突然变得十分喧嚣、当用户从黑暗的环境中突然看到光亮,都会引起用户的不适。此时就要特别注意不同的两种情境中的过渡性设计,包括声音、视野在内的五感都需要慢慢一个循环渐序的过程,才不会产生突兀的感受。

4.2 回归自然的设计方式

和传统的2D平面设计截然不同的是,虚拟现实是以用户为视觉的3D设计模式,这意味着传统的鼠标点击、拖拽页面以浏览内容等交互方式不再适用,新的回归自然的设计方式即将来临。

4.2.1 舒适区设计

虚拟现实中界面通常按照环幕形式布局,设计范围理论上是无限的,如何引导用户的焦点和注意力就成为了新的设计挑战。如图4所示,我们计算得出环幕距离人眼3m时用户的使用感受较为舒适,且用户正视前方,不转动头部或眼球时视场角为60°,那么环幕高度1.6m左右最为合适,弧线长度则不宜超过11.5m.超过此范围,会使用户频繁地转动身体、抬头低头来查看内容,减少了留存率。

 

图4 unity中场景搭建实例

4.2.2 即时反馈

2D时代的我们最常见到的产品反馈方式是文字,比如弹窗,而在3D世界中如果只使用文字反馈的话,效果就十分差强人意了。我们需要从多个纬度去及时地给予用户合理的反馈信息。虚拟现实界面设计中一个比较基础的交互方法是十字光标,当用户的目标注视某个物体时会浮现出十字光标,表示暂时选中了这个物体。用语音朗读的方式代替单纯的文本文字是一个比较好的方法,避免了文字有时难以阅读的问题。背景音乐是一个十分有用却常常被人忽视的设计要点,我们可以在不同的情境下搭配不同的背景音乐以调动用户的情绪,并给予心理暗示。视觉反馈是最容易让用户感知到的,比如路口的指示牌、比如黑暗中的一簇光。触觉反馈也是我们必须考虑的,比如我们在虚拟现实的世界中射箭,可能需要真的两手像射箭那样控制手柄,手柄上传来的力度则告诉你,你拉开弓弦到了什么程度。

4.2.3 独立的沉浸式空间

从哲学的角度看空间,它可以改变人们对事物的理解,甚至可以说空间赋予了世间万物的变化属性。你设计了一个什么样的场景空间,用户就会有什么样的感知体验。交互和空间环境是紧密结合的,你的设计不能超出这个场景的范畴,否则用户就会“出戏”。比如游戏地图可以被设计成玩家手里的雷达,用户可以被设计成在家中观看影片。空间属性是虚拟现实和传统二维屏幕上的设计最大不同点,如何让用户更好地去理解、去融合进虚拟空间,从而获得全新的沉浸式体验,是未来VR设计最吸引人的一点。也许黑客帝国的未来并不遥远。

 

五. VR支付概念设计

通过前期的调研、分析及总结,挖掘出VR界面设计痛点问题主要是沉浸感不强、交互方式单一及VR
交互设计原则的贫乏.本课题充分利用设计前期研究成果,综合参考视场角、舒适空间距离、交互设计方式及原则进行了VR场景购物流程的概念设计.

如图5所示的VR场景购物流程,简化的情景场景按照“进入超市场景-找到正确货架-挑选商品-完成支付”完成购物支付,但不同的是:VR场景中用户的操作是自发完成的,所有触点均为虚拟的物体,而没有传统购物的导购员、收银员,因此VR场景中导航与交互的引导性显得尤为重要。

 

 

图5 VR超市购物界面流程图

 

5.1 具体流程界面细节

(1)寻找货架流程

不同于现实超市购物的场景,VR的体验应尽量避免人物的移动,保证人在VR操作过程中身体不会触碰到其他物体。如图6所示,为减弱用户在传统大型超市中寻找货物架的过程,提高寻找货架的效率,通过“跳板式”导航平铺不同货架类型,卡片设计将不同产品货架分门别类,让用户能快速找到目标商品的类别,通过眼动轻交互的方式进入实际场景页面。这种“跳板式”导航在VR界面中更易于被接受。

 

 

图6 寻找货架流程界面展示

 

(2)选择心仪商品流程

分析诸如淘宝、京东、网易严选等电商购物app,其购物流程大同小异,遵循“选择商品-添加到购物车-选择邮寄地址-选择支付方式-完成支付”的流程。通过购物车的概念模型,更贴近用户使用习惯,本课题的VR概念设计是一种即兴的体验,旨在弘扬支付方式正悄无声息的迎合不同场景的需要,弱化了购物车及邮寄的流程。

如图7,用户注视某个商品,被选中商品名标签高亮显示,而为选中商品名标签透明度降低,保持视标落在被注视标签1秒后显示商品详情。用户浏览完商品详情后,视标落在立即购买按钮上,按钮由红色变为橙色的选中状态,保持注视一秒进入选卡支付流程模块。

 

 

图7 选择商品流程界面展示

(3)选择银行卡并支付

主流的线上支付方式以银行卡、第三方支付方式为主,用户会参考不同支付方式的优惠信息及各人喜好进行选择。不同于移动端交互设计,VR场景中的界面更宽广,但因设备及技术本身的限制,仍不建议在VR场景中进行复杂交互,因此虚拟现实界面的设计更倾向于轻交互的方式,信息架构层级结构不宜过深,界面元素尽量以平铺的方式代替移动端因屏幕受限而隐藏的设计方式。

如图8所示,主支付流程为“选卡、优惠方式-确认信息-确认支付”,选卡过程中所有可选银行卡平铺展示,用户通过注视停留完成银行卡、优惠方式的选择;在确认支付前,用户再次核对商品信息确保无误。

 

 

8 选卡支付流程界面展示

 

六. 总结

本文通过对VR内容发展、交互方式的总结分析确定了眼动交互方式,并参考眼控界面中的时间预测模型、Google Cardbord设计规范,以超市购物支付场景进行了概念设计及分析总结,为设计师进行VR界面设计指引了方向。

 

 

参考文献

 

[1] 林美炳.谁是未来VR主流交互方式?[N]. 中国电子报, 2016-9-9(001)

[2] 半导体动态.9种AR/VR交互方式解读 让你更加了解透彻AR/VR - 全文[EB/OL]. http://www.elecfans.com/vr/537760_a.html,2017.

[3] J Nielsen. F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)[EB/OL]. https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

[4] 李爽.眼控界面的设计及评估方法研究[D]. 东南大学, 2018.

[5] 谢郑凯,彭明武.设计未来VR虚拟现实设计指南[M]. 北京:电子工业出版社, 2017.

[6] 3分钟了解AR/VR眼镜显示与光学技术[EB/OL]. http://www.pieeco.com/news/2020_1.html,2016

[7] VR虚拟现实最佳视场角[EB/OL]. http://benyouhui.it168.com/thread-5721109-1-1.html, 2016.

 

 

UXPA中国会员登录

记住我

第三方登录

×

微信登录

×
请使用微信扫描二维码登录 “UXPA中国官网”

下雨的春天

已使用微信登录(更换账号)

×

会员密码找回

×