VR界面的What. How. Why. （上）

发表于2017-01-09

作者：李嘉玺&吴嘉慧

年年岁岁说VR，如今VR终已至。笔者二人有幸成为VR项目中的一员，经过一段时间在项目中的工作后，将会在这次的文章中用最平实易懂的文字来描述我们在项目工作中收获的心得体会，分享给大家。本次的分享将会分为上下两篇，上篇将讲述在项目工作中的一些思考和初步的尝试。

在构思这次的文章的时，任性地把做了很久的平面UI定义为传统UI。因此相对而言的VR UI便称为新UI。那么就会很多人不服，为什么要将VR的UI定义为新UI，而平面UI就变传统了呢？甚至还有游戏的UI，不应该跟VR的界面很像吗？与传统UI相比较而言，VR UI的新不仅仅体现在它所处于的三维空间上，而是它的“物质实物化”。

图：实物化和立体化的区别

简单地理解，现实世界中的所有物体，都具有交互性，看看你手边的所有物件，是不是都能与你产生交互，就连你吸入呼出的空气都是你与世界产生交互的体现。切换到虚拟世界，我们也会下意识地模拟现实去使用人造三维世界里看得到得一切。因此，对于虚拟世界中的UI，同样也应该多少具备这些属性。那么接下来笔者二人来说说如何为VR UI赋予这些属性。

1. 我们眼中的VR UI是什么？

Virtual Reality是综合利用计算机图形系统和各种现实及控制等接口设备，在计算机上生成的、可交互的三维环境中提供沉浸感觉的技术。其中，计算机生成的、可交互的三维环境称为虚拟环境（即Virtual Environment，简称VE）。利用多源信息融合的交互式三维动态视景和实体行为的系统仿真使用户沉浸到该环境中。

那么我们眼中的VR UI是什么？实践中，我们发现它所需要承载的跟平面UI没有什么区别。文字、图片、按钮。那是否代表平面UI里的设计原则，可以沿用至VR里呢？答案是肯定的，但就像我们上面所提到的，VR UI的新不仅仅体现在它所处于的三维空间上，而是它所带给玩家新的交互操作，新奇的观感体验，在立体的三维空间中也诞生了许多新颖的内容，以及给我们视觉设计师带来的新挑战，而其所带来的身临其境的感觉是传统UI所无法给予的。

因此VR UI是虚拟环境中玩家所用于与世界以及其他玩家残生交互的这么一个“物质”，而信息和选项本身就需要一个物质化的东西来承载。有人会问，那么传统UI所用的面板不就可以直接沿用了？在这个立体的三维空间中，传统UI式的面板只是它其中的一种表现形态，它可以是真实世界里你见过的任何东西。那么接下来我们来聊聊UI是怎么被物质化实物化。

界面辅助构建世界观

玩过魔兽这类游戏的同学都知道，虚拟世界都有自己的世界观，而世界观决定了整个世界所处的时期，特有的属性，运行的机制以及影响着故事线的发展，作为虚拟世界中的一个存在，同样也担负着构件世界观的功能。

图：百度VR浏览器界面

截图是百度VR浏览器的界面，界面承载了可以进行翻页的按钮页面。点击按钮观看视频。这个虚拟环境被设置在了宇宙都某处。而我们大概可以感知到，界面是一张薄薄的平面，看不到厚度。简单的可以理解为，这是一个放置到三维空间的平面界面。抛开在手机上的运行成本来说，这么做是讨巧的。最重要的是，它符合了场景的气质，浮动的平面和宇宙构成了踏实的未来感。试想这样的界面出现在一个鸟语花香的森林里，因为未来感被削弱，UI和环境就会产生格格不入的观感。

VR侧重于人进入虚拟环境的沟通交流，沉浸式的体验方式更加注重的是交互体验，而界面起的事辅助锦上添花的作用，因此VR UI作为虚拟世界中的一个组成部分，在某些场景下在这其中只能退居最佳配角的位置。

