我们使用两块独立的画布来进行测试,其中一块(1200×600)用于承载界面视图部分,使我们得以更好的聚焦于界面设计流程,而另一块(3600×1800)则专门用于呈现环境的部分。为了验证界面区域的尺寸是否合理,我们必须通过实际的VR设备进行测试体验。
使用Avocado,你可以很轻松的通过可视化的方式直接比较不同版本的设计方案。
3、工具
在讲解实际设计流程之前,我们先来了解一下需要用到的工具:
四、VR界面设计流程
你可以下载案例素材包,其中包含了所有将会用到的UI元素图形及环境背景图片。当然,使用自己的素材也完全没问题。
1、创建360°视图
首先,我们要创建用来呈现360°环境背景的画布。在Sketch当中新建文档,添加一个画板(Artboard),尺寸为3600×1800像素。
将素材包中的background.jpg拖入Sketch,置于画板正中。如果你在使用自己的素材图片,也要确保2:1的宽高比,并将尺寸设置为3600×1800.
2、创建界面视图
正如前面所说,我们的界面区域实际上是从360°视图当中割离出来的一部分,使我们可以更好的聚焦于界面部分的设计。
添加一个新画板,尺寸为1200×600,然后将“360°视图”画板当中的背景图片复制到新画板中,置于正中,不要进行任何缩放,我们需要的就是这样一块局部区域。
3、设计界面
接下来要实际进行界面的设计了。我们会尽量保持练习的简单易行,通过瓷片的形式展示界面选项。如果懒得制作自己的素材,你可以直接从刚刚下载的文件当中找到tile.png,并拖到画布正中,然后复制两份,并排放置。
从素材包中找到kickpush-logo.png,拖到画布中,放置在中间瓷片的上方。
看上去还不坏?
4、合并画板并导出文件
接下来的工作很有趣。在左侧的画板与图层列表当中,确保界面视图画板位于360°视图画板的上方,然后在画布当中将界面视图画板与360°视图画板层叠起来,横向与纵向均保持居中。
选中360°视图画板,导出PNG格式的文件。在最终的实际图片当中,界面视图区域与背景整体是无缝衔接的。
5、在实际设备当中测试
打开GoProVR播放器,将刚刚导出的PNG文件拖进播放窗口。使用鼠标拖拽窗口中的图片,便能以360°的方式预览整个环境样式。
实际设计流程到这里实际上已经结束了。比想象当中的简单很多?
如果你有OculusRift,GoProVR播放器应该可以检测到,接下来你就能通过实际设备浏览我们制作的VR环境及界面了。如果你使用Mac,那么可能需要在系统当中进行一些设置才能实现预览。
五、技术缺陷
1、低分辨率
目前VR头显的分辨率还很不理想。当然,对于移动VR来说,具体规格还取决于手机本身。无论怎样,考虑到屏幕与眼睛的实际距离通常不会超过5厘米,显示效果还是很难用清晰二字形容。
要确保最理想的效果,对应每只眼睛的分辨率都需要超过8K,换算成像素就是15360×7680。现实当中的技术水平距离这样的标准还很远,但并非远不可及,未来总会得以实现。
2、文本可读性
受到显示设备分辨率的局限,你所设计的漂亮界面在实际当中会有明显的像素感,这也意味着文本内容将变得更加难读,锯齿的情况会比较严重。因此,在目前阶段,要尽量为VR界面中的文字使用较大的字号,同时尽可能提升其他界面元素的清晰度。
六、完善设计流程
1、流程图
还记得前面提到的移动app界面流程图吗?我们同样可以将其运用到VR界面设计当中。按照功能流程将界面组织成逻辑清晰的流程图,开发人员将很容易理解产品的整体架构。
2、动效设计
完成了漂亮的静态界面设计,接下来的问题是怎样将动态交互效果呈现出来。我们同样从两个维度入手来解决这个问题。
基于Sketch当中的界面设计,我们通过AdobeAfterEffects与Principle来配合实现动效的展示。虽然最终输出的并非3D形式,但仍然可以很有效的帮助开发团队理解设计意图,或是向客户展示前期的设计愿景。
你可能会想:“看上去不错,可是VR当中的实际情况会比这种2D呈现形式复杂很多”,确实是这样,不过这种实践方式的关键在于我们可以将已掌握的设计能力扩展到新领域当中进行尝试。
七、环境互动还是界面互动?
有些VR体验会在很大程度上依赖于人与虚拟环境之间的互动,对于这类产品来说,传统形式的界面会显得有些蹩脚,你需要更多考虑环境本身的交互特性。
设想你正在为一家高档旅行代理商设计一款VRapp,你希望通过最为生动有趣的方式将用户“传送”到他们可能感兴趣的目的地。虚拟旅程的起点可以位于一个类似豪华办公室的场所,用户在其中翻看着漂亮的虚拟旅行杂志,或是摆弄着桌上各式各样的旅行纪念品,通过类似这样的“实体”互动来完成信息选择。
这种方式想象起来会很酷,但在实际当中会遇到一些问题。要获得最理想的体验,你需要最高端的VR及PC设备的支持,并需要搭配手柄一类的控制器来实现环境互动。此外,这样的app在设计与开发成本方面都需要很较高的投入。
1、新媒介的渐进式普及
在现实当中,不是所有的公司都能承受高额成本去打造如此高度沉浸化的体验。除非你们像Valve或Google那样拥有几乎无限的资源,否则聚焦在这类高端VR体验的产品思路有着太高的风险性。打造这样的产品可能有助于展示你们在科技前沿的技术水平,但无益于将产品真正推向大众市场。
通常,当一种新媒介问世时,那些早期实践者会一次次将其潜力推至极限;经过足够久的学习与尝试,新技术最终会被越来越多的人所接受。随着VR设备的逐渐普及,越来越多的公司开始探寻将VR技术与目标消费需求进行整合的机遇。
从我们的角度看,通过传统界面形式进行操作互动的VR产品–所谓“传统”,也就是多数消费者在手机、平板、桌面电脑及可穿戴设备当中早已熟悉的设计范式–将能得到更大范围的普及,同时也是那些在新领域当中有所需求的公司最值得投资推广的产品。
2、是时候起步了
我们希望能够通过本文给到各位设计师一些启发,并帮助大家打消掉一些对于新事物的恐惧,去试着上手VR设计。
人们常说,独自旅行才能走的更快。但要想走的更远,结伴同行才是上策。我们想走的更远,而不是一味的快。我们相信每家公司最终都会推出自己的VRapp,就像如今几乎每家公司都有自己的移动版网站一样。
于是我们创建了Kichpush工作室,希望能够将更多设计师联合起来,大胆的去做从前不敢做的事。VR产品越快普及到消费市场,旧有生态体系的深层变革才会越早到来。
雷锋网注:本文译者:C7210,交互设计师、UX设计热爱者、VR探索者、译者、猫奴、吉他手、鼓手,现就职于腾讯上海。