大家好,我是QQ手机版的设计师Omega。


感谢大讲堂的邀请,上次提到的几个问题是在App Store中 用户主动提到的一个问题,之前一直没有好的解决方案,所以迟迟没有推动,这次我们抛出了三个方向,这三个方向是针对这个问题内部脑暴的三个方案,这里很荣幸能有机会跟大家一起分享下这个需求的收敛和执行。


我们回顾下上次提到的三个方案:


方案一,通过摇一摇把小红点抖落;

方案二,通过对着手机吹一下,把小红点吹掉;

方案三,把小红点拖拽下来,不喜欢哪个拽哪个;


对于这三个方案的解读,跟评论中@张兆超的比较一致。


方案一:摇一摇的方案的确挺顺手,但是跟某些应用的摇一摇概念类似,别人看到也不会觉得是QQ手机版原创,手势不再具有传播性;


方案二:吹掉也可行,但是对于音量检测来说,如果你在用QQ手机版的时候,周围忽然出现很大声,小气泡可能就消失了,这种体验应该是不能忍的;


方案三:嗯,看起来不错啊!评论中很多同学提到的方便一条条删除,还有更好的控制,趣味性都是这个方案的优点。


这里顺便回答一下@ 异次元sky:“我只能说你们已经做了c了,现在还上来问,有意思嘛?” 的问题,我个人的看法是,任何解决方案都有机会被超越,所以我们也期望大家能提出更好的建议和想法,在用户体验这点上,我们的看法是,不管做的多么细致,都有进步的空间,甚至推翻重做都是可以的,只要是有进步。


以下部分是啰嗦一下整个项目中执行的一些细节点,跟方案评选无关。


根据上边脑补的过程,"我觉得"方案三能做成口碑和传播点的概率更大一些,而且看起来很有技术含量的样子。于是开始做DEMO来体验下。在iOS和Android上做demo比较快的一个解决方案是使用flash,因为可以比较方便的加个壳在两个平台上就都可以运行了,不过作为一个DEMO,能顺畅在一个平台上运行也不错。


然后就开始了方案稿的输出。以下就是第一稿:




拖拽一定是要有个动画的,要不然会感觉莫名其妙。而动画的方式,是想要模拟拽掉的视觉感觉,从视觉和开发都简单处理的方向上来处理,就是数字红点拖拽的时候,在原始位置留下一个跟数字红点等大的小红点,拖得越远,原始位置的气泡就会越小,理想情况下,就会有个拖拽下来的赶脚了.......吧?


速度flash还原了下,然后在手机上体验了一把,感觉,这就是个bug啊..由于拖拽的不够远,所以手指还没挪开的时候,红点就被拖下来了,松手的时候只是看到红点莫名其貌的消失了。


这货绝对通不过评审的,至少得有个距离,能看的很清楚什么时候放手可以拖拽掉小红点,什么时候放手红点会归位。这稿虽然不合格,但是实现简单啊,不过这好像不是初衷,好用更重要一点,于是有了第二稿。




在第一稿的基础上增加了拖动的距离,在两个红点之间画一个梯形连接起来,感觉除了看起来有点2貌似没有其他问题了。以下有个示意图来描述下解决方法:



图1. 建立两个红点的坐标系(flash的坐标y轴的确是向下的)



图2. 计算四个切点坐标并画线段,填充颜色(有了坐标系,感觉高大上了很多吧...)


关于看起来有点愣的问题,并不是没有解决方案,只是解决起来会比较麻烦。作为一个有节操的设计师,这里的质感应该是那种肉(nian)肉(huhu)的感觉,松手还会有回弹,消失的时候还要有个爆炸动画,一不小心扔出去应该有加速度同时受重力加速度影响才对。于是,期望中实现出来应该是这个样子的:



关键还是执行,效果是这样,那是否有可行性呢?努力回忆了下初中数学老师毕业时候说过话,贝塞尔曲线什么的或许可以一战。


对设计师来说前方烧脑,准备好心态




图3. 贝塞尔曲线模型示意



既然是贝塞尔曲线,就得有个控制点,控制点的位置比较关键。初步设想是,随着两个圆点的距离增大,临时点point_temp从p2向大圆的中心p0移动,然后从p1向point_temp画线,取重点作为贝塞尔曲线控制点p5,这样就能实现随着距离增加中间的连接区域越来越细,想想好像是这么回事。体验了下,发现中间缩小的速率太慢,感觉不太对劲,于是优化了下模型,如下图:



图4. 贝塞尔曲线模型优化示意


把point_temp的移动距离从p2到p0移动,修改为从p2向p4移动,这样控制点移动的速度就会快很多,体验了下,总算像那么回事了。不过还不够完美,如果p2和p4是动态计算的曲线就更完美了,不过这么厉害的算法问题就交给专业的开发GG们去处理了。至于其他的,回弹是常规算法,有现成回弹模型,爆炸输出了序列帧。最终呈现实现了预想中的效果。



最终这个小功能上线后,用户还是比较认可的:)



后来,这个拖拽红点有了自己的名字:“一键下班”。有一段时间,渣浪微博上搜索"QQ5.0"最热的精选微博就是“一键下班”,线下也有不少朋友当面提起,甚至在公交车站都听到有人向朋友推荐这个功能。以上种种,看到之后的确还是有点小开心的。



手机QQ团队一直致力于提供更佳的产品体验,体如果大家有更好的建议,也欢迎直接QQ我留言(QQ:382931382)或者写在本文章评论中,谢谢大家:)