记天猫 iOS “借图”动效的设计与收获

设计师朋友肯定都熟悉 Pinterest,那大家对它打开图片的借图过渡动画有印象吗?点击图片后,直接把 List 页的图片放大过渡到后一个页面。而一般更常见、传统的过渡方式则是从右边直接 Push 一个新页面盖上来。

Pinterest 的这种过渡方法中文称之为“借图”,也就是前后两个场景共用一张图片,保持中途连贯。与传统 Push 相比,借图的好处在于:

1、视觉聚焦。两个场景之间的过场通过这张不变的图片连接,没有突兀的跳跃感,视觉连贯不中断,沉浸感强;

2、凸显图片。对用户而言,图片的吸引力比文字要强得多,因此采用借图形式相当于提升了图片的重要程度。同时,保证后一个页面的其他信息都是接着图片后出现的,为图片的展示争取了更多的时间;

3、新奇和酷。看惯了老久的过场,使用新的过渡方式可以给用户带来新鲜感,也与竞品在体验上显示出了差异。

目前,采用了借图效果相对知名的 App 有:Pinterest、Zara、淘宝有好货等,其他比较常见的还有以图片为中心的一些 App。

综上所述,我就想,能不能在天猫也做一个这样的效果,优化从搜索结果页到商品详情页的过程?

考虑到仅仅做单个场景的体验优化往往推动比较困难,所以必须把动画组件化并复用到尽可能多的场景。因此也梳理了一下目前几个适用的场景:搜索 List、首页推荐商品坑位、详情页猜你喜欢等等,总之只要是从一个小图坑位跳转到详情页,都可以使用这套逻辑。

天猫 List 过场原本形式:

2016090301

想要做成的新形式:

2016090302

于是,我先做了一个小动画,也在设计稿里表达了动态逻辑:

2016090303

为了保障交付过程顺利,当然还要确定每个动画细节的时间节点以及曲线。

2016090304

这样,给组内设计师看过觉得还 OK 之后,就可以拿着 Demo 去和开发GG以及产品经理提需求了。

很幸运,大家没有对我这个新人提出的奇思妙想视而不见,我们决定在 iOS 上试水。但是,看起来一个简单的效果却花费了我们接近两个月的时间。

难点有这样一些:

1、巨型 App 中,页面与页面之间在代码设计时更倾向于“解耦合”,也就是希望前后场景尽可能独立,这样可以避免很多联动的问题,也保证每个页面开发起来更加自由。“解耦合”的特性,与借图的本质是相冲突的——后者就是希望将两个场景连接起来;

2、图片放大后模糊。严格来说,List 小图和详情页大图是一张图片的两个不同尺寸,所以当小图直接放大到大图时会出现模糊。虽然可以很快地“无缝”替换为高清大图,但毕竟还是有个过程,对于一些特定的图片尤其明显;

3、动画掉帧。由于天猫的业务场景比较复杂,特别是商品详情页需要加载来自各方的大量数据,这就导致手机性能上的紧缺。这样一个动画效果在播放时,很难维持在高帧率,而在 iPhone 6 Plus 的大屏上掉帧的 Case 就更频繁地出现(屏幕越大,动画越消耗资源);

4、后续数据加载滞后。紧接着上一点,为了避免动画播放和数据请求同时进行时对性能的影响,我们尝试了将两者异步进行的方式。但随之而来的就是几百毫秒的动画之后再展示其他数据信息,会给人一种“卡顿”、“Bug”的感觉。

就以上的问题,我和开发同学一起奋斗了好几个晚上——反复调整动画参数以保证在不同尺寸手机上的效果都最理想、反复调整动画时间以实现掉帧率和后续数据加载时间之间的平衡、尝试使用一些视觉上的 Trick 来掩护逻辑上的风险……最后终于在某一个发版节点前没几天,把效果调试到了大家都比较能接受的状态。

虽然没有达到100%的还原度,但我觉得目前的效果也还能接受。推动落地毕竟是尝试的第一步,后续也可以继续优化。

至于上线之后的真实效果,在上个版本的天猫 iOS 客户端 5.22.0 中可以体验到。

为什么是上个版本?因为在8月29日最新发布的 5.22.1 版本中,我亲自推动把这个效果下线了。

很多朋友和同事都很疑惑,为什么花费了这么大精力去尝试的创新、好不容易推动上线,却仅仅维持了一个版本就下线了?

理由很简单:目前的体验,对大部分用户来说没有足够的论据证明它更优秀,却存在对部分用户来说体验不佳的风险。

或者换句话说就是,没办法证明它好,却有一些用户觉得它不好。

上线之后没几天,我就收到了一些同事和用户的反馈——主动找上门的常常不是好消息。没错,他们对新效果非常不适应,都觉得“乍一看以为是 Bug”。虽然我不会因为几个人的反馈就下结论,毕竟设计过程和测试中都是有过调研的,但是,这也足够让我重新审视这个动画的效果。

我带着新版本,走访了公司非相关岗位的近20位同事,采访他们对新效果的体验和感受。结果,20余名被访谈用户中,只有3-5人觉得这个效果非常赞、很喜欢;有5-8人认为不习惯、不喜欢、卡顿感很强;剩下的用户都表示无所谓、没什么不一样。

另一方面,我在自己的微信群里、朋友圈里也调研了这个问题,得到的数据比例和上面的访谈差不多。同时,我们捞了一把用户反馈,但没有发现任何与新动画相关的用户评论和投诉。又查看了一下相关场景的数据,发现和新动画上线之前没有任何变化。

因此,这些调研就把结果指向了一个悲剧的方向:新的动画,没有明显的优势,却有潜在的风险。

考虑到目前并没有100%实现还原度,而后续随着双十一临近业务量进一步加大,可能会更放大现在效果中的一些弊端,比如掉帧、数据请求迟缓等,甚至可能导致影响整体的性能和体验。

所以,纠结之后,我决定先暂时下掉这个功能。而等到大促之后,我会再和开发同学继续优化这个动画细节,以求达到完美的体验。

通过这件事,我总结了以下几个收获和启示:

1、体验和性能同时达到极致往往会遇到障碍,尤其是在大体量的客户端和场景中。(淘宝有好货就是一个独立的场景,相对简单);

2、单点体验优化推动非常困难,因为体验、感知这种东西都没有确定的衡量标准,难以体现价值;

3、事先测试、调研不够充分,对效果有一定盲目乐观的成分在;

4、尽可能少做无法论证的事。关于这点多说几句,后来复盘的时候和老板讨论整个过程,他告诉我,对于这样一个单点的效果,我们也好、数据也好、用户调研也好,最后的结论一定是有人喜欢有人讨厌有人无所谓。他作为老板,也没办法告诉我这个设计究竟是对还是错。但是,我们在工作中、设计中,要尽量从大的思路上、总体性的规划上去考虑问题,因为总体的设计升级或体验优化是有办法验证的。

这次经历对我影响很大,也让我对设计、体验有了新的认识。老板在我的试用期转正评语中也写道:“能够将这样的项目推动落地,也算是新人难有的成熟。”所以什么才是好的设计?如何衡量设计的价值?怎样全局性地规划设计?这都是未来我要继续学习的。

感谢整个过程中帮助我的同事,尤其是开发、测试同学给予的信任和无私支持,我相信时间不是被浪费的,挫折与经历都会沉淀为我们迈向下一步的资本和动力。

继续加油!

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部