_What is the Difference between AR vs. MR vs. VR vs. XR?_
01
写在前面
虚拟现实（VR）推出了一种沉浸式的体验，这种体验封闭了物理世界。利用VR小工具，例如HTC Vive，Oculus Rift或Google Cardboard。用户可以被传送到各种真实的世界和设想的情境之中。
还有其他沉浸式体验，如增强现实，混合现实和扩展现实等，为用户提供不同的体验。
增强现实（AR）通常通过使用智能手机上的摄像头将数字元素添加到实时视图中，例子包括Snapchat镜头和游戏Pokemon Go等。
在结合了AR和VR元素的混合现实（MR）体验中，现实世界和数字对象相互作用。混合现实技术现在正刚开始，和微软早期最著名的混合现实设备之一的HoloLens一起处于发展阶段。
02
将传统设计与3D体验联系起来
在过去的几十年里，市场已经为设计师提供了很多可靠的工作，并将朝着生动的3D内容迈进。声音、触觉、深度和感觉都将只是VR体验的基础，2D已经过时了，即使是最新的2D屏幕也让人感到疲惫。
VR具有很多和在物理环境中训练使用的好处，且没有现实世界中的危险。如果你觉得不堪重负，你可以轻松地摘下头显或进行调整来减轻负担。这意味着医疗保健、军事、警察等特殊行业应该优先考虑寻找使用VR进行培训的方法。
想想这对于商业来说意味着什么。VR可以将数字工作者聚集在数字会议和大会上。通过VR将能进行实时事件报道，比如Facebook Live。你不仅仅只是能在屏幕上看到远在潜力之外的其他人，你能够感觉到自己和他们是在同一个房间里。
想一想你在今天是如何与触摸屏交互的。
有各种各样的例子可以帮助我们理解我们已经发展到的程度，例如滑动、通过捏合等动作来缩放、长按来加载更多的选项。这些都是能在VR中创造的。我相信，随着越来越多的创作者进入VR领域，将会有更多个性化的UI设计的制作与审查，推动业务的发展。
虚拟现实中的交互性由三个要素组成：速度、范围和映射。速度是虚拟世界的响应时间。如果虚拟世界可以以尽可能快的速度响应用户的行动，那么它就会被认为是一种交互，因为响应的即时性会影响环境的生动性。许多研究者试图通过不同的方式来确认虚拟现实交互的特征和组成部分。然而，为了完美地做到这一点，设计师必须对现实世界有着全面的理解，这意味着他们需要将用户周围典型的物理空间可视化，然后以他们所认识到的元素为基础进行构建。因为你不希望用户感觉到不适，不希望他们觉得新引入的元素侵犯了他们的个人空间。
03
那么，我们要设计什么样的应用程序呢？
一般来说，从设计师的角度来看，VR 应用程序由两种类型的组件组成 ：环境和界面。
你可以把 环境想象成当你戴上VR头盔时所进入的世界——你发现自己身处的虚拟星球，或者你乘坐的过山车所看到的景象。
界面是用户与之交互用以导航环境和控制其体验的一组元素。根据这两个组件的复杂性，所有VR应用都可以沿着两个轴进行定位。
- 在左上象限是模拟器之类的东西，如上述相关的过山车体验。他们有一个完全成形的环境，但根本没有界面。你只是被锁定了。
- 完全相反的象限是那些有界面开发但是环境很少或者根本没有的应用。三星的Gear VR主屏幕就是一个很好的例子。
04
如何开始为虚拟显示设计用户体验
在开始为设计你的VR应用程序之前，考虑以下一些基本问题可能会对你有所帮助：
- 人们要如何开始?
- 要提供什么样的启示来引导人们，而不会让他们不知所措？
- 你是希望提供更多的指导，还是要创建一个不会让用户因太多选择而犯错的极简主义环境？
不要指望用户知道要做什么，要去哪里。循序渐进的熟悉、视觉线索和来自软件的指导都应该用来帮助用户。当你为VR设计时，你是在为人的能力设计，就像你是在为系统的能力设计一样。所以你必须了解用户以及他们在体验VR时可能遇到的问题。
设计VR体验与设计网页或者移动产品的过程并没有太大的区别。你将需要确定用户的角色、概念流程、线框和交互模型等。
05
为虚拟现实设计用户体验的过程
尽管大多数设计师已经找到了自己的工作流程或者设计流程来设计移动应用程序，但设计VR界面的流程尚未在全球范围内定义。为了你的第一个VR应用程序，你应该从制定计划开始，这是合乎逻辑的第一步。
5.1VR内部的用户研究
首先，在你开始考虑VR的结构之前，你需要考虑你需要设计出什么样的体验。当然，没有一个放之四海而皆准的措施。大多数人种学研究策略在VR中是完全开放的，包括：
客户访谈，实地考察，可用性测试，试金石，模拟练习，阴影，参与者观察，启发式评估，焦点小组，眼动追踪，探究性研究和日记研究等。
5.2线框
总的说来，就像设计师所做的那样，我们会经历快速的迭代，定义交互和总体布局。
5.3视觉设计
在此阶段，在功能和交互获得批准过后。我们就应该将设计标准应用于线框，并且制作一个漂亮的界面。
考虑到我们正常设计过程中的一些可用性问题，VR应用程序的设计过程不会发生太大的变化。
06
设置设计环境
6.1画布的尺寸
要将移动应用程序工作流程应用于VR UI，你首先必须确定合理的画布大小。
以下是360度环境在展平时的样子。这样的表达称为等距柱状投影（equirectangular projection）。在3D虚拟环境中，这些投影被包裹在一个球体上来模仿现实世界。
投影的全宽表示水平360度和垂直180度。我们可以用它来定义画布的像素大小为3600×1800。处理如此大的尺寸是一个挑战。但是，由于我们主要对VR应用程序的界面方面感兴趣，因此我们可以仅专注于这个画布的一部分。
选取的区域是360度环境的九分之一。它位于等距柱状投影图像的中心，大小为1200×600像素。
让我们总结一下：360度视图为3600×1800像素；UI视图为1200×600像素。
6.2铅笔和纸
在进入任何软件之前，将你的想法写在纸上是至关重要的。这样的方法快速又便宜，并且能够帮助你去表达软件中可能需要数小时才能够完成的想法。这一点尤其重要，因为从草图到高保真度，在3D中的成本都比在2D中要高得多。
6.3软件
一些设计师会从他们已经知道的工具开始，比如Sketch，而其他人则把它作为学习新工具的机会。这实际上取决于你用于构建应用程序的引擎。如果你正在构建3D游戏，则需要使用Unity或者Unreal Engine。Cinema 4D和Maya也被广泛应用，但主要是用于复杂的动画和渲染。
07
设计时要考虑的原则
7.1文本可读性
由于显示器的分辨率，所有漂亮清晰的UI元素看起来都是像素化的。这意味着，首先，文本将变得难以阅读，其次，直线上的混叠程度很高。设计师应该尽量避免使用大文本块和高度详细的UI元素。
预期观看距离：我们设计的这些观看距离有多远。这些屏幕旨在观看的最佳距离是多少，并且除了其中内容的大小和密度之外，预期的观看距离还将告诉用户对象的大小。
与距离无关的毫米或1丝米可以被描述为1米外的1毫米。所以它是一个角度单位，以毫米为单位，随着距离的增大而增大。让我们来看一个具体的例子。在这个图表的左上角，我有一个屏幕空间布局，我已经测量了丝米，我的所有UI元素都测量了丝米。它是400×480丝米高，然后我将世界空间中的布局应用到三个独立的虚拟屏幕上。
所有这些虚拟屏幕都有不同的预期观察距离。从有利角度来看，所有这些屏幕对用户来说都是相同的，他们有相同的角度大小，那么文本就将是可读的，按钮将是可点击的，移动也将是相同的。
7.2人体工程学
当第一次做VR设计时，考虑创建未来主义的界面是件令人兴奋的事情，就像我们从好莱坞大片《钢铁侠》或《少数派报告》中看到的那样，但现实情况是，如果使用了超过一定时间，这些UI就会使人感到筋疲力尽。下图有助于说明舒适的运动区域范围：
我们都曾在某个时候受到某种“文本脖子”综合症的影响（长时间低头看智能手机脖子会感到酸痛）。根据你俯卧的距离，不良姿势会对脊柱造成高达60磅的压力。这可能导致脊椎和颈部的永久性神经损伤。
7.3避免模拟器疾病
虚拟现实为设计引入了一组新的生理考虑。就像飞行员在训练中使用的飞行模拟器一样，虚拟现实有可能呈现物理和视觉运动提示之间的不匹配。当你的眼睛认为你在移动，但你的身体却没有时，这种不匹配会产生被称为“模拟器病”的恶心感觉。
了解虚拟现实设计的生理效应并遵循这些准则，对于让你的应用程序成功并确保用户避免模拟器疾病至关重要。
亮度变化
注意亮度的突然变化。由于屏幕靠近用户的眼睛，将用户从黑暗场景过渡到明亮场景可能会引起不适，因为适应了新的亮度。这就像走出黑暗的房间然后走进阳光一样。
按钮位置
避免将保险丝按钮彼此靠近。如果保险丝按钮是彼此相距足够远的大目标，则它们的效果最好。
如果多个较小的保险丝按钮彼此靠近放置，用户可能会意外点击错误的按钮。彼此靠近的较小按钮应需要直接单击才能激活。
**“与其试图让自己适应现有技术支持的有限交互，我们与 VR 平台的交互需要尽可能自然和直观。”**
08
设计VR体验的工具
8.1Sketch
Sketch to VR是一款使用另一个名为A-Frame的工具的草图插件。Sketch to VR插件会自动创建一个A-Frame网站，但是我们所需要担心的是要在草图中创建我们的设计。8.2Google Blocks
使用简单的3D几何图形来模拟比例感和深度感。如果你有rift或Vive，你可以使用Google Blocks来原型化你的想法。这不是你展示在用户面前的东西，但你可以开始看到你的3D环境可能的外观和感觉了。
8.3Photoshop
Photoshop让我们可以使用核心图像来编辑工具，比如钢笔和笔刷工具，来绘制看似在3D空间中的元素。
8.4在Sketch上设计VR应用
设置“360视图”
首先要做的事情是让我们创建一个表示360度视图的画布。在Sketch中打开一个新的文档，并创建一个画板：3600×1800像素。导入文件并将其放置在画布的中间。如果你使用的是自己的等距柱状角背景，请确保其比例为2：1，并将它的大小调整为3600×1800像素。
设置画板
如同上面所说的，“UI视图”是“360度视图”的裁剪版本，并且只关注VR界面。在前一个画板旁边创建一个新的画板：1200×600像素。然后，将刚刚添加到“360度视图”的背景复制，将它放置在新画板中间。不要调整它的大小！我们希望在此处保留背景的裁剪版本。
设计界面
我们将在“UI视图”画布上设计我们的界面。为了这个练习，我们将保持简单并且添加一行界面。复制它并且创建一行三个界面。
合并画板和导出
将“UI视图”画板拖到“360度视图”画板的中间。然后把“360度视图”画板导出为PNG；UI视图将会位于其顶部。
09
在VR中测试
打开GoPro VR播放器，然后将刚刚导出的“360度全景”的PNG格式图片拖入到窗口。并且用鼠标拖动图像来预览360度环境。
9.1原型制作
在这里，我们将屏幕组织成流程，绘制每个界面并且进行连接。我们称之为应用程序的蓝图，它将用开发人员处理该项目的主要参考。
09
结论
作为一名设计师，我认为现在是时候开始提高我们的技能来培养设计行业的未来了，并且这在增强和改善用户的日常生活方面的应用程序发挥着重要作用。这中间最好的部分是设计思维和在用户体验研究方法中使用的相同概念，且构思方法仍然保持不变，你只需要专注于上面所提到的一些新的交互原则。
ABOUT US
参考文章：
作者：
Sourabh Purwar
译者：糖醋排菇
为尊重版权和译者
转载请联系我们