本文您将了解到：

1.VR UI 和传统UI实战中的区别在哪？
2.VR UI 如何破局3D眩晕？
3.VR UI 有哪些新的思路启发？
4.如何将VR UI 的设计融于真实场景？
5.3D漂浮立体图标如何实现？

必须说，今天的干货绝对在别处难得一见。
这是两位资深技术人员在价值君的软磨硬泡中，才答应分享的纯实操经验。
其中提到的技术，并非无人敢碰的顶尖技术，但其新的思路，在目前的VR UI交互领域，还没有太多人能领悟到，谁能抢先学到，谁就能立马派上用场，解决当下难题。
不过，大牛也感叹道，虚拟世界的设计，人们还懂得太少太少，这片星辰大海，目前的探索连1%都不到...
由于内容的专业门槛度，本文适合的人群为传统UI从业人员、刚步入VR 领域的UI新手。
如果你的朋友正在从事此类工作，也请推荐给他，这篇干货一定对他的思路会有新的启发。
本文分为三部分，第一部分为综述：VR UI所面临的挑战；第二部分实操分享：如何将VR UI 的设计融于真实场景？第三部分为实操分享：3D漂浮立体图标如何实现？

第一篇  VR UI所面临的挑战是什么？
VR UI真是个不好伺候的活儿！
由最初的概念到如今渐渐的普及，它不再是一个单纯的科幻构想，它的发展带来了许多不同的思路，引起各种新鲜的话题，全新的体验方式不仅是对使用者，更是对开发者提供了无限的可能。
在这篇文章，我将提到的，是一个在软件发展历史上非常悠久，但也因VR时代的到来扩展出了全新面貌的词汇----UI。

UI，全称User Interface，即是通常理解的用户界面。这点，所有接触过电脑，手机的人都不会陌生。
比较有意思的是，在最初的VR内容发展中，UI一度被认为是会严重影响沉浸式体验的存在，或者是说强烈的沉浸式体验会让人在虚拟世界里感受到更加的接近真实世界，因此UI的存在会“不必要”。
但随着不断深入的开发，VR的内容也渐渐由单纯漫游和展示，开始发展为需要更多在场景中互动，并在体验过程中传达给体验者，在这时，就需要更多的信息载体，而UI，也开始被赋予了新的内容。
光从设计的概念上来说，我们会发现和其他硬件平台相比，虽然都是传达着讯息，指引着交互，已大为不同。

“都是视角惹的祸”
我们通常玩一款第一人称的FPS视频游戏，大多数的情况，透过屏幕看到的视角，可能视角宽度覆盖的范围也就45度-60度不等。
在现实中，你的正偏侧面如果有什么东西，你会很快的意识到，但在多数透过屏幕的第一人称中，那就是你的视线盲点了。
在视觉上，VR不是把一个屏幕直接糊在眼前，而是直接覆盖了更广的视角，不同的设备从100度甚至到120度，这点，可谓是提供了一个真正意义上的第一人称。
在屏幕上，几乎所有第一人称武器射击本质都是朝向屏幕上一个固定的准心，而这个准心，是和你的视线始终绑定，你往什么地方看，这个准心包括你的武器也就随之而动。
在VR中，虽然也有游戏将武器的准心和视线绑定在一起，但这不再是一个近乎唯一的瞄准方案了，脱离准心，瞄准和射击不再是通过一个固定的位子，而是灵活拥有了更多角度操作的可能。
想想屏幕上的射击游戏如果有双枪，这两把枪往往射击方向都是一样的，但在VR中，你真可以让他们朝向不同方向。

在视觉上拥有了更广的视角让你在体验在更像是你进入了这个场景。
除此之外，在互动操作上，虽然很难说现在已经有了很多成熟的方案，但可以看的到，在这一块，VR本身也具有了许多的可能。
例如当戴上htc vive后，你左右手同时也会拿上两个手柄，两个手柄在场景中就宛如你的两只手，本身也可以映射成不同的物体，提供多种交互操作。
而你在现实中的移动也会投射到场景中的移动，虽然如今如果有着较大的场景，如果有大量的移动，还是需要通过手柄进行操作，因为现实中的体验间往往不会和场景一样的大小以及布局。

疲劳的难题怎么破？
不同的体验方式自然对于UI来说，也带来了不同的设计思路，一些曾经的游戏如今也额外推出了VR的版本，而在为VR量身打造的过程中，相比于以往的版本就会做出许多不同的变动。
不久之前，在横滨国际平和会议场举办的日本最大的电脑娱乐开发者会议 “CEDEC 2016” 上，Capcom 技术研究开发部的高原和启就有分享《生化危机7》VR版本和原版的诸多不同，他提到了一个许多VR开发者都在思考的问题，那就是如何更好的来应对VR疲劳的问题。
我们都知道3D眩晕症，当感受荧幕中运动出现不适当频率的情况时候，神经中枢会出现一种保护性的反应，阻止人体进一步去接受这些不稳定讯息。
在此时，人就会觉得头晕恶心，但这因个体的差异往往那个会比较大，就有点像晕车一样，不同的人敏感程度不同。

