VR界面设计的整个工作流程是怎样的？

在4月份的时候，我花了几个星期为三星Gear VR做设计。我想分享一下我为什么要在VR领域做hack-a-month（在新团队试验工作的一段时间的术语），以及这短短两周我在设计过程和设计模式中的一些发现。

为什么选VR？

我在学校学习的是工业设计和人机交互专业。我最大的兴趣之一就是打通两个学科。在当时，这意味着设计一个电子设备的全部，所以我的大四项目就是设计一部手机——既要设计手机的物理形式又要设计数字界面和生态系统。而最让我兴奋的是实体交互，可以贯穿物理和数字平台。但是，现实世界中ID（工业设计）+HCI（人机交互）的应用非常少见。我最终在一家工业设计咨询公司工作，一年后我离开了，我的3D建模技能从那时开始就很少用了。

我+早期用iPhone加速感应器模拟的头部转动模型

几个月前，我参观了Oculus 实验室，这是在他们搬入Facebook不久后。我立刻想起了我在融合物理和数字界面方面的热情。由于我代码方面的有经验，这意味着我可以掌控整个设计和模型制作的过程。

在facebook ，鼓励也支持员工追求他们有激情的项目。我和我的经理一起设定我的工作时间，看是否有机会在VR工作。最终他给我安排出了一个hack-a-month，去和Joyce Hsu, Sean Liu, 以及Joe Lifrieri一起工作。在四月的时候，我飞往加利福尼亚参正式开始这段工作。

设计工具：Unity vs Quartz Composer（没有相应软件经验的同学，此段会晕，可跳过）

在Oculus我学到的第一个兴奋的工作流程是他们是从 photoshop → Cinema 4D →Unity → 代码（如果他们选择不在Unity里面做的话）

Unity就像Flash的3D版本。在场景里面有可以移动的所见即所得的对象，同样你也可以附上脚本做一些交互动作。大量的游戏都是用它来制作的-它是跨平台的而且有很好的在线社区可以问答。

你也需要用到这个荒凉的IDE叫做Monodevelop，它不支持OS X的文本编辑快捷操作，也不支持合适的vim编辑器…并且需要写C语言或者一个轻微定制版本的javascript

自从在facebook捡起 ，在验证新交互模型的过程中，我最看重的一件事是调整和测试之间的即时反馈闭环。Unity 允许在一些项目进行时进行变量的调整，但是那先变化在播放后就会立即丢失。Unity的监视器管理和 Oculus DK2也会减慢闭环的迭代速度。一个DK2可以作为一个独立的1080p分辨率下全屏的监视器，但是Unity 不能提供即时的全屏视图，除非你真的每次建立一个独立的os x 或者android app。

由于unity的缺点，我决定研究一下QC来支持一下DK2。现有的线上插件不能够支持最新的sdk，所以我花了一晚把基础的方向角打成补丁，并且渲染了两个平面图（没有立体图）结果呢？效果非常好。虽然没有了深度感，但是我决定我可以很容易的把静态UI放在Unity中，来测试3D场景中的放置。

现在，有了在DK2上面设置的QC，我可以非常快速的迭代、调整、验证

为了VR环境而设计

一个移动UI设计新手的暴露的标志是排版和点击目标过小。任何新的人体输入形式，都需要调整界面，让其容易被使用。对于VR来说，我发现有几个主要的点对我的设计冲击很大。

让内容在一个舒适的可视区

在我做 hack-a-mouth之前，我做的第一个设计练习，是尝试用Unity做出一些脑海中关于通知的模型。当你在虚拟现实中的时候，你被完全的从现实中隔开，快速的收到通知并且回复对你来说就非常有用。当时我并没有DK2，所以我在桌面上建立所有模型。我认为这个元素应该挂在屏幕边缘，如果快速转动你的头去看他们，它们会迅速移动到可视角度的中间并且激活。

不幸的是当我拿到DK2并且尝试做模型时，发现完全失败了：当你带上头盔，在你可视范围边缘的悬浮的物体是很难聚焦的。你可以这就试试：在你视线边缘尝试读你手机的内容，并且不能转头，只能转动眼睛。

结果当我开始hack-a-month的时候，团队成员告诉我这是最好的初期练习之一：让内容在特定的框架内，并且要在你的可视范围中央。

为有限的头部转动，设计简单的交互

最大的物理约束就是你戴了一个笨重的眼镜。我有一个通知原型的想法，就是检测头部转动的速度或角度，来作为激活通知的意图。在实践中，它实在太尴尬了。Oculus团队开始研发一个模型：在GEAR VR的触控板上滑动，来避免这种限制，特别是有大量聚合内容要展现时（如应用商店）。这样你就可以把周围的内容呈现到眼前，而不需要让头部转动太多。

