VR UI 怎么破 需要探索的还非常之多
本文您将了解到
- VR UI 和传统 UI 实战中的区别在哪？
- VR UI 如何破局 3D 眩晕？
- VR UI 有哪些新的思路启发？
- 如何将 VR UI 的设计融于真实场景？
- 3D 漂浮立体图标如何实现？
必须说，今天的干货绝对在别处难得一见。这是两位资深技术人员在软磨硬泡下，才答应分享的纯实操经验。其中提到的技术，并非无人敢碰的顶尖技术，但其新的思路，在目前的 VR UI 交互领域，还没有太多人能领悟到，谁能抢先学到，谁就能立马派上用场，解决当下难题。
不过，大牛也感叹道，虚拟世界的设计，人们了解得太少太少，目前的探索连 1% 都不到。
由于内容具有一定的专业门槛，本文适合传统 UI 从业人员、刚步入 VR 领域的 UI 新手。如果你的朋友正在从事此类工作，也请推荐给他，这篇干货一定能为他带来新的思路启发。
本文分为三部分：第一部分为综述，探讨 VR UI 所面临的挑战；第二部分为实操分享，介绍如何将 VR UI 的设计融于真实场景；第三部分为实操分享，讲解 3D 漂浮立体图标如何实现。
第一篇：VR UI 所面临的挑战是什么？
VR UI 是一项颇具挑战的工作！从最初的概念到如今逐渐普及，它不再只是单纯的科幻构想，其发展带来了许多新思路，引发了各种新鲜话题。全新的体验方式不仅为使用者，也为开发者提供了无限可能。
在这篇文章中，我将提及一个在软件发展历史上非常悠久，但因 VR 时代的到来而展现出全新面貌的词汇——UI。
UI 将藉由 VR 获得全新阐释
UI 全称 User Interface，即通常理解的用户界面。所有接触过电脑、手机的人对此都不会陌生。
有意思的是，在最初的 VR 内容发展中，UI 一度被认为会严重影响沉浸式体验，或者说强烈的沉浸式体验会让人在虚拟世界中更接近真实世界，因此 UI 的存在被认为是“不必要”的。但随着开发的深入，VR 内容逐渐从单纯的漫游和展示，发展为需要更多场景互动，并在体验过程中向体验者传达信息。此时，就需要更多的信息载体，UI 也因此被赋予了新的内容。
从设计概念来看，与其他硬件平台相比，虽然都是传达信息、指引交互，但 VR UI 已大为不同。
“都是视角惹的祸”
我们通常玩第一人称的 FPS 视频游戏时，透过屏幕看到的视角宽度覆盖范围大多在 45 度 - 60 度之间。在现实中，我们能很快意识到正偏侧面的东西，但在多数透过屏幕的第一人称游戏中，这些区域就成了视线盲点。
在视觉上，VR 并非简单地将屏幕置于眼前，而是覆盖了更广的视角，不同设备的视角范围从 100 度甚至到 120 度，真正实现了第一人称视角。在屏幕上，几乎所有第一人称武器射击都是朝向屏幕上一个固定的准心，该准心与视线始终绑定，视线移动时，准心和武器也随之移动。而在 VR 中，虽然也有游戏将武器准心与视线绑定，但这不再是唯一的瞄准方案，脱离准心后，瞄准和射击可以有更多角度的灵活操作。例如，屏幕射击游戏中双枪的射击方向往往相同，但在 VR 中，双枪可以朝向不同方向。
在 VR 游戏《直到黎明：血戮》中，玩家可以操作两把武器朝不同方向射击，这种操作在其他 VR 游戏中也能实现。更广阔的视角让玩家在体验中更像是真正进入了场景。
此外，在互动操作方面，虽然目前还没有很多成熟的方案，但可以看出 VR 本身具有很多可能性。例如，戴上 HTC Vive 后，左右手会各拿一个手柄，这两个手柄在场景中就像两只手，可以映射成不同物体，提供多种交互操作。现实中的移动也会投射到场景中，但如果场景较大，大量移动仍需通过手柄操作，因为现实体验空间往往与场景的大小和布局不同。
疲劳的难题怎么破？
不同的体验方式为 UI 设计带来了不同的思路。一些曾经的游戏推出 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 有很多成熟范例，在相关工作中，更多需要探索和尝试，很难找到全面的教程来指导整个设计流程和体系。
我们团队最初做 UI 时，设计思路和实现方式都借鉴了视频游戏。在 UE4 中，我们将整个界面贴合在摄像机上，但很快发现，这种贴合在“眼睛”上的界面不仅不清晰，体验也不佳。在字体方面，大篇幅字体在 VR 中阅读不友好，移动和变化字体也会影响阅读，这可能是引擎功能问题，也可能需要更好的设计方案来解决。
无论问题是什么，解决过程和结果都是团队开发成长的关键，需要不断探索，寻找更好的思路。
如今，VR 发展已从最初的噱头吸引眼球逐渐走向成熟，未来将不断推出各种 VR 内容，其涉及领域不再局限于游戏，还包括房产、建筑、医疗、教育等。作为设计师，需要不断用新的思维模式解决新问题。虚拟世界 UI 的设计，我们了解的还不到 1%，未知还有很多。
第二篇：UE4 中实体 UI 绘制方案
动机
在 VR 中使用传统 3D UI 可能会降低沉浸感，而利用现实世界中的实体（如 LCD、CRT 显示器、大型公共屏幕、仪表盘等）显示 UI 与玩家交互，可增加虚拟世界的可信度。利用本方案，可以在任意 Mesh 表面（如弯曲的 CRT 表面）绘制 UI 信息，在游戏中真实呈现日常生活中的各种“屏幕”，带来流畅的交互体验。
实现
- 利用 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 元素可以以更立体的形式呈现，使其更自然地融入场景。
我们的主题是一个具有文化属性的符号，用作综合性文化建筑的示意图标。我的构思是一个稍有立体效果、蓝色且略带透明的竖琴，在场景中轻轻漂浮。
我们可以先绘制一张草图表达大致思路。接下来，先用 Photoshop 完成样条线，再到 3Dsmax 中制作模型，最后导入 UE4 引擎，赋予材质并在蓝图中设置动画。如果对这些软件的基本操作和功能有一定了解，知道基础的动画曲线，将能更好地理解本教程。
在 PS 中绘制路径
在 PS 中，首先使用钢笔工具勾勒图标的外形。为方便观察和调试，将钢笔工具设置为直接勾勒出形状图层。勾画完成后，选中形状图层（如有多个图层建议合并），导出为 AI 路径。
导入 3DS max
将 AI 文件导入 3Dsmax，之前绘制的路径会成为 3Dsmax 的样条线。可以调整插值中的步速，使线条更平滑，但不宜调整过大，在完整项目中这会影响优化。
接下来将样条线转换为可编辑多边形并挤出，挤出数值可根据实际情况把控，这里我设置为 0.5。挤出后模型背面可能有镂空，此时不要直接选中所有边封口，因为这种方法无法有效封住多个镂空的形状，最好先对关键边进行桥接，再封口。
模型完成后，将其导出为 FBX 文件，建议使用英文（或拼音）命名，这里我命名为 model.fbx。
导入 UE4
打开 UE4，导入 FBX 文件，可以选择 Import 或直接拖入。右键新建一个 Blueprint 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 度左右。
时间轴设置好后，回到 Event Graph，右键创建 Make Vector，拆分向量，将时间轴上 Location 的值连接至需要位移的轴向；创建 Make Rotator，拆分旋转值，将时间轴上 Rotation 的值连接至需要旋转的轴向，这里我都选择 Z 轴方向。
将 model 拖入自动成为一个变量，创建 SetRelativeLocation 设置相对位移，创建 SetRelativeRotation 设置相对旋转，然后将拆分好的向量和旋转值连接到对应的设置中，连接好事件后即可播放查看效果。
播放后会发现动画效果已实现（需将蓝图拖入场景才能在播放时有动画），一个慢悠悠漂浮在半空中的立体图标就制作完成了。之后可以在此基础上进行扩展，如添加炫酷材质，新建时间轴使旋转和位移更具随机性等。