虚拟现实 (VR) 技术得到了大家的一致认可,然而,当我们做 VR 设计时,还是缺乏好的方法和实践。在我的学士项目中,我一直专注于研究虚拟现实技术所带来的用户界面(UI)和用户体验(UX)方面的问题以及机遇。

传统的数字界面,都是为了适应 2D 屏幕的硬件需求而设计的。设计师一直在让内容和导航适应显示的画面,把我们的现实世界转换成图标和其他的 UI 元素 (Bill Moggridge, 2007). 但是,充斥着 2D 元素的虚拟环境会破坏 VR 带来的沉浸感。 为 VR 环境设计,不是把 2D 的工作转换成 3D, 而是寻找新的范例。

我的研究基于探索人类感知和环境的相关文献,例如 James J. Gibson 的 The Ecological Approach to Visual Perception, John Zeisel 的 Inquiry by Design 以及 Gaston Bachelard 的 The Poetics of Space. 还有成书于 70 年代的环境心理学核心文献,这些知识完全可以用在虚拟现实中。

设计师需要在不同的邻域扩充自己的专业技能,例如心理学、建筑学、音效设计、灯光设计以及物理学,这样才能创造一个完全可控的体验,通过这样来塑造虚拟环境,从而引导用户。

在我的项目中,我设计和开发了一个独立的 VR 体验,使用用例形式的中立虚拟环境来提出解决这些问题的方案(类似 Google 在他们的 Cardboard Design Lab app 中的方法)。

下面的用例仅覆盖了 VR 提供的众多新交互方式和解决方案的一部分。同时出现的混合现实(Mixed Reality)(MR)也带来了新的可能性。尽管在 VR 和 MR 之间,有一些相同的 UI 和 UX 设计形式,但每一个技术都还是迫切的需要设计师提出新的方法。

这些媒介的未来取决于为它们创造的内容。现在大部分的 VR 体验都只是在模拟现实生活,但是等到技术大爆炸的灰尘落下之后,内容将会适应于媒介的特点。这个即将到来的阶段仍将需要新的设计思路,但是现在,我们需要专注于创建一个坚实的地基以供将来建设使用。

VR 设计解决方案

地面的角色

“当飞行员在云层中的时候,窗外看不到任何东西,就十分容易迷失方向。当他飞出云层,看到了大地和天空在地平线处相会,飞行员就可以辨清方向” (James J. Gibson, 2015, p. 19). 在不好的 VR 体验设计中,用户常常会陷入这种情形,从而导致难免的运动障碍。VR 中地面和地平线的关系与现实世界中同样重要。

2-1

大气

大气(空气)透视可以帮助用户理解虚拟世界中的比例,从而使体验更加自然。这个现象的概念很简单:“物体越远,我们看到它就需要穿过越多的空气和微粒,这使得远处的物体看起来形态不那么清晰,比近处的物体模糊一些” (E. Bruce Goldstein, 2013, p. 230). 这个逐渐消失的风景是关于深度和距离的清晰暗示。

3

马萨乔使用空气透视来创造有关深度的视觉感受。

地形特征(Terrain features)

James J. Gibson 在他的书 The Ecological Approach to Visual Perception (p.62) 中,将地形特征分为8个主要类别。

  • 地面基本上不是一个开放环境。它通常是杂乱的。开放环境允许地面上任意方向的运动,而杂乱的环境只允许 开口 (opening)(译注: = 出口+入口) 方向的运动。
  • 路径 (path) 可以让行人在其他地形特征中,从一个地方运动到另一个地方。
  • 路障 (obstacle) 是动物大小的物体,它承受碰撞。
  • 壁垒 (barrier) 是一种特殊的路障,它常常不仅阻碍了运动,还会阻挡视线。
  • 水域 (water margin) 阻止了行人的运动。
  • 断崖 (brink) 是悬崖的边缘,是道路的极限。它是危险的区域,行人和动物都会避开这些地方。
  • 台阶 (step) 是相连的阶梯形式,它可以让人登高,也可以让人下降。
  • 斜坡 (slope) 取决于角度和地面的纹理,也许可以让人通过,也许不可以。

4

地形特征:开口、路径、路障、壁垒、水域、断崖、台阶和斜坡。

当设计虚拟环境时,以可控的方式使用这些特征,像是建筑的砖块一样,将会使VR体验更自然,可以通过人类的知觉进行导航。

通过音效景观将用户引入环境中