区别传统UI所有的内容元素都被层层叠叠的放置在屏幕上，VR界面的可能性因为虚拟环境的广阔性有了更多的可能。如同现实世界一般，你所能看到的东西都是能和你相互作用的，它们不再是屏幕上一个静止的icon，也不是tab上的一个选项，而是能让你“真实”的感受它们在你的手上存在，通过视觉和听觉的设计甚至能让你真的感觉到有清风拂过你的发丝，有实物散发的诱人香气。

图：VR游戏截图

立体和平面的融合

常听说虚拟世界是一个立体的空间，里面的内容自然而然也都是有体量感。所以在设计的过程如何摆脱界面的平面化呢？首先从界面的结构框架说起

以笔者负责的项目VR小游戏“电流急急棒”的UI设计思路是个很好的例子。吸取以往经验，从一开始设计这个会在一个工厂环境中出现的界面时，就将它往一个漂浮在空中、由管道规划的、游戏机感的界面。有这个出发点是因为这个游戏就是让玩家使用一根通电棒子，在不触碰管道的情况下，从起点走到终点。UI的框架使用了管道的模型和材质。使得界面本身可以和整个环境融为一体。然而界面的布局仍然遵守平面界面设计的原理。所以在信息传达和融入环境中都能结合。

图：电流急急棒界面制作的演变

而VR聊天室的UI则是完整的从平面化到去除平面化道路上走了一回，第一版的界面将所有的内容都整合在一个面板上，有点像是把2D的设计内容直接投射到VR世界中，到第二版的时候交互的同学重新整合内容后加入了快捷操作的概念，在引入操作手环的基础上，以手环投射的方式,采用了模拟屏幕部件的pixel元素老拓展，设计一套带有微电子感，符合世界明亮清新特质的界面。只要通过触发手环来唤出快捷菜单，便可以快速的使用表情或自拍感等工具来和其他玩家进行交流，通过透明的面片和像素元素来承载上面的表情或工具模型，界面本身与手环及环境呼应匹配，而信息通过简洁的VR UI呈现，来帮助用户更快捷更灵活的与vr世界和其他玩家进行交互，这点与我们在进行传统UI设计时的原理是一样的。

图：VR聊天室第一版&第二版菜单截图

除了框架，从交互角度去考虑，同样也可以异想天开，摆脱平面化。

再以最开始的项目“Magic Brush”为例，这个3D画图工具唯一的三个主界面（笔刷、色盘、工具），是用户可以随时直接触达到的。怎样的呈现，让它们的排布让体验方便又符合逻辑呢？我们从一开始以图标触发的方式去思考，发现操作的成本很高；而且这毕竟是一个拥有360度无尽空间的环境，不应该局限在一个平面上。与此同时，我们分析了竞品的选择，最后决定将这三个面板制作成一个像风筝线轴的更替模式。使得这3个面板可以组成一个跟用户生活认知相关的整体。在操作时，可以下意识地接受和使用其中的操作逻辑。这种接近信手拈来的操作，也符合用户对一套工具的期许。

图：MagicBrush界面实物化的参考

说到这里笔者有一个想法就是设计师在设计的过程中是要保留平面化还是要去除平面化取决于产品内容的本身，以VR聊天室为例第二版的UI设计中，我们希望实物交互的操作感更强，将聊天室的UI3D化了，让它与前一版相比会更立体有更强的反馈感，虽然将常用的的快捷菜单和使用率较低的设置菜单拆分开来，但是为了整体风格上的一致，设置菜单这类较文字按钮信息化的内容我们也将其模型化了，虽然整体上看整体一致，但却有种说不出的违和感，讨论的过程中，大家提出难道真的所有内容都需要这么立体在VR世界中才算合理吗？这种强行立体化的做法就像是为UI增加了一些无谓的装饰。现实世界中有桌椅，灯具这些立体造型的物件，也有像纸片名片这类片装扁平的东西，因此在某种程度上这种相互结合也许是VR UI取得平衡的一种方式，这也是下一阶段优化所思考的方向。

图：VR聊天室账号及mic设置

深入地融合界面和环境

