梅州企业网站制作：VR界面设计入门

作为UX或UI设计师迈出VR的第一步可能令人生畏。我们知道因为我们去过那里。但不要害怕！在本文中，我们将分享一个设计VR应用程序的过程，我们希望您可以使用它来开始自己设计VR。你不需要成为VR专家; 你只需要愿意将你的技能应用到一个新领域。最终，作为一个共同努力的社区，我们可以加速VR以更快地发挥其全部潜力。梅州企业网站制作

有哪些VR应用程序？

一般来说，从设计者的角度来看，VR应用程序由两种类型的组件组成：环境和接口。

您可以将环境视为您佩戴VR耳机时所进入的世界 - 您自己发现的虚拟行星，或者您正在驾驶的过山车的视图。

界面是用户与之交互以导航环境并控制其体验的元素集。根据这两个组件的复杂性，所有VR应用程序都可以沿两个轴定位。

在左上象限中有类似模拟器的东西，例如与上面相关的过山车体验。它们具有完全形成的环境，但根本没有接口。你只是被锁定了。

在相反的象限中，应用程序具有开发的界面，但很少或没有环境。三星的Gear VR主屏就是一个很好的例子。

设计场所和风景等虚拟环境需要熟练使用3D建模工具，这些元素无法让许多设计师无法使用。但是，UX和UI设计人员有很大的机会将他们的技能应用于设计虚拟现实（或简称VR UI）的用户界面。

我们做的第一个完整的VR UI设计是The Economist的应用程序，与VR制作工作室Visualize合作创建。我们完成了设计，而Visualize创建了内容并开发了应用程序。

我们将在下一部分中使用它作为一个工作示例，在此之前我们将介绍设计VR应用程序的方法，然后再介绍设计VR界面的细节。您可以从Oculus网站下载Gear VR的Economist应用程序。

VR UI设计的一个过程

虽然大多数设计师已经找到了设计移动应用程序的工作流程，但尚未定义设计VR界面的流程。当第一个VR应用程序设计项目通过我们的大门时，合乎逻辑的第一步是我们设计一个过程。

传统工作流程，新领域

当我们第一次使用三星的Gear VR时，我们注意到与传统移动应用程序的相似之处。基于界面的VR应用程序根据与传统应用程序相同的基本动态工作：用户与帮助他们浏览页面的界面进行交互。我们在这里进行了简化，但是现在就记住这一点。

鉴于与传统应用程序的相似性，设计师花费数年时间精心设计的经过实践检验的移动应用程序工作流程不会浪费，可用于制作VR UI。你比你想象的更接近设计VR应用程序！

在描述如何设计VR界面之前，让我们回过头来介绍设计传统移动应用程序的过程。

1.线框

首先，我们将进行快速迭代，定义交互和总体布局。

2.视觉设计

在此阶段，功能和交互已获批准。品牌指南现在应用于线框，并制作了漂亮的界面。

3.蓝图

在这里，我们将屏幕组织成流程，绘制屏幕之间的链接并描述每个屏幕的交互。我们将此称为应用程序的蓝图，它将用作开发项目的开发人员的主要参考。

现在，我们如何将此工作流程应用于虚拟现实？

建立

画布的尺寸

最简单的问题可能是最具挑战性的。面对360度的画布，人们可能会发现很难知道从哪里开始。事实证明，UX和UI设计师只需要关注整个空间的某个部分。

我们花了几周的时间试图找出哪种画布大小对VR有意义。当您使用移动应用程序时，画布大小取决于设备的大小：iPhone 6为1334×750像素，Android为大约1280×720像素。

要将此移动应用程序工作流程应用于VR UI，首先必须确定有意义的画布大小。

以下是扁平化时360度环境的样子。该表示称为等角矩形投影。在3D虚拟环境中，这些投影围绕球体缠绕以模仿现实世界。

投影的整个宽度表示水平360度和垂直180度。我们可以用它来定义画布的像素大小：3600×1800。

使用这么大的尺寸可能是一个挑战。但是因为我们主要对VR应用程序的界面方面感兴趣，所以我们可以专注于这个画布的一部分。

基于迈克·阿尔格（Mike Alger）对舒适观察区域的早期研究，我们可以找出一个有意义的部分来呈现界面。

感兴趣的区域占360度环境的九分之一。它位于equirectangular图像的中心，大小为1200×600像素。

我们总结一下：

• “ 360 View ”：3600×1800像素

• “ UI视图 ”：1200×600像素

测试

将两个画布用于单个屏幕的原因是测试。“UI视图”画布有助于将我们的注意力集中在我们正在制作的界面上，并使设计流程变得更加容易。

同时，“360视图”用于在VR环境中预览界面。要获得真正的比例感，必须使用VR耳机测试界面。

工具

在我们开始演练之前，以下是我们需要的工具：

• 草图我们将使用Sketch来设计我们的界面和用户流程。如果您没有，可以下载试用版。Sketch是我们首选的界面设计软件，但是如果你更习惯使用Photoshop或其他任何东西，那也是可行的。

• GoPro VR Player GoPro VR Player是一款360度内容查看器。它由GoPro提供，是免费的。我们将使用它来预览我们的设计并在上下文中测试它们。

• Oculus Rift将 Oculus Rift连接到GoPro VR播放器将使我们能够在上下文中测试设计。

VR界面设计的一个过程

在本节中，我们将介绍如何设计VR界面的简短教程。我们将一起设计一个简单的，应该花五分钟的时间。

下载资产包，其中包含预设的UI元素和背景图像。如果你想使用自己的资产，那就去做吧; 这不会是个问题。

1.设置“360视图”

首先要做的事情。让我们创建代表360度视图的画布。在Sketch中打开一个新文档，并创建一个画板：3600×1800像素。

导入名为的文件background.jpg，并将其放在画布的中间。如果您使用自己的equirectangular背景，请确保其比例为2：1，并将其大小调整为3600×1800像素。

2.设置画板

如上所述，“UI视图”是“360视图”的裁剪版本，仅关注VR界面。

在前一个旁边创建一个新画板：1200×600像素。然后，将我们刚刚添加的背景复制到我们的“360视图”中，并将其放置在新画板的中间。不要调整它！我们想在这里保留背景的裁剪版本。

3.设计界面

我们将在“UI View”画布上设计我们的界面。为了这个练习，我们会保持简单，并添加一排瓷砖。如果您感觉懒惰，只需抓住tile.png资产包中指定的文件并将其拖到UI视图的中间。

复制它，并创建一行三个图块。

抓住kickpush-logo.png资产包，并将其放在瓷砖上方。

看起来不错，嗯？

4.合并画板和出口

现在为有趣的东西。确保“UI视图”画板位于左侧图层列表中的“360视图”画板上方。

将“UI视图”画板拖动到“360视图”画板的中间。将“360 View”画板导出为PNG; “UI视图”将位于其上方。

5.在VR中测试它

打开GoPro VR Player并将刚刚导出的“360 View”PNG拖到窗口中。使用鼠标拖动图像以预览360度环境。

我们完成了！当你知道怎么做时很简单吧？

如果您的机器上安装了Oculus Rift，则GoPro VR播放器应检测到它并允许您使用VR设备预览图像。根据您的配置，您可能不得不使用MacOS中的显示设置。

技术考虑

低解析度

VR耳机的分辨率非常糟糕。嗯，这并不完全正确：它相当于你手机的分辨率。但是，考虑到设备距离您的眼睛5厘米，显示器看起来并不清晰。

为了获得清晰的VR体验，我们需要每只眼睛8K显示。这是一个15,360×7680像素的显示屏。我们离这个很远，但我们最终会到达那里。

文本可读性

