怎样设计 VR 界面和环境,用户才会感到舒适并且被吸引?

摘要

Daydream 设计师分享的 VR 用户界面和场景设计心得。

本文是指挥家 VR 投稿,根据 Daydream 设计师演讲编译。

界面设计

在移动互联网应用中,许多设计师们都思考过如何通过视觉去引导用户,比如在手机上如何摆放内容让用户更容易点击到。

屏幕快照 2016-10-18 上午12.15.31.png

但 VR 设计想象起来有点恐怖,因为可以做的事情太多了。首先要了解一些 VR 设计上的限制条件,其中身体限制就是其中之一。

0.gif

而当你为 Daydream 设计时,需要多去考虑用户是如何转动他们的头部,有多少内容是他们可以看到的,还有多远的距离是合适的。我们总结了分享中的几点要素,可以帮助 VR 设计师们在设计场景时少走很多弯路。

UI 界面

就像在着电影屏幕一样,在 VR 场景中用户最多可以看到左右 70° 左右的内容,但是 30° 以内是最舒适的范围。如果超出这个范围,虽然可以看到,但并不是特别舒服,他们需要转动脖子进行观察。

屏幕快照 2016-10-18 上午12.18.48.png

试想如果你将内容放在太偏的地方,用户可能会需要频繁调整他们的姿势来观察内容。所以 VR 场景中,UI 界面左右覆盖最好不要超过 70° 的可视角,每侧的内容在 35° 范围内为佳。

0 (1).gif

垂直角度的设置则可以帮助你为用户设计出最佳视角和可活动区域。垂直角度的内容最大覆盖区域为 15°。角度问题当然主要还是受到用户姿势的影响,比如当用户靠在椅子上时,受脖子限制,他们没法将头低下来太多。

0 (3).gif

信息深度

深度信息是 VR 场景和普通二维场景的最大区别之一。我们可以将所有的信息放在用户视野活动区域的平面上,还可以将信息摆在不同深度上。

0 (4).gif

但是信息深度的摆放也不能太过随意,不然可能会严重影响用户的体验。界面不宜太靠近用户,这会让用户觉得信息是贴在脸上的,阅读起来十分困难。同时界面不宜离用户太远,这会让用户完全读取不到信息。建议的深度距离控制在具体用户 0.5m—20m 之间。

0 (5).gif

在界面背景中通过增加一些粗糙点和光影信息,大脑会自动帮助用户理解界面之间的关系。其中,粗糙点的目的是让背景看起来不是平涂出来的色块,阴影的设置可以让你的用户更好的理解场景里的深度变化。如果没有以上这些信息的话,在 VR 场景中用户感觉就会像是看着无限远的地方。 

0 (6).gif

文字大小

VR 场景里,文字将是不可或缺的组成元素。但是 VR 中的文字到底应该多大才能保证用户的舒适阅读呢?什么样的尺寸会影响到用户的阅读?

屏幕快照 2016-10-18 上午12.22.38.png

最理想的状态是可视角内每一度达到包含 60 个像素左右,但现阶段大部分的设备像素密度集中在 10~13 像素左右。就目前来说基础文字大小都不能小于 14 像素,否则用户将无法准确阅读,而 20 像素左右是目前最为舒适的一个大小尺寸。随着技术的发展,更高的度像素密度,可以使你的文本尺寸即使缩小也可以轻易阅读。

屏幕快照 2016-10-18 上午12.23.18.png

这边有个公式可以提供给大家,通过这个公式利用引擎中的距离、理想像素和设备的度像素计算出最终合适的文本高度。

屏幕快照 2016-10-18 上午12.23.38.png

环境设计

启动场景

VR 最重要的一个特性就是能够带用户到任何地方。所以在设计启动场景时,建议将场景的目标设定为一个神奇的地方,一个让用户有欲望去探索、并会向他朋友展示的一个环境。

0 (7).gif

千万不要将 VR 环境设计当做只是做一张壁纸或者一个背景。当然如果真的没有想法时,空白的场景是个不错的表现形式。但这就意味着你失去了一次品牌展示和为用户留下难忘回忆的好机会了。

屏幕快照 2016-10-18 上午12.33.49.png

声音设计

大家可以回想一下,没有一个地方是无声的。声音是一个优秀环境的重要组成部分。VR 场景中,声音设计应该先于视觉设计开始进行。甚至,声音设计最终还会影响视觉设计的方向。但是不要依靠想象力,需要自己去体会声音在环境中的作用。

屏幕快照 2016-10-18 上午12.34.56.png

用户界面

有些朋友会在 VR 环境中加入一些让用户恐慌的设计元素,比如,一个黑暗的走廊或者打开一半的小门。这会非常容易让用户觉得不适,因为用户不知道背后到底藏着什么。这种不适会导致他们不愿意花费时间在这个应用上。UI(用户界面)应该和环境相结合,通过颜色和光影、动画甚至一些物理的反馈让他们感觉像在现实世界中真的存在一样。

屏幕快照 2016-10-18 上午12.35.30.png

举个例子,如将导航放置在石头前以确保文字可读性的同时,还保留了光影和空间信息。通过这些来将导航和主菜单区分开来,以此来达到 UI 与环境的完美结合。

0 (8).gif

特效展示

水、风、动物、植物、光影这些元素在现实生活中都是活动的,所以在 VR 内容氛围的营造上可以用一些特效展示来加强用户在的愉悦感,如下图:

0 (9).gif

VR 环境中也可以增加一些交互或一些粒子效果,如创建一些尘埃、落叶甚至萤火虫效果。这些特效对于专业工程师只需要花费 2-3 分钟左右的时间,但会让整个场景感觉真实许多。

0 (10).gif

当然,超过 20 米之外的距离就失去这些效果。所以鼓励大家去尽量降低多边形的面数以降低性能的损耗。与此同时切记不要让环境中存在过多的锯齿,过低的帧率会让玩家产生非常严重的不适感。

屏幕快照 2016-10-18 上午12.38.29.png

环境优化

环境优化也是一项非常具有挑战性的工作,在优化过程中有几点意见想要提供给大家:

  1. 尽量不要使用过多的透明和叠加,这会让你的程序奔溃甚至无法运行;
  2. 降低多边形数量,不要一直让手机处于高性能状态下;
  3. 需注意用户头部的运动,避免让用户长时间的看向两侧以及用户倾斜头部。

屏幕快照 2016-10-18 上午12.39.51.png

最新文章

极客公园

用极客视角,追踪你不可错过的科技圈.

极客之选

新鲜、有趣的硬件产品,第一时间为你呈现。

张鹏科技商业观察

聊科技,谈商业。