IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

Daydream产品设计案例 - YouTube VR

Smiler李想 • 2016-12-08 09:59 • IxD案例, VR

文章目录[隐藏]

  • 环境
  • 播放控制
  • 搜索
  • 小结

每年这个季节都盼着来自北方的冷空气能早些把这个城市吹干、吹冷。这世上,又湿又温暖的地方未必都是好地方。

随着Daydream头显和Pixel手机的发布上市,Google官方的各路VR app也陆续上线。我个人还没有机会、没有设备进行体验,见到国外的一些产品或设计角度的评测文章,大约会挑选一些放过来 - 看看交互,看看界面形式,建立一些直观感知,这样。

不了解Daydream平台的同学可以先做预习,“关于Google Daydream,设计师应该知道的9件事”。

本期案例,YouTube VR。下面进入译文。

环境

app完成加载后,视野前方会出现一个灰色的屏幕。整个虚拟环境由简单的穹顶状空间构成。与Gear VR当中的Netflix所提供的“Void Theater”模式相仿,你可以在Daydream的蓝牙控制器上通过上下滑动的手势来自由调整屏幕尺寸,同时也能通过点按并拖动的方式将屏幕定位在空间当中的任意位置上。

Daydream产品设计案例 - YouTube VR

顶层导航栏由四个菜单项组成,包括“首页”、“360”、“订阅”和“帐户”。导航栏下方是网格状(卡片形式)的内容列表,其中优先呈现最适于在VR设备中进行浏览的那些视频。不过即便你只是看一些非360°的普通视频,体验也非常棒,例如《奇异博士》的预告片,你会感到精彩的内容就近在咫尺,临场感十足。

Daydream产品设计案例 - YouTube VR

左侧面板提供了正在播放或之前播放的视频的详细信息;右侧则是即将播放的内容列表,你可以在这里关闭或开启自动播放功能。

Daydream产品设计案例 - YouTube VR

点击顶部的YouTube logo可以使整个界面恢复到初始的网格列表状态。执行这个操作时可以感觉到明显的延迟,特别是当你正在观看360°视频的时候。logo左侧的网格图标用来切换UI的前后次序,譬如你可以使视频作为背景保持播放,同时在处于前景位置的UI中搜索其他内容。这种方式与手机端的YouTube app有些类似,可以看出Google希望将这一模式尽可能的统一到各个平台当中。

导航机制与2D产品环境的模式相仿,即通过顶层菜单项层层进入下级内容视图;之后原本导航栏所处的位置会出现返回按钮,点击之后导航栏重现,内容返回上一级。

Daydream产品设计案例 - YouTube VR

Daydream产品设计案例 - YouTube VR

播放控制

无论音量调节还是播放进度条,你都无法直接拖动滑块本身,只有点击具体的目标位置才能使滑块移动,完成调节(下图1、2)。此外你可以在播放视频之前就对字幕及清晰度进行设置(下图3、4)。按钮的悬停态细节很棒,半透明的选项面板弹出时很流畅,覆盖在其他内容上方时也很清晰。

播放控制区域的这些操作整体上没有什么让人惊奇的地方,但与Daydream的控制器配合起来,细节当中的交互体验很舒服;或许可以成为VR UI设计的某种典型模式。

Daydream产品设计案例 - YouTube VR

Daydream产品设计案例 - YouTube VR

在播放非360°的普通视频时,设置菜单中还会增加一项“曲面屏幕”功能(下图1),激活之后,视频屏幕会变为曲面,并填满横向视野。其他功能还包括字幕设置(下图2)和视频质量控制(下图3)。后者的默认选项是“自动”,另外可以选择“最高”。在“自动”档时,视频可以保持流畅播放,具体的清晰度会根据你的实际带宽进行优化调整,但360°视频的质量很不理想;“最高”档时,视频质量最优,但加载和缓冲会造成卡顿。设置菜单中的最后一个功能选项是“举报”(下图4)。

Daydream产品设计案例 - YouTube VR

Daydream产品设计案例 - YouTube VR

在某些视频中,将准星聚焦在播放进度条上的不同位置时,可以看到对应帧的预览图像。

Daydream产品设计案例 - YouTube VR

搜索

进行搜索时,你可以选择语音输入(下图1)或是虚拟键盘键入(下图2)。如果要输入的关键词不是很长,那么键盘的方式还不算难用,但总体上讲,还是语音输入更好用一些。初次使用语音输入时,你需要授权YouTube调用录音功能,并要将手机从Daydream头显中取出以完成确认(下图3、4)。某些情况下,搜索UI当中还会提供相关tag以便快速选择,避免输入的麻烦。

Daydream产品设计案例 - YouTube VR

Daydream产品设计案例 - YouTube VR

语音输入的体验很赞,对于VR app来说确实是非常便捷的交互模式。

Daydream产品设计案例 - YouTube VR

小结

Google在打造这款YouTube VR app时的设计策略显而易见:尽可能将用户在其他传统平台上所熟识的设计模式平稳移植到VR环境当中,使其更加易于上手,避免用户在尝试接纳新媒介的同时还要花费精力去学习更多的操作方法。

站在个人角度,我很希望音量与进度控制可以通过拖拽的方式进行操作;此外若能增加分享功能,甚至是邀请朋友进入播放厅一同观看视频,则再好不过了。仔细想想,这个体验模式的背后似乎有很多情景需要考虑,譬如由谁来控制播放一类,但怎样也会很有趣。

