专业知识分享其他

沉浸式体验的线框3D交互如何设计?

2020-09-2911 MIN READ原载于微信公众号 ↗

设计VR的两个主要基础是:“沉浸感”和“存在感”。

沉浸感

在VR中,我们作为设计师可以进行360度全方位设计,但要从用户角度考虑。仅仅是因为画布很宽,并不意味着我们必须填充它。为了使UX方便,有一个名为“ Affordance Canvas”的模型。

如果我们设计成完整的360度或180度,则可能存在理解问题。90度视野是实现良好沉浸感的理想设计方法。让用户尽量“少运动”是一种更好的VR体验,因为如果不小心进行,运动可能会“破坏存在感”。

(当观看者的视线受到限制时,他们会更加注意细节)

一项完成的研究发现,视野有限(90度)的参与者能够从他们所看到/经历的场景中回忆几乎每个场景。

好奇心可以说打造VR沉浸体验感中最重要的方面之一,因为它迫使你呆在一个固定的位置。前30秒,至关重要的是构建故事线并建立用户的好奇心。想象一下进入一个场景,你已经在一条繁忙的街道上,环顾四周,却无所适从。没有负担,没有好奇心。那么现在,我们想象一下,我们正在进入一个在森林,你对面有一个小屋,上面有个灯点亮,一个人(可能是食人族)正进入一个小屋,尸体横在他的肩膀上。这肯定会使您感到好奇(或感到害怕),这可能会导致您躲在树后面并等待一些东西出现。

所以当我们建立好了沉浸感之后,下一步,就是打造故事线。

建立故事线

建立故事线时,想想5W。

Who, what, why, when and where?

皮克斯有一个快速的讲故事指南,内容如下:

快速讲故事指南-皮克斯

正如你所看到的,其中许多都是采用电影行业的,因为一旦我们将用户置于VR中,就是一种沉浸式体验。体验如何?这就是电影制片人一直在做的事情。

与电影的“故事弧”类似,这里有一个VR故事弧,这就是它的发展方向。

您可以通过场景/故事引起用户中好奇心来开始场景。然后,通过提供帮助他们导航的线索/提示(功能)来帮助他们进行探索。在体验的过程中,你可以引发危机,例如打架或汽车突然闯入。在这一点上,用户可以完全沉浸其中,可以执行任务/任务。最后一部分是完成任务后的成功感。

故事节拍

3D交互的首要规则是用户必须能够做自己认为可以做的所有事情。想象一个沉浸式的体验,你坐在虚拟办公室中,桌上放着一堆书。

VR中的虚拟办公室

可能桌子上的书分散了你的注意力,你想清走它们。但如果你不能这样做怎么办?这是你必须避免的“沉浸中断”。如果用户无法控制这种自然的人机交互,就会感到烦恼而不会沉浸其中。

沉浸中断

沉浸式体验设计师/开发人员不考虑的事情之一就是体验变得异步。以下是一些可以做到这一点的方案。

场景1:

生物中断:考虑人们可能会暂停体验的情况。比如,他们要去卫生间,需要接电话,或者有人从背后喊他的名字,等等。这些是可能会破坏沉浸感的断点。

游戏暂停

解决方案:

一旦发生这种情况,要让用户知道他从哪里暂停。可以将体验保存到该点(游戏),或提供最后的“离开”线索,又或将体验倒退5-10秒,以便用户再次进入相同的流程。

场景2:(尤其是MR)

想象一下,当你用全息镜头以“少数人报告”的方式进行工作时,你感到精力充沛。当你的手从左向右移动(反之亦然)时,你的家人经过,你撞到了他们。

使用HoloLens-MR

解决方案:

正如我们所知,MR使用现实世界的空间理解来叠加体验。因此我们可以想一下,如果一个人与全息结构相距1米,那么这个结构就会被冻结。这样用户和其他人就是安全的。如果用户不希望发生这种情况,则可以从设置中更改。

