記天貓 iOS “借圖”動效的設計與收獲

設計師朋友肯定都熟悉 Pinterest，那大家對它打開圖片的借圖過渡動畫有印象嗎？點擊圖片后，直接把 List 頁的圖片放大過渡到后一個頁面。而一般更常見、傳統的過渡方式則是從右邊直接 Push 一個新頁面蓋上來。

Pinterest 的這種過渡方法中文稱之為“借圖”，也就是前后兩個場景共用一張圖片，保持中途連貫。與傳統 Push 相比，借圖的好處在于：

1、視覺聚焦。兩個場景之間的過場通過這張不變的圖片連接，沒有突兀的跳躍感，視覺連貫不中斷，沉浸感強；

2、凸顯圖片。對用戶而言，圖片的吸引力比文字要強得多，因此采用借圖形式相當于提升了圖片的重要程度。同時，保證后一個頁面的其他信息都是接著圖片后出現的，為圖片的展示爭取了更多的時間；

3、新奇和酷。看慣了老久的過場，使用新的過渡方式可以給用戶帶來新鮮感，也與競品在體驗上顯示出了差異。

目前，采用了借圖效果相對知名的 App 有：Pinterest、Zara、淘寶有好貨等，其他比較常見的還有以圖片為中心的一些 App。

綜上所述，我就想，能不能在天貓也做一個這樣的效果，優化從搜索結果頁到商品詳情頁的過程？

考慮到僅僅做單個場景的體驗優化往往推動比較困難，所以必須把動畫組件化并復用到盡可能多的場景。因此也梳理了一下目前幾個適用的場景：搜索 List、首頁推薦商品坑位、詳情頁猜你喜歡等等，總之只要是從一個小圖坑位跳轉到詳情頁，都可以使用這套邏輯。

天貓 List 過場原本形式：

想要做成的新形式：

于是，我先做了一個小動畫，也在設計稿里表達了動態邏輯：（gif好像播不了...）

為了保障交付過程順利，當然還要確定每個動畫細節的時間節點以及曲線。

這樣，給組內設計師看過覺得還 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、盡可能少做無法論證的事。關于這點多說幾句，后來復盤的時候和老板討論整個過程，他告訴我，對于這樣一個單點的效果，我們也好、數據也好、用戶調研也好，最后的結論一定是有人喜歡有人討厭有人無所謂。他作為老板，也沒辦法告訴我這個設計究竟是對還是錯。但是，我們在工作中、設計中，要盡量從大的思路上、總體性的規劃上去考慮問題，因為總體的設計升級或體驗優化是有辦法驗證的。

這次經歷對我影響很大，也讓我對設計、體驗有了新的認識。老板在我的試用期轉正評語中也寫道：“能夠將這樣的項目推動落地，也算是新人難有的成熟。”所以什么才是好的設計？如何衡量設計的價值？怎樣全局性地規劃設計？這都是未來我要繼續學習的。

 

 

來自：http://www.cocoachina.com/design/20170210/18654.html