gearVR Launcher交互设计分析

发表于2016-01-22
评论5 1.5k浏览

home页的结构



我先把它转化成site map吧~

这是每个页面之间的层级关系。也是整个home的产品结构。




页面的层次


在产品设计流程中,产品设计师给出上面的site map,表达了整个产品的层次结构(hierarchical structure)。

然后交互设计师在这个基础上通过一种设计语言让输入(比如gear上的touchpad和controller)和输出(屏幕上的视觉显示和耳机里的声音)之间建立一种connect,这种connect越短,用户和交互物之间的交互路径越近,操作体验也就越爽。

接着视觉设计师就要想如何通过动画、布局等等,用一种设计语言去实现它,比如depth……


下图是gearVR刚出来时候官方给的效果图,很清晰地表达了页面层次,而且它的Z轴也呈现在你眼前。

你可以清晰地看到你的屏幕中心所focus on的那一块selection离视觉最近,然后是整个collection view,接着和它平行的是segment control,再是隐没在后面的unfocus的两个side view,最后面才是整个background。



home页面的wireframe


一般的电脑也好、移动设备也好,都是以执行任务的任务流式的操作流程,而gear和电视、电视游戏机一样,具有一定的娱乐休闲、电影娱乐的气质,所以让用户偶然中发现一个游戏,玩了几次上瘾,或者一次沉浸感十足的VR电影。

通常电视机的使用场景是回到家没事干或者几个朋友在家里活跃气氛,是比较休闲的。而现在gear搬用了电视这种模式,这种模式削弱了用户的目的性,为了让用户随机看到一些东西,总之还是休闲、体验为主。

而产品的使用场景决定了产品的功能的摆放和布局。

这里,我画了一张home页的wireframe来解释整个gearVR home的原型。



我解释一下collection view中三种selection的功能:

  • New content是最新出来的应用,或是官方推荐的应用。因为它是用户以前没看到过没打开过的,所以要引起用户的好奇(intriguing),这就需要设计得有创意了。

  • Continuation content是接上一次的应用。比如,你上次退出这个应用,可能你这一次还会使用它?这一列三排,按时间顺序从上至下是你最近使用的应用。而且这里是tap一次就打开,极大地减少了页面的跳转。

(将来可能可以做到,你上次看一部VR电影,看到一半退出了,然后现在你再从这进去,还能续上,游戏也一样……)

  • Related content或者叫Recommendation,设计得和用户之间有relevant。比如根据用户以往的操作历史,什么应用用户停留最久?什么应用用户频繁使用?什么应用用户愿意为其买单?什么应用用户愿意在里面频繁消费?……推断出用户喜欢什么不喜欢什么,当然还要看用户的消费记录,比如什么看得比较多,什么耗的流量比较多?什么是用户愿意续费的,这就需要用研和算法跟上了。换句话说,对用户越有用,他需求越强,越有可能为此买单。所以它会尽可能地吸引你的目标并被你打开(羞)……


当然还有用户使用时间的变化,比如用户刚开始使用gear的时候,因为里面没存什么自己的信息,就只能推荐一些销量高的和评分高的,然后随着用户用得越来越多,采集到的用户数据越来越多而推荐一些personalize的content。

最后,根据一些算法自动调整它们的排列,比如经常用的就放在前面,或者有内容更新的也出现在前面。


总之,这一块是最容易最方便的快捷入口,操作路径最短。最理想的情况就是把用户最需要的放在这里,然后直接就可以进去,甚至不需要先选中再点击,而是直接进去!



appleTV的home设计



collection view的布局比例


左边的Recommendation selection,占了62%面积的,它是新出来的、收费的内容,它的面积大,有很高的能见度(high-visibility),占用最多的注意力资源,让新的内容更容易被发现。

不过,PM在设计原型图的时候需要平衡Recommendation和new之间的比例这个平衡的比例是61.8% =_=

单个content缩略图的长宽比也接近黄金比



当然,这个布局在刚开始的教学里就用到了。教学让你做tap的操作,让你适应在这种布局下focus并touch







导航和框架


顶部的导航时刻让用户知道自己所在的位置,但是人们平常意识不到导航的存在,只有当自己在页面中迷路时,才会开始思考。

