爱奇艺 VR 设计实战案例:空间结构篇

 英国基地     |      2021-08-15 09:43
本文摘要:本系列文章旨在由浅入深、由理论到实践系统地先容了本团队在近几年的设计事情中的一些履历总结和重点思考。本系列面向宽大设计师,岂论你现在在做什么领域/哪个端的设计,都可以相识到 VR 端和其他端的异同。希望给正在看文章的你带来收获。 团队先容:爱奇艺 XRD——爱奇艺 VR/AR/XR 设计团队,现在主要卖力爱奇艺 VR app 的设计事情(包罗各个 VR 设备端和手机端)。

m6米乐

本系列文章旨在由浅入深、由理论到实践系统地先容了本团队在近几年的设计事情中的一些履历总结和重点思考。本系列面向宽大设计师,岂论你现在在做什么领域/哪个端的设计,都可以相识到 VR 端和其他端的异同。希望给正在看文章的你带来收获。

团队先容:爱奇艺 XRD——爱奇艺 VR/AR/XR 设计团队,现在主要卖力爱奇艺 VR app 的设计事情(包罗各个 VR 设备端和手机端)。开端认识:空间里的界面1. VR与其他端的区别传统的数字终端(手机、电脑、pad 等),用户界面存在于二维的物理屏幕里,也就是在一个平面里。而屏幕和界面通常都是长方形的。

在 VR 中,有空间感的不仅仅是虚拟场景,用户界面也是结构在三维空间里的。「屏幕界限」的观点被打破了,设计师的画板不再是各种手机差别尺寸的屏幕,而是一个「无限的」空间。界面自己也可以是三维的、打破传统的,不再必须是一个个的长方形。

真正的 z 轴这差别于在 2D 屏幕终端上,元素只拥有(x、y)坐标点的属性,而并没有一个 z 轴的观点。Z 轴,也就是深度观点,是通过设计师使用阴影、动效等视觉效果,「模拟」出来的前后关系。在 VR 中看到的内容物(包罗 UI 界面、场景、模型、视频资源等)有真实观点的前后关系,每个物件摆在一个详细的(x、y、z)坐标点上。

物件拥有绝对位置,物件和物件之间有相对位置,物件和 camera(指用户观察点)之间有一个详细的距离。角度和曲面除了 z 轴坐标,因为 VR 界面存在在空间里,所以还拥有一个属性就是角度,这包罗了在(x、y、z)三个轴上旋转的角度。每一个物件也可以不再是一个平面,而是曲面的、三维的。

角度和位置配合决议了,当用户看向某个物件时,这个物件的样子。「有多大?」一个物件在 VR 中「有多大」很难简朴形貌清楚。

在传统端只需标注某个 UI 元素的「巨细」「间距」,形貌单元是像素。而在设计 VR 时。需要从多个维度界说一个元素:「巨细」「(x、y、z)位置」「(x、y、z)角度」。

同时,「有多大」还跟用户观察点的位置息息相关。2. VR基本术语认知在先容下文理论之前,让我们先认识两个常见的 VR 术语:FOV:Field of View,视场角视场角的巨细决议了光学仪器的视野规模。在 VR 中,视场角是 VR 硬件设备的一个属性,设备 FOV 是一个牢固值。在我们团队日常事情用语中,通常也用来指代用户的视角规模、界面元素的角度规模(如,「某面板水平 FOV 是 60°」)DOF:Degree of Freedom,自由度物体在空间内具有 6 个自由度,即沿 x、y、z 三个直角坐标轴偏向的移动自由度和绕这三个坐标轴的转动自由度。

3DOF 的手柄/头显:只有绕 x、y、z 轴的 3 个转动自由度,没有移动自由度,共 3 个自由度。通俗地说,3DOF 手柄可以检测得手柄在手中转动,但检测不得手柄拿在右手还是左手。

