TOPVE唯艺互动

TOPVE VIEW
保持不断的探索与研究
慧眼看世界,在设计的路上不断追求创新!
Keep exploration and research

YOUKU播放器APP界面的设计之道

发布于:2016-12-31 07:42:00 作者:kudcer 来源:优酷土豆用户体验设计中心  人气:

当前位置:首页观点设计理论 正文

历经4个月的优酷播放器APP界面设计改版项目,是设计师对平衡用户体验和商业价值的一次勇敢实践。它的完整性,设计自由度,以及所带来的挑战都让我们在这段时期快速成长。怀着设计的分享精神,向大家展现完整的设计过程…

YOUKU播放器APP界面的设计之道

  用户需要享受影像表达的魅力,而播放器永远需要改进。历经4个月的优酷播放器APP界面设计改版项目,是设计师对平衡用户体验和商业价值的一次勇敢实践。它的完整性,设计自由度,以及所带来的挑战都让我们在这段时期快速成长。怀着设计的分享精神,以这篇文章作为回顾,向大家展现完整的设计过程,包括那些经验成果,当然也少不了走过的弯路。

  视频内容变革,体验随之而变

  内容与播放器之间的关系在近年悄然发生变化,内容与互动间不再有明显的界限,而这一点必将引起播放器形态的改变。视频内容不再是一帧一帧的视频流,如今弹幕是视频内容,互动送花是视频内容,视频中的主播口播引导用户点赞也是视频内容。用户适应这些变化比我们想象中更快、更容易。用户的需求不再仅限于控制播放器为自己服务,而是切身参与到影音娱乐中。而优酷迫切需要跟上视频内容引起的播放器变革。

  通过梳理现有播放器的问题,调研市面上的优秀竞品,我们发现视频产品虽然都有各自的播放器,但相差无几同质化严重,产品功能创新极少。认识到这个状况我们决定回到问题的根本:什么是好的播放体验。

YOUKU播放器APP界面的设计之道

  播放器意味着“沉浸”加“可控”。播放器的本质是内容供给窗口,同时在沉浸观看的场景中,用户也需要持有对播放的控制权和安全感。让观看场景更沉浸,让控制场景更便捷,把由内容变革引起的新的互动内容融入到这两个场景中,是当下我们追求的好的播放体验,后续的方案也朝着这个体验目标来推进。

  自身问题,为何而变

  对视频APP来说,播放器是用户停留时间最长,最有可能产生互动行为的核心用户场景。而优酷播放器当时的状况是功能快速叠加,未经统一规划造成布局拥挤,无法再容纳任何新功能或互动,很快迎来了需求的冲突。这样的播放器在拓展性方面无法支撑内容和互动的发展。迫切需要对播放器的扩展性进行增强。另一方面,早期采取各端遍地开花的策略使得PC、Phone、Pad在快速发展阶段都基于各自不同的设备场景来设计产品方案,形成了各端播放器的较大差异,作为同一个产品,在各端的播放体验呈现出参差不齐的状况。对齐各端多平台的一致性、统一体验是我们的又一大设计目标。

YOUKU播放器APP界面的设计之道

  设计思路的提出

  重构播放器设计,我们决定从播放需求的底层开始梳理,找到真正可拓展、应该拓展的机会点。针对这样的出发点,结合马斯洛的需求理论,我们将播放器需求分为三层:基础观看层、内容延展层、互动层。

  基础观看层对应用户的播放器基础需求,例如播放暂停功能。内容延展层则是用户在第一层基础观看被满足后,延展了内容选择的功能对用户来说可以更好地观看,例如选集、相关推荐。互动层则是在第一、二层需求都被满足的基础上,才会显示出其激励作用,例如综艺节目视频中的互动投票。

  基础观看层、内容延展层的需求相对固定,互动层是体现视频内容横向扩张的主要场景。由于不同需求层的场景不同,我们对三者进行了拆分合并:

  1.针对基础观看层和内容延展层应保障用户最低认知成本,做好基础体验。

  2.针对互动层则需要做一个横向的扩容能力,并引导促进用户进行互动。

YOUKU播放器APP界面的设计之道

梳理好需求分层后,我们聚焦到需求的发生场景,在播放器场景,用户已持有一个观看主任务的情况下,焦点被持续占用,给用户同时叠加过多任务,有引起用户焦虑、不知所措的风险,会伤害到基础播放体验。我们针对播放场景做出了体验底线的决策:一个用户场景,我们依照一个核心任务场景来做设计。也就是基础观看层需求上,最多同时叠加一个互动场景。

  针对互动娱乐层的影响因素进行的调研结果如下:

  1.互动出现的时机、频率

  2.数量及占用通道的时长

  3.与视频内容的关联性

  4.是否影响到基础功能

  5.形式是否合适、新颖

  6.服务价值的体现,后续互动产生的影响及反馈

  另一方面,长期占用有效的露出通道并不能让互动的转化效果最大化,问题的关键点是在用户最需要时提供给他相应的互动功能,而核心任务应该容纳场景的变化随之转变。比如在视频刚开始播放时,用户尚未对视频内容有所感知,“赞”和“分享”几乎是无效的,这个时候我们可以把有效的露出通道让给检测到设备的Airplay功能,而“赞”、“分享”则安排在视频播放的后半段露出,我们提出场景化的功能池设计想法,可以让互动效果得到显著提升,也可以让通道的利用率最大化。