MR案例

尤其是在为MR设计时,必须在不同的位置和空间进行测试。正如我们所知,MR使用的是现实世界中的空间理解,如果你设计的MR体验可以在客厅中完美进行,但在卧室中却很糟糕,会怎么样?

可能会:

1.需要精度-难以支持复杂的交互

2.将手举到胸部以上通常会导致“用户疲劳”

3.手势被误解

线框3D交互

现在,我们来看看对3D交互和体验进行线框图绘制的有趣部分。

就像我们有用于UI / UX设计的故事板一样,我们也有类似的VR故事板,从VR的角度看交互。

线框图3D VR交互的重点是指定3件重要的事情:场景、空间和可供性。

1. 场景

用户戴上耳机后,会看到什么?是带有菜单的灰色房间?还是在一个海滩上开始故事?简介是什么样的?

来自“Blood Trail”

2.空间

空间是什么样的?它如何模拟现实世界?与物体的距离?我们在看什么方向?我们是从顶部体验吗?还是中心?或更低?

3.选择性

用户可以做什么?可以导航吗?如果可以,在哪里实现?哪些项目是可点击的?用户可以采取什么行动?

这些是绘制线框图时必须询问的基本问题。以下是一些线框图模板,可帮助你规划自己的体验。

SaaraKampariMiller的故事板模板

类似于电影的故事板(在VR环境中)

Volodymyr Kurbatov用❤制成的空白线框图模板:)

考虑到FOV等的线框图模板

线框练习

为了进行有趣的练习,让我们实际体验一下。我是在人机交互课程中进行此练习的,任务是设计“协作会议室”体验,下面是我的学习方法。

开始

场景1

在一个雪天,用户的出租车停在纽约市一幢高层建筑外。用户进入建筑物并走进电梯。

场景——离开出租车,进入建筑物走进电梯。

选择性——没有,只是体验场景的发展,直到他进入会议室。

场景2

当用户在会议室内向右看时,听起来好像是咖啡机正在煮咖啡。他可以点击机器,然后咖啡就会放在办公桌上。

场景——到目前为止,会议室是空的。

选择性——可以与咖啡机互动。

场景3

他环顾四周,左边有一个iPad,屏幕保护程序显示“开始会议”。

场景——环顾四周,注意到iPad、白板等元素。

选择性——可以与iPad互动。

结束

场景4

一旦用户点击“开始会议”,他的“左前方”就会传出开门的声音,就像有人正在进入会议室一样。这里启用了语音通信,用户可以彼此交谈。桌上还有文件、铅笔和橡皮。

场景——同事们进入会议室,桌上摆放着文件和文具,为会议开始营造了氛围。

选择性——可以与其他成员进行语音聊天,点击文档、文具、咖啡机和iPad(以结束会议)。

场景5

用户可以点击一个文档,将该文档投影在前面的白板上,随着会议的进行,他们可以在文档上编辑或删除。

场景——文档投影在白板上,语音讨论继续进行。

选择性——可以编辑文档,覆盖新文档,与咖啡机、iPad和文具互动。

场景6

一旦他们完成(在双方共同决定会议结束后),用户看向iPad的左边,点击“结束会议”,然后开门声音从左前方发出,就好像他正在离开房间。接着,他进入电梯,电梯到了,外面下着雪,他走在纽约繁忙的街道上。

场景——进入电梯,电梯打开,走出大楼。

选择性——点击iPad左侧的“结束会议”图标,体验其余的场景。

3D线框清单

这是我在IDF课程的一部分3D交互清单

如你所见,我已在此会议室体验中选中了我要使用的项目。

演习

就像电影中演员扮演场景的角色一样,下面是一个UX设计练习,鼓励你演习体验。想象将盒子摆在你面前,就像你在VR中看到实物一样,并相应地评估交互。

演习练习

