欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

4款视频app交互设计案例分析

发布时间:2017:09:24 03:00:03 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1693个文字,预计阅读时间5分钟
导语
视频app应该是每个手机上的必装应用,而且一装就是一打。虽然它不是什么新鲜产品形态,准确的说还很老,但是这几年行业的改变思路还是很清晰的,比如付费会员制的推行和自制内

视频app应该是每个手机上的必装应用,而且一装就是一打。虽然它不是什么新鲜产品形态,准确的说还很老,但是这几年行业的改变思路还是很清晰的,比如付费会员制的推行和自制内容的崛起。小编近几个月每天辗转在各个视频app之间:打开搜狐看秦明,打开腾讯看蜗牛,打开爱奇艺看余罪,打开芒果TV看很多。于是便想和大家聊几款主流视频app在交互和产品方面的使用体验。由于视频平台继各大电商之后也成长为了超级app,功能繁复又强大,小编将以4个篇幅对6款app的视频播放功能进行阐述,而且是非会员的情况下(主要是这样可以吐槽一下广告)。本文选择腾讯视频、爱奇艺、搜狐视频和芒果TV进行界面整体的对比,在一些局部功能上会聊到优酷和每日开眼。使用设备为iphone6,各软件的版本号如图0所示,虽然不全是最新版本,但在大版本层面也是比较新的了。本系列文章的叙述顺序会从播放器的竖屏模式聊到横屏,以及其它一些重要功能如缓存、耳机与视频播放的交互等。

4款视频app交互设计案例分析

很巧的是,就在小编筹备本篇文章期间参加了一个行业峰会,峰会上移动研究院以6个维度对7款视频app进行了评测,评测结果我会在文末展示给大家。 想提前声明的是,由于每款应用的产品定位服务用户都不相同,因此在对比相似功能时,小编不会用绝对的对错去评判设计的好坏,而是选择“更合理”、“好一点”等词汇去表达。各位同行如果有不同见解,欢迎提出,大家互相交流,不胜感激。

1. 竖屏模式

 点击信息流里的图片按钮会进入视频播放页面,默认布局都是非全屏模式,界面上半部分是播放器,播放器下面是辅助功能。播放器为播放状态,声音也是扬声状态(无论手机是否为静音)。如果用户本次观看和上一次的观看为同一个视频,那么播放器不会播放广告且直接跳到上一次结束观看的位置继续播放(但也不是每次都奏效,我猜测和数据记录有关,如果上一次播放的数据因网络问题没有存储成功,那么再次点击还是会播广告的)。如果用户本次观看不是上一次观看的视频且不是会员,播放器会放广告。

4款视频app交互设计案例分析

1.1 广告 

推荐阅读:如何提高APP交互设计能力(三):需求的那点事

广告的时长与视频长度相关,如果是预告片或者短新闻则广告时间是15秒,如果是电视剧则可能是45、60、75、90、105或120秒不等。除此之外,观看过程中间会插入15或30秒广告,有时观看结束后也会进入一小段广告,然后才是下一集的片头广告(真是很逆天呢,也不知道谁起的头,现在各平台都这么做)。 从图1.1可以看出,竖屏模式下4个app的播放器高度的差异非常小,但每个app处理系统状态栏的方式很不一样:芒果TV、腾讯和搜狐的播放器直接顶在屏幕顶部,芒果TV将状态栏隐藏,腾讯和搜狐的播放器和状态栏共享一个区域;爱奇艺的播放器则是让出了状态栏,从屏幕顶部下方20点处放置播放器。 播放广告时,播放器上有若干交互按钮,,图1.1中共有的6个界面元素是:返回按钮 广告剩余时长

通常显示在开通会员按钮上,有很强的相关性,告诉用户开通会员可以免广告。

开通会员按钮

点击进入会员购买页面,购买完成后会回到视频播放页面且免掉广告。

广告链接

点击播放器上除所有按钮外的任意位置也可以跳转到广告产品购买页面。

广告静音按钮

点击会使广告静音,但只影响广告的声音,不影响进入正片后的音量。

全屏按钮

切换到全屏显示。

从图中可以看出,只有芒果TV的广告剩余时长没有和开通会员按钮形成视觉相关性;爱奇艺除了上述的6个功能点之外还多了2个按钮:一个是暂停按钮,点击此按钮广告被暂停,个人认为这个按钮没有存在的必要;另一个是投屏按钮,在可被投影的设备为开启状态时就会显示此按钮,点击可投射到大屏幕且不会播放广告。其实腾讯视频也有投屏的功能,只不过要在广告播完才会显示,真的很有心机呢。

1.2 竖屏播放器

4款视频app交互设计案例分析

图1.2是播放视频正片时播放器的布局,和播放广告时一样,播放器的上下两侧各有一栏,上侧栏上有回到上一层级的返回按钮和当前播放视频的名称和剧集数,因此称上侧栏为导航栏;下侧栏上的若干按钮用来操作和管理当前页面内容,因此称下侧栏为工具栏。由于这两个栏和ios标准的导航栏和工具栏定义不是完全吻合,因此如果各位小伙伴有其它更恰当的命名方法可以告诉我。图1.2中可看出,两个栏上共有的4个界面元素是:


  • 返回按钮
  • 暂停/播放按钮
  • 滑轨、滑块和两个时间字段
  • 全屏按钮

  • 如何建站:
    建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

    看了这篇文章的人还看了

    专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
    • 全部评论(0
      还没有评论,快来抢沙发吧!

    上一篇:优质网页设计的七大注意事项

    下一篇:增强网站设计吸引力的方法

  • 18899 文章总数
  • 2333501访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信