YOUKU播放器APP界面的设计之道

YOUKU播放器APP界面的设计之道

  以iPhone为例的设计方案

  有了清晰的设计目标和设计思路,我们选取Phone端为样本进入具体的方案设计。依照设计目标提出了“沉浸式、互动性、扩展性、智能化(场景化)四个体验点,展开了落地方案的研究与设计工作。合理的功能区域规划是正确对应需求的基础,我们对播放器的功能做了如下分类:

YOUKU播放器APP界面的设计之道

  控制区域合理划分

  视频播放的界面为了在操作状态尽量保证画面的完整,上、下、左、右四边区域是相对理想的控制区域。经过竞品分析、用户调研,我们按照以下场景原则做了功能分区:

YOUKU播放器APP界面的设计之道

  播放器上、下控制区是用户对于播放器界面基础认知,用户能够最不经思考地完成任务。此区域承载最基础的播放控制功能、内容扩展功能,用户在进行清晰度、播放暂停、相关推荐视频时,能够快捷地找到入口,轻便又高效。解决了线上功能无序叠加带来的界面复杂拥挤的问题,为用户提供一个清晰轻便的界面,实现“沉浸式”观看的目标。

  播放器左右控制区域是用户横向持机的热点区域,与游戏时的手柄类似。互动性、场景化的功能分布于左右控制区可以迅速吸引用户的焦点,并方便点击进行即时互动。因业务不同时期的发展,不同的视频内容,互动功能优先级也会有所不同,为了长期保持基础区域的可用性,场景化地为用户提供更有效的互动,我们提出了两个重要功能加一个“更多”(三个点)的智能互动方案。

  智能化的互动功能池

  两个重要功能加一个“更多”(三个点)的智能互动方案中,两个重要互动依据视频内容及固定场景来对应相应的互动,是相对稳定的固定互动。譬如分享、收藏、开通会员、弹幕。同时,“更多”用来容纳前两个互动以外的其他相对低频的互动。也为后续的产品功能和业务提供了接入的可能性,实现“扩展性”的目标。

YOUKU播放器APP界面的设计之道

  此外,像边看边买、Airplay这种时效短,播放时间点强相关的互动功能则用临时互动球实现,在用户有观看视频为核心任务的场景下,可以选择性进行该任务,若用户对此互动不感兴趣不进行点击,则互动会在短时间内消失。这样依照场景和用户的反馈,即时出现、即时消失,达到有效通道最大化利用的目标。

YOUKU播放器APP界面的设计之道

  右侧互动区中,两个依据类型而对应的互动球加上更多收纳球,以及依据场景出现的及时互动球,构成了智能化的播放器互动设计。实现了智能化(场景化)、互动性的设计目标。我们为动漫视频内容优先露出分享、弹幕功能,为电影电视剧等视频内容优先露出分享、收藏功能,当电视剧播放到女主特写时,出现女主口红同款的及时互动球。

针对左侧的互动区,考虑到左侧对大部分用户来说更适合布局与其他互动功能区无关联性的功能,以培养用户固定在右侧进行互动的使用习惯。最终我们在左侧规划了适用于移动端躺着看、拿着看、外出场景的锁屏功能。

  从方案到线上

  设计方案系统地完成后,在优酷先锋版APP上线试水,针对反馈调整细化为如今优酷APP线上播放器的方案。让用户看到了播放器焕然一新的改变,也仍有许多场景没有做到预期的灵活、完整。曾经因为互动球形式的不稳定因素而纠结过,与大家一起做决策面对线上用户要更稳地分步走,从设计角度妥协到过度方案。也在从概念转化为上线方案的过程中面临了极大的困难,处理前期没有囊括在内的许多个功能,完善前期版本积压的体验不良点。上周我们收到一份不错的数据反馈,场景化互动设计的有效性得到初步论证,基础功能区的改良也颇有成效。播放器改版有了第一个战果,写下以上分享给大家,也希望你喜欢这篇文章~

  视觉展示

YOUKU播放器APP界面的设计之道

YOUKU播放器APP界面的设计之道

YOUKU播放器APP界面的设计之道

YOUKU播放器APP界面的设计之道

YOUKU播放器APP界面的设计之道

  最后鸣谢所有为播放器改版而辛苦的大家:
  Tommao 视觉大师
  云檀 视觉少女
  离枯 腹黑补刀王“首席”视觉
  恬玥 史上最灵气视觉女王
  烟晗 和 碧清 两位交互(正码字的我们自己)

优酷土豆用户体验设计中心
文章来源:微信公众号(KUDC)

分享到:
你觉得这篇文章:
收藏到个人中心
唯艺互动-专注高端网站设计

TOPVE唯艺互动

相信设计的价值 让美好的事情发生

专注高端网站界面设计

联系我们

QQ联系:270304282

邮箱:haobanfa1@163.com

唯艺互动-专注高端网站设计

抱歉!好像您使用的浏览器版本太低了
为了得到我们网站最好的体验效果,我们建议您升级到最新版本的IE浏览器,或选择其它推荐浏览器

继续访问请进入旧版TOPVE