6DOF 的手柄/头显:同时有绕 x、y、z 轴的 3 个转动自由度,和三个轴偏向的 3 个移动自由度,共 6 个自由度。通俗的说,是完全模拟真实物理世界的,可以看的手柄的实际位置和转动偏向。理论:人眼的视野与视角虽然说 VR 是一个 360° 全景三维空间,但对于现在大多数 VR 的使用场景来说,可供设计师创作的区域其实已被大大缩小了。现在海内市面常见的可移动的 VR 设备(非主机类),如小米 VR 一体机、Pico 小怪兽系列、奇遇 VR、新上市的华为 VR Glass,标配均为 VR 头显配合3DOF手柄的硬件模式。

对应此类 VR 硬件模式,常见的用户使用场景为:「坐在椅子上+偶然头转+身体不动」,好比「坐在沙发上看电视」。纵然用户使用一个 6DOF 的 VR 硬件,支持空间定位可以在房间里走动,但对于爱奇艺 VR 这类观影类 app 来说,「坐在沙发上看电视」仍是主要的使用场景。因此, 主要的操作界面还是需要放在「头部牢固情况下的可见规模内 」。这样用户无需费劲转头,就可以看到主要内容、操作主要界面。

那么,什么是「头部牢固情况下的可见规模 」呢?我们需要先学习一些人机工程学,来相识一些人眼 在差别情况下的可视规模。1. 水平视野(x轴)(此图的中心点 为用户观察点。

)可以看出,头部牢固的情况下,双眼能看到的最大规模约为 124°。但还要思量到一个限制,现在 VR 硬件设备的 FOV 并未到达这个值,通常在 90°~100°。

而其中,能看清晰的规模只有眼前中心处的 60°。这相差的规模可以明白为「余光」,在人眼中成像是不清晰的,但仍在视野规模里。

——这个规模极大水平上决议了每一个 UI 面板(包罗其中的图片、文字等)适合占据的空间,也决议了 VR 中视频播放窗的最小和最大值。头部转动但身体不动的情况下,脖子舒适转动能看到的规模约有 154°,脖子转动到最大水平能看到的规模约有 204°。

一些次要内容可以放在这个区域,用户需要转动头部才气看到,但也不用太艰苦。偏后方的区域规模,必须移动身体才气看到,因此只能放一些「没瞥见也没关系」的内容。好比情况、彩蛋等。

2. 垂直视野(y轴)在放松状态下,头部与眼睛的夹角约为 105°。也就是说,当头部竖直向前时,眼睛会自然看向水平线下 15° 的位置。头部牢固仅眼球转动时的最佳视野是(上)25° 和(下)30°。

应将操作界面和主要寓目内容放在此规模内。垂直偏向最大视野规模是(上)50° 和(下)70°。

这个规模也是凌驾了 VR 硬件设备的 FOV。另外,颔首比抬头舒适。现实世界中,我们通常都是低头状态比抬头多,好比玩手机、看书或看条记本电脑时。

所以在 VR 中,比起偏上方区域,应思量更多使用起偏下方的区域。3. 深度感知(z轴)(见本章图1)0.5m 之内的物件,双眼很难对焦,因此不要泛起任何物体。(这个值对于全景 3D 视频的拍摄 意义较大,应该只管规避离镜头过近的物体泛起)有立体感的规模在 0.5m~10m,这里应该放置主要内容,尤其是可操作的内容。10m~20m 之间,人眼仍能感受出立体感,但有限。

此规模仍适合放置可以体现沉醉感的 3D 场景/模型。凌驾 20m 的距离,人眼很难看出立体感了,物体和物体的前后关系不再显着。因此适合放置「仅仅作为配景」存在的内容,也就是情况。

(值得注意的是,因为横竖也感知不出立体感,所以此规模的情况可以处置惩罚为全景球(即一个球面),来取代 3D 模型,这大大降低了功效。)4. 视角和视距在现实世界中,每个信息前言都有一个预设好的观察距离。例如,握在手中的手机,距人眼约莫 20cm。

放在桌面上的电脑主机显示屏,距人眼约莫60cm。客厅墙上的电视,距人眼约莫 5m。在马路另一头的广告牌,距人眼可达几十米。