在虚拟现实中,彻底改变环境并不费力,然而对于用户来说,这些突然的,像潮水般把人吞没的改变会造成不适和困惑。通过首先渐进环境音效,然后才是图像,可以创造一个和缓的过程来引入新的环境。这样可以先通过声音创造一个环境的心理映像,减少突兀感。

La Jetée (1962) 几乎完全是静止的图像构成的,然而这部电影中音效景观的使用,使观众形成了对该环境的强大心理映像。

使用物体引导用户

如果不使用传统的路径指引UI元素,在一个杂乱的环境中,通过一个确定的路径导航用户可能是一件困难的事情。但是这些元素的使用会破坏体验的沉浸感。然而,环境中微小的变化,例如,在一个区域的入口设计一些绽放的花朵来吸引用户的注意力,使他们走向正确的路径,却仍然可以保持环境的真实性。这些暗示应该是环境相关的(比如花朵不应该出现在火星地景上)。

5

Firewatch 中红色的花朵指引用户走向正确的方向。

上下文十字线(Contextual reticle)

(译注:十字线是望远镜等设备前面那个十字交叉的刻度线,VR设备里展示焦点有时会使用,但是很多时候其实不是十字形状。)

在非追踪的VR设备中(例如:Gear VR, Google Cardboard),十字线被用来向用户展示他们所注视的点。 展示焦点有助于在空间中保持方向感。它也被用于移动或与物体交互。这些特殊的任务迫切需要十字线的不同反馈。

  • 空闲 (Idle) 状态 —— 空闲状态的十字线应该尽可能的小,仅仅是给出一个中心位置的暗示。
  • 移动 (Movemnet) —— 当用户在看他们能看到的地方时,十字线应该被激活。当激活时,十字线应该变成一个更大的指针,使用从用户视角投射的一个圆圈来高亮可选的区域。

空闲状态和移动十字线的区别

  • 与物体交互 —— 当用户将他的注意力转移到一个可交互的物体上时,十字线应该据此做出反应。

空闲状态和可交互状态十字线的过渡。

  • 十字线色彩 —— 十字线应该根据它的背景亮度调整它的颜色,通过在亮和暗两种模式切换来在保证在所有光照条件下的可见性。
  • 将对象作为十字线 —— 用一个特殊的3D项目来替代十字线是一个很好的交互暗示(例如,当希望打开一把锁时,将钥匙作为十字线)。

对于特殊的交互,用 3D 元素替代十字线。

可交互物体

如果不是所有的物体都可以交互,用户应该被暗示,哪些物体是可以交互的。上下文十字线可以用于这个目的,但是,在一些情形下,为了避免困惑,可交互的物体本身也应该作出改变。这可以是物体阴影的微小改变,或者是当你看着它时,一个微妙的描述它行为的声音(例如,对于灯的开关,可以是一个小的开关的喀哒声)。

在被注视时,可交互的物体被激活了。

总结

虚拟现实作为一个新媒介的出现,具有潜在的强大冲击力,就像在过去的世纪中,广播和电视所做的那样。我们有机会去为这个媒介创造界面、体验和交互设计方式的标准,而不必得到已有解决方案的许可。

参考

  1. Moggridge, Bill. Designing Interactions. Cambridge, MA: The MIT Press, 2007. Print.
  2. Google Inc. Cardboard Design Lab. Google Play Store, Vers. 1.0. https://play.google.com/store/apps/details?id=com.google.vr.cardboard.apps.designlab&hl=en
  3. Gibson, James J. The Ecological Approach To Visual Perception. New York, NY: Psychology Press, 2015. Print.
  4. Goldstein, E. Bruce. Sensation and Perception. 9th ed. Belmont, CA: Wadsworth Publishing, 2013. Print.
  5. La Jetée. Dir. Chris Marker. 1962. Film.
  6. Parkin, Simon. “With Firewatch, Olly Moss Brings His Subversive Touch to Video Games.” New Yorker, 10 Feb. 2016.
  7. “Display Reticle.” VR Design Guidelines. Google Design. https://www.google.com/design/spec-vr/interactive-patterns/display-reticle.html.

关于原作者

我是位于 Bratislava 的 Academy of Fine Arts and Design 媒体实验室的一名学生。

你可以在这里找到我:

twitter.com/jonathan_ravasz

instagram.com/jonathan_ravasz

dribbble.com/rjth

以及:

jonathanravasz.com

blog.jonathanravasz.com

everyday.jonathanravasz.com

感谢 Marek Minor 的校对!

原文地址

https://uxdesign.cc/design-practices-in-virtual-reality-f900f5935826