产品设计的本身包括了对导航的设计,就是让用户自然而然地觉得他就在那个页面,而不需要寻找。



我一直记得扁平化的思想,尽可能用最大的空间呈现内容,用最小的空间最简洁地呈现控件,一个沉浸式的空间和简洁的控件。


比如之前的gear的背景是青蓝色,现在换成了一个oculus的办公室,整个感觉很Cinematic……它的控件和空间是分离的,空间可以随着节日变幻。所以Immersive也很强。

还有spacing,就是每个控件之间的距离,要有一定的距离才能让cursor在中间做个喘息和停留。

appleTV的毛玻璃背景给人一个感觉,这里是showcase,是毛玻璃展柜上的影碟,这就是appleTV的设计语言。



以card为设计语言的android TV



同一页面下,view之间的转换


正如上面site map所画,如果你要选择一个东西。你先要让focus point 在collection view之间切换。

你能感到focus的object前进、放大、变暗、周围有流光围绕,而unfocus后的object则后退、变小、变暗、退居幕后……

我把这种交互动效叫做elevate。就是被你看中的selection微微抬起,而这种简单的animation就是为你的这个动作做出的response。

它能起到引导视觉的作用,既然你的眼睛看过去,说明你对它有兴趣,也说明信息对你有用,刚好这里的cursor是屏幕中心的点,所以这个点你focus上去的时候感觉它在引导你…

和平时在PC和移动端的animation不同,VR里的object在你眼前特别大,如果放一些大的动效会非常眩晕,所以这里的动效非常subtle和gentle。



focus point在相同等级的控件间的转换


然后是两个content view之间的转化。



每个被focus on的selection都自动放大并且浮现在眼前。



我曾构想了object的三种state——白、灰、黑,白就是elevate的那个selection,是最清晰最亮的,灰则是它旁边的,而黑则是完全沉入黑暗中的。

因为background是黑色的,所以离background越近,也就离用户越远,那段信息就越不重要。

所以,一段信息随着时间的流逝,变得越来越不重要,也就离用户越来越远,直至隐没在黑色的background之中。




用目光把卡片吸过来的设计语言


也是在一开始的教学中,gearVR就用教学的方法把这种卡片的设计语言传授给了用户。






用户轻轻swipe,卡片们便从前至后地呈现出来。

同理,上下swipe卡片们。






appleTV也用到了这种focus on然后elevate的动效。

苹果官方把这种叫做focus-based user interface。这里有两种感觉,当你hover on的地方聚焦,感觉focusable,你手指轻轻搭在remote上,然后那个被hover的地方的卡片浮起,像是被你的手指吸过来一样。



而当你手指划过touchpad,selection依次浮起,感觉fluid一般流动……



如果在VR中,focus的移动就代表了用户焦点的变化。

既然有focus,就有unfocus,当焦点离开selection的时候就unfocus了。这一点,apple就做得很流畅自然,做了个和focus上去相反的动画,一个优雅的运动曲线收尾。



这种把卡片吸过来的动效和material的card设计语言也有点像,在AndroidTV上它也把card抬了起来,相对其它同级元素显得亮而且大。有一种可clickable的感觉。



focus on在PC时代叫hover on,而hover on的结果就是highlight,其实这里抬起离你变近的selection也变得亮了一些……



这里补充一个细节——

在appleTV中,手指轻轻在touchpad上抚过就会有这种parallax。在gearVR里,被focus on的object则会有流光在四周环绕。

其实这个动作有点像mac的touchpad上的挠一挠,当你挠一挠的时候,系统会认为你找不到cursor了,然后屏幕上的cursor会放大很多倍。




appleTV上没有cursor,所以被你挠的那个object就开始做轻轻的弧线转动,就像你轻轻拨动一片card一样。



页面距离的变化


在iOS中,是以镜头运动作为设计语言的,而在这里,镜头如果运动就会产生眩晕。所以反过来,只能让内容运动,而镜头不动。

所以你稍稍朝下,就可以随时唤起底部的tab bar,不难想象,以后很多的VR只要朝下一看,就能唤出VR的导航菜单。



比如页面主题和tab bar的切换,



下面的tab当你低头去看的时候它就亮起来,并且朝你运动,而上面的页面则后退让开