我发现滑动是种让人迷惑的交互方式，和眼镜边安装的触控板没有什么关联性。在我“hack-a-month”中最新的一个界面设计中，Joyce和我用Sketch和PS快速探讨了多种布局方式。我们很快淘汰了一些布局（栅格是种给人感觉不知所措又包含了无限内容的集合，然而我们想要的内容集合是感觉上单向且舒服的）

我朝一个单行内容移动，开始你聚焦在第一个上，允许水平滚动。然而我不想去滑动，而且有个页面控制浮动按钮感觉累赘。我决定试试映射一个舒适视场的全部滚动宽度（~ 90度）。做了一些改进，像翻页一样贴合到任一内容，而不只是流体滚动，事实上它也以一个我们感觉很不错的结果而告终。

悬停状态东山再起

在移动端，设计师们失去了一个有价值的工具，用来展示有递进关系的内容和一个实用的图层，就是悬停状态，在电脑和网页时代长期被用于任何事物从工具提示到OS X的放大版DOCK。在虚拟现实中，悬停状态以视线方向的形式又回归了。看着一个物体或控制住，可以透露出你可能不知道的更多信息，就像一个缩略版的视频预览。

另一件事我在第一个原型里尝试的，是一个用“看着并且保持住”或“长时间注视”的交互方式去激活内容而不需要任何形式的输入。这是一个在Kinect界面里重度使用并且总是让我感觉很好的交互方式，我想它可能会在VR领域里更好用，因为这比在空气中摇头的准确度更高。不幸的是，当其他输入方式允许你看着一个事物不需要交互，“看着并且保持住”则让你的目光休息变得有些难，事实上在阅读中还要担心什么东西会被触发。

当我开始第一个项目，第一件我想要试试的事（还有些JOE的推动）就是为用光标作为菜单导航的视频游戏，模拟一个普通的交互方式：直接贴近最接近的互动区域来补偿不准确的光标控制。在虚拟现实中，光标事实上是相当准确的，但是它依然比只做必要的确切精准动作要难一些。

我发现增加热区去处理5~10度间的视线夹角是一个好的经验法则（拇指规则）。这意味着某些事物你可以只通过视觉设计，就像视频进程栏一样做的很窄，却依然可以舒适的擦过而不再需要滑离控制。

另一件事我发现当用Quartz Composer做一个光标动效的时候，隐藏光标（或对它进行动画处理，看起来它就像是贴近到控件的悬停状态）实际上降低了光标与特定控件间对齐的难度。

虚拟现实设计中结束时的思考

在“hack-a-month”的最后，我以一个非常立体的原型和新的交互方式为结尾，给了我工作的团队一些灵感。所有的原型都用Quartz Composer做到了高保真的效果，在相对较短的时间里（“hack-a-month”实际上只有2.5周）。不幸的是，我不能在旁边经历实现出的效果，但是我很兴奋的看到了设计是如何应用到实际使用中的。

下一个是什么：工具

在过去的几年里作为一个产品设计师，一件让我越来越清晰的事就是：设计和代码的相互作用对我有着强烈的激发。通过我的设计经历，我最喜欢的时刻就是那些当我遇到的技术障碍检验了设计方向的时候。不管是学习Objective C来攻克时间点，还是在JS中度过数据人生。

虚拟现实的工作进一步证明，我依然享受思考产品和设计在三维空间中的新的交互方式，我最喜欢的事就是搭建工具来帮助证明设计决策。这就是为什么我和Brandon Walkin对我们在FACEBOOK的设计工具开启了一个严肃而长远的审视，他领导了Origami的开发。如果你喜欢设计工具的工作，并且在纽约生活也在你的日程中，就联系吧！

----------------------------------------分割符---------------------------

qq群：

全文大致参考视频：

另外我这篇是界面相关的，如果你想看VR设计相关，可看《

》

—————————————————————————————————————

1、产品经理绘制流程图：

• 给什么样的用户群设计的？
  
• 用户想在你的VR 应用中获得怎样的目标（满足怎样的需求）？在最下面的结尾处则为用户将要完成的目标（获得的结果&满足的需求）

……

—————————————————————————————————————

2、产品助理&策划 手绘线框图：

—————————————————————————————————————

3、产品设计师制作静态低保真原型

把上面的草图在unity中做出来，比如平面上的方形做成unity中的方块。

定义每个产品模块的功能。

比如添加图片、标题和交互功能。

戴上HMD查看效果：

因为VR里的相对像素密集度太低了，而且又有一定程度的畸变，所以简单地把界面放到VR里就会看不清，也就是所谓的可读性太低。

（

）

将页面『卷起来』：

正如我在《

》中所说的问题，此时得将页面卷过来一点儿——让你的视角到每个页面的距离相等，从而保证每个字有相同的『可读性』。

将整个界面缩小到用户FOV能够一览无余的范围内：

所以将页面控件放大，字放大，看起来整个显得小了？正如我在《

》提到的，因为FOV的限制，用户需要转头、转眼来看到整个页面，那多累啊，于是将控件集中到这一块区域内。

