 作者：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用户的反馈：  |