我们经常听到扁平信息层级这个说法,事实是oculus的全局都有这个tab bar,只要在content的外面,任何时候你都能跳转tab bar。

还有就是tab bar上的三个tab——home、store和library,做得很扁平,即使在任何页面都可以自由地在这三个tab之间来回跳转。



从master view到detail view


我个人觉得这里的focus用remote、头部跟踪甚至眼球跟踪都是合适的,一张缩略图或者一个标题不是很清晰,但是瞟一眼却能获得这段信息简要概括的一个片段,如果你感兴趣则focus on,不感兴趣则会瞟开……而如果感兴趣,就可以向你呈现更多的信息了甚至是将这个信息片段放大,直至充满你的视觉空间。

从master view到detail view,当你对一个概括的信息产生了想看更详细信息的需求,这就需要想办法展开这段信息,常用的方法就是打开。

打开子页面



close当前页面



信息的折叠和展开


因为一次在一个视角内不能陈现过多的信息而导致用户cognitive load ,所以,把大部分信息折叠起来,把最核心最key的信息浓缩出来让用户一眼就能了解。

但这里需要你点击进去,在新的页面中展现你需要的content,所以操作成本会大一些。




如果Google来设计应该会这样——发现你对信息感兴趣,然后你慢慢往下滚动,慢慢自己展开……总之,你感兴趣的东西不断深度展开一直到满足你的需求。

一个信息从浓缩到展开的状态我叫做披露(disclosure)或者揭示(reveal ),而这个选择的过程叫做用户处理信息的过程(information process)。


grid view到detail view



grid view是很传统的布局方式,flickr就采用了grid view



下图是从grid view到detail view的转变。grid view包含了很多信息,而detail view只是其中一块的详细视图。

用户首先在grid view上看见一个吸引他的缩略图,然后有一点兴趣,于是hover on……



竖着横排可以放6个



这是我拉的流程图,大家一眼就能看出它的交互路径。前面说到了轻量级的交互,就是减少操作路径,用户从viewer里选择content的缩略图进入content,再从这里出去……从viewer到content的距离,就是这里的使用路径了。





应用的详情页面,它包含了应用的很多信息。



应用的三种状态进去会有不同master view。

下面是应用更新的流程



orbulus是cardboard上交互最让我喜欢的,本质也是一种特殊的gird view。

首先一进去是一群星球,周围是星空的背景图。



然后你focus其中一个,它就开始旋转并且发光,还显示出它的名称。



接着它慢慢旋转放大,向你的头飞来。



然后越飞越近,直至占领你全部的视觉空间!



除了grid view还有两种比较特殊的。


store的浏览方式叫做Browse Row

是一种横向的浏览方式。

在layout上,gear因为不鼓励上下的操作,所以翻滚的动作都设计成左右翻滚,上下非常窄,不需要抬头仰头,大概因为考虑到人的上下视场比较短的缘故。

我早说过人眼的水平视角是220°,而上下垂直的视角是150°,而有效的区域是中间的6%,所以内容集中在视觉中心的位置呈黄金分割的比例。

另外是关于控件的交互范围,touchpad的滑动是在它focus on的那块selection才有用。



有趣的是gear的store和library以两种不同的方式呈现,store是以page control的形式,左右滑动,人眼更适合左右转动,眼睛转不到的地方用头部转动,同样,头部也更适合左右转动,手指在平放在touchpad上,也更适合左右滑动……

而library是scroll view,上下滑动,无论是眼睛上下转动、头部上下转动还是手指上下滑动,都没有左右动那么方便……



page control是页面之间的切换,有种sequential的感觉,每一个片段用clip的形式组在一起。

而且,page control是全局的,也就是无论你focus任何地方,只要手指在touchpad上轻轻swipe,就能滑动整个页面。

通常来说,超过10张page就难以数清了,而超过20张,滑动起来就很麻烦了。



我们来看store页面下同级页面的转动

向右滑动,页面向左转动




旧的页面向后隐去,新的页面转过来



旧的页面完全隐去,新的页面完全呈现



milk VR则更加美妙,上面是父级目录,下面是目录下所包含的内容,可以头部旋转也可以用手滑动touchpad来滚动视图。