这种布局叫做volumetric layout。

—————————————————————————————————————

4、交互设计师制作高保真原型

尝试着在页面控件上添加材质（贴上可能用到的内容缩略图）。

可以看到，即使放上高质量的图片，因为分辨率限制，能显示出来具有一定可读性的并不多。

（

）

—————————————————————————————————————

5、用户研究员和测试工程师进行用户研究和用户测试

按照《

》中所说的方法：

（1）首先测试用户能否在360°的球面上找到一块不到100°的弧形平面？（那块弧形平面就是我们的主界面。）

（2）用户知道icon的功能吗？

（3）用户知道如何滚动页面吗？

……

—————————————————————————————————————

6、视觉设计师进行美术制作

这个时候视觉设计师（注：VR时代的视觉设计师为游戏美术师，比如场景设计师、角色设计师等）将界面放入场景中查看是否舒适。

场景设计中最大的限制在于手机的性能，比如daydream的性能限制是：

• draw call要小于100（ 为什么应该尽量减少draw call？）
  
• polygon要小于100K（ 如何简化包围多边形？）
  
• pixel fill要低（ 三角形填充算法的主要实现细节和注意点是什么？）
  

……

是不是听得头都晕了？所以最好的解决办法是用模板着色器（stencil shader）——生成了一个ODS（omnidirectional stereo，全方位立体）。一个球面的mask，最后得到一张三自由度的全景图，这也就是整个play store VR的背景360°图。

用全景图代替即时渲染的几何体，极大地降低了实时渲染的工作量。

不过它的问题是只有一张单薄的球形曲面（当然普通用户看不出来），所以UI控件只能挡在它前面，而不能放上去。

（那实时渲染的三维动画和一个提前渲染的全景视频，在用户看起来有什么区别呢？小白用户可能看不出来，而我们内行有一种分辨的方法：那就是倾斜你的头部，马上就发现它只是张单薄的球面~）

—————————————————————————————————————

7、动效设计师设计动效&转场动画

交互设计师和工程师讨论系统层级的设定，将不同层级的页面产生不同的层级关系，并设定页面滚动方式（

）。

动效设计师根据页面层级的设定设计动效，并用动效引导用户视线（

）

这是正常的界面，两个同级页面之间保持在同一Z轴上。《

》

当一个页面被raycast戳中时，它微微向前抬起

这里动效设计师设计了parallel effect（这种交互的特点是，通过动画产生深度错觉）：

当raycast戳到jump页面的左上角时，页面右下角抬起。

当raycast戳到jump页面右上角时，左上角微微抬起。

动效设计师展示交互动效——

未hover on的状态：

当被cursor选中时，整个icon相对于整个画面向前移动，icon的背景层和图形层分离，icon下面显示出APP的名称。

然后就可以交给开发团队了。

贴点干货吧，美国团队的lab里面的技术小哥做的翻译稿《如何为VR设计3D用户界面》

================================================================作者：bugevr

链接：

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

• 如何在VR里体现用户界面信息？

世界中的UI（In-world UI）又叫做抬头显示界面（HUD）, 相信每个游戏玩家或者接触过3D场景的人或多或少都比较熟悉。它是整个场景中的体验的一部分，也是用户情感的一部分。当然不恰当的UI往往也会打破用户美好的体验情感，所以这也是为什么很多UI人士都呼吁更少的UI往往会带来更好的效果。所以我们如何在VR里体现用户界面信息呢？

一个较好的例子如下图：我们可以把左边这个传统的注有标签信息的杯子转变成右边这个更直观的体现当前容量的杯子。这样就不需要额外的显示该杯子的剩余容量（图中标签所示：还可以喝6小口），而用杯子当前所呈现的剩余容量所占总容量的比例，来直观的告诉用户大概杯中还有多少饮料供用户享用。

图1-1

但反对者们往往会抗议道：“这种表示方式有时候太过微妙了，有的时候我们可能必须要一个大大的红色按钮来提醒用户”，那么我们应该如何创建VR的UI呢？下面让我们来谈一谈我们可以从传统的3D用户界面中得到的启发

我们首先要做的是吸引用户的注意，为此我们引入3个设计原则：

1，为了可靠性而保证显示在视角的中心：当有重要的信息需要演示的时候，UI设计师需要考虑用户的关注点在什么位置，并且要预估用户接下来的行为，从而保重重要的信息始终在用户视角的中心。

2，描绘边角轮廓来吸引用户的注意：比如在攀岩游戏中，在用户的手腕周围描边，用颜色来表示目前攀岩的状态和可行程度。

3，在VR的用户界面中，语音提示或者声音往往比其它东西要重要得多。

其次我们要注意深度的使用，层次感往往能给用户带来很好的用户界面反馈。

现在让我们谈谈标记一个目标，在传统的设计中有很多方法可以做到，比如缩放目标来保持尺寸的一致性，也可以直接面对用户，或者始终把目标至于所有场景的最上层，就像下图二所示的那样，但这些都有一个问题那就是没哟那么强的3D感。

