VR界面——从融合内容元素的UI风格到作为内容容器的UI风格

发表于2016-01-21
评论5 7.7k浏览


提到人们对VR时代的几乎界面的畅想,普遍的一种观点是原先2D的界面变成了3D的界体。


3D搜索界体



界面元素也由二维变为三维。


一下是我的观点——


内容和UI融合为一体


把界面和周围的空间融合。

常见的方式是把它和仪表板相融合。



移动互联网时代的设计,按设计风格可以分为两个时代,拟物化时代和扁平化时代,拟物化时代的UI控件是模拟整个应用所代表的感觉,比如像纸质书一样翻页的iBooks,还有放回书架那样一个动画、旋转唱片的iTunes……。

当时界面作为一个整体代表或象征了工业设计上的经典形象,书、唱片、钱包、日记本……这样一些东西。

这是因为当时移动互联网内容的限制、整个生态还没有形成、带宽网速等等的制约……同理,现在的VR也处于这样一个阶段。VR内容少,投资人目光短浅……

后来user、Professionally、Occupationally都开始生产内容了,网络带宽的增加,内容变得丰富……所以扁平化出现了,iOS HIG上的核心思想:『以内容为核心』,而整个应用则变成了毛玻璃,作为一个容器去衬托内容。

oculus上评分最高的VR游戏,把所有界面元素全部换成了周围常见的物体……比如把开始按钮和用户教程都做在了卡片上,整个3D的interface非常统一,是第一人称固定视角中的精品。



有的物体在3D的世界里,随着你的运动而产生视角变化;有的物体在2D的世界里,始终在你眼前。声音也一样,有的声音随着你的位移运动和旋转产生立体声的变化,用户感到3D的世界里有那样一个声音来源;有的声音确实全局的像系统通知。

前一种是VR中的内容,而后一种是VR中内容的容器(即控件或者通知。)内容产生沉浸感,而内容的容器打破这种沉浸感。

VR现在的内容非常少,还没到做容器的阶段,所以内容才是根本。

说到这里有人会问了,那么VR会出现扁平化吗?我说会的,那时随着VRARMR的普及和发展,内容越来越多,现实世界和虚拟世界相融合,内容丰富到玲琅满目,只有容器能区分它们。

有一些元素,以前只存在于科幻之中,在科幻类的VR游戏中慢慢出现,随着人们的使用慢慢熟悉,十年内随着VRARMR的普及,能够完全运用在生活之中,没错,这就是HUD。

VR、AR走向扁平化,理想的界面是作为一种容器。



黑底白字


你也许会发现他都是黑底白字(或者说亮色的控件),为什么呢?因为VR出于一个黑暗的环境中,如果在黑暗的环境中给一个白底黑字,那么很可能会伤眼睛,比如在关灯后玩手机的人很可能二十几岁就换上永远无法恢复的黄斑病变。

VR就是这样一个黑暗的环境,所以一点点光亮都用来陈现信息。光线是由周围环境光的对比产生的,在阳光下折射光看白纸黑字,这样的白纸的亮度放在VR这样的黑暗空间中足以烧伤用户的视网膜。





cursor


在传统的PC中鼠标作为一种经典,被普及。而在屏幕上的交互物以光标(cursor)为主。

用来隐喻『手势操作』




冒险岛中的点击和按下



OS X中漂亮的Spinning Pinwheel


HUD最早来自于具有科幻感的界面,比如骑车或摩托车的仪表盘


平坦的界面变成了立体的界体






crosshair或reticle


过去老土的crosshair



游戏中做选择的crosshair


卡通风格的crosshair



能够运用在AR的眼动交互动效


计数触发器



具有科幻色彩的crosshair——科幻的射击武器的瞄准器





驾驶座



飞行器窗口的HUD



瞄准天空



飞船窗口的瞄准器



双筒望远镜的HUD



跟踪目标的瞄准器,比如一个CV的运动跟踪或捕捉的demo,就可以设计这样一个跟踪的控件


自动调整焦距,想人眼一样聚焦



选择飞船降落的地理位置



仪表盘变化


能量表




显示目标的相关信息



Target reticle(目标分隔板)



某个控件被触发时,整个页面会产生相应的变化



台风



VR的UI控件放置与界面布局


在VR中,控件离我2-3m时非常舒服,大概在我视觉中心的1/3(15-20°)处,这样我甚至不需要转动眼球。而界面布局在0.75米-3.5米之间,我就不需要转头寻找它们。传统移动互联网中常用到的滚动视图,无论是前后滚动放在VR里都会让用户非常辛苦。

如果我看不全可能需要移动头部,在看不全,可能甚至需要挪动身体,显然大范围的身体移动让用户感觉肌肉疲惫从而丢下HMD,减少了留存率。


水平220°,垂直135°,取中间的1/3。


HMD中的光和透镜都会对人的视力产生一定影响,至少是一个微小的影响。

安全性


(比如高对比度的颜色闪烁或交替在1-30hz的颜色变化会引起光敏癫痫病人发作,高频的空间栅栏——一些精细的条纹也会导致癫痫患者发病。)

普通的穿戴设备比如手表都可能因为贴着手小臂而烫伤,在头上的感官眼睛更是无从幸免,不过作为内容设计者,我们只要遵循规矩,让用户的视线焦点刚好落在那里即可。

从电视、电脑到手机可穿戴,我们距离交互物体的距离越来越近,直至穿戴设备的0距离,再到植入设备的零下距离。我们对与之交互的物体的细腻程度要求越来越高,安全也是如此。

最后让我们期待可植入设备的到来,和人与机器人的联姻吧~


原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台