Be For Web - YouTube VR http://www.beforweb.com/taxonomy/term/219 en Daydream产品设计案例 - YouTube VR http://www.beforweb.com/node/872 <div class="field field-name-field-article-thumb field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://www.beforweb.com/sites/default/files/article-thumbs/icon-logo-google-daydream.png" width="70" height="70" /></div></div></div><div id="comment-wrapper"></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>每年这个季节都盼着来自北方的冷空气能早些把这个城市吹干、吹冷。这世上,又湿又温暖的地方未必都是好地方。</p> <p>随着Daydream头显和Pixel手机的发布上市,Google官方的各路VR app也陆续上线。我个人还没有机会、没有设备进行体验,见到国外的一些产品或设计角度的评测文章,大约会挑选一些放过来 - 看看交互,看看界面形式,建立一些直观感知,这样。</p> <p>不了解Daydream平台的同学可以先做预习,&ldquo;<a href="http://www.beforweb.com/node/838" target="_blank">关于Google Daydream,设计师应该知道的9件事</a>&rdquo;。</p> <p>本期案例,YouTube VR。下面进入译文。</p> <!--break--><h3> 环境</h3> <p>app完成加载后,视野前方会出现一个灰色的屏幕。整个虚拟环境由简单的穹顶状空间构成。与Gear VR当中的Netflix所提供的&ldquo;Void Theater&rdquo;模式相仿,你可以在Daydream的蓝牙控制器上通过上下滑动的手势来自由调整屏幕尺寸,同时也能通过点按并拖动的方式将屏幕定位在空间当中的任意位置上。</p> <p><img alt="" src="/sites/default/files/images/201611-3/01-daydream-vr-youtube-design.gif" style="width: 600px;" /></p> <p>顶层导航栏由四个菜单项组成,包括&ldquo;首页&rdquo;、&ldquo;360&rdquo;、&ldquo;订阅&rdquo;和&ldquo;帐户&rdquo;。导航栏下方是网格状(卡片形式)的内容列表,其中优先呈现最适于在VR设备中进行浏览的那些视频。不过即便你只是看一些非360&deg;的普通视频,体验也非常棒,例如《奇异博士》的预告片,你会感到精彩的内容就近在咫尺,临场感十足。</p> <p><img alt="" src="/sites/default/files/images/201611-3/02-daydream-vr-youtube-design.jpg" style="width: 600px;" /></p> <p>左侧面板提供了正在播放或之前播放的视频的详细信息;右侧则是即将播放的内容列表,你可以在这里关闭或开启自动播放功能。</p> <p><img alt="" src="/sites/default/files/images/201611-3/03-daydream-vr-youtube-design.jpg" style="width: 600px; height: 338px;" /></p> <p>点击顶部的YouTube logo可以使整个界面恢复到初始的网格列表状态。执行这个操作时可以感觉到明显的延迟,特别是当你正在观看360&deg;视频的时候。logo左侧的网格图标用来切换UI的前后次序,譬如你可以使视频作为背景保持播放,同时在处于前景位置的UI中搜索其他内容。这种方式与手机端的YouTube app有些类似,可以看出Google希望将这一模式尽可能的统一到各个平台当中。</p> <p>导航机制与2D产品环境的模式相仿,即通过顶层菜单项层层进入下级内容视图;之后原本导航栏所处的位置会出现返回按钮,点击之后导航栏重现,内容返回上一级。</p> <p><img alt="" src="/sites/default/files/images/201611-3/04-daydream-vr-youtube-design.gif" style="width: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201611-3/05-daydream-vr-youtube-design.gif" style="width: 600px;" /></p> <h3> 播放控制</h3> <p>无论音量调节还是播放进度条,你都无法直接拖动滑块本身,只有点击具体的目标位置才能使滑块移动,完成调节(下图1、2)。此外你可以在播放视频之前就对字幕及清晰度进行设置(下图3、4)。按钮的悬停态细节很棒,半透明的选项面板弹出时很流畅,覆盖在其他内容上方时也很清晰。</p> <p>播放控制区域的这些操作整体上没有什么让人惊奇的地方,但与Daydream的控制器配合起来,细节当中的交互体验很舒服;或许可以成为VR UI设计的某种典型模式。</p> <p><img alt="" src="/sites/default/files/images/201611-3/06-d12-daydream-vr-youtube-design.png" style="width: 600px;" /></p> <p><img alt="" src="/sites/default/files/images/201611-3/06-d34-daydream-vr-youtube-design.png" style="width: 600px; height: 338px;" /></p> <p>在播放非360&deg;的普通视频时,设置菜单中还会增加一项&ldquo;曲面屏幕&rdquo;功能(下图1),激活之后,视频屏幕会变为曲面,并填满横向视野。其他功能还包括字幕设置(下图2)和视频质量控制(下图3)。后者的默认选项是&ldquo;自动&rdquo;,另外可以选择&ldquo;最高&rdquo;。在&ldquo;自动&rdquo;档时,视频可以保持流畅播放,具体的清晰度会根据你的实际带宽进行优化调整,但360&deg;视频的质量很不理想;&ldquo;最高&rdquo;档时,视频质量最优,但加载和缓冲会造成卡顿。设置菜单中的最后一个功能选项是&ldquo;举报&rdquo;(下图4)。</p> <p><img alt="" src="/sites/default/files/images/201611-3/07-d12-daydream-vr-youtube-design.png" style="width: 600px; height: 338px;" /></p> <p><img alt="" src="/sites/default/files/images/201611-3/07-d34-daydream-vr-youtube-design.png" style="width: 600px; height: 338px;" /></p> <p>在某些视频中,将准星聚焦在播放进度条上的不同位置时,可以看到对应帧的预览图像。</p> <p><img alt="" src="/sites/default/files/images/201611-3/08-daydream-vr-youtube-design.gif" style="width: 600px; height: 338px;" /></p> <h3> 搜索</h3> <p>进行搜索时,你可以选择语音输入(下图1)或是虚拟键盘键入(下图2)。如果要输入的关键词不是很长,那么键盘的方式还不算难用,但总体上讲,还是语音输入更好用一些。初次使用语音输入时,你需要授权YouTube调用录音功能,并要将手机从Daydream头显中取出以完成确认(下图3、4)。某些情况下,搜索UI当中还会提供相关tag以便快速选择,避免输入的麻烦。</p> <p><img alt="" src="/sites/default/files/images/201611-3/09-d12-daydream-vr-youtube-design.png" style="width: 600px; height: 338px;" /></p> <p><img alt="" src="/sites/default/files/images/201611-3/09-d34-daydream-vr-youtube-design.png" style="width: 600px; height: 338px;" /></p> <p>语音输入的体验很赞,对于VR app来说确实是非常便捷的交互模式。</p> <p><img alt="" src="/sites/default/files/images/201611-3/10-daydream-vr-youtube-design.png" style="width: 600px; height: 335px;" /></p> <h3> 小结</h3> <p>Google在打造这款YouTube VR app时的设计策略显而易见:尽可能将用户在其他传统平台上所熟识的设计模式平稳移植到VR环境当中,使其更加易于上手,避免用户在尝试接纳新媒介的同时还要花费精力去学习更多的操作方法。</p> <p>站在个人角度,我很希望音量与进度控制可以通过拖拽的方式进行操作;此外若能增加分享功能,甚至是邀请朋友进入播放厅一同观看视频,则再好不过了。仔细想想,这个体验模式的背后似乎有很多情景需要考虑,譬如由谁来控制播放一类,但怎样也会很有趣。</p> <p>总而言之,这款面向Daydream平台的YouTube VR确实带来了引人入胜的沉浸式体验,Google干的很棒。</p> </div></div></div><ul class="field_categories"><li class="product taxonomy-term-reference-0"><a href="/product" typeof="skos:Concept" property="rdfs:label skos:prefLabel">产品</a></li><li class="design taxonomy-term-reference-1"><a href="/design" typeof="skos:Concept" property="rdfs:label skos:prefLabel">设计</a></li></ul><ul class="field_article_categories"><li class=" taxonomy-term-reference-0"><a href="/study" typeof="skos:Concept" property="rdfs:label skos:prefLabel">学习</a></li><li class=" taxonomy-term-reference-1"><a href="/point" typeof="skos:Concept" property="rdfs:label skos:prefLabel">观点</a></li></ul><ul class="field_tags"><li class=" taxonomy-term-reference-0" rel="dc:subject"><a href="/taxonomy/term/14" typeof="skos:Concept" property="rdfs:label skos:prefLabel">用户体验</a></li><li class=" taxonomy-term-reference-1" rel="dc:subject"><a href="/taxonomy/term/31" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UX</a></li><li class=" taxonomy-term-reference-2" rel="dc:subject"><a href="/taxonomy/term/32" typeof="skos:Concept" property="rdfs:label skos:prefLabel">UED</a></li><li class=" taxonomy-term-reference-3" rel="dc:subject"><a href="/taxonomy/term/205" typeof="skos:Concept" property="rdfs:label skos:prefLabel">VR</a></li><li class=" taxonomy-term-reference-4" rel="dc:subject"><a href="/taxonomy/term/206" typeof="skos:Concept" property="rdfs:label skos:prefLabel">虚拟现实</a></li><li class=" taxonomy-term-reference-5" rel="dc:subject"><a href="/taxonomy/term/211" typeof="skos:Concept" property="rdfs:label skos:prefLabel">Daydream</a></li><li class=" taxonomy-term-reference-6" rel="dc:subject"><a href="/taxonomy/term/219" typeof="skos:Concept" property="rdfs:label skos:prefLabel">YouTube VR</a></li><li class=" taxonomy-term-reference-7" rel="dc:subject"><a href="/taxonomy/term/16" typeof="skos:Concept" property="rdfs:label skos:prefLabel">原创翻译</a></li></ul> Sun, 20 Nov 2016 10:43:33 +0000 C7210 872 at http://www.beforweb.com http://www.beforweb.com/node/872#comments