图1-2

同时在VR中也会带来一些问题，比如用户不应该在3D场景中看到被遮挡的界面元素。同时也会对场景的深度信息（depth confusion）产生困惑，如下图显示的情景却失了深度信息就使得VR不那么立体了。

图1-3:

其实解决方式也很简单，那就是提供深度信息，如下图（图1-4）所显示的那样：

图1-4

此外，在传统界面常见的扁平化设计如果过多的出现在VR中可能会带来一些问题， 原因是这同样隐藏了深度信息。但有时候我们并不想全部用光，阴影和距离来显示UI，那么应该怎么办呢？

一个很好的解决方案是使用基于距离的着色器（Depth-Based Shader）,如下图1-5左半部分所示，距离越近的物体越亮。

图1-5

此外，我们还可以使用菲尼尔效应（Fresnel effect）来显示不透明的物体。如下图1-6所示，来减少用户对于距离的困惑。

图1-6

那么现在再让我们来谈谈菜单。VR中的菜单和传统菜单一样，主要是提供了项目相关的信息。所以并不需要对VR的菜单做过多的改变。但是正如前面所说，过多的菜单有时候会给用户带来负面效果，所以多用场景中的一些物体的改变，来和用户进行交互，如文章开头提到的水杯就是一个例子。

再设计VR的菜单的时候，请牢记以下几点：

1. 全局的信息如滚动条等往往没有太大的效果，因为用户总是更关注VR场景内的内容。

2. 用好一些过渡效果是关键。

如果在大家设计的VR场景中，使用了手柄等控制器，如何指导用户操作就变得很重要。首先应该向用户显示手柄中的每个按键作用，这里我们全局的显示手柄中按键的布局位置，而不是单纯的告诉用户A,B,C键是干什么用的。此外，我们应该给用户一个全面的操作演示和介绍，使用户不至于晕头转向。还有一个很有意思的现象，在设计按键的时候，有些设计师喜欢用松开Release这个动作来表示完成了按键，然而这个设计有时候可能会带来一些麻烦，因为体验VR的用户总是希望更快的得到反馈 。

以上对于传统用户界面对于VR用户界面的启示聊了很多，总结的来说可以归为以下几点：

1. 好的UI可以不是”真正的UI”。

2. 场景中的信息因为深度，遮挡，立体感等原因很难做到一致性。

3. 菜单如果运用得足够好往往会带来意想不到的效果。

那么现在让我们来上一点干活，进入第二部分以后，让我们来聊一聊一些技术细节。

1. Alpha排序（Alpha Sorting）：VR中的用户界面往往是Alpha 混合的（Alpha Blending）, 比如我们之前提到的，通过一些透明的方式来显示过渡效果。现在一个通俗的做法是把这些透明的UI元素排序，但这可能会有些问题，比如下图2-1所示：

图2-1

我们本意是希望，红色的物体在蓝色面板之上，但由于蓝色的平面离我们的人眼更近，反而造成了红色物体被遮挡到蓝色面板的后面。对于这个问题该如何解决呢？

第一个解决方案是使用“顺序无关的透明”（Order-independent Transparency）,比如给我们希望在上面的物体加一个偏差值，如下图所示，使它显示在上面。

图2-2

2. 文字呈现（Text Rendering）：这里我们介绍三种方法。第一种方法是将文字渲染到贴图上，再把该贴图贴到一个模型上。这种当文字的尺寸很小时，为了可以放到看清，我们需要需要一个高分辨率的材质。第二种方法是有向距离场技术（Signed distance fields），相关技术细节由于演讲者并没有说明，所以这里也不做过多的论述。

简而言之，这种方法达到的效果是在像素的级别将文字边缘重新描绘，使得字体看上去更加清晰，如下图2-3所示，左边输入的是一个模糊的字体，我们在程序中使用该技术重新绘制一下文本，使它成为右边的文字从而变得清晰。这种方法的问题在于文字可能看上去很圆润，而且需要很多工作量。

图2-3

第三种方法是直接在场景呈现文本网络（text mesh rendering）, 也就是说我们直接在场景中将文本以3D模型的形式的形式显示出来。这也有些问题，文本模型因为建模的面数的限制可能会看上去有棱角和锯齿。但从长远看可能是一个很好的解决方法，因为它使文字的分辨率会独立于整个场景。

以上三种是目前常用的VR场景中文字呈现的方式，我们设计的时候可以根据具体的场景选择合适的方法。

3. 悬停检测（Hover detection）:悬停检测在VR的场景中，通常体现在我们如何展示用户当前的视角聚焦在哪个菜单上。通常我们会用光线投射的方式（ray-casting）。 这里我们再介绍另一个微妙的方式。比如“角度对比”如下图2-4， 被选择物体会呈现一个不同的角度来提示用户。

图2-4