如果你设计了一个菜单项,该菜单项位于视场的底部,那么如何知道用户的脖子是否因连续向下看而变得酸痛呢?这时,这项练习就派上用场了。就像排练的服装一样,你可以使用纸板和其他材料作为设计的道具,并据此评估交互作用。这是一种了解用户可能遇到困难的绝妙方法。

体验要点

如上所述,“场景、空间和可供性”是线框图的基本要素,同样的,“情感、声音和运动”是塑造体验的基础。

情感: 情感能够加深沉浸感和存在感。体验但没有感受到任何情感,那么意义何在?你会沉浸其中吗?情绪能引起情绪。如果你感到某种情绪,它会使你沉浸于一种情绪中。就像听几首特定类型的歌会让你有不同的心情一样,感受到一致的情绪也会使你的情绪变深,从而加深体验。

声音: 就像电影一样,背景声音在塑造体验中起着巨大的作用。以下面的视频为例。

(此处为视频,请在原文中观看)

即使它的画面已经过时了,但你也能够看到声音是如何赋予它逼真的感觉?特别是在21秒钟左右,你会发现当汽车越过木板时,声音是多么的逼真?同样,声音可以帮助你沉浸并加深沉浸感。声音也是一项很好的可供性技术,可以充当体验中的导航器。想象一下在森林中开始你的体验,从最右边可以听到一个声音,这肯定会让你注意到那里,并起到导航的作用。当然,声音过大会使它看起来不自然。

运动: 你在体验中移动的能力会产生很大的影响。想象一下只能向前或向后移动。那真是太糟糕了!尽管运动存在一系列问题,例如加速过快会感觉不自然,但这仍然是体验的关键部分。而且,仅赋予用户以类似方式导航的能力可能令人沮丧。给他们一个选择,可以向前移动5步,而不是仅以一定的速度移动(同时,在移动时请记住加速的速度)。

线框图工具

作为课程的一部分,我还了解了以下用于创建AR / VR / MR体验的工具。我还没有亲自尝试过所有工具,但访问了他们的网站以了解它们的工作原理。你可以参考此列表,看看是否感兴趣。

设计AR/ VR / MR体验的工具

其他发现

正如Gerald McAlister在此文章中指出的,在为VR设计时,有几点需要注意。

· 一旦用户开始体验,就给他们“手”。他们不必等待大约30秒即可等待游戏加载。给他们虚拟的手,这样他们至少可以看一些东西并开始为体验做准备。

· 无法选择我们能够在现实生活中随机选择的对象。如果不能做我们在自然情况下会做的基本动作会感到不自然,这会降低可信度。

原文参考链接:

查看链接 ↗;

作者:BonoQuak

译者:设计小菌

原文请戳【阅读原文】

为尊重版权和译者

转载请联系我们


我 们

服务.体验.交互设计传道者

公众号

「yizhizhaojun」

一只朝菌设计学园

联络微信

平菇老师

「zhaojundesign」

「一只朝菌设计学园」由毕业于清华大学人机交互专业的学长创办,致力于创造卓越的设计知识学习课堂,专注交互设计、用户体验设计、服务设计领域的专业知识教育。

教师团队来自于清华大学、同济大学、上海交大、北京理工大学、北京邮电大学、中山大学、华南理工、江南大学、香港大学、香港理工、台湾科技大学、Imperial、POLIMI、Delft、Oslo、Goldsmiths、Edin、Glas、Manc、Lancaster、Loughborough、Leeds、Arts London、BCU等国内外高校,以及Microsoft、阿里巴巴、腾讯、网易、华为、央视、百度、美团点评等企业集团。

清华大学有训曰:行胜于言。「一只朝菌」谨承母校百年教诲,时刻铭记师者之责,为好学者传道授业,为有志者掌灯引行。

本文原载于微信公众号,正文与配图已转存至本站以便长期访问。 查看原文 ↗

有想具体聊聊的问题?把你的情况说一说。

联系咨询