恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
4款视频app交互设计浅析(4)
0.0°
2017-01-09 原创文章 经验/观点 举报 2655 5 8 2

3. 离线下载

       离线下载也可以被称为离线缓存,指的就是用户可以在wifi条件下将视频下载到本地,供非wifi条件下观看,下载好的内容通常都放在“我的”标签页里。并不是所有的视频内容都可以离线下载,例如只有VIP才能观看的内容,即使是VIP也无法下载。离线下载下来的视频也不是永远都可以离线观看,可能会有可观看时间区间。离线下载是个重要且复杂的流程,设计细节非常多,改天可以单开一个篇幅来说说。在这里只说一个点,就是在竖屏模式时,点击下载按钮后的页面打开方式。

        点击下载按钮后,腾讯视频和爱奇艺会新开一个页面来显示所有的剧集按钮,用户在这个页面决定缓存哪一集,也可以选择缓存的清晰度。由于是新开页面,此时处在前一级页面的播放器会被暂停。

Image title


        在芒果TV和搜狐视频里点击下载时不会新开一页,而是在当前页面弹出一个面板,播放器的播放状态不会被打断。芒果TV弹出的是一个模态面板,用户不能操作播放器,播放器的显示区域被缩小,使播放器和这个模态面板的前后关系十分清晰,点击选集面板之外的区域,便可退出当前模态。但是在这个模态面板里点击清晰度时,又会再次唤起一个模态面板,这种双重模态面板的方式不是ios用户手册指南里鼓励的做法,但是如果不这样做的话可能也没有更好的办法。比如将几个清晰度以按钮的样式摆放在这个面板上方,那面板需要的高度更多,且分散用户注意力的交互控件也就越多。

Image title


       点击搜狐视频的下载按钮,唤起的面板是个非模态面板,用户仍然可以操作播放器。下载功能本身不是一个复杂流程(复杂的是管理下载内容),因此不用太担心非模态方式会让用户不聚焦任务,但是关闭这个面板的提示不是特别明显。

Image title


      手机没有网络情况下观看离线视频,只有横屏模式,没有竖屏模式,因为竖屏模式除了播放器以外显示的字段都需要网络连接。观看离线视频时,点击“选集”按钮,选集面板里应该只显示已经下载了的剧集,这是个很小的细节,但只有爱奇艺做到了。


4. 声音相关

       在第1个章节里就提到过和声音相关的交互,视频播放时,声音是不受手机硬件静音按钮的限制的。

      用户佩戴耳机使用多媒体应用时属于个人私密行为,在拔掉耳机后,一定不会想让别人也听到自己刚才听到的内容。因此用户在观看视频时将耳机拔出,将视频暂停是比较合理的做法,本文分析的app里,只有爱奇艺和优酷做到了这一点;如果视频是暂停状态,耳机插入时,应该自动被播放,只有优酷做到了这一点。


5. 历史播放

        应用再次启动时,都会在主屏提醒用户是否要继续观看上一次的观看内容。在图5.1中为了让大家更看得更清晰,小编弱化了通知栏之外的区域。4个app采用的形式是一样的,应用启动后用一个通知栏来提醒用户,通知栏停留一段时间后会自动消失。这与手机处理通知的方式是一致的。

       优酷、爱奇艺和搜狐视频的通知栏都遮挡了底部的界面,因此优酷和爱奇艺的通知栏上都有关闭按钮;腾讯视频的通知栏是临时占用的一部分空间,并没有挡住任何界面,因此没有关闭按钮。

        在显示的信息上,腾讯视频显示的信息最多,有剩余时间的显示,但优先级不高,在最末端,很可能会因一个长标题而显示不出来。爱奇艺的关闭按钮和继续播放文案的距离太近,这两者是反相关,在布局上不应该挨在一起。

       腾讯视频启动后,通知栏才显示,而且显示的过程是从上向下的位移,主屏的内容(除顶部导航栏、状态栏和底部的标签栏)也都被整体的顺次向下做了位移,使通知栏更能引起用户的注意力。虽然爱奇艺和搜狐视频也对通知栏添加了动态渐入动画,但还是没有腾讯视频整体的位移更能引起关注。

Image title


6.一些交互细节

       竖屏模式下,视频刚开始播放时导航栏和工具栏的状态是显示还是隐藏,各个app处理得不一样,如图6.1可以看到,腾讯视频和搜狐视频默认是先让栏显示,芒果TV和爱奇艺是直接让栏隐藏。小编认为,如果在竖屏模式里最先做的是切换到横屏的用户更多,那么竖屏模式默认显示栏还是有必要的(如果用户关闭了屏幕自动旋转,小编的这个按钮就是长年关闭状态)。同理,如果在竖屏模式里默认显示栏,那么切换到横屏之后仍然显示栏可以让界面显示统一,也让用户看到更多的功能;但这也是一种干扰,毕竟用户用横屏是为了更好的享受观看体验,而不是为了查看更多的功能,因此竖屏切换到横屏时,要让栏显示还是隐藏取决于产品定位。

Image title


        上一段提到了,从竖屏切换到横屏时,腾讯视频和搜狐视频会默认显示栏,那么在屏幕翻转的过程中,栏是怎样翻转的也是一个细节(芒果TV和爱奇艺在此处便可以巧妙的躲过这个细节)。如图6.2所示,是腾讯视频屏幕翻转时的细节展示,竖屏会先黑屏一下,然后翻转成横屏,翻转过程中栏一直显示,且也跟着翻转;如图6.3所示是搜狐视频的屏幕翻转,搜狐视频在翻转过程中没有黑屏闪烁的现象,但是翻转过程中没有显示栏,直到播放器翻转完成后,栏才显示。两种不同的实现方式可能和技术相关,小编的个人感觉是腾讯视频翻转时黑屏闪一下的效果不是很舒服。

Image title

Image title


7. 总结

       到此为止,四篇关于视频app播放器部分的交互浅析全部结束。腾讯视频、爱奇艺、搜狐视频和优酷的播放器功能都已经非常完善,各有各的亮点和产品着重点,也有各自的缺点和不足;芒果TV的发展没有前几家那么久,因此目前提供的只是基础必需功能,但现有的这些功能也都设计的还不错;每日开眼是一个短视频平台,在产品战略上和以上几家有本质区别,因此在本系列文章中只是稍微带过,但它仍然是小而美的产品。本系列分享就是这些,感谢您的耐心阅读,如有问题或不同意见欢迎留言交流。


其它相关文章地址:

4款视频app交互设计浅析(1):http://www.ui.cn/detail/198023.html

4款视频app交互设计浅析(2):http://www.ui.cn/detail/199454.html

4款视频app交互设计浅析(3):http://www.ui.cn/detail/201816.html






更新:2017-01-09

收藏

5人已收藏

  • 9

    作品

  • 50

    粉丝

  • 9

    关注

  • 4款视频app交互设计浅析(3)
  • 4款视频app交互设计浅析(2)
  • 4款视频app交互设计浅析(1)
  • 滴滴出行交互设计总结(一)——概述
相关标签

    猜你喜欢

      2017-01-09 原创文章 经验/观点 举报 2655 5 8 2

      4款视频app交互设计浅析(4)

      0.0°

      你确定要举报4款视频app交互设计浅析(4)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年01月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      5
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录