由于显示器的分辨率，所有精美的UI元素都会看起来像素化。这意味着，首先，该文本将难以阅读，其次，在直线上将存在高水平的混叠。尽量避免使用大文本块和非常详细的UI元素。

完成接触

蓝图

还记得我们的移动应用设计流程中的蓝图吗？我们已经将这种做法改编为VR界面。使用我们的UI视图，我们将流程映射和组织成一个易于理解的蓝图，非常适合开发人员理解我们设计的应用程序的整体架构。

运动设计

设计一个漂亮的用户界面是一回事，但展示它应该如何动画是一个不同的故事。我们再一次决定以二维视角来处理它。

使用我们的Sketch设计，我们使用Adobe After Effects和Principle为界面设置动画。虽然结果不是3D体验，但它被用作开发团队的指南，并帮助我们的客户在流程的早期阶段了解我们的愿景。

我们知道你在想什么，但：“这很酷，但VR应用程序可以获取的方式更加复杂。”是的，他们可以。问题是，我们可以在多大程度上将当前的UX和UI实践应用于这种新媒体？

VR UI可以走多远？

跨您-面

一些VR体验非常依赖虚拟环境，位于顶部的传统界面可能不是用户控制应用程序的最佳方式。在这种情况下，您可能希望用户直接与环境本身进行交互。

想象一下，你正在为一家豪华旅行社制作应用程序。您希望以最生动的方式将用户转移到潜在的度假目的地。因此，您邀请用户佩戴耳机并在时髦的切尔西办公室开始体验。

要从办公室过渡到某个远方，用户需要选择他们想去的地方。他们可以拿起旅行杂志并轻轻浏览它们，直到它们落在一个吸引人的页面上。或者桌面上可能会有一系列有趣的物品，根据用户选择的不同，将用户带到不同的位置。

这绝对很酷，但也存在一些缺点。为了获得完整的效果，您需要一个带手持控制器的更先进的VR耳机。此外，像这样的应用程序需要花费相当多的精力来开发，而不是像传统的应用程序界面那样组织一系列精心设计的选项。

VIVALAREVOLUCIÓN！

现实情况是，对于大多数公司而言，这些沉浸式体验在商业上不可行。除非您拥有几乎无限的资源，例如Valve和Google，否则创建类似于上述体验的体验可能成本太高，风险太大且太耗时。

这种体验非常出色，可以展示您处于媒体和技术的最前沿，但通过新媒体将产品推向市场并不是那么好。可访问性很重要。

通常，当新格式出现时，早期采用者将其推向极限：这个世界的创造者和创新者。随着时间的推移，以及足够的学习和投资，更广泛的潜在用户可以使用它。

随着VR耳机变得越来越普遍，公司将开始发现将VR整合到他们与客户互动的方式的机会。

从我们的角度来看，具有直观用户界面的VR应用程序 - 即用户可以通过可穿戴设备，手机，平板电脑和计算机更接近人们使用的用户界面 - 将使VR成为追求它的大多数公司的经济实惠和有价值的投资。

登上ROCKETSHIP的时间

我们希望我们通过这篇文章让VR空间变得不那么可怕，并激励您自己开始设计VR。

他们说，如果你想快速旅行，一个人去。但如果你想远行，一起旅行。我们想远行。在Kickpush，我们认为每个公司有一天都会有一个VR应用程序，就像现在每个公司都有一个移动网站（或者应该有 - 2017年，它就是它！）。

因此，我们正在建造一艘火箭飞船，这是全球设计师共同努力，大胆前往没有设计师前所未有的地方。生产VR应用程序越早对公司有意义，整个生态系统就会越早爆发。

我们作为数字产品设计人员的下一个挑战是更复杂的应用程序，并通过控制器处理其他类型 为了解决这个问题，我们需要强大的原型设计工具，以便我们快速，轻松地创建和测试设计。我们将撰写一篇后续文章，介绍一些早期尝试的方法，以及一些开发中的新工具。

梅州企业网站制作