4. 抗锯齿技术：抗锯齿对于菜单元素尤其重要，因为过多的锯齿会转移用户的注意力。而现在市面上常见的后加工技术对于VR菜单的抗锯齿效果处理得都不算好，所以需要我们设计师在一开始就留意和处理好锯齿问题。

三． 设计流程：

最后，在该讲座中，Riho给我们分享了他作为VR UI设计师的设计流程。首先他会画大量的草图，接着他会用手和声音预先模拟一下各个UI元素如何动画。最后他把草图结合动画应用到场景之中。

现在再让我们来看一下专业的VR用户界面的生成流程是怎样的。

1. 从UV布局开始：创造并组合最基本的贴图，图片，文本部件。

2. 在3DsMax中建模和做动画。

3. 将模型和动画链在一起。

4. 在游戏引擎内建立逻辑流程图。

5. 调试直到达到理想效果。

结来说，VR很棒！但是设计VR的用户界面会有许多细节与传统的用户界面不同，对于我们每一位VR设计师来说，我们可能会遇到很多问题。希望本文提到的内容和技术细节可以帮助每一位VR设计师更好的解决遇到的困惑。

我们之前是一个VR设计团队，主要负责公司VR类产品的设计。这是我们团队目前在做的事，探索并构建一个较完整的VR设计流程，重点是对设计工具的研究和对工作的流程梳理、优化，目的是提高VR设计团队的工作效率和产出质量。在实际的VR项目中不断优化，同时也欢迎大家提出各种想法和建议。

一、要做哪些事情？

按优先级排序，分为四个部分：1、工作流程，各角色在团队中需要关注的内容和分工。2、设计工具的使用。3、用户研究方法，用户需求管理。4、设计原则（设计规范）归纳和建立。如下图所示：

以下是对四个部分的内容进行具体的描述。

明确职责分工

1、建立工作流程：针对VR设计各个主要环节的流程及配合方式进行了梳理，绘制流程图。

2、梳理工作内容：主要包括流程各部分人员职责、主要产出物、配合方式。 明确VR项目设计中各职能的责任范围，产出物。通过实际项目逐步建立起各个产出物的规范模板，将项目流程标准化。

设计工具的使用 1、研究并确定需要使用哪些工具进行设计，并进行试用。 2、针对主要工具对全员进行培训，掌握工具的基本使用方法。

为什么所有设计师必须掌握3D设计工具？ 传统的2D类设计软件（如Axure）已不能快速、方便的展现3D空间类产品的设计思路，在2D的限制下做3D的东西，流程繁琐、没有办法迭代修改。 因此各个设计环节掌握3D类主要工具基础的使用非常必要。 如何建立空间立体思维？最好的方式莫过于使用3D设计软件进行设计，在设计过程中传统2D设计师能够很好地将思路拓宽到空间中进行表现。另外针对游戏引擎（Unity）的基本学习、使用，也可以更好地帮助大家学习理解3D游戏、VR产品的设计和实现原理，避免设计师的设计内容无法实现。

建立用研&需求池 用研需求池建立：针对VR方向的用户研究和VR用户需求建立框架和内容规划，梳理ijb流程和需求池模板。 为什么要做需求池？ 需求的获取和转化是产品设计的重要工作，在我们之前的用户研究工作过程中，常常把需求部分的提炼和思考弱化，认为用研中用户反馈到的需求就是真正的用户需求。但用研和需求设计是共通的，实际上是水土交融的。 建立需求池，可以更加有针对性地了解虚拟现实用户到底需要什么，通过把用户画像、故事版等用研手段获取到的需求转化到需求池中，进行需求的整理、沉淀，更有利于我们后期对产品进行快速准确的设计。

设计原则、规范

设计规范框架的制定：建立VR设计规范的框架，列举VR设计规范所涉及的内容和方向。

目前已有的VR产品大部分体验不太成熟。我们知道产品体验最重要的一点是保持规范性和统一性。虚拟现实产品区别于传统互联网产品，设计者关注的不仅仅是视觉画面对使用者造成的影响，另外，声音、触感、空间操控方式都会对VR使用者的用户体验造成巨大影响。

现有可查的交互规范有Google的Cardboard的交互设计规范，仅是针对移动端VR设备。

因此我们希望在VR用户体验的学习和研究中，能够总结和发现哪些原则是不错的，适合VR某一类产品的。

初步思考了一下规范大致涉及的方向：

后续的任务就是，对各个方向建立规范和模版，逐渐向其中填充内容，持续进行迭代。

建立各规范组件库，对同样的设计内容进行复用。

二、明确职责分工

下面挑几个主要环节的工作内容进行解释，在后面的文章中我会对每个环节的具体内容展开细述。

产品设计师

主要任务：1、功能设计。2、场景规划（有几个场景）。3、VR场景构建（场景平面图）。

交付产物：需求设计说明书、场景规划说明书、场景平面图。

1、功能设计：产品应实现的功能有哪些，功能背后的业务逻辑是什么。

2、场景规划：划分出不同的场景进行罗列，输出场景列表。

3、VR场景构建：对每个场景需要实现的功能和业务逻辑进行具体描述，绘制出2D场景平面图，图中应包含当前场景中的所有对象。

功能设计清单+场景列表+场景描述，输出完整的文档（产品需求说明书）

交互设计师

主要任务：1、3D场景优化设计。2、交互流程设计。

主要工具：C4D、Axure。

具体内容：

1、对3D场景进行设计优化、搭建3D场景原型（C4D完成）。

2、细化3D场景。

3、设计交互设计流程，完成交互设计原型文档（直接用C4D做好截图到Axure 中添加交互说明）。

分别把各个场景串起来，完成交互原型。

界面设计师&美术设定

2D美术概念稿：绘制美术场景、角色等概念稿

FUI：主要针对FUI平面资源进行设计及输出。

3D资源&开发 根据设计稿及美术设定输出3D资源，输出到后续开发流程。 最后由开发实现产品完整功能。限于篇幅，后续的部分我会在以后的文章中结合实例做具体描述。

什么是 VR

VR的概念

虚拟现实（Virtual Reality），就是利用电脑模拟产生一个三维空间的虚拟世界，提供用户关于视觉等感官的模拟，让用户如同身临其境一般，可以及时、没有限制地观察三维空间内的物体。当用户进行位置移动时，电脑可以立即进行复杂的运算，将精确的三维世界视频传回产生临场感。

VR的基本特征

immersion-interaction-imagination（沉浸—交互—构想），它强调虚拟系统中人的主导作用。在现在及未来的虚拟系统中，这些由计算机及其它传感器所组成的信息处理系统应尽量去“满足”人的需要，而不是强迫人去“凑合”那些不是很亲切的计算机系统。

设计师的工作

VR设计两大走向

（一）

设计职能将聚焦于核心用户体验，包括交互方式与界面表现等等方面。这和我们所熟悉的设计团队模式很相似。

（二）

更偏重于内容的创造与输出，他们会像游戏工作室那样聚焦于独特的内容体验。

设计流程

信息架构、交互脚本、功能与内容

对每个界面的功能与内容进行定义描述。所产出的文档可以为整个项目带来更加全局化的视野，使接下来的实际设计工作能够聚焦于最关键的信息，将时间节省出来用于对VR交互设计模式进行探索。

绘制草图

即便是对于VR产品，在探索阶段通过纸笔来快速呈现和沟通想法依然是非常重要的设计方式。它能帮你以最快的速度将想法落实下来，同时在多人沟通协作方面也具有相当高的实用价值。

界面原型

原型的意义在于验证想法、获取反馈、通过迭代进一步验证想法，周而复始。

GUI设计

接下来是实际的图形化UI设计阶段，用户最终要与其进行直接互动。其中有三点要素需要特别关注，包括符合产品自身特质的情感化体验塑造、符合3D世界交互原则的设计语言运用，以及符合用户对于数字化界面既有认知的设计模式。这三者之间的良好平衡是塑造VR图形界面的关键所在。

设计要点思路

被动式的沉浸化体验

用户通常会坐在沙发或床上进行使用，而且他们表示，长时间的通过触控板进行操作会让人感到非常疲劳。

多种交互方式

在允许的情况下，为每个操作设计补充性的交互方式。这样，人们便可以选择最舒适的方式来完成常规任务。

通过景深强化信息层级

在 VR 环境中，处于视线焦点位置的元素始终拥有最高优先级；同时，与自己距离较近的物体总会比距离较远的那些更加容易引起关注。必须充分利用景深这一要素来构建 VR 界面的信息层级。

​

优化交互细节

我们在凝视交互的细节设计优化上投入了很多精力，尽最大可能确保用户在使用过程中感到舒适与轻松，仅在绝对必要的时候需要他们抬起手来通过设备上的触控板完成精准性较高的操作。

随时通过实际设备进行验证

作为设计师，在测试当中验证自己所理解的心智模型及常见使用情境，包括设计方案中的信息架构与交互模式是否合理，等等。

>>>

文由WELLDESIGN独家原创，未经授权请勿转载。

一、早期概念

• 下图是将360度全景图展平后的样子。这被称为球面投影。在3D虚拟环境下，这些投影图像被卷曲成球体来模拟现实世界。

• 投影的全尺寸是水平360度、垂直180度。因此我们可以将画布尺寸确定为：3600×1800 px.

• 如此巨幅的画布，干起活来可有些挑战。但我们主要感兴趣的是VR应用的界面，因此将注意力集中在画布的一部分就好了。根据Mike Alger关于视觉舒适区的早期研究的基础上，我们可以划分出一块区域来合理展示界面。

• 这片区域占全景画布的1/9，位于球面正中央，尺寸为：1200×600 px。
• 360度全景画布：3600×1800 px
• 交互界面尺寸：1200×600 px

二、角度视距综合参考

三、VR界面设计的尺寸规范

视觉界面设计分辨率=PPD*界面视角
通过计算及测试，同时为了方便计算，我们取值：
空间界面为1m ≈ 视觉界面分辨率1000px
随着VR硬件设备的升级 、PPD值的提高，这个值也会随之提高。
通过上面的计算机公式 ，我们可以知道界面设计分辨率的尺寸只与设备的PPD和界面视角有关，与距离无关。角度尺寸这个单位与二维、三维软件单位并不通用，通过三角函数可以知道，当角度不变，距离（邻边）变大时，显示界面（对边）等比例变大。因此：1000px设计尺寸在三维环境中1m远的距离显示为1m，5m远时显示尺寸为5m。我们把这个简称为距离无关像素，多应用于眼前界面。
常用界面设计分辨率建议

虚拟屏幕中的内容尺寸应该如何决定
每种尺寸的屏幕都有一个标准视距，决定了屏幕内容的大小。通过内容区域的概念，我们可以了解VR界面的视距。

不同设备的标准视距，VR设计的挑战在于保持内容在不同屏幕尺寸下的一致性。针对这个，谷歌提出了不受距离影响的毫米（DMM）概念。

1 dmm（发音为“dim”）的定义是1米处的1毫米。该角度测量单位规范化了虚拟屏幕空间的尺寸，并有助于在不同距离和屏幕尺寸下保持内容的一致性。


如何用DMM做设计

如上图所示，左上角是屏幕空间坐标中的界面内容，即dmms。在1米处时，屏幕空间坐标和世界空间坐标之间没有区别；但到2米处时，世界空间坐标变为屏幕空间坐标的2倍，即屏幕尺寸增加到原来的2倍。因此，dmms可以让设计师更方便地根据距离缩放屏幕的大小，而不用担心失去内容的一致性。dmm现在有一个针对屏幕内容的标准衡量单位，即谷歌制定的包含标准文字大小和命中区域的规范，可以作为VR设计的参考。

正因如此，设计师可以更方便地根据距离来设计界面尺寸，并且保证内容尺寸的一致性。

除了尺寸以外，由于VR 的三维空间的独特属性，所以在形状和结构层次上可以为开发者提供更多的开发思路，谷歌称之为“超级力量”。
深度
由于在虚拟空间中，屏幕可以根据Z轴进行偏转，因此在视觉效果上有更多的深度。这种深度特点可用于区别各内容元素之间的不同以及在屏幕内容中建立层次结构

但是如上图所示，我们需要注意深度的感知能力会随着距离而减少，因此才会导致上文中提到的“对 20 米外的事物的深度几乎没有感知能力”的观点。
形状
界面载体的形状影响着屏幕的内容放置和交互方式。在虚拟空间中，我们能发挥各种各样的创造力，在虚拟屏幕的设计上，我们可以以各种形状的形式去呈现。它既可以是平面屏、曲面屏、折叠屏，也可以是分离式的。

在三种不同形状的载体上的虚拟屏幕
详细工作约：
1px=1dmm
原视频分享：

四、在2D界面转3D场景的设计还原问题

在unity中Piexels Per Unity默认100，结合上面的结论1m=1000px，所以这里的默认值可以直接修改为1000，
另一种方法：眼前界面也可以通过层级达到此效果：
最外 Base 层，用于调整所有 UI 元素的视距，以及整体的缩放关系。上面讲过距离无关像素，距离与缩放同时变化。
中间 Canvas 层，用于让各单位统一。Unity 以 m 为单位的，前文我们讲过1m=1000px，所以在 Unity 中需要将其换算成 0.001m。
内部 UI 各元素层，这一层的各物件的尺寸属性和二维软件中的一样。例如，你在 PS里设计了一个 270x150 的矩形，那么到 Unity 里这一层的长宽尺寸也直接写 270x150，完全不用管距离、缩放、单位换算之类的问题了。

五、代入感和舒适性

• 代入感：

帧率：保持帧率稳定在高于60 fps是保证用户舒适体验VR的前提标准，它可以避免运动给用户带来的恶心。画质与音效：高质量的渲染会使环境看起来更加逼真；适当的音乐/音效可以进一步增强内容的代入感。一致性：虚拟世界并不需要在设计上与现实世界一模一样，但是它应该像现实世界一样遵循一套统一的规则，而这能让用户以自己的工作判断来进行行动。

• 好奇心与探索欲：

除了以上的硬性标准外，在丰富代入感方面，还需要从人类的行为上寻找突破点。
在一个不同常规且陌生的VR世界中，好奇心会驱使我们比平常更有探索欲。此外多数用户对VR内容没有特定的预期目标，所以开发者应该利用这种好奇心来指导UI和内容的设计，提供更多的具有目的性的内容交互以满足和勾起用户新的好奇心。用户也更愿意去探索和学习与他们原有认知不同的界面和交互方式。
以任务为核心：在以任务为中心的应用中，用户会产生一个期望完成任务的观念，多数用户不太愿意探索和学习新的概念模型，除非新模型在完成难易上较低。这迫使设计师在设计时需要在一定程度上去遵循现有的交互模型以及界面规范。

• 用户定位：

据测试，人们在进入一个陌生的VR环境时，大约需要花 10 秒钟来进行定位。而随着与VR的接触次数增加，这种适应时间会逐渐减少。而我们与虚拟参照物与场景的位置会告诉我们所处的状态，并影响着我们对VR当前状态的理解。如果初始场景的设置没有给用户提供足够的信息，那么用户就需要依靠后续的文本、音效以及语音等来进行后续的认识补充。所以为用户提供足够的背景信息，需要在开发时有意识地进行系统地规划。

• 用户期望原则

不要在视野范围上附加多余的东西

相信多数带眼镜的人都有过，眼镜染上污渍的经历。如果用户在体验的过程中无法将视线从某些一直挂在视野里东西上移开，我们就会产生一种难受的心理。因此将任何UI元素长期附加到头显视野上，都不利于用户体验。

温和的画面平移

在此前的VR体验中，相信有不少开发者都曾体验过画面过度抖动产生的晕眩感。画面效果应遵循恒定速度移动，并且没有任何加速/减速。画面切换速度足够快速，保证不会在人眼上产生残影效应，当画面进行旋转时，应该慢一些。如果你不够了解这些知识以及人体的前庭系统，那么就很可能因为移动而使用户产生恶心感。所以最好的方式是让用户自己调整画面的位置。

让用户始终感觉在地上

将用户置于某种虚拟空间的实体平面上，并通过视觉反馈不断提醒他们在地上，会给予用户一定的舒适感。没有什么比将人悬在空中更令人难受了。

遵循现实世界的尺度比例

如果你坐在看起来像普通沙发两倍的沙发上？那么你肯定感觉自己像矮人或巨人，而这是目前全景拍摄最容易出现的问题。所以除非具有目的性，否则虚拟现实就应始终遵循现实世界的尺度。
此外，VR中的视线高度也需要与用户现实世界中的身高相匹配。而这与眼动追踪技术相结合，那么实现起来就会更容易，当然我们也可以通过头显定位，来提前了解用户的身高，从而实现视野高度的判定。

不要惊吓用户

你是否曾经被一辆你没注意到的超速驾驶的汽车惊吓到？非常惊悚，对吧？VR 世界中的物体应该平缓地朝向或远离用户移动，这样才不会惊吓他们。

有意识地设计环境

用户下意识地期望虚拟现实中的环境设计能够让他们知道什么是重要的。设计师应巧妙地引导用户往预期的目标和方向前进。

巧妙运用声音和振动反馈

利用VR中声音和手柄的振动反馈，能够加强VR中的空间感，以及按钮和其他UI元素的交互。声音可以影响 VR 体验的基调，而手柄反馈是目前最高性价比的交互形式。

六、目前世面VR设备ppd换算

ARppd换算

欢迎关注的我的虚拟现实 公众号“HA 虚拟现实开发”，及时了解最新最全的VR技术、产品、资讯内容

1、整体规划

• 用户需求分析转化，项目经理、架构师、设计师等团队人员头脑风暴，完成包括：场景、功能、交互流程、前后台系统架构、网络传输与数据存储等内容的设计，得到系统功能/性能需求。
• 结合系统功能/性能需求进行系统脚本设计、确定系统体验流程。
  
• 根据系统脚本，设计合理的原型，并多次修改迭代。
  
• 在上述基础上进一步分解功能模块，梳理接口需求及相关美术资源需求。输出各种设计文档、对接标准与规范文件。

2、环境准备

硬件环境准备，包括：计算机、手机、VR设备等。软件环境准备，包括美术设计工具，集成开发环境，各种插件工具，SDK等。

3、美术资源制作

设计团队制作原型图、3D模型、展UV、材质、贴图、角色、动作动画、特效等。完成UI图标，图片，声音，视频，文案等资源的准备。

4、场景搭建

导入上述所有资源，搭建场景，制作场景特效（粒子特效：雾效、烟、光、水面特效等），设置摄像机、光照环境（自然光、环境光、点、面光源、反射探针、光照探针的应用）；制作系统界面、交互菜单，场景烘焙渲染等等（这个过程不断调整，贯穿于整个项目过程中）。

5、程序开发

搭建开发环境，导入开发相关插件，开展具体开发工作，包括：场景交互逻辑，角色控制器、有限状态机，音视频管理（背景音乐，声音特效，音视频播放交互等等），网络接口调用与数据存储，后台系统等开发内容。

6、测试发布

功能模块调试优化，软硬件集成调试。最终针对不同的平台，不同VR终端设备，测试调整导出发布最终项目。

这个的话工作流程有很多的