作者:carrie
 
1.让图片滚动起来-完美解决业内长图展示困扰问题

  长图动态浏览,一直是QQ空间以及业内SNS竞品着力解决的特性点,之前的体验一直在留白与截断之间困扰,始终得不到一个完美的解决方案。

  此特性主要用户优化空间动态长图体验。我们先看下之前的长图动态体验,多次反复尝试,一直在留白和截断之间反复辗转,反馈也是不能兼顾,用户总有不满意的地方:
 
4.创新点:hover,图片开始自动向下滚动播放:

  这两种模式,都有着明显的缺陷,要么长图留白,要么展示不完整,怎样即能让动态丰富展示而又凸显完整呢,前台开发leader郭润增一天突然提到,在展示截断模式的时候,hover,让图片自动往下滚起来,用户不久立马明白了,这个图下面还有大文章吗?于是,新版的动态长图体验出来了:宽度调整至最佳长度510px,铺满动态区域,右下角标识为长图,hover,图片开始自动向下滚动播放新版的动态长图浏览模式,即解决了留白和截断两种模式的困扰,新奇有趣儿的滚动,让用户欣喜不已,甚至根据这个特性创造除了很多动态玩法,在这个框里讲故事:
 
 
 
5.创意的产生

  这么牛逼的看图功能,是怎么实现的呢,前台leader郭润增给出了点子的实现过程:这个实际上是某一天早上Scorpionxu哥在耳边轻轻诉说的一句话“这个图要是能自己动就好了”,当时我的第一感觉就是为何不实现一下看看呢,然后就开始写代码了。
6.怎样实现

   Rizen:当时也是没有想太多优化,直接就暴力扫节点,找出长图,然后在容器上绑上鼠标移动的事件,让他自己往下滚。觉得好像还挺不错,然后就开始磨体验磨细节了:
1)  自动往下滚的速度多少合适呢?每秒50px?100px?200px?不停地调整再调整,最终选定了100px每秒

2)  如果用户想看滚过的呢,是不是得支持还可以往上滚的逻辑?所以就以图片中间区域为界限,判断鼠标在上面区域就往上滚,在下面区域就往下滚

 3)  如果用户想要停下来怎么办?是不是中间还得设置一个停止区域,于是就划成3等份,中间让它停止。但是这个效果最后被我否定掉了,首先会导致操作起来很别扭,多了一种区域就让整体的操作变得更复杂,因为实际上想停只要鼠标离开图片就行了,所以最终还是以两个区域更简单的方案为准

4)  上半部区域往上滚,当鼠标一开始是从上面移进图片的话,就不会马上往下滚,这个功能更不容易被发现。所以就做了一个判断,第一次无论从哪里移上去都是往下滚,但当鼠标移到下面再移到上面的时候,就会往上滚,让用户发现原来还可以往上滚的,而且这样也挺符合预期的,因为一开始只需要往下滚就ok了      

7.产品的意义与展望

  长图滚动播放模式,是腾讯在业内的首创,给用户带来欣喜体验的同时,也要激励自己继续捕捉用户内心的深层需求,正如rizen所说的:对互联网产品来说,没有所谓的最终形态,我们还是以发展的眼光去看待每一个细节,永远不要满足于现状,这样才能够让整个产品变得更好。附L用户的反馈: