VR设计怎么做?写给零基础新手的实战案例演示 收藏

UI交互2022-12-21

我最近入手了 VR 设备,体验大大超出预期,难怪老罗觉得 VR 是下一代硬件平台,我觉得还真的有可能。在 VR 中有很多新奇的交互体验,视觉冲击感强,所以我对 VR 设计具体怎么做,充满好奇。不管你将来做不做 VR 设计,其实都应该了解一下,作为设计的广度,拓展下知识面也是必要的,万一哪天就要做了呢?就像多年前的 UI 设计一样,所以这篇文章值得点赞收藏。

之前也有写过 VR 相关文章,结合起来看效果会更好。同样超干货,值得一读。

用一篇超全面的文章,让你掌握VR设计的基础知识 本文旨在向不了解 VR 设计的人介绍一些基础概念(资料来源于谷歌和一些其他机构)。

阅读文章 >

VR 应用具有非常直观的 UI 界面,与可穿戴设备、手机、平板、PC 上的应用类似,使得大众能够使用 VR。想出新颖的交互会比较有趣,但它却增加了用户的学习曲线。

类似于 2D 界面,VR 设计师会用大小、对比和颜色设计出界面层次结构。在 VR 里,大小取决于用户和内容之间的距离,因此了解内容的大小和适当的观看距离至关重要。

比如,知道要设计多大的字体是很棘手的,但幸运的是,在现实世界中有很多先例。在为 VR 设计内容时,对印刷设计(广告牌、海报、书籍)也需要类似的思考,对 VR 设计有借鉴意义。

考虑下你现在是如何与一个触摸屏进行互动。我们必须慢慢去学习理解许多模式,比如滑动、捏缩放,长按出现更多选项。这些在做 VR 设计时也必须要去考虑好。

我相信随着越来越多的 设计师 进入 VR 领域,将会有更多的想法来创建和打造新的 UI 模式,从而帮助行业向前发展。

一、视野 视野,或任何给定时间可观察环境的范围,是设计 VR 界面时非常重要的一个方面。更宽的视野,用户在体验过程中的沉浸感就更强。有 2 种类型的 FOV 共同作用形成人类视觉。

单眼 FOV 描述的是我们一只眼睛的视野。对于一只健康的眼睛,单眼 FOV 的视野水平在 170°-175°,包括从瞳孔到鼻子的角度。鼻前视野 FOV 通常为 50°-65°,对于鼻子较大的人来说较小,而从瞳孔到头部一侧的视野为颞 FOV,其较宽,通常为 100°-110°。

二、新建 Figma 文件 1. 画板

当做 VR 设计时,我使用的画板尺寸为 3600x1800(360 度),然后我绘制出完美的 FOV 区域来集中主要设计。

2. 消失点

在透视理论中有一个消失点的概念,这个概念在 VR 设计中很有用,因为它能帮助设计师在设计软件中创建一个便于感知深度和距离的参考。

我总结了一种在我的设计中创建消失点的方法,通过在一个圆内以 10-15 度的角度画分隔线。之后,我将线条引入画板,并拉伸线条,直到它在框架内。

完成后,将以连续间隔的直线放到画板中。(彩云注:这个方法也很适合用到画透视线中)

3. 选择主题并丰富背景

一旦消失点画好了,主要的参考线已经变明朗了,接下来就取决于你想如何在环境中发挥创造力。

大多数时候,我使用渐变来创建天空和陆地等效果,然后添加了气泡、结构或使用形状的建筑物,这为环境添加了很多细节,使其感觉更 3D 逼真。

4. 设计 UI

到这一步的时候,你可以基于产品目标开始设计 UI 了。在设计 VR 时,对比是最重要的,因此,尽量减少文本和背景周围的颜色。

通常,背景一般是半透明,在 UI 设计中一个白色背景最好适配深色环境,而对于深色背景最好适配白色环境。按钮通常包括两种形式,主要按钮和次要按钮,颜色保持简单同样是最好的。

5. 布局

与桌面和手机的传统 UI 设计不同,在 VR 或者 AR 中,嵌套导航保持在同一环境中,而界面框架利用了环境中可用的巨大空间。

只有当有新的游戏场景可供探索时,环境才会发生变化。其他时候,也可以实现弹出窗口,新层叠加在旧 UI 之上。

6. 使用 XR 工具创建曲面 UI

仅用 Figma 就可以了,设计工具这块原来就足够了,有一种快速简单的方法来设计原型 3D,VR,AR 界面。

有一个插件叫 3D UI Generator,能够自动缩放和调整任何图形,画板以创建 3D 界面和环境。它支持旋转、斜切、缩放、远近、FOV、曲面程度和等距视图。在 Figma 上可以安装 3D for XR:  https://www.figma.com/community/plugin/1043890631255427270/3D-for-XR

7. 声音用户体验

虽然在使用网页或 APP 时,声音往往很烦人,但它是 VR 开发不可或缺的一部分。考虑通感现象,其中一种感觉的刺激导致另一种感觉自动触发。

例如,你闻到一些东西,就会产生味觉错觉。这也适用于声音。由于 VR 中仍然缺乏触觉反馈,因此当用户触摸物体时,声音是提供反馈的一种很好的方式。

3D 声音(又称 Holophonic 声音)仍处于起步阶段,但将对我们体验 VR 的方式产生变革。我们都习惯于立体声,它提供来自两个声道(左/右)的声音,但全音可以让我们分辨声音是来自上方、下方还是后方。

想想当你在外面听到飞机的声音,你凭直觉向上看,对吗?在 VR 中拥有这种声音体验将使用户真正身临其境。

三、总结 这是 VR 设计最基本的底层原理。这几篇 VR 相关文章一起看完,总算让 VR 中的设计不再神秘了。

元宇宙 是未来发展一大趋势,不少人都想上这趟车,VR 设计就是最靠近这一趋势的领域之一,VR 设计师这个岗位在将来会越来越紧缺。

更多VR好文:

Facebook设计师:从VR设计实战中总结的5个设计思路 @C7210 :本文来自 Facebook VR 团队的设计师 Gabriel Valdivia,为我们讲述了Facebook 360这款备受关注的新产品诞生背后的一些设计思考与经验心得。

阅读文章 >

欢迎关注作者的微信公众号:「彩云译设计」


让你的品牌快速脱颖而出,抢占市场份额,提升销量
免费获取方案及报价
*我们会尽快和您联系,请保持手机畅通