内容在预设好的观察距离上,对应预设好的巨细。例如,手机上的正文文字只有几毫米大,而广告牌上的文字需要好几米大。而在我们(观察者)看来,这些文字都阅读舒适。甚至其实看起来是「一样大」的。

这是因为它们拥有同样的视角——被视工具两头点到眼球中心的两条视线间的夹角。详细举例来说,在 1m 处看一个 10cm 的物体,和 在 2m 处看一个20cm 的物体,在 3m 处看一个 30cm 的物体,这 3 个物体「看起来是一样大的」,他们具有相同的视角。但我们仍然清楚地知晓谁近谁远,是因为眼睛对焦在差别的距离上,也就是视距纷歧样。

在 VR 中,不能再像移动端那样用「像素」来怀抱一个物件的巨细,而是通过「视角」。而视角是由物件的「巨细」、「位置」、「旋转角度」配合决议的。在「用户观察点不动」的使用场景下,「位置」实际上就是与观察点的「视距」。界面的「旋转角度」应遵守一个原则——一个便于寓目和操作的界面,应该只管垂直于视线、面向用户观察点。

也就是说,当你确定好一个界面的「位置」后,就自然会有一个对其来说的「最佳旋转角度」。在 VR 中,一个物件的视角由其「巨细」和「视距」两个变量影响。当确定了「最佳视角」、「最小可阅读视角」时,这就决议了「需要在差别距离上放置的信息内容,各自应该放多大」。

实践:爱奇艺VR app 的假面结构有了理论基础后,接下来就是不停实践。首先需要读者相识的是,我们团队设计的工具是爱奇艺 VR app——是在 VR 设备上的爱奇艺,是爱奇艺的第四个端。不仅包罗爱奇艺全网 2D 内容,还拥有海量 VR 全景视频、3D 大片。选片和观影相关功效齐全。

在体验上主要打造有沉醉感的 VR 影院观影,并突出 VR 特色内容。本文章针对于 VR 一体机内的爱奇艺 VR app 设计展开讨论,但我们同时也支持手机端 app,若感兴趣可以在各大应用商店搜索下载。我们学习的大量二手资料,给开展实际事情缔造了基础。

然而最终设计效果其实是在重复验证、试错后决议的。当凭据理论资料开始做实践,却发现实际效果差强人意时,我们的建议是——注重实践。原因之一是,现在 VR 界从技术到产物设计仍旧处在实验性阶段,远未到达移动端设计规范的成熟性,海内外的相关理论履历总结,都还没有绝对定论的水平。Oculus 的设计指南中,都是建议「实验,实验,再实验」。

之二是,能搜集到的二手资料,不完全是建设在「人带着 VR 设备手握手柄」这种使用场景上,所以导致实际效果「不是那么回事」。1. 模块化界面结构基于「坐着不动+头部转动」的使用场景,和「自然视角偏下」、「低头比抬头舒适」的理论。我们接纳「从正视角出发,向左、右、下延伸」的结构思路。正视角放置当前界面的焦点内容,左右两侧放置辅助信息内容;在须要时,可加入下部模块。

m6米乐

此类模块化结构适用于所有界面,只是详细的面板尺寸、旋转角度可以有所差别。凭据每个界面需要承载的内容,因地制宜地合理计划。

图为我们使用的几种常见 UI 结构。2. 界面的FOV基于人眼水平和垂直偏向的视野规模的理论,同时参考主要适配的硬件设备属性(现在 VR 设备的 FOV 都小于人眼的视野规模),即:小米 VR 一体机:FOV≈90°(实际)Pico 小怪兽 2:FOV=101°(官方数据)华为 VR Glass:FOV=90°(官方数据)——我们决议了爱奇艺 VR 中主要界面的 FOV。选片主界面 FOV (左-中-右 结构)△ 「实际截图」爱奇艺 VR 选片主界面水平偏向上:中部面板:双方界限在「头部牢固时清晰 FOV」内。

两侧面板:近中心的界限均泛起在「头部牢固时可见 FOV」内,即在默认可见的视角规模内。双方界限在「头部轻微转动时清晰 FOV」内,即用户只需轻微左右转动头部便可检察全部内容。垂直偏向上:面板在「头部牢固时清晰 FOV」内。