总而言之,这款面向Daydream平台的YouTube VR确实带来了引人入胜的沉浸式体验,Google干的很棒。

本文来自Be For Web
英文原文: 
https://medium.com/@StephanieHawn/google-daydream-youtube-app-ac9b2536...
译者信息: C7210 - 交互设计师、猫奴、吉他手、鼓手、老狗,现就职于腾讯ISUX(上海)

 

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/18892/

GooglelogoUIUI设计UXVR交互交互设计交互设计师产品分享图标用户设计设计师译文
赞 (0)
Smiler李想Smiler李想
1
生成海报
如何为弱势群体做包容性设计之视力篇
上一篇 2016-12-02 10:48
定义方向策略 – 有理有据做设计
下一篇 2016-12-08 13:35

相关推荐

  • 网易新闻安卓客户端Material design实战 IxD案例

    网易新闻安卓客户端Material design实战

    编者按:光说不练假把式,聊了这么多的Material design技巧,是时候来看看国内APP怎么跟上这股潮流了。今天网易的同学分享了新闻客户端的Material design改版过程。 项目背景 网易新闻安卓版一直以来照搬IOS版的交…

    2015-07-20
  • 我手机里的应用设计体验 IxD案例

    我手机里的应用设计体验

    最近养成了一个习惯,看到手机应用的一些设计点,自己觉得好或者不好的时候就会截图下来,翻了一下手机已经存了一堆图片了,就干脆发出来吧。 应用更新通知弹窗 应用更新弹窗是几乎每个应用都会有的一个模块,但是…

    2016-06-27
  • 对话界面的现在与未来 IxD案例

    对话界面的现在与未来

    计算机与人类并不使用同一种语言。所以为了之间的交互成为可能,我们依赖于图形化的用户界面(GUIs)。但是GUIs同样有着天然的屏障:人们必须去学习如何使用他们。他们不得不去学习一个汉堡icon隐藏着一个菜单,这是一个button触发一个操作。但是随着技术的发展,语言识别和处理效率的提高改善,我们当前的交互方式正在变得更直观,简单而又高效-通过对话界面

    2016-07-20
  • [译]UX设计之按钮使用实例、类型和状态 IxD案例

    [译]UX设计之按钮使用实例、类型和状态

    按钮是一个普通的、日常交互中都可能碰到的基本元素。但对创建一个流畅的交互体验过程来讲,按钮则是一个至关重要的元素,因此,投入一定精力到该元素的设计上是非常有意义的。另外,我们也为大家梳理出元素的基本…

    2016-06-30
  • axure 折叠菜单 IxD案例

    axure 折叠菜单

    第一步:拖拽三个”动态面板“空间到制作区,分别命名为MB1、MB2、MB3,属性width:200,height:130。 每个动态面板都设置两个状态,分别为State1、State2。 打开MB1面板的State1状态,在里面添加一个名称为section1…

    2015-01-12
  • [自译]企业UX案例研究:在紧张期限内提高可用性 IxD案例

    [自译]企业UX案例研究:在紧张期限内提高可用性

    在四个月的时间里,LiquidPlanner塑造了一个新的dashboard模板功能,这让用户印象深刻,并且有很高的使用率和很好的商业效益。

    2016-08-24
  • 2015年新起来的APP新贵们,进来瞅瞅都是什么APP在“火”! IxD案例

    2015年新起来的APP新贵们,进来瞅瞅都是什么APP在“火”!

    一时兴起,统计2015年以来新发布的,或是从2015年开始快速崛起的,日活稳定在20万+的APP,一共找到了16款。以下数据为粗暴的估算,不准确很正常,不准确憋找我! ┃视频类 熊猫TV,视频直播平台,CEO王思聪,200万量…

    2016-04-08
  • Apple Watch APP设计第一课:了解Apple Watch视觉和设计原则 IxD案例

    Apple Watch APP设计第一课:了解Apple Watch视觉和设计原则

    在我们可以开始设计一个Apple Watch应用之前,要先理解其背后的视觉和设计原则。Apple Watch有三个重要主题:个人,整体,轻量级。如果想设计一个具有惊奇体验的应用,还有一个你应该考虑但苹果公司没有提及的,即 …

    2015-09-29
  • IAMUE 移动客户端的设计作品分享 IxD案例

    IAMUE 移动客户端的设计作品分享

    Wechat: caochengweiued 分享了他对 IAMUE 移动客户端的设计作品,文末有 阿西 UED 的点评! 阿西UED 的点评: Hi 谢谢你的作品分享,总体上来说,依你当前的学生身份或当前的专业程度,做出这样的设计方案有一定的…

    2016-11-21
  • 『小米只卖产品 不卖节操』雷布斯站在巨人的肩膀上做了什么? IxD案例

    『小米只卖产品 不卖节操』雷布斯站在巨人的肩膀上做了什么?

    文章来自设计癖 2014 年 12 月 9 日,小米又一次涉嫌抄袭。这一次的对象,是日本巴慕达公司的 AirEngine 安之风空气净化器。同样的专利许可授权纠纷,同样深表遗憾的回应。巴慕达与曾经的魅族、年初的 Pressy 以及…

    2014-12-27
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress