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

   <p>设计师朋友肯定都熟悉 Pinterest，那大家对它打开图片的借图过渡动画有印象吗？点击图片后，直接把 List 页的图片放大过渡到后一个页面。而一般更常见、传统的过渡方式则是从右边直接 Push 一个新页面盖上来。</p>    <p>Pinterest 的这种过渡方法中文称之为“借图”，也就是前后两个场景共用一张图片，保持中途连贯。与传统 Push 相比，借图的好处在于：</p>    <p>1、视觉聚焦。两个场景之间的过场通过这张不变的图片连接，没有突兀的跳跃感，视觉连贯不中断，沉浸感强；</p>    <p>2、凸显图片。对用户而言，图片的吸引力比文字要强得多，因此采用借图形式相当于提升了图片的重要程度。同时，保证后一个页面的其他信息都是接着图片后出现的，为图片的展示争取了更多的时间；</p>    <p>3、新奇和酷。看惯了老久的过场，使用新的过渡方式可以给用户带来新鲜感，也与竞品在体验上显示出了差异。</p>    <p>目前，采用了借图效果相对知名的 App 有：Pinterest、Zara、淘宝有好货等，其他比较常见的还有以图片为中心的一些 App。</p>    <p>综上所述，我就想，能不能在天猫也做一个这样的效果，优化从搜索结果页到商品详情页的过程？</p>    <p>考虑到仅仅做单个场景的体验优化往往推动比较困难，所以必须把动画组件化并复用到尽可能多的场景。因此也梳理了一下目前几个适用的场景：搜索 List、首页推荐商品坑位、详情页猜你喜欢等等，总之只要是从一个小图坑位跳转到详情页，都可以使用这套逻辑。</p>    <p>天猫 List 过场原本形式：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6b15e3f96614d6de5927e2b172cc5c10.png"></p>    <p>想要做成的新形式：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/25484e67b84bb84994537a2bcaa0e569.png"></p>    <p>于是，我先做了一个小动画，也在设计稿里表达了动态逻辑：（gif好像播不了...）</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/5dfdd05b030f5820bc966a9b2ea72fd8.png"></p>    <p>为了保障交付过程顺利，当然还要确定每个动画细节的时间节点以及曲线。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/546d8537252597b77fbcdc6d80fbf94f.png"></p>    <p>这样，给组内设计师看过觉得还 OK 之后，就可以拿着 Demo 去和开发GG以及产品经理提需求了。</p>    <p>很幸运，大家没有对我这个新人提出的奇思妙想视而不见，我们决定在 iOS 上试水。但是，看起来一个简单的效果却花费了我们接近两个月的时间。</p>    <p>难点有这样一些：</p>    <p>1、巨型 App 中，页面与页面之间在代码设计时更倾向于“解耦合”，也就是希望前后场景尽可能独立，这样可以避免很多联动的问题，也保证每个页面开发起来更加自由。“解耦合”的特性，与借图的本质是相冲突的——后者就是希望将两个场景连接起来；</p>    <p>2、图片放大后模糊。严格来说，List 小图和详情页大图是一张图片的两个不同尺寸，所以当小图直接放大到大图时会出现模糊。虽然可以很快地“无缝”替换为高清大图，但毕竟还是有个过程，对于一些特定的图片尤其明显；</p>    <p>3、动画掉帧。由于天猫的业务场景比较复杂，特别是商品详情页需要加载来自各方的大量数据，这就导致手机性能上的紧缺。这样一个动画效果在播放时，很难维持在高帧率，而在 iPhone 6 Plus 的大屏上掉帧的 Case 就更频繁地出现（屏幕越大，动画越消耗资源）；</p>    <p>4、后续数据加载滞后。紧接着上一点，为了避免动画播放和数据请求同时进行时对性能的影响，我们尝试了将两者异步进行的方式。但随之而来的就是几百毫秒的动画之后再展示其他数据信息，会给人一种“卡顿”、“Bug”的感觉。</p>    <p>就以上的问题，我和开发同学一起奋斗了好几个晚上——反复调整动画参数以保证在不同尺寸手机上的效果都最理想、反复调整动画时间以实现掉帧率和后续数据加载时间之间的平衡、尝试使用一些视觉上的 Trick 来掩护逻辑上的风险......最后终于在某一个发版节点前没几天，把效果调试到了大家都比较能接受的状态。</p>    <p>虽然没有达到100%的还原度，但我觉得目前的效果也还能接受。推动落地毕竟是尝试的第一步，后续也可以继续优化。</p>    <p>至于上线之后的真实效果，在上个版本的天猫 iOS 客户端 5.22.0 中可以体验到。</p>    <p>为什么是上个版本？因为在8月29日最新发布的 5.22.1 版本中，我亲自推动把这个效果下线了。</p>    <p>很多朋友和同事都很疑惑，为什么花费了这么大精力去尝试的创新、好不容易推动上线，却仅仅维持了一个版本就下线了？</p>    <p>理由很简单：目前的体验，对大部分用户来说没有足够的论据证明它更优秀，却存在对部分用户来说体验不佳的风险。</p>    <p>或者换句话说就是，没办法证明它好，却有一些用户觉得它不好。</p>    <p>上线之后没几天，我就收到了一些同事和用户的反馈——主动找上门的常常不是好消息。没错，他们对新效果非常不适应，都觉得“乍一看以为是 Bug”。虽然我不会因为几个人的反馈就下结论，毕竟设计过程和测试中都是有过调研的，但是，这也足够让我重新审视这个动画的效果。</p>    <p>我带着新版本，走访了公司非相关岗位的近20位同事，采访他们对新效果的体验和感受。结果，20余名被访谈用户中，只有3-5人觉得这个效果非常赞、很喜欢；有5-8人认为不习惯、不喜欢、卡顿感很强；剩下的用户都表示无所谓、没什么不一样。</p>    <p>另一方面，我在自己的微信群里、朋友圈里也调研了这个问题，得到的数据比例和上面的访谈差不多。同时，我们捞了一把用户反馈，但没有发现任何与新动画相关的用户评论和投诉。又查看了一下相关场景的数据，发现和新动画上线之前没有任何变化。</p>    <p>因此，这些调研就把结果指向了一个悲剧的方向：新的动画，没有明显的优势，却有潜在的风险。</p>    <p>考虑到目前并没有100%实现还原度，而后续随着双十一临近业务量进一步加大，可能会更放大现在效果中的一些弊端，比如掉帧、数据请求迟缓等，甚至可能导致影响整体的性能和体验。</p>    <p>所以，纠结之后，我决定先暂时下掉这个功能。而等到大促之后，我会再和开发同学继续优化这个动画细节，以求达到完美的体验。</p>    <p>通过这件事，我总结了以下几个收获和启示：</p>    <p>1、体验和性能同时达到极致往往会遇到障碍，尤其是在大体量的客户端和场景中。（淘宝有好货就是一个独立的场景，相对简单）；</p>    <p>2、单点体验优化推动非常困难，因为体验、感知这种东西都没有确定的衡量标准，难以体现价值；</p>    <p>3、事先测试、调研不够充分，对效果有一定盲目乐观的成分在；</p>    <p>4、尽可能少做无法论证的事。关于这点多说几句，后来复盘的时候和老板讨论整个过程，他告诉我，对于这样一个单点的效果，我们也好、数据也好、用户调研也好，最后的结论一定是有人喜欢有人讨厌有人无所谓。他作为老板，也没办法告诉我这个设计究竟是对还是错。但是，我们在工作中、设计中，要尽量从大的思路上、总体性的规划上去考虑问题，因为总体的设计升级或体验优化是有办法验证的。</p>    <p>这次经历对我影响很大，也让我对设计、体验有了新的认识。老板在我的试用期转正评语中也写道：“能够将这样的项目推动落地，也算是新人难有的成熟。”所以什么才是好的设计？如何衡量设计的价值？怎样全局性地规划设计？这都是未来我要继续学习的。</p>    <p> </p>    <p> </p>    <p>来自：http://www.cocoachina.com/design/20170210/18654.html</p>    <p> </p>