VR疲劳，本质就是一个3D眩晕症的升级版，沉浸式的体验会加强体验者的讯息接受广度，所以需要开发者更慎重的来处理各个环节，如果一个游戏畅玩两分钟眩晕两小时，这个游戏恐怕很快就没人玩了。
 
《生化危机7》VR的版本，首先降低了角色的移动以及互动操作的速率，调整了武器在手上上的位子，在UI上也是几乎推翻重制。
例如获得道具后显示物品信息，包括菜单界面，不再和以往贴在屏幕上一样了，而是改成了整个场景中悬浮，原因在于：
固定包括近距离处显示的UI会让人眼睛感觉不舒服，其实想想我们自己看书，除了近视等情况，舒适的阅读还是会让书籍和自己眼睛保持了一定距离，而且，肯定不会是你眼睛看到哪书就自己跟过来了。

和视线固定，在现在看来不是一个VR UI良好的处理方式，需要利用环境，不再用平面，而是用真正立体的思路去思考整个设计。
VR飞行射击游戏《EVE:瓦尔基里》，包括《使命召唤:无限战争》即将推出的VR飞行射击扩展内容中，都共同的将UI围绕着整个坐舱形成HUD，在你直视前方的时候，你能看自己血量和准心，当你往左右看，也会看到其他信息。
在VR中，移动视角不再是需要某一个按键，你带着头盔的时候，视角的变化就如同你在现实中一般。

不再同于之前的UI设计上主体是从一个屏幕去考虑，那本质上是平面化的思维，相对来说，VR的UI不再会是单纯的存在一些2D面上的信息展示元素，需要从一个更广更立体的角度去思考和设计，融入虚拟环境的元素，也会因为环境的不同变化带来不同的设计可能。
不管是设计的方式还是风格的定义，VR UI会着更多的可能。
一个能带全新体验的事物对于开发者来说，也需要用全新的思维去考虑如何更好的去创造这些体验。
绝对全新的思维模式
如同本身是一个全新事物一样，VR UI并不像移动端网页端UI那样有着非常多成熟的范例，在如今VR UI的相关工作中，更多的是需要探索和尝试，你很难找到一个头头是到的教程来教你整个设计的流程和体系。
我们的团队在最开始做UI的时候，最初的设计思路还是视频游戏中的那样，在实现上也是如此。
我们在UE4中，以通常游戏UI实现的方式，将整个界面贴合在摄像机上，但很快我们就发现，在VR中，这个贴合上“眼睛”上的界面，不仅仅出现了不清晰的问题，而这也并没有带来足够好的体验。
后来在字体上，我们也遇见了例如大篇幅的字体在VR中进行阅读并不友好，包括移动和变化字体也存在影响阅读的情况，这些或许是引擎功能的问题，也或许是需要更好的设计方案来解决。
但不管问题是什么，解决的过程和结果都是团队开发成长的关键，需要探索，不断寻找更好的思路。

如今，VR的发展也在由最初各种噱头吸引眼球，到逐渐的在成熟，形形色色的VR内容将在未来不断的推成出新，VR所涉及的领域已不再单是游戏，房产，建筑，医疗，教育等等有着许多的可能。
作为一名设计师，需要做的，概括着来说，就是不断用新的思维模式去解决新的问题。 
虚拟世界UI的设计，我们懂得太少，连1%都不到，未知还太多...

第二篇：UE4中实体UI绘制方案
动机
在VR中使用传统3D UI，可能会降低整个体验的沉浸感。而利用一个现实世界中的实体，诸如（LCD、CRT显示器、大型的公共屏幕、仪表盘等）来显示UI与玩家交互，会增加整个虚拟世界的可置信度。
利用本方案，可以在任意的Mesh表面绘制UI信息（诸如弯曲的CRT表面），可以在游戏中真实的呈现，日常生活中的各种“屏幕”，来带来流畅的交互体验。
实现
 利用Slate编辑器来制作UI Widget。

 将Widget绘制到Render Texture。
 在Content中创建RenderTarget Asset
 利用FWidgetRenderer::DrawWindow将Widget绘制到RenderTarget

创建Material使用Render Texture。

将Material赋予Mesh，来完成UI在模型上呈现。

展望

 在把RenderTexture应用到Mesh的材质上可以实现很多材质效果，诸如CRT的扰动，UI模糊，也可以充分利用PBR渲染管线，将UI融入到真实的物理世界中，接受光照、产生正确的反射和高光。
 可以建立一个RenderTexture，将多个UI绘制到上去，在目标Mesh上利用UV的Layout来决定显示哪个UI，可以降低Drawcall，增加较多UI的性能。

