发布时间：2023-5-7 分类： 电商动态
对于许多设计师来说，VR仍然是一个未知领域。在过去几年中，VR硬件和应用程序爆炸式增长。由于VR的复杂性和实用性，VR的体验也非常不同
成为VR的UX或UI设计师的第一步可能有点困难。在本文中，我将分享设计VR应用程序的过程，希望能够帮助您完成未来的VR设计。
首先，您不需要成为VR专家，只需要灵活地将您的技能应用到新领域。作为未来VR设计师军队的一员，我们可以加速VR的发展并释放VR的潜力。
首先，VR应用程序的类型
从设计者的角度来看，VR应用程序包含两个组件：环境和操作员界面。
当你戴上VR头盔时，想象自己进入虚拟世界——比如虚拟行星，或者想象你坐在过山车上看到的风景。
用户界面是用户与环境交互以导航环境和操作体验的一组元素。根据两个组件的复杂程度，所有VR应用程序都可以沿2个轴定位。
左上角的象限是模拟器，例如模拟过山车的体验。这些模拟器具有预定制的环境，但还没有操作员界面。这种体验就像坐过山车一样。
相反的象限是开发了操作员界面的应用程序，但基本上没有良好的环境。三星的Gear VR主屏就是一个例子。
设计场地和景观等虚拟环境需要熟练使用3D建模工具，这对许多设计师来说都很困难。但UX和UI设计师仍然有机会使用他们的技能来设计VR用户界面（VR UI）。
我们做的第一个完整的VR UI设计是“经济学家”应用程序，它是与VR Studio Visualize合作开发的。我们做了设计，Visualize创建了内容，并开发了应用程序。
在下一节中我们将以它为例，我们将解释如何设计VR应用程序，然后深入探讨VR界面设计的本质。您可以从Oculus代购源码网站下载Gear VR Economist应用程序。
二，VR UI设计流程
虽然大多数设计人员熟悉移动应用程序设计的工作流程，但VR界面设计过程尚未定义。当我们收到第一个VR应用程序设计项目时，我们做的第一件事就是设计一个流程。
传统工作流程，新领域
当我们第一次使用三星的Gear VR时，我们注意到与传统移动应用程序的相似之处。基于接口的VR应用程序实际上以类似于传统应用程序的基本动态运行：用户与他们浏览页面的用户界面进行交互。
鉴于与传统应用程序的相似性，移动应用程序工作流程是设计人员花费大量时间，并且此工作流程已经过重复测试，它也可用于创建VR UI。
在介绍如何设计VR界面之前，让我们回顾一下传统移动应用程序的设计流程。
1.线框
首先，我们将快速迭代以定义交互和整体布局。
2.视觉设计
在此阶段，已确定所有功能和交互。在这个阶段，品牌指南应用于线框和漂亮的界面。
3.架构蓝图
在此阶段，我们将不同的屏幕设计组织到工作流程中，并在不同的屏幕之间添加链接以描述每个屏幕之间的交互。我们将此过程称为应用程序的体系结构蓝图，并将其用作项目开发人员的主要参考。
现在，我们如何将此工作流程应用于VR？
三，设置
画布的大小
最简单的问题可能是最具挑战性的。面对360度;画布有时无法启动。事实证明，UX和UI设计师只需要关注整个空间的某个部分。
我们花了几周时间试图找出最适合VR的画布大小。当您使用移动应用程序时，画布大小取决于设备的大小：iPhone 6是1334&次; 750像素，Android是1280× 720像素。
如果要将移动应用程序工作流应用于VR UI，则必须先找到合适的画布大小。
360度的环境;该表示称为等轴投影。在3D虚拟环境中，这些投影围绕球体以模仿现实世界。
投影的整个宽度代表水平360度;和垂直180度;我们可以用它来定义画布的像素大小：3600× 1800.
如此大的设计是一项挑战。但由于我们专注于VR应用程序的界面方面，我们可以开始研究这个画布的一部分。
基于Mike Alger对舒适观察区域的早期研究，我们可以单独隔离显示界面的一部分。
这个孤立的区域代表360度的1/9;环境。它位于方形图像的中心，尺寸为1200次; 600像素。
让我们总结一下：
“ 360° view”：3600× 1800像素
“ UI视图”：1200× 600像素
测试
在一个屏幕上使用2幅画布的原因是用于测试。 “UI视图”使我们能够专注于我们正在处理的界面，并且设计工作流程更容易。
与此同时，“360° view”可用于在VR环境中预览界面。为了获得真实体验的比例，您需要使用VR头盔来测试设计的界面。
第四，工具
在测试开始之前，我们需要以下工具：
草图
我们将使用Sketch来设计我们的界面和用户流程。如果您没有Sketch，可以先下载试用版。 Sketch是我们首选的界面设计软件。
GoPro VR播放器
GoPro VR播放器是360度;内容查看器。它由GoPro提供，可免费使用。我们将使用它来预览我们的设计并在环境中进行测试。
Oculus Rift
将Oculus Rift插入GoPro VR Player以测试环境中的设计。
五，VR界面设计流程
在本节中，我们将介绍如何设计VR界面的简短教程。我们将一起设计一个简单的VR界面，整个过程应该控制5分钟。
您可以先下载资源包（ZIP文件）（下载链接:https://pan.baidu.com/s/1gfqXEgV密码: se6c），其中包含预定的UI元素和背景图像。如果您想使用自己的组件，这不会是一个问题。
1.设置“360° View”
首先，创建一个代表360度的画布。视图。在Sketch中打开一个新文档并创建一个画板：3600次; 1800像素。
导入名为background.jpg的文件并将其放在画布的中间。如果您使用自己的等距背景，请确保它具有2：1的比例并将其调整为3600次; 1800像素。
2.设置画板
如上所述，“UI视图”是“360°”的裁剪版本。查看“，仅限于VR界面。
在上一个画板旁边创建一个新画板：1200× 600像素。然后将我们添加的背景复制到“360° view”并将它放在我们的新画板中间。不要调整大小！我们在这里保留了裁剪版本的背景。
3.设计界面
我们将在“UI视图”上设计我们的界面。帆布。为了实践起见，我们只做了一个简单的设计，并在其上添加了一排瓷砖。如果遇到问题，只需在资源包中找到名为tile.png的文件，然后将其拖到UI视图的中间。
复制它并创建3行图块。
从资源包中获取kickpush-logo.png图像并将其放在图块上方。
4.合并画板和出口
它现在很有趣。确保“UI视图>画板位于“360°视图>左侧图层列表中的画板。
拖动“UI视图& ;;画板到“360度视角”的中间。将“360° view painter”导出到PNG; “ UI视图&quoquo;会在上面。
5.在VR中测试
打开GoPro VR Player并拖动< 360° view>的PNG。刚刚导出到窗口。用鼠标拖动图像以预览360度;环境。
简单的VR界面设计是完整的，实际上并不困难！
如果您的机器上安装了Oculus Rift，GoPro VR Player将检测它并允许您使用VR设备预览图像。根据您的配置，您可能需要调整MacOS中的显示设置。
六，技术考虑
分辨率低
VR头盔的分辨率很差。但不完全相同：这相当于手机的分辨率。但是，考虑到设备离眼睛5厘米，显示器看起来不清晰。
为了获得清晰的VR体验，我们需要为每只眼睛提供8K显示。相当于15,360次; 7680像素显示。虽然这个目标离我们有点远，但我们最终会实现它。
文字可读性
由于显示器的分辨率，您感觉清晰的所有UI元素将看起来像素化。这意味着，首先，文本难以阅读，其次，行上存在高级别的别名。尽量避免使用大块文本和非常详细的UI元素。
七，完成工作
建筑蓝图
我们已经在前面提到的移动应用程序设计过程中的架构蓝图中将此方法应用于VR接口。在UI视图中，我们将工作流映射和组织成可理解的体系结构蓝图，以便开发人员了解我们设计的应用程序的整体架构。
运动设计
设计一个漂亮的UI是一回事。如何显示动画是另一回事。我们使用2D透视再次处理动画。
基于我们之前的Sketch设计，我们使用Adobe After Effects和Principle为界面创建动画。虽然动画效果不是3D体验，但它可以作为开发团队的指南，客户可以在早期阶段了解我们的观点。
我们知道你在想什么：“这很酷，但VR应用程序比这复杂得多。”的确，VR更复杂。现在的问题是，我们可以在多大程度上将我们当前的UX和UI操作应用于这种新媒体？
7. VR UI可以走多远？
某些VR体验严重依赖于虚拟环境，因此传统界面可能不是用户控制应用程序的最佳方式。在这种情况下，您可能希望用户直接与环境本身进行交互。
想象一下，您正在为当地旅行社制作应用程序。您希望以最灵活的方式将您的用户置于潜在的度假目的地。您只需为您的用户佩戴VR头盔，他们就可以在您的办公室开始一次愉快的旅行。
从办公室到远方，用户需要选择他们想去的地方。他们只是拿起旅行杂志并翻阅它们，直到找到吸引他们的页面。或者桌面上有很多有趣的小东西，用户选择的不同东西会将它们带到不同的地方。
这真的很酷，但仍有一些缺点。为了获得最佳效果，您需要一个带手柄遥控器的高级VR头盔。此外，像这样的应用程序需要相当大的努力来开发，比应用程序接口的传统设计困难得多。
迎接变化！
现实情况是，对于大多数公司而言，这些沉浸式体验在商业上不可行。除非您拥有无限的资源，例如Valve和Google，否则创建像上面那样的VR体验可能过于昂贵，风险太大且耗时。
这种体验是向您展示媒体和技术前沿的最佳选择，但不足以将您的产品推向新媒体市场。可访问性也很重要。
通常，当新形式出现时，早期采用者将探索其极限：它的创造者和创新者。随着时间的推移，通过不断的学习和投资，许多潜在用户也可以访问它。
随着VR头盔变得越来越普遍，公司不断探索如何将VR整合到客户互动中。
从我们的角度来看，VR应用程序具有直观的用户界面——也就是说，用户界面更接近人们习惯的可穿戴设备，例如手机，平板电脑和计算机，这将使VR成为大多数公司的负担得起且有价值的投资。
欢迎VR开发的春风
我们相信，未来每家公司都将拥有VR应用程序，就像每家公司现在都拥有移动代购源码网站一样。
因此，我们现在所做的就像建造一个升天的火箭，由全球设计师共同努力并大胆尝试新领域。公司越早发现VR应用程序的含义，整个VR生态系统就会越早爆发。
作为数字产品设计师，我们的下一个挑战是制作更复杂的应用程序并通过遥控器处理其他类型的输入。为了解决这个问题，我们需要功能强大的原型设计工具，使我们能够快速，轻松地创建和测试设计。我们将撰写一篇后续文章，介绍一些早期尝试和一些新的开发工具。
翻译自Alex Deruette和Sam Applebee博客文章
原始地址：https://www.invisionapp.com/blog/vr-interface-design/
