[自译]VR 设计实践

在Media Lab的作者分享了他在本科项目中对VR设计实践的一些思考,阅读后能够帮助对虚拟现实中的体验设计建立一些基础的认识,其中对地形特征(terrain features)和标线(reticle)的交互解读让我感觉收获颇多,与大家分享。

1472565209-1081-658161-1c876fba8752b457

原文链接:Design Practices in Virtual Reality

原文作者:Jonathan Ravasz

虚拟现实技术(VR)已经获得了很大的发展动力,然而还是缺乏方法和设计上的最佳实践。在我的本科项目中,我关注的更多由VR技术带来的用户界面(UI)和用户体验(UX)带来的机会和挑战。

历史上的数字界面,已经是为了2D屏幕和硬件的需求而定制的。设计师们一直在显示的框架内去匹配内容和导航方式,将我们在真实世界中的体验转化为icon或其他的UI元素。逐渐发展的虚拟环境,如果都是2D元素将会影响VR提供的沉浸体验。为VR设计不应该是从2D实践转化到3D,而是寻找一个新的体系。

我的研究基础是基于文献来探索人类认知与环境的,比如James J.Gibson的“生态视觉感知方法”,John Zeisel的“调查设计”,Gaston Bachelard的“空间的诗”。尽管环境心理学的核心文献写于70年代,但是这些知识还是完全适用于虚拟现实的。

设计师应该扩大自己的专业知识,在不同的领域上,例如心理学、建筑、声音设计、照明设计和物理,为了能够创建完全可控的体验,通过塑造虚拟环境在VR中引导用户。

在我的项目中,我设计开发一个简单的VR体验,通过在一个中立的虚拟环境中通过用例来解决这些问题(类似于google在Cardboard Design Lab应用)。

以下的用例只会覆盖各种各样的新交互和VR解决方案的一小部分,同时新兴的混合现实(MR)也将会打开新的可能性。尽管在VR和MR之间会有UI和UX设计的重叠,都会是设计师们对技术需求寻找新的方法。

这些媒介的未来,取决于它们的内容。当前大多数的虚拟现实体验,都是裸露的真实生活的模拟。但是在繁荣的新技术尘埃落定后,内容将会适应媒介的新规范。这个即将到来的阶段,又需要新的设计解决方案,但是我们现在需要做的,就是专注于研发公司建立基础。

VR的设计解决方案

地面的作用

“当一个飞行员在云中的时候,看不到外面的飞机,他是非常迷茫的;当飞行员飞出了云后,看见了地面和地平线上的天空,飞行员就可以确定自己的方向。”(James J.Gibson,2015,p.19)。用户同样会在很差的虚拟体验中,遇到这种设计不良的情况,造成不可避免的晕眩感。VR中地面的层级关系和物理世界一样重要。

1472565260-7625-658161-cfce32017d32a297

大气

大气(空中)角度可以帮助用户来理解虚拟环境的规模,因此体验会更加自然,这哥现象的概念很简单:“一个物体越远,在大气中就会看得更加模糊,使对象远看起来的轮廓没有那么清晰,会比近物看起来更蓝一些。”(E.Bruce Goldstein,2013,p.230)。这个现象是一个深度和距离逐渐衰落的明确线索。

1472564873-9224-658161-4fd29b7073c31d2e

Masaccio使用大气透视来创造深度的幻觉

地形特征

James J.Gibson在他的著作《生态视觉感知方法》(p.62)中将地形特征分为了八类:

地面很少是一个开放的环境,通常是混乱复杂的,在一个开放的环境中,允许向任何方向运动,而在一个杂乱的环境中,只允许在一个开口的方向运动。

路径提供行人从一个位置移动到另一个位置,在不同的地形之间移动。

障碍物可以是一个动物大小的对象,提供碰撞。

水畔会组织行人运动。

峭壁或是悬崖的边缘,是一种限制的方法,表示危险区域,行人和动物应该避免去这些地方。