新手提示

 当有比较多的零碎的UI时，会有一定的性能影响。
 当一个物体有很多Submesh时要正确的管理Mesh的材质顺序，保持工作流的高效。
第三篇：在UE4中制作漂浮的立体图标

构思

在VR的场景中，因视角和互动方式的革新，UI样式的可能性大大的增加了，许多UI元素现在可以考虑以更加立体的形式来体现，以至于让这些元素能够更自然的附加在场景中。
 
现在我们的主题是一个具有文化属性的符号，它的用途是用作一个综合性文化建筑的示意图标，我的构思是一个竖琴，稍有立体，蓝色伴随浅浅的透明，在场景中轻轻的漂浮着。

我们可以先粗略的绘制一张草图来表达自己的大概思路。接下来，我们会首先用到Potoshop来完成样条线，再到3Dsmax中做成模型，最后导入到UE4引擎中，赋予材质以及在蓝图中设置动画。

如有对这些软件有基本操作和功能的了解，知道基础的动画曲线，便可以最好的理解教程。

在PS中绘制路径

 在PS中，我们首先利用钢笔工具勾勒出整个图标的外形，为了达到更好的观察效果方便调试，对钢笔工具设置为直接勾勒出来即是形状图层。

 勾画好之后，选中形状图层（如有多个图层，建议合并），导出成AI路径。

导入3DS max

 将刚才AI文件导入到3Dsmax中，这时候之前绘制好的路径会成为3Dsmax的样条线，我们可以调整一下插值中的步速，以让整个线条更加平滑，但不宜调整的过大。可能在我们这个单独的教程中，可以无视这个问题，但如果是要去做一个完整的项目，这无疑会影响优化。

 接下来我们把整个样条线转换成可编辑多边形，并挤出，这里我挤出的数值是0.5，具体多少，可以由自己把控。

 挤出之后，模型背面会有镂空的地方，这时候不要直接选中所有边进行封口，封口无法自动有效的封住这种有多个镂空的形状，这时候最好的办法是先对一些关键的边进行桥接，然后再封口。

  当整个模型完成之后，我们就可以导出了，将这个模型导出为FBX文件，命名因为之后需要导入引擎的缘故，建议使用英文（或拼音），这里，我的命名是model.fbx。

导入UE4

l  打开UE4，将之前的FBX文件导入进来，这里可以选择Import（导入），也可以直接将文件拖入进来，接下来我们右键新建一个Blueprint Class（蓝图类），Pick Parent Class（选择父类）为Actor，命名为model_BP。再新建一个Material（材质），命名为model_mat（命名没有硬性要求，但尽量要用英文）。

 点开model_mat，将材质的Blend Mode设置为Translucent，这样就可以直接设置透明度的效果，然后右键输入并创建constant3vector设置好颜色后连接至Emissive color（自发光颜色）。

UI元素一般不太需要受环境光照影响，所以可以采用自发光来设置基本颜色，但这点具体来说还是根据实际情况决定。

 在右键输入并创建constant，输入对应数值，这里的数值将用于透明度设置，1=100%，调节好合适的数值后，将其连接Opacity（透明度）。这样，这个简单的材质就设置完成了。

 点开model_BP，将导入进来的模型model拖入其中，然后赋予材质，然后可以在Transform中调整位子旋转和大小。

在蓝图中完善
 点开Event Graph，右键输入并创建Timeline（时间轴），然后双击点开。

 现在就是做动画效果了，添加两条（Float Track）浮点型轨迹，调整Length（长度），这影响整个动画效果的单次持续时间，Loop（循环）记得打勾，然后整个动画就可以循环播放了。
 做轻微漂浮的动画，我的思路是有一些小幅度的来回旋转以及上下位移来体现，所以这两条轨迹，一条命名为Location，控制位移，总长度6秒钟，每1.5秒一次变化，变化数值区间10以内。

第二条命名为Rotation，控制旋转，也是6秒长度，每1.5秒一次变化，变化数值区间在15度左右。

  时间轴OK了之后，回到Event Graph，右键创建Make Vector，拆分向量，将时间轴上Location的值连接至需要进行位移的轴向。

然后创建Make Rotator，拆分旋转值，将时间轴上Rotationde的值连接至需要旋转的轴向。这里，我两个都是Z轴方向。
 接下来再将model拖入进来自动成为一个变量，创建SetRelativeLocation设置相对位移，创建SetRelativeRotation设置相对旋转。

之后再将拆分好的向量以及旋转值连接至对应的设置中，连接好事件，就可以播放下看看效果了。

  播放后我们会发现动画的效果已经实现了（但须要将蓝图拖入到场景中才能在播放后有动画），一个慢悠悠漂浮在半空中的立体图标做出来了。

之后，你可以在这个基础上进行一些扩展，例如加上一些炫酷的材质，再新建一个时间轴让旋转和位移变得不再是同一时间同一进行，有些随机性等等。