少数情况下在还没看到世界场景的时候，便开始其VR UI的设计。以VR聊天室为例，初期按照原画同学的风格稿进行界面的绘制和初步配色，待到世界场景模型完成后放进场景中进行微调让其风格一致，是不是觉得这样的情况还不错？但是这时候我们也可以延伸出一个问题，就是实际上UI是否真的必须和场景风格元素完全保持一致呢？

以VR聊天室为例，当VR聊天室作为一个独立的个体时，根据整个世界的场景来设计出一套与其风格一致的UI是合适的，但是做VR社交内容不会是单一性的，这套UI不会仅仅只服务于一个版块，当有其他的副本功能加入时，设计的过程中对这点的侧重点没做到位的话，当套用到其他板块上的时候就有可能显得格格不入，因此UI的调性和通用性就变的极为的重要。

多数情况下，UI设计师会在世界场景中去进行设计，就像在刚才提到的“电流急急棒”界面在做成模型之后，徒然意识到是否还有什么场景中的元素可以强化界面的观感呢？因为是取材自场景中的元素，如果运用合理，同样让界面可以无缝连接到VR环境里。于是想到，能不能把在场景出现的光效加入界面呢？

图：光效作用在面板时的效果

Bang！把光源加入界面之后，有颜色的灯光会作用在建模好的文字面板以及框架轨道上，立体感因此大大增强。虽然是漂浮在界面内的灯光，但是不会有违和的感觉。UI的服务对象就是这一个场景，因此场景元素被很好地融入到界面中了。

以上三点，界面它还是界面，用来现实信息，承载按钮。但脑海中它的定义也会从“界面”这个词模糊出来，更像一个被“物质实物化”的东西。

以此，VR界面离平面UI又远了一步。

2. 构建VR UI从平面开始

为什么我要学Maya和Unity？这个问题可能很多视觉设计师会询问。答案很简单，VR UI的设计流程贯穿了平面（Photoshop、Illustrator、Sketch）、3D建模（Maya）、游戏场景还原。如果能最大可能地掌握3D和游戏软件的基本操作，设计师对自己设计的实现和效果可以最大程度的把握。一开始对3D软件和Unity一窍不通的我们，在做好平面效果之后，交给3D设计师建模，就出现了没有双方对设计细节理解的出入，导致一开始的平面效果没有完全实现，还消耗了很多时间。这样出来的一个模型，还需要交给在Unity中调试的开发同学，期间又有很多沟通的成本，当你想尽办法通过文字和口头的描述来形容你所期望达到的视觉效果的时候，你会发现能用的词汇真的是少之又少。

这里再强调一个非常关键的要素，就是“单位”。从平面软件到建模软件到游戏软件，计量单位会反反复复地发生变化。这容易导致最终的效果很可能出现位置、字体大小的偏差。因此，能掌控和知悉从开始到实现的全过程，是保障最后输出的视觉效果达到预期的方法。

在将近两个月的实践看来，VR UI的制作步骤一部分会在平面软件上实现、另一部分是在建模软件上实现的，当然还有在Unity中还原设计的部分，但是制作和观察效果在前两部就能完成，我们在这里先只说前两部分。

平面绘制部分

万丈高楼的诞生从图纸开始，VR UI也不例外，以几个月的实践为例，笔者二人将会通过不同的切入方式来给大家分享。

图：Maya、Unity在制作VR游戏时的分工

在刚开始接手VR项目的界面设计工作的时候，因为对Maya还很不了解。所以主要的设计步骤是在平面软件上完成的。在这种步骤分配中，其实跟平面UI的步骤很相似。做好设计、切图、交给开发同学去实现。但有个问题，这会是一个三维的界面，除了考虑X和Y轴，还要考虑Z轴的存在。当然我们也实践过，就是纯粹的平面在虚拟世界中会显得异常地单薄和简陋。再多细节的图盘要是以平面的形式出现，用户从不同的角度观察过后，就能发现破绽，很可能会认为这是没有完成的表现。

回过来，平面中我们把A叠加在B上，是通过给A下方增加阴影来实现。那么在三维界面中，要实现A在B上方只需要增加Z轴的距离就好了。所以在设计的时候，还需要逐渐培养自己的三维感官。除了Z轴的深度，还可以通过在Z轴上制造倾斜来打破平面限制。