用户无需上下转头。该页面可左右滑动,用户可以只关注中部的面板。影厅播控页面 FOV(左-下-右结构)在爱奇艺 VR 中,寓目非全景的 2D/3D 视频,用户会置身于一个影戏院影厅场景中。

视频画面会泛起在影厅屏幕上。影厅播控页面(操控台页) 指播放视频时(包罗影厅场景影片和全景影片)的操作界面。△ 「实际截图」爱奇艺 VR 影厅播控页面影厅播控页面接纳「左-下-右」结构。

包罗 3 个功效区块:相关推荐(左)、操控台播控(下)、详情 & 选集(右)。该页面在视频屏幕(或全景视频)的前方,靠单击触摸板来呼出和关闭。

这 3 个面板的界限均在正视角「头部牢固时可见 FOV」之内,也就是保证了,当用户注视影片自己并呼出该面板时,能看到所有面板。而用户仅需轻微转动头部,就可看到完整的面板。视频播放窗的最大/最小值视频播放窗 即「影厅屏幕」,被我们设定了屏幕巨细可调的功效,以此来适应差别用户的观影习惯。

屏幕巨细可在指定规模内平滑调整。屏幕最小值(50°):完整的屏幕规模都在「头部牢固情况下清晰 FOV」。屏幕最大值(76°):屏幕规模在「头部牢固情况下可见 FOV」,即「充满视野」。此状态的观感类似 IMAX 影厅。

垂直偏向上:距水平线偏上而不是偏下。这里其实和理论值发生了冲突。

理论资料中,人眼最舒适的对焦点在「水平线向下 15°」。在老版本中,我们曾经将主 UI 和视频屏幕都按理论值摆在了偏下方,但实际效果并未令人感应舒适,反倒显着感知到「内容都偏下了」。这就是上文所说,「当理论导致实践差强人意」时,我们选择了不停实验,以实际效果为准。

另外,本场景下方有影厅座椅等实际模型,而且另有操控台播控的 UI。综上,影厅屏幕被放在了水平偏上的位置。3. 深度距离与层级(z轴)凭据前文理论提到的,z 轴距离的合适规模(0.5m~20m)比起水平和垂直 FOV 来说,数值规模要大得多,也就是说可试验的规模很大。因此在界面距离这一点上,我们举行了大量重复的实践——最终决议了当前版本中各级页面的深度层级和详细数值,如下图:追随式提示:适合于暂时性的提示内容,几秒后自动消失。

如 toast。与 camera(用户观察点)锁定,追随 camera 移动。

不行交互。保证让用户注意到,又不至于遮挡视线。阻断式提示:适用于必须让用户看到且用户必须对其处置惩罚的提示。

如弹窗。正视角区域牢固显示,不追随 camera 移动。

有按钮可以交互。需要在其它操作界面之前。

辅助操作界面:适用于重操作的界面,而非重展示的界面。如播控按钮组、键盘,而非视频列表。通常在平视视线偏下的位置。(模拟「在手边」的位置)淘汰眼球调焦,缩小距离差值得注意的是,在我们的老版本中,差别层级的界面曾经被摆放的距离差距很大。

如,toast 在 1.75m,主 UI 在 3m,而视频屏幕在 12m。之所以改动至上图数值,主要是为了到达「在看向差别层级界面时,只管淘汰眼球调焦的水平」的目的。

眼球在看向差别距离上的内容时,需要对焦到差别的平面,距离差距越大,眼球需要调整得越大。如果频率高的话,容易导致(一部门)人的眼球疲劳。Z轴上的获焦效果VR 独占的「z 轴」,不仅允许了界面可以被放在差别距离上,还支持了使用 z 轴上的位移和旋转 来表达获焦效果。

控件被获焦时,只需要在 z 轴上轻微的位移或轻微的角度旋转,便可体现出与众差别的有趣效果。


本文关键词:m6米乐,爱奇,艺,设计,实战,案例,空间结构,篇,本,系列

本文来源:m6米乐-www.szxcsshaiwang.com