台阶与相邻的台阶组成了上升或者下降的通道。

斜坡能不能负担起行人的运动,依赖于它的坡度以及表面纹理。

1472565301-2558-658161-ec280ced78ef1ea4

地形特征:开放,路径,障碍,屏障,水畔,峭壁,台阶,斜坡

使用这些可控的特性,作为模块来搭建设计虚拟环境,会让VR体验很自然的执导人类的直觉。

通过音景引入用户环境

在虚拟现实中实现环境变化是很容易的,但是这些突然和压制性的变化会让用户混乱而且引发疾病。可以尝试通过淡入的环境音景温和的介绍新环境,然后再对图像进行变化。这通过声音建立了一个对图像的心理环境预期,降低冲击因素。

通过物体指引用户

在嘈杂的环境中去通过一定的路径导航用户,如果没有使用一些传统的指引UI元素是很困难的。但是使用了这些元素又会打破沉浸式体验。所以可以常识环境的细微变化,例如种满了花的地面上有一条空出来没种花的路径,这样是为了吸引用户关注正确的路径,仍能保持环境的真实。这些提示应当与环境相融合。(花不会出现在火星表面)

1472565038-8533-658161-a811864e5576e350

Firewatch的红花引导用户沿着正确的方向。

环境标线

在无追踪VR(e.g.Gear VR,Google Cardboard),使用标线是为了显示用户视线的指定点。它也用户运动和与对象交互。这些特定的任务需求标线会有不同的反应。

空闲状态-空闲状态时标线应当尽可能的小,只给出一个提示中心在哪。

运动-标线应当从用户熟悉的地方激活。当这样做时,标线应该转化成一个更大的指针,从用户的角度来考虑,高亮选择区域通过一个圆圈投影。

1

空闲状态与运动状态的区别

与对象交互-当用户关注到一个可交互的物体时,标线应该做出反应

2

空闲状态的转换与可交互标线

标线色值-标线应当根据背景亮度来调整它的颜色,在亮与暗之间切换模式,保持在照明条件下的可见状态。

对象作为标线-通过特定的3D对象来取代标线可以是一个很简单的提示交互(例如,将钥匙取代标线来打开锁)。

3

3D对象替换标线作为特定的交互

交互对象

如果不是全部对象都能产生交互,那么应该暗示用户哪些对象可以与之交互。情景下的标线可以在这种情况下提供帮助,但是在某些场景下味了避免混淆,交互对象也应该改变。这可能是一个物体阴影的小改变,甚至是看着它的同时一个微妙的声音描述它的行为(例如,隐约点击电灯开关)。

4

注视的时候可交互对象被激活

结语

虚拟现实正在成为一个有影响力的新媒介,就像在过去一个世纪力的收音机和电视那样。我们有机会去构建基础的界面,体验,和交互原则,而不是去将那些已经存在的解决方案认为理所当然。

引用:

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.

原文作者的个人站点:jonathanravasz.com

文/ShusQ(IAMUE翻译编辑、作者)

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/17262/

(0)
iouedioued
上一篇 2016-08-30 15:27
下一篇 2016-08-31 09:38