另外,这里用到了一个手法,叫allude,什么意思呢?就是典型的东方人的含蓄,隐喻这个地方露出一部分,就好比有个女孩露了一小部分白花花的大腿,并且用手指摸了一下,你脸一红,知道她隐喻你这里可以进来,然后你虽然只看到了一小部分,却可以YY出一个赤身裸体的她。

这里的content也一样,虽然只显示了一小部分,你也可以脑补出offscreen的内容,却隐喻你这里可以滚动。




而且它的两边是symmetrical的。

vrideo,同样是曲面的布局,左右滚动来浏览更多的内容



Samsung浏览器的界面更加有趣,分明是Google card的设计语言,把页面像排列卡片一样规整地排列着,然后当运行到多任务列表的时候你可以看到一条从左至右的时间轴,这些页面按打开的顺序依次排列着……



这个是cardboard上一个叫做fulldive的应用,算是cardboard的Launcher,以往cardboard上的应用要摘下cardboard,然后操作手机,操作完再插上,而这个叫做fulldive的应用直接可以在戴着cardboard的时候操作→ →

它有5个选项,当你每次转过头的时候,它的纵列上的选项就会发生变化。







另一种和它相反的叫——

Browse Lane

图为AndroidTV的动效原型,可以看到,简单的focus移动就能在高级页面之间的目录和子选项之间转换。



在oculus 360 video中用到了与之类似的设计。




相比之下oculus video的布局就比较古板




而横向只能放4个




在appleTV上template的页面布局




用户视觉中心的变化


我先给两张Google Design的示范

这个页面充分说明了横向和纵向目光移动的不同目的。横向是为了寻找相同的物体,纵向移动说明对该行的物体不感兴趣,所以切换目录。


考虑到用户使用外置的gamepad或者gearVR上所带的touchpad,每次按下方向键或者操作摇杆时都会看见清晰的移动,让用户能够更快地找到想要点击的目标。



从子页面返回上级页面的back button


因为gear是基于Android的,而在安卓上的返回按钮是返回previous view,gearVR也一样,先是返回上一级页面,上一级页面没有了就返回主页面。

一般情况下back button是被设计成实体键,无论是gearVR的back button还是OC touch上,亦或是PS move上都有,对应iOS的左边缘右滑和Android的back。

只有vive的界面里没有,所以它只能把back做在了界面上,这样按错了一步,进入一个错自己不想要的界面,返回上级页面就非常麻烦了。

当然,当界面中有购买或者删除这一类复杂的操作时,一个确定,一个取消,其实这时那个实体的back button也能取消这一步,但是仍需这两个选项,这是一种仪式感。这时无论用户点取消或者确定,都需要耗费一些比便捷操作更大的操作成本。


对话框




目前只有退出有用到,毕竟dialog是interruptive,会完全打断用户的任务流,然后用户需要再聚焦在dialog上。

dialog基于gear的系统而凌驾于其他应用程序之上,所以它必须要critical的任务才行。当然用户可以按下back button返回上一级页面。



S6插进gear里的体验


只要是要进入store的地方加载返不到服务器就算没网,也就不能使用网络服务

比如网络信号、电池电量、系统更新




第一次运行的体验(First-run experience)和Wizard


这里可以推断出,产品经理列了两个需求,优先级最高的是让用户插入后下载安装gearVR,第二个就是让用户绑定信用卡。于是交互设计师为此展开了UX设计……

把S6插在gear的插头上,然后出现下图这个画面,再拔出来安装。




第二个需求是『让用户添加信用卡』



如果戴上gear之后遇到需要付费的应用就需要拔掉手机添加一下支付方式了,当然这一点对于oculus来说至关重要。



任务管理和设置


其实不难发现,从PC到平板到手机到可穿戴,任务的管理越来越简单,以前一些操作可能要专业人士才会,所以用户量很小,而现在可穿戴的操作可能连一个智障和小白都会用,拿gear来说,一次只能运行一个程序,每次跑完就退回主界面,你连你是从哪里退出的都不知道(只知道你最后退出的那个应用)。

你进来后发现没有设置?对,所有的设置都在你进入VR之前的oculus的Android程序,设置之后只有长按back button出现的university menu ,这个界面是经常反复使用的一些操作。而只有长按这一次操作。

