“知道世界上最苦逼的事情是什么吗?不是坐在女神面前打飞机,而是她在我旁边一直在QQ空间玩小鸟,而我却始终没懂什么意思...”


  随着空间4.0版本的灰度放量,越来越多的用户涌入空间玩小鸟。对,你没听错。这只无辜的小鸟,不比飞机永远也打不完的关卡,只需您轻轻一个手势就可以弹飞它去任何地方。

一、创新特性名--下拉刷新与动画背景


二、产品功能--下拉刷新


   用户对于 Twitter、Facebook、新浪微博、微信朋友圈等应用中的“下拉刷新”功能想必非常熟悉,这一功能成了众多应用中广泛使用的功能之一,是一种适用于按照从新到旧的时间顺序排列feeds的应用,在这种应用场景中看完旧的内容时,用户会很自然地下拉查找更新的内容。


l 应用现状:


    下拉是用户在app中出现频率最高的一个操作,但现在的下拉操作除了承载刷新的功能外,并没有给到用户一个创意的反馈。特别是在彰显个性化的背景图上,下拉后仅露出顶部的纯白底色,非常简陋。

 


 

三、创新点:


  手机Qzone除了承载SNS产品的社交属性,还是一个让用户彰显其审美和性格的产品,作为最直观的彰显性格的“背景图”上,除了提供多款精美静态图片的同时,我们以动画形式和下拉动作完美结合。用户下拉后不再是传统的下拉刷新与正在加载的提示,而是一些意想不到的互动体验和趣味游戏。


  互动形式


  (判断下拉高度形成不一样的动画效果。并搭配音效。简单的游戏逻辑,让下拉变的生动有趣)
  

 


  彩蛋效果

  (下拉后,有意外惊喜或惊吓,产生强烈的对比和反差。)

 

   
  
  1.奇癫大圣再嚣张也逃不出如来佛祖的手掌心,但这么搞怪,连佛祖也拿它没辙了!


  2.公主与王子的浪漫一吻,让多少恋爱中的呆男萌女心生向往。


  品牌宣传 


   (结合知名人物,卡通,游戏等形象特征和技能,配合特效形成酷炫效果。)

 


 
  LOL的经典人物盲僧,超酷的渲染效果是否让你心动?

  未知结果  


  (打破千篇一律的循环逻辑,让游戏结果不可预知)

 


 
  钓鱼是未知结果的首个demo,配合三种钓鱼状态:完全吊起、吊起挣脱、没有吊起。每条鱼实现这三种逻辑,用户任何时候下拉都会产生不一样的结果,可玩性更高。

四、创意如何产生?


  刚拿到cover制作需求的时候,只有静态,7天换和微动cover(微动cover是利用重力加速度原理,用户轻晃手机,背景图会有浮动效果,但本身图片还是静态的)


  那有没有可能将静态图片变成动态的呢?


  既然能实现动态又能否结合下拉产生一系列趣味表现呢?


    如果都能实现,那下拉刷新跳出基础功能,成为展现品牌、体现设计感、表现用户个性化的一种最直观的方式。


  带着这些想法,我们尝试制作了第一款动态背景图—如花。


  起初想法很简答,因为下拉高度足够,所以隐藏在下拉区域的空间可以充分发挥,于是产生了下拉有惊喜的想法。

 


 
  这里默认状态下是一个充满诱惑的身体,让人幻想是女神在水里嬉戏,下拉时如花的脸冲你飞吻。艾玛!多少屌丝心碎了...


  有了初次的彩蛋效果尝试后,总结了几点问题:


  彩蛋效果只利用了上半部的拉伸,下半部分的隐藏空间也一样大,是否也可以利用起来?


  下拉框的浮动效果能否和用户下拉动作有所关联?


  下拉动作能否做些趣味表现?


  综合以上三点,我们考虑了一种新的表现形式—互动


  我们配合下拉动作制作小鸟拉伸的动画。考虑到下拉高度较长,重复一种结果会很枯燥。所以在不同高度作出不同结果动画。于是产生了轻重蓄力的表现形式。


  从设计上我们只用提供两段不同结果动画,技术上由前台根据用户下拉释放的位置来判断播放哪段动画。


  从用户体验来看,是实现了一个简单的互动操作。


  在小鸟的大胆尝试之后,得到了很好的用户反馈,于是开始大量的针对不同风格类型的逐步预研。目前首批以成功上线10套动态cover:
 


五、实现流程:


  整个cover的实现流程相对复杂。首先flash动态背景图使用webview实现,承载html5动画内容,滚动事件下拉操作事件与html5动画的互动是通过javascript交互。动画背景基于html5动画,开放统一的javascript接口。当scrollview滚动或者用户下拉操作触发时,根据当前状态调用不同的接口,实现背景根据用户的下拉操作播放不同的动画内容。


流程图:

 

六、展望未来:


  动态cover作为一次设计demo的简单尝试后,却得到了意想不到的关注,最终成为空间4.0版本的首推功能,它所产生的价值也是有目共睹:


  将枯燥无味的下拉时间充分利用,配合动态效果让下拉变得有趣好玩;


  首创动态形式结合下拉效果,实现游戏模式;


  更多商业空间,可以植入热门电影,游戏,品牌宣传等。实现其独特的盈利模式。

    在未来可以预见的是,越来越多的互联网产品、各种终端,会侵占用户的碎片时间,用户体验已经渗透到各个细节的层面,随之会产生更多的“垃圾时间”——loading、切换APP、闪屏、等等,如何让用户在这些“垃圾时间”能够有平缓的过渡以及完美的体验。cover下拉刷新的创新,无疑给我们找到了一个突破口。


    尽管现在面临的问题还有很多,动画K数对创意限制,还不够顺畅的体验,画面清晰度的完善等,但我们坚信这是一份能带给用户非同一般的功能体验,我们会致力于它的不断优化,将无限的创意实现在QQ空间里。