相关推荐

  • 浅谈视觉设计与用户体验的统一

    Dribbble,国内比较追捧的媒体。上面聚集了很多项目的视觉设计图,有的配色很漂亮,有的表现手法很新颖(一定程度上会激发我们灵感的火花),但我们在不了解设计场景、目标的情况下是无法判断出这样的视觉设计是否最终解决了用户的问题。脱离业务场景的设计是没有生命力的更谈不上产品体验、服务体验,只有视觉和体验统一起来才能更好的占有市场,设计才具备了商业价值。

    2017-05-24
  • web图像的常见应用策略与技巧

    本文介绍一些关于响应式图像的适配应用策略,回退原理,SVG的换色技巧,雪碧图的百分比定位计算公式等相关的一些小知识点,目的在于帮助一部分同学快速的理清图像应用思路,以及一些web图像的应用技巧。data-src
    data-srcset
    在加载到的时候更换为
    src
    srcset容器元素的尺寸:elW * elH
    单张图片的尺寸:imgW * imgH
    Sprites图片的尺寸:spritesW * spritesH
    单张图片在Sprites图上的位置:imgPosX, imgPosY点的位置为 (x, y)
    容器上的(x, y)点与容器左上角的距离为 cX, cY
    Sprites图上的(x, y)点与本张图片左上角的距离为 sX, sYelW = imgW, elH = imgH
    cX = sX, cY = sYcX = elW * x
    sX = spritesW * x – imgPosX
    elW * x = spritesW * x – imgPosXx = imgPosX / (spritesW – elW) = imgPosX / (spritesW – imgW)
    y = imgPosY / (spritesH – elH) = imgPosY / (spritesH – imgH)

    2017-05-01
  • 【竞赛结果】2017 年度UA创作奖 · 概念设计国际竞赛最终结果

    来源:城市建筑竞赛题目:UA城的滨水居住建筑2017年度UA创作奖•概念设计国际竞赛由《城市建筑》杂志社主办,哈尔滨工业大学建筑设计研究院承办。组委会于2017年11月发布竞赛题目,共收到672个团队的注册参赛信息,至2018年1月15日止,共收取375份作品。本届竞赛评审分初审、通讯评审、现场评审、网络公示、评审委员会复议等阶段进行。初审遴选出362份有效参赛作品,其中前8所通过全国高等学校建筑学专业教育评估的学校学生报送作品63份,...

    2018-03-27
  • 不为动而动!动态效果在体验设计中的应用

    现在在网页和H5中使用动效已经成为一个大的趋势,随便打开一个H5都会看到一大堆跳动的元素在那里向你招手:看这里!看这里!但在这样的滚滚大潮当中我们是否应该思考一下:真的需要这么多的动效么?为什么需要?需…

    2016-07-06
  • 情绪板的制作方法:写给设计师的全方位使用指南

    在设计上图片比其他要素更容易让人理解,所以我们可以利用情绪板(英: Mood Board),来使设计工作更加流畅,缩短制作的时间、改善工作流程。

    2017-05-11
  • 交互设计中几个要注意的关键词

    作者:Guibin@DesignGB   sprint “罗马不是一天建成的。” “千里之行,始于足下。” 将一个大问题,拆解成很多小问题,一点一点实现并验证可行性,一个版本一个版本改善,用迭代的思想输出成果。越早交付价值,就越早…

    交互专题 2017-08-07
  • 交互设计师的60日计划第十四天

    精神状态不好,效率略低。 20150812 门槛越高,交互设计师越难被替代 to b的产品相对to c的产品来说,门槛会高很多。做to b产品的交互设计师要了解许多复杂的背景知识,了解完全不熟悉的用户群体,才能开始着手做设…

    交互专题 2015-08-20
  • 阿里交互新手小记 | 交互工作流程的梳理

    头疼就是脑子里有什么正在激烈地进行改变,可能就是你从困难上学会的东西。—— 写这篇文章的人

    2017-05-23
  • 泡泡UI英语:交互设计精髓1

    最近在读《About Face 4:交互设计精髓》,他全面系统地讲述了交互设计过程、原理和方法,涵盖内容广,刨析知识深,被奉为交互设计指南。也正因为如此,大量的专业词汇给阅读造成了不小的难度,推荐大家双语共读,…

    2017-08-01
  • 五个技巧,设计优质的新用户引导流程

    新用户引导绝对是个瓶颈。花费时间设计和开发,找了用户测试调研,最后上线了,依然拦不住汹涌的用户流失潮。很多时候,也许只是新用户引导没做好而已。今天的文章,我们来聊聊新用户引导的设计~新用户不去注册是因为他们乐于了解你的产品的UI是如何工作的。他们注册是因为他们认可你的产品所呈现出来的价值。好的空状态设计,能够化腐朽为神奇。

    2017-05-09