移动端更合适做一些复杂的操作,让gear的交互更加轻度(lightweight)。


分享


share这个概念是索尼互娱经常强调的,PS4的宣传视频就以多人为概念,之后的PSVR也有双人、三人、四人共同娱乐的场景。

当然我没体验过和多人一起玩多P(笑),不过把喜欢的女孩叫过来给她戴上VR,她戴着头显,我看着另外延伸着的平面显示器,然后教她怎么玩怎么玩,看见屏幕里她靠近樱花的时候在她鼻子上凑一朵樱花香水染过的棉花……这还只是简单的互娱,多个玩家之间不同的身份关系延伸出的不同玩法也非常让人期待。


背景图


每个背景都有种意象(imagery),比如AndroidTV的背景意象。



当选中其中一个的时候,显示它的大background。




milkVR,背景采用全景中最经典的截图作为其中一帧。






logo和缩略图


我的library里有很多应用,因为缩略图换得太快所以要看title才知道是什么,但是title一般不是很清楚,所以每次找起来很困难。

在传统的平面UI中讲究贴着像素切,原本说来这么大一个面可以呈现出很多内容,偏偏像素低得很,所以在这里每一张图都是实时渲染的,即使一块高清的图放在那一块只有这么点像素,就会有点糊。



Launch animation

VR应用的运行时间比传统的PC应用和移动端应用都要慢一些,所以需要一个丰富一些的Launch动画,让用户感觉这个应用是responsive的。




Launch的图片或者动画应该和之前进来时的缩略图有个呼应,无论是形态上,颜色上,或者是一些特有的元素。

最好的就是milkVR这样,在外面看见那张缩略图,然后进来后感觉整个画面被这个印象覆盖了。




content之间不同样式的相互区分


vrse内容更新就替换掉缩略图,让我非常难以找出来,一点都不memorable……

特别是这里没有focus point,你到底是想突出你的logo和品牌还是你最近上架的内容?这个focus point是要一眼就能抓住的,否则在那么多content中,马上被埋没了。

在视觉设计中有条定理,就是你哪怕有再多的隐喻,只要不漂亮或抢眼,没抓住用户的注意力,那么马上被忽略了,用户压根不会去看你想表达什么。




相比之下,它的竞品vrideo的logo就非常醒目,它就只展示它的logo。

让用户聚焦在focus point上最好的方法就是简单粗暴。



jaunt这张,背景非常clutter,造成了很大的视觉污染。字也比较灰,很难一眼看出来。



而orion trial这张视觉中心偏到一边,画面不平衡



这是一个Samsung官方出的VR电影的缩略图,它的视觉中心刚好在黄金分割线上,整体的形象也非常突出。



你的缩略图是影视?游戏?亦或是应用、平台?

oculus系的应用——官方的缩略图起到了一个示范的作用,你会发现它的background非常simple而简洁。

3D的logo或标志物然后用一个纯洁的背景衬着,还隐喻着oculus的『O』的1/4的左下角,非常subtle。

也就是说,它的背景用来陈现品牌信息,而中间突出的视觉中心用来陈现应用本身的功能。上面的title足够简短有力。它没有吸引多少注意力,却位于background之上,让你脑补了一个完整的oculus的logo。

理论上title应该是logo的从属品,用来解释logo,所以logo是focus point,而title位于logo之下、背景之上。

另外艳丽的背景容易从其他背景中突出,从而增加了识别性。







说到branding,三星就用上了自己的独特的颜色。

说到清晰和醒目可以看这些官方的。很纯很艳的颜色。占据视觉中心的logo,一看就知道是应用和平台






一个很单一的object,前面的视觉中心是一排醒目的字



总体来说,画面偏暗,调性偏灰,很难把整个content的形象衬托出来



如果在灰色的background上衬一个彩字,会清晰一点



独特的场景感




选择游戏中很漂亮的一个场景,然后表上和背景明度相反色相却相近的,清晰而且漂亮



这一种则是将logo文字和画面元素完美结合在一起



还有一种就是用人们印象中非常深刻的character



用游戏中的一个人物






如果背景比较艳则能够从很多应用中脱颖而出




在体验类应用中,这个非常独特,自然脱颖而出



原文链接

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

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

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

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