一般来说，从设计师的角度来看，VR应用程序由两种类型的组件组成：环境和接口。
您可以将环境视为您进入VR耳机时所进入的世界 - 您发现自己的虚拟星球，或您骑着的景色。
界面是用户与之互动的元素集，用于浏览环境并控制其体验。根据这两个组件的复杂性，所有VR应用程序都可以沿着两个轴定位。
在左上角的象限是像模拟器，如过山车经验链接到上面。这些具有完全形成的环境，但根本没有接口。你只是被锁在车上。
在相反的象限是具有开发接口但很少或没有环境的应用程序。三星的Gear VR主屏是一个很好的例子。
设计虚拟环境（如场所和景观）需要熟练使用3D建模工具，将这些元素很多工作都落在了设计师身上。然而，对于UX和UI设计人员来说，有一个巨大的机会就是用他们的技能来设计虚拟现实的用户界面（简称VR UI）。
VR UI设计
尽管大多数设计人员已经弄清了他们设计移动应用程序的工作流程，但是还没有定义如何设计VR。
当我们第一次使用三星的Gear VR时，我们注意到与传统手机应用程序的相似之处。基于界面的VR应用程序根据与传统应用程序相同的基本动态进行工作：用户可以帮助他们浏览页面的界面进行交互。
鉴于与传统应用程序的相似之处，经过测试的移动应用程序工作流程，设计人员花费了大量时间将不会浪费可用于制作VR UI。从来没有比设计VR应用程序更贴近您的想法！
在介绍如何设计VR界面之前，让我们回顾一下传统移动应用程序的设计流程。
线框图
首先，我们要进行快速迭代，定义交互和总体布局。
视觉设计
在这个阶段，功能和交互已通过评审。视觉设计师需要制作了一个漂亮的界面。
流程图
在这里，我们将组织屏幕流入，绘制屏幕之间的链接，并描述每个屏幕的交互。我们称这个为流程图，它将被用作项目开发人员的主要参考。
现在，我们如何将这个工作流程应用于虚拟现实？
最简单的问题可能是最具挑战性的。面对360度帆布，人们可能会发现很难知道从哪里开始。事实证明，UX和UI设计师只需要专注于总空间的某一部分。
我们花了几个星期试图找出什么画布大小对于VR是有意义的。当您使用移动应用程序工作时，画布大小由设备的尺寸决定：iPhone 6为1334×750像素，Android为1280×720像素。
要将此移动应用程序工作流程应用于VR UI，您首先必须找出一个有意义的画布大小。
下面是展平360度的环境。该表示被称为等角投影。在3D虚拟环境中，这些投影围绕着一个球体，以模仿现实世界。
投影的全宽度横向360度，垂直180度。我们可以用它来定义画布的像素大小：3600×1800。
如此大的工作可能是一个挑战。但是，由于我们主要关注VR应用程序的界面方面，因此我们可以专注于这个画布的一部分。
感兴趣的区域是360度环境中的九分之一。它位于正方形图像的中心，尺寸为1200×600像素。
我们来总结一下：
“360 视图” ：3600×1800像素
“UI视图” ：1200×600像素
测试
在一个屏幕上使用两个画布的原因是测试。“UI视图” 画布有助于我们专注于我们制作的界面，并使流程更容易设计。
同时，“360 视图” 用于在VR环境中预览界面。为了获得真正的比例，需要使用VR耳机测试接口。
使用Avocode，您可以轻松地直观地比较设计的设计。
工具
在开始演练之前，我们需要以下工具：
Sketch 我们将使用Sketch来设计我们的界面和用户流。如果没有，可以下载试用版。Sketch是我们首选的界面设计软件，但如果您使用Photoshop或其他任何内容更加舒适，那么也可以使用。
GoPro VR Player是360度的内容查看器。它由GoPro提供，免费。我们将使用它来预览我们的设计并在上下文中进行测试。
Oculus Rift插入GoPro VR Player将使我们能够在上下文中测试设计。
VR接口设计
在本节中，我们将介绍如何设计VR接口的简短教程。我们将一起设计一个简单的，这应该需要五分钟的上限。
1.设置“360视图”
第一件事 让我们创建一个可以代表360度视图的画布。在草图中打开一个新文档，并创建一个画板：3600×1800像素。
导入命名的文件background.jpg，并将其放在画布的中间。如果您使用自己的等角背景，请确保其比例为2：1，并将其大小调整为3600×1800像素。
2.设置画板
如上所述，“UI视图”是“360视图”的裁剪版本，仅专注于VR界面。
在上一个创建一个新的画板：1200×600像素。然后，复制我们刚添加到我们的“360视图”的背景，并将其放在我们新的画板的中间。不要调整大小 我们想在这里保留一个裁剪版本的背景。
3.设计界面
我们将在“UI视图”画布上设计我们的界面。为了这个练习，我们将保持简单，并添加一排卡片。如果你感到懒惰，只需抓住tile.png中命名的文件并将其拖动到UI视图的中间。
复制它，并创建一排三个卡片。
kickpush-logo.png从资源中抓取，并将其放在卡片上方。
看起来不错，呃
4.合并画板和出口
现在为了有趣的东西。确保“UI视图”画板位于左侧图层列表中的“360视图”画板之上。
将“UI视图”画板拖动到“360视图”画板的中间。将“360视图”画板导出为PNG “UI视图”将在其上。
5. VR测试
打开GoPro VR Player并拖动刚刚导出到窗口的“360视图”PNG。用鼠标拖动图像以预览360度环境。
我们完成了，很简单。
如果您的机器上安装了Oculus Rift，那么GoPro VR Player会检测到它，并允许您使用VR设备预览图像。根据您的配置，您可能不得不在MacOS中显示设置。
技术注意事项
低分辨率
VR耳机的分辨率非常差。那不是完全正确的：这相当于你手机的决议。然而，考虑到这个设备距你的眼睛5厘米，显示屏看起来不清晰。
为了获得清晰的VR体验，我们每个眼睛需要一个8K的显示。这是一个15,360×7680像素的显示。我们距离很远，但我们最终会到达。
文本可读性
由于显示器的分辨率，所有的美丽的UI元素将看起来像素化。这意味着，首先，这个文本将难以阅读，其次，直线上会出现高水平的混叠。尽量避免使用大文本块和高度详细的UI元素。
流程图
请记住我们的移动应用设计流程中的流程图？我们已经将这种做法适用于VR接口。使用我们的UI视图，我们将流程映射和组织成一个可理解的流程图，是开发人员理解我们设计的应用程序的整体架构的理想选择。
动效设计
设计一个漂亮的UI是一回事，但显示它应该是如何动画是另一回事。再次，我们决定以二维视角来处理它。
使用我们的素描设计，我们使用和为界面创建动画。虽然结果不是3D体验，但它被用作开发团队的指南，并帮助客户在过程的早期阶段了解我们的愿景。
你刚刚设计了您的第一个VR UI。
我们知道你在想什么，但：这很酷，但VR应用程序可以获取的方式更加复杂。是的，问题是，我们可以在多大程度上将我们当前的UX和UI实践应用于这种新媒体？
VR UI有多远？
一些虚拟现实体验十分依赖虚拟环境，传统界面又不是用户控制应用程序的最佳方式。在这种情况下，你可能希望用户直接与环境本身进行交互。
想象一下，你正在为豪华旅行社制作一个应用程序。你想以最生动的方式将用户运送到潜在的假期目的地。所以，你邀请用户戴上耳机，并开始在你的切尔西办公室体验。
要从办公室转移到远处，用户需要选择他们想去的地方。他们可以拿起一本旅行杂志，轻拍一下，直到他们登上吸引人的页面。或者，你的桌面上可能会收集有趣的物品，将用户按照不同的位置进行扫描，具体取决于他们接收的内容。
这绝对很酷，但有一些缺点。为了充分发挥效果，您需要一款带有掌上电脑控制器的更先进的VR耳机。此外，像这样的应用程序需要相当多的努力来开发，而不是像传统的应用程序界面中组织的一组精心设计的选项。
现实情况是，这些沉浸式的体验对于大多数公司来说是商业上不可行的。除非你拥有无限的资源，如Valve和Google，创造一个如上所述的体验可能太贵了，太冒险，太费时。
这种经验对于展示你处于媒体和技术的最前沿而言是辉煌的，但是不会因为通过新媒体将你的产品推向市场。辅助功能很重要。
通常，当出现新格式时，早期采用者：这个世界的创造者和创新者被推到极限。随着时间的推移，通过足够的学习和投资，更广泛的潜在用户可以访问它。
随着VR耳机变得越来越普遍，企业将开始发现将VR融入到与客户接触的方式的机会。
从我们的角度来看，具有直观界面UI的VR应用程序 - 即接近人们已经习惯使用其可穿戴设备，手机，平板电脑和电脑的用户界面，这将使VR成为追求它的大多数公司的经济实惠和有价值的投资。
原文来自【木梓设计】公众号
网友评论