您的位置:主页 > 新闻资讯 > 科技情报 >

WebVR沉浸式内容设计入门、进阶指南

发布时间:2017-08-30 10:19   来源: 映维网

导读:当谈到虚拟现实,增强现实和混合现实时,奥斯丁已经建立了一个亲身实践的流程,用于研究和创造基于新兴技术的沉浸式体验。

  我们有幸就虚拟现实,增强现实和混合现实采访了奥斯丁·奈特(Austin Knight)。奥斯丁目前供职于HubSpot,他是一名国际讲师,出版作家,UX & Growth Podcast的联合主持人,一位UX专家。

  如果你是产品经理;开发者;设计师;作家;心理学家;或认为未来属于沉浸式体验的VR/AR/MR爱好者,你应该继续阅读本文。

  当谈到虚拟现实,增强现实和混合现实时,奥斯丁已经建立了一个亲身实践的流程,用于研究和创造基于新兴技术的沉浸式体验。现在他将向我们分享他自己的个人经验。好了,下面让芬莱科技和大家一起看看这位UX设计师的分享吧。

WebVR沉浸式内容设计入门、进阶指南

  一. UX的未来是怎样子的呢?

  我相信VR/AR/MR是UX的未来(尤其是MR)。在明确这一点后,我希望学习应如何为其进行设计和开发。

  VR是现在三者中最成熟的技术,但VR目前仍处于发展初期,UX模式仍然在定义中。例如,当我邀请Mozilla VR的Casey Yee来到UX&Growth Podcast的时候,我们讨论了链接在VR中的样式。

  所以我不仅要学习如何设计和开发,而且我可能需要自行制定UX模式,也许是帮助定义这一媒介。

  二. 为什么今天的UX设计师需要涉足沉浸式体验呢?

  因为这是一个难得的机会,这使我想起了早期的互联网时代,当时一切都没有定论,一切都在定义之中。考虑到这一点,我很快就确定我希望在VR中进行实验,尤其是WebVR。因为这完全可以访问,我们只需要一个互联网连接和一台设备。这台设备可以十分简单,如廉价的安卓手机或笔记本;这台设备也可以是十分复杂,比如Oculus Rift。WebVR适用于所有人。

  这同时意味着所有人都可以为其开发体验。我主要是远程办公,并需要前往那个世界不同地方。很多时候这意味着我不能接触到最新的技术。

  三. 在VR/AR/MR创建沉浸式体验需要怎样的技能呢?

  如果你知道一定的HTML和CSS最好,尤其是Javascript。一旦掌握相关知识,你会感觉自己成为了一名魔法师。以下是这些工具的链接:A-frame(点击前往)和MagicaVoxel(点击前往)。

  有时候会你很有可能需要一定的帮助,所以我会选择A-Frame支持文档,A-Frame Slack和WebVR Slack。如果想获取灵感,你可以查看谷歌的WebVR实验你也可以看看我开发的WebVR网站

  如果你想了解更多关于UX和VR的知识,这里有成吨的资源(点击前往)

  四. 今天WebVR UX设计师需要什么工具呢?

  个人而言,我会建议先从A-Frame和MagicaVoxel开始。在MagicaVoxel进行基础的建模,然后将其导入A-Frame。接下来在A-Frame中创建动画和交互等等。

  网上有大量的WebVR框架,其用例和复杂程度都不尽相同。A-Frame和three.js主要是使用代码,给予你的控制也更多;而Vizor、Hologram和Playcanvas等工具则允许你使用完全可视化的编辑器,但控制较少。你还可以选择其他类型的混合工具,如Sketchfab。

  当我把目标定在WebVR,我开始探索潜在的方法。我最终选择了A-Frame,因为这项工具的使用人数多,网上存在大量的文档,易于使用,同时与Mozilla和开源社区相连接。第一步是根据样板文件开始捣鼓。这一直是我学习的方法,我不会观看教程或参加课程。A-Frame的样板文件十分简单。

  除此之外,A-Frame提供自己独特的Inspect版本,但对于VR,我们可以通过在任何A-Frame项目上点击CTRL+ALT+I来访问。

  这时会弹出一种虚拟编辑器,这样我就能在样板文件中随意捣鼓其中的元素,以及网上其他实时A-Frame项目中的元素。这帮助我理解A-Frame巧妙的实体组件结构,这看起来很像HTML,但它的却HTML。

  五. 你的第一个WebVR项目?

  当我足够了解A-Frame及其工作原理后,我开始准备我的第一个WebVR项目(老实说,我经过的大量“训练”只是为了验证事情真的如其所示般简单,因为我不相信这样简单的代码可以创造出如此令人难以置信的体验)。

  这时,我需要确定我希望开发什么,以及我该如何开发。我发表过很多次演讲,并在主持一个播客,它们通常位于世界上不同的地方,所以不是人人都能前往参加。于是,我决定在VR中创建一个人人都可以观看我演讲和播客的空间,就好象他们都和我位于同一个房间。这意味着我需要创建一个球体来添加我的360度视频,然后在这个球体上添加用于导航和交互的元素。

  我从A-Frame提供的详细文档开始,然后创建了一个球体。接下来我添加由A-Frame生成的几个3D几何体,并使用Magicavoxel创建一些更复杂的3D元素,所有这一切都将位于球体之中,作为用户界面。

  六. 你当前的WebVR UX流程是什么?

  当我开始学习Javascript时,事情开始变得很棒。将一些Javascript活动加入到A-Frame场景中后,一切都变得活灵活现。最后,我启动了我的VR体验,而全球数以千计的人正在使用它。

  在用户测试和分析时,我发现用户没有利用体验完整的360度区域,而这样的情况同样发生在其他产品中。所以我制作了一个教程,向我的用户介绍WebVR。

  通过讲述,以及实际引导他们,这个教程会向用户较少体验的本质。这时用户将开始真正利用我创建的体验,而这时我发现自己刚刚将整个UX流程应用到VR项目中去。

  从设计和增长的角度来看,我感到非常满意,同时比我预想的更容易。也许最重要的是,我用这个作为概念证明在HubSpot推出了VR计划。

  七. 在WebVR中设计UX后,你的结论是什么?

  首先,我们认识到我们现在有了一个全新的设计元素。虽然设计师一般使用红,绿和蓝的组合,但VR引入了第四个元素,即深度。这可以大大改变设计中的可能性。

  其次,你会意识到用户是否拥有3自由度(环顾四周)或6自由度(环顾四周和自由行走)将你构建体验产生重大的影响。

  第三,你会意识到,尽管声音在网页端上是一个“禁忌”,但对VR体验而言至关重要。

  第四,你会意识到最好的界面需要集成至环境中,而不是附加到用户上(如抬头显示器)。

  八. 你如何看待用户体验的未来?

  我相信UX的未来在很大程度上属于MR。这是自然发展的一部分。我们已经看到设计从单个桌面体验,多个桌面分辨率,到有着多个分辨率的多个设备,再到甚至可能没有传统意义上的屏幕的设备等等。

  通过这一点,我们可以看到用户实际上并不迷恋于他们的设备。他们很容易就会放弃旧设备并转向新的和更好的设备。相反,他们沉醉于设备提供的信息和体验。一旦这种信息可以整合到我们的现实世界中,我们对计算机,智能手机和2D接口的需求将几乎消失。

  九. 什么类型的专业人士会选择这种UX职位呢?

  作为UX设计师,我们将看到他们在MR中发挥重要的作用。但与“UX设计师已经过时”的说法相反,我认为整个行业将会像往常一样发展。成为“UX设计师”的意思将会改变,并会随着MR的发展而急剧变化。

  具有3D空间,声音设计,具身认知,空间处理,认知负载,本体感,人为因素和人体工程学经验的人员都将拥有巨大的优势。因此,这也是我开始这个项目的原因。

  十. UX设计师需要担心未来吗?

  令人鼓舞的是,这个项目让我看到虽然设计技术和媒介将随着MR而改变,但原则在很大程度上将保持不变。如果你是一个基础水平很好的UX设计师,这种转变对你而言将会变得很自然。你只需要对它持开放的态度即可。

  十一. 你认为诸如深度学习这样的新兴技术会与VR/AR/MR相结合吗?

  一般而言,新兴技术尽管本身像玩具一样,但当置于MR的背景下将变得非常有影响力。深度学习是一个很好的例子。事实上,深度学习和量子计算可能是MR大规模增长和普及的最关键因素。

  能够扫描环境并了解这些环境,然后依此来定制体验,这是一些十分强大的东西,这也是MR感觉如此真实的原因所在。想象一下,有一只蜘蛛正爬过你的笔记本电脑。设备是真实的,但蜘蛛是假的,然而,却你不能将两者区分开来。

  你的MR设备可以识别环境中的所有内容,并映射了笔记本电脑和桌面的物理属性(Hololens已经可以做到这一点,即时创建了环境的虚拟网格)。它观察到房间里的照明,并将其投射至蜘蛛身上。或许它甚至会注意到你的笔记本电脑发热情况比较严重,并使蜘蛛避免它们。

  十二. 它会带来什么样的商业机会呢?

  商业机会将会变得十分宽广。哦,你的可口可乐罐已经空了吗?好,我们将自动从亚马逊订购更多的可口可乐。哦,眼镜的后置摄像头注意到,当你看到最新的梅赛德斯C系列时,你的瞳孔往往会扩大。

  也许梅赛德斯应该开始向你播放广告和提供折扣,希望可以让你下单购买。等一下,房间里的那个女孩刚刚掉到地板上,而她正在抽搐。你的设备会立即识别问题,实时通知疗护人员详细情况,然后在医护人员到达之前告诉你应如何处理。还有你正考虑购买的陶瓷花瓶,但你不能确定它是否适合你的房间。

  只需看一下,你将能够把花瓶准确地呈现在你心中所想的位置。你可以从不同的角度观察,移动花瓶,任何事情都可以。现在Wayfair已经可以做到这一点。

  如果你认真考虑到这一点,你将会遇到这样一个问题:如果我们都佩戴着这些设备,你还需要一个真正的花瓶吗?

  十三. 网上有什么有用的WebVR社区吗?

  每当我遇到这个问题,我都会推荐A-Frame文档和谷歌,或者在GitHub或Stack Overflow上寻找答案。如果我真的陷入僵局。A-Frame Slack和WebVR Slack有很多好人会为你提供帮助。

  这可能是创建WebVR的最大好处:社区非常热情,同时十分乐于助人。

  十四. 如果我正在寻找跟UX&VR相关的工作,我应该从何入手呢?

  如果你想了解如何在VR行业中获得工作,我认为这里是最好的资源之一(点击前往)

  现在轮到你了

  VR/AR/MR的UX领域仍然等待着我们去定义,现在没有人可以想象沉浸式体验的完整样式。这意味着今天的UX设计师肩负很大的责任。无论好坏。我们今天创造的沉浸式体验将会塑造世界的未来。

  感谢奥斯丁·奈特,现在我们有机会亲身体验,设计属于我们自己的沉浸式体验。请去尝试吧。相信我,你将会享受这个过程的。


推荐阅读