图：以剪纸看现实中的Z轴叠加

那么，“层次”的概念就很重要了。以上面剪纸作品为例，其中的每一层都是一个单独的剪纸，因为有了Z轴的深度，使得叠加的几个平面中产生的空间感。这就是我们一开始下手的方向。

这里要以我所尝试的Magic Brush为反例做一个注意事项的总结。第一，注意这个层次的设置。譬如剪纸的图例，如果从正面看去，很可能每一面都有重叠的部分，导致空间感大大减弱，即便是几层平面的空间叠加看上去也只像一个平面而已。第二，注意灯光的加入。在没有灯光的照射下，再立体的物件都不会棱角分明，当然更不用谈阴影的透射了，所以在设计的时候应该要考虑灯光在场景中的位置和它会怎么影响界面各平面的层次感的。第三，材质。贴图作为图片是没有材质的，换句话说，结合第二点，它是不会达到反光的效果。这样，这个物体在灯光下是没有高光、反射、明暗分界线的。这样再多的层次，也只会拥有平面感，因为它们没有一个物体的基本光感属性。

因此，在平面软件中切好图了之后，首先需要在Maya里建立层次模型，将切图贴上（简单实用UVmap来实现），观察Z轴上层次效果。然后就是将有贴图的FBX模型导入到Unity查看实际场景的效果。对3D软件不熟练没有关系，因为这些操作所要求的技术含量不高，练练就会了。或者是交给开发同学代为实现，不过这样就增加了设计的步骤成本，但也总比没有好。

而笔者在做VR聊天的时候也是从图纸开始绘制一些草稿图，通过大量的黑白稿来探索也运用来在设计传统UI时使用的设计方法，根据不同的关键词和情感因素来进行不同的方案设计。

然后从选中的方案中进行下一步的2D视觉细化，以及结合第一版所收到的意见，如用户操作的时候给予的反馈不够明显，操作不够便捷，操作方式没有场景感等问题作了针对性的优化。在设计视觉高的过程中同时也需要考虑到还原到3D时的一些视觉效果。

这里也简单的分享一下，初期设计师都会认为像做传统UI一样，将设计好的资源和模型直接发送给研发同学，之后就是还原实现后的视觉走查，但其实最高效的方法就是视觉设计师自己将着这些资源还原到Unity后，再交付给研发的同学进行效果的实现，碍于这个VR界面所处的环境的原因，视觉走查并没有办法像传统UI那样去查验，因此在最初的环节视觉的同学就自行进行排版可以避免掉很多问题。

三维建模及Unity3D部分

逐渐或已经熟悉建模软件的同学，可以采用第二种方案。在草稿纸上画出大致UI的立体造型，然后就可以开始在建模软件直接建模了。其实草稿都是非常辅助的存在了。最主要是脑袋里知道要建造一个怎样的东西出来。因为UI的建模其实已经相比建造场景或是道具简单得多了，大部分的时间可能会花在优化模型上。。
善用shader，也就是maya中的材质。Jiaxi用的最多的是两种，贴图和默认的shader。譬如这个按钮（贴图），有两层贴图，一层是中间的文字，一层是圆形的外框，最底层的是一个扁平的圆柱体的模型。也就是说，即便是文字，也需要在平面软件中设置好之后，导出png格式才能在maya中显示。这就要求在设计的切图时，需要分别在平面软件中导出。然后需要反复在平面软件和maya中调整，直到满意为止。

默认的Shader分很多种，可以简单仿造出金属、塑料、玻璃等质感。颜色和透明度都可以修改，可以大致地观察到想要的整体效果时怎样的。当然，光效和更复杂的材质，在Unity调试会更好。更复杂的，包括UVmap、Normal map以后会有同学再补充，这里就先不提了。

这里也快速分享一个，如果在时间紧凑的情况下又是不会建模也不熟悉Unity的视觉同学如何利用视觉切图资源快速到Unity3D中快速验证方法。