当前位置: 首页 > 科技观察

想开始设计VR应用程序?给你这份实用的设计指南!_0

时间:2023-03-15 22:55:47 科技观察

编者按:如何设计一款虚拟现实APP?其实你已经可以自己设计了。)是一种完全身临其境的体验,将现实世界拒之门外。有许多常见的VR设备,包括HTCVive、OculusRift或GoogleCardboard。用户可以进入各种模拟现实世界和想象的场景,比如站在一群尖叫的企鹅中间,甚至是怪物的背影。除了虚拟现实,还有其他现实体验,如增强现实、混合现实和扩展现实,可为用户提供不同的体验。增强现实、虚拟现实和混合现实之间的区别增强现实(AR)通常会通过智能手机上的摄像头向实时视图添加数字元素。增强现实体验的例子包括Snapchat镜头和游戏《Pokemon Go》。混合现实(MR)体验结合了AR和VR的元素,以及现实世界和数字对象的交互。混合现实技术目前处于起步阶段,微软的HoloLens是著名的早期混合现实设备之一。将传统设计与3D体验相结合在过去的几十年里,市场为设计师提供了大量的作品,并朝着生动的3D内容的新范式迈进。声音、触摸、深度和感觉都是VR体验的基础,即使是新颖的2D屏幕体验也会让人感到疲倦和过时。VR提供了许多与现实世界培训相同的好处,但没有现实世界条件下常见的各种安全风险。如果受试者感到不知所措,他们可以摘下耳机或调整体验。这意味着医疗、军队、警察等特定行业应该优先考虑如何使用VR进行培训。以Skype为例。VR有可能将数字工作者聚集在数字会议中,例如FacebookLivewithVR用于实时事件报道。通过VR设备,您不仅可以在屏幕上看到另一个人,而且尽管相隔数千英里,但您可以感觉好像与他们坐在同一个房间里。想一想当今人们如何使用触摸屏,我们可以通过许多示例来理解——滑动、双指缩放和长按以提供更多选项。这些都可以在虚拟现实环境中进行设计。我相信随着越来越多的创作者进入VR领域,会有越来越多的人致力于新的UI设计以帮助企业发展。虚拟现实中的交互性由三个要素组成——速度、范围和映射。速度是虚拟世界的反应时间。虚拟世界对用户动作的响应越快越好,因为响应的即时性会影响环境的保真度。许多研究人员尝试使用不同的方法来描述和组合VR交互。然而,为了做到这一点,设计师必须对现实世界有全面的了解,这意味着他们需要将用户周围典型的现实世界空间可视化,然后在已知元素之上进行构建。这样做的原因是为了避免让用户觉得新引入的元素正在侵占他们的个人空间。我们应该设计什么样的VRApp?从设计师的角度来看,VR应用程序由两种类型的组件组成:环境和界面。您可以将环境想象成您在佩戴VR耳机后进入的世界——您发现自己所在的虚拟星球,或者您乘坐过山车时看到的风景。界面是用户与环境交互以导航环境和控制他们的体验的元素。根据这两个元素的复杂性,所有VR应用程序都可以沿着两个轴定位。左上角的象限是模拟器的东西,比如上面说的过山车体验。他们有一个接近现实的环境,但没有界面,你只是被锁在车里。相反的象限适用于具有良好开发的界面但单一环境的应用程序。三星的GearVR主屏幕就是一个很好的例子。您如何开始虚拟现实的用户体验设计?在开始设计之前,思考几个基本问??题可能会有所帮助:用户从哪里开始?你如何引导用户?您是要提供详细的指导,还是要创建一个不会让用户不知所措的最小环境?不要指望用户知道该做什么。缓慢而渐进的熟悉、视觉提示和来自软件的指导都应该用来帮助用户。当你为VR设计时,你是为人的能力而设计,就像你为系统的能力而设计一样。所以你必须了解你的用户以及他们在使用VR时可能遇到的问题。VR体验与为Web或移动设备设计产品的过程并没有什么不同。您需要构建角色、概念流程、绘制线框并制作交互式原型。虚拟现实的用户体验设计流程虽然大多数设计师已经建立了自己的移动应用程序设计工作流程或设计流程,但对于VR界面的设计流程并没有全球公认的定义。设计您的第一个VR应用程序时,您应该从制定策略或计划这一合乎逻辑的第一步开始。VR用户研究首先,在开始考虑构建VR之前,您需要考虑需要创建什么样的体验。当然,没有万能的解决方案。大多数民族志研究策略在VR中完全开放,包括:客户访谈、现场访问、可行性测试、测试标准、模拟练习、影子练习、参与观察、启发式评估、焦点小组、眼动追踪、探索性研究和日记研究。线框就像设计师通常做的那样,通常我们会通过快速迭代来借助线框来定义交互和总体布局。视觉设计在这个阶段,功能和交互已经确定。然后将品牌指南应用于线框;构建美观的界面。除非在设计过程中考虑可行性问题,否则VR应用程序的设计过程不会发生重大变化。为环境设置画布大小要将常见的移动应用程序工作流应用到VRUI,您必须首先确定合适的画布大小。下面是一个360度的环境被压平后的样子。这种形式称为等距柱状投影。在3D虚拟环境中,这些投影围绕一个球体来模拟现实世界。投影的全宽表示水平方向的360度和垂直方向的180度。我们可以用它来定义画布的像素大小:3600×1800。大规模设计可能是一个挑战。但由于我们主要关注VR应用程序的界面,因此我们只需要关注此画布的一部分。基于MikeAlger早期对舒适可视区域的研究,我们能够隔离出对界面呈现有影响的部分。我们需要关注的区域是360度环境的九分之一。它位于等距柱状图像的正中心,大小为1200×600像素。总结一下:《360全景图》:3600×1800像素《UI视图》:1200×600像素拿起纸笔在使用软件之前,先把自己的想法记录在纸上。它快速、便宜,并且可以帮助您表达在软件上可能需要花费数小时的想法。这一点尤其重要,因为从草图到高保真度在3D中比在2D中花费更多。软件一些设计师使用Sketch等知名工具,而另一些设计师则借此机会学习使用新工具。选择正确的引擎来创建应用程序很重要。如果您正在创建3D游戏,则可以使用Unity或Unreal引擎。C4D和Maya也被广泛使用,但主要用于复杂的动画和渲染。设计文本可读性时要考虑的原则由于显示器的分辨率,所有漂亮而清晰的UI元素看起来都像素化了。首先,这意味着文本将难以阅读,其次,直线上会有很大程度的锯齿。所以尽量避免大文本块和非常详细的UI元素。预设阅读距离:我们设计的观看距离。这些屏幕的最佳观看距离是多少?预设的阅读距离将决定屏幕的大小以及其中内容的大小和密度。单位也很重要。非长度单位毫米或dmm(分米)可以描述为米之外的毫米。所以它是一个角度单位,随着它向更远的地方扩展,只会以毫米为单位增加。让我们看一个具体的例子。在这张图的左上角有一个用dmm测量的屏幕空间布局,所有的UI元素都是用dmm测量的。它的高度为400x480dmms,然后我将此布局应用于三个独立的虚拟屏幕。所有这些虚拟屏幕都有不同的预设阅读距离。虚拟屏幕的优点是所有这些屏幕都用于查看,它们对用户来说看起来一样,角度大小一样,文本一样可读,按钮一样可点击,动作也一样尽可能多。人体工程学当我们第一次为VR设计时,想到创造我们在好莱坞大片中看到的那种未来主义界面,如《钢铁侠》(钢铁侠)或《少数派报告》(少数派报告)令人兴奋,但现实是那些如果使用超过几分钟,用户界面就会让人筋疲力尽。下图有助于说明运动区的舒适范围:我们都受到某种低头综合症的影响(长时间低头看智能手机时会感到疼痛)。根据您俯身的距离,不良姿势会给您的脊椎带来高达60磅的压力。这可能会导致脊柱和颈部的永久性神经损伤。避免虚拟现实中的“模拟器眩晕”也需要生理方面的考虑。就像飞行员在训练中使用的飞行模拟器一样,虚拟现实有可能在现实和视觉运动提示之间出现不匹配——当你的眼睛认为你在移动,但你的身体却没有。这种不匹配会产生一种称为“模拟器眩晕”的恶心感。了解VR设计的生理效应并遵循这些准则,对于使您的应用成功并确保用户避免模拟器晕厥至关重要。亮度范围注意亮度的突然变化。由于屏幕离用户的眼睛太近,从黑暗场景过渡到明亮场景可能会导致用户在适应新的亮度级别时感到不适。这就像从黑暗的房间走到阳光下。按钮放置可避免安全按钮靠得太近。当安全按钮较大且彼此距离较远时,它们的效果会更好。如果多个较小的按钮彼此靠得很近,用户可能会不小心点错按钮。彼此相邻的小按钮应该需要直接点击才能激活。“我们与VR平台的交互需要尽可能自然和直观,而不是试图让自己适应现有技术支持的有限交互。”VR设计工具SketchSketchtoVR是一个使用A-Frame的草图插件。SketchtoVR插件会自动创建一个A-Frame网站,而我们只需要在Sketch中进行设计即可。GoogleBlocks使用简单的3D几何来模拟比例和深度。如果你有OculusRift和HTCVive,你可以使用GoogleBlocks来模拟你的想法。这不是您最终呈现给用户的内容,而是对3D环境的直观感知。Photoshop我们可以使用钢笔和画笔等核心图像编辑工具在三维空间中绘制元素。用Sketch设计一个VR应用设置“360全景模式”首先创建一个canvas来表示360度全景视图。在Sketch中打开一个新文档,创建一个画板3600×1800px,导入文件并将其放置在画布中间。如果使用您自己的等距柱状背景,请确保它具有2:1的比例并将其调整为3600×1800像素。设置画板如前所述,“UIView”是“360PanoramaView”的裁剪版,只专注于VR界面。在之前的画板旁边新建一个画板:1200×600px,复制背景为“360PanoramicView”,放在我们新画板的中间。这一步不要调整!在这里保留裁剪背景。设计界面在“U视图”画布上设计界面。为了演示,我们将简单地设计界面并添加一行磁贴。复制它,并创建一组水平放置的3个瓷砖。合并画板并导出将“UI视图”画板拖到“360全景视图”画板中间,将“360全景视图”画板导出为PNG格式。“UI视图”将位于其之上。进行VR测试打开GoProVR播放器,将刚刚导出的“360全景图”PNG拖入窗口。鼠标拖动图片即可预览360度环境。Prototyping在这一步中,将屏幕组织成流程,在屏幕之间绘制链接,并描述每个屏幕的交互关系。我们称之为APP蓝图,作为项目开发者的主要参考。结论作为一名设计师,我认为是时候开始提高我们的技能来创造设计行业的未来了,设计师的专业技能在提升和改善应用程序用户的日常生活方面发挥着重要作用。设计思维和用户体验方法论中使用的概念和构思方法与以前大同小异,重点是上述这些新的交互原则。