4款视频app交互设计浅析(下)-上海艾艺
首页 > 新体验 > 设计沙龙 > 技术调研
  • 4款视频app交互设计浅析(下)

    adinnet/2017-01-12 11:10/技术调研

    3. 离线下载

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

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

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

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

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

    4. 声音相关

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

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

    5. 历史播放

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

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

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

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

    6.一些交互细节

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

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

    7. 总结

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

    文章摘录链接 :http://www.woshipm.com/ucd/574256.html


上一篇:这7个思路,能帮你在设计项目中用好小图标下一篇:4款视频app交互设计浅析(上)
400-021-8655
在线咨询
在线留言