微交互系列意在分析交互動效中更加細節的思考，探索微小設計中的更大可能性。本期主題是研究雙列瀑布流的卡片內容瀏覽體驗。

我們關注到不同的雙列瀑布流中，從卡片內容點擊后到過渡為一個完整頁面的動畫在不同的 APP 中設計上有一些微妙的區別。而這些微妙的區別帶來了不同的瀏覽體驗。于是我嘗試把不同的過渡動畫進行了逐幀的分析，觀察其中的細節差異，以及探尋背后的設計思考。

方式一：滑入滑出

滑入滑出是在交互中比較常用也是比較普通的形式，典型代表如淘寶的推薦內容，以及 B 站的視頻內容等等：

這類交互雖然比較常用，使用起來也并不會有太大的問題，不過既然我們今天抱著一種鉆研的態度來看，那我們就要找到使用滑入滑出動畫帶來的問題 - 增加了用戶的「反應時間」。

什么是「反應時間」？

用戶完成點擊后，到新頁面進入的這段時間，是我們常規理解中動畫的「過渡時間」。受到網速的影響，可能還會產生系統的「響應時間」及新內容的「加載時間」，這里我們拋開這些，假設響應和網速都處于最佳狀況去做后續的探討。那么在雙列卡片內，用戶被圖片內容吸引，滑入新頁面后，原來關注的圖片大小和位置均發生了變化，用戶的視覺焦點要重新在新頁面尋找，然后再基于這個焦點開始瀏覽其他信息，這個過程稱之為「反應時間」。舉一個更便于理解的例子，這里的「反應時間」其實就是指你在玩打地鼠的時候，從地鼠出來到反應它在哪個洞的時間。

而這樣的時間，據研究通常在 200ms 左右（刺激源為單一刺激源，具體引用見文末參考）。這個數字代表了什么呢：當我們在打游戲的時候，延遲超過 100ms，就會有卡頓的感覺。所以滑入滑出動畫所帶來的近 200ms 的反應時間，在無形中影響到了用戶在瀏覽頁面時的體驗感。

方式二：容器變換

容器變換是谷歌在 Material Design 的 Motion 章節中的一種動畫定義。對比滑入滑出，容器變換能更好的引導用戶的視線，在過渡的同時完成了用戶的視線引導，大大縮減了用戶的反應時間，提升體驗的流暢感。對比上面的例子，就好像你在玩打地鼠的時候，地鼠的半個頭已經冒出了洞口。在我們常用的產品中，諸如 Pinterst、小紅書、大眾點評的推薦內容都用了這種效果：

良好的視線引導讓過渡和反應同時發生

那么如何做一個好的容器變換呢？

Material Design 中把此動畫打開的過程分為了 4 個部分：

1. 原始卡片淡入消失；
2. 新內容從卡片變為詳情頁面的容器大小變化；
3. 新內容從卡片變為詳情頁面后的位置調整的屏幕等寬，并置于屏幕頂部；
4. 新元素淡入出現。

動畫為 0.25 倍速播放

但仔細追究，這個過程其實可以分為 5 個部分：

1. 原頁面出現蒙層；
2. 原始卡片放大并淡入消失；
3. 新內容從卡片變為詳情頁面的容器大小變化；
4. 新內容從卡片變為詳情頁面后的位置調整的屏幕等寬，并置于屏幕頂部；
5. 新元素淡入出現。

蒙層讓原來卡片外的內容有了退出舞臺的效果，過渡更加自然。

關于這個動畫，實際開發中可能會遇到一個問題，Material Design 中的設定非常理想化：所有內容都在本地已經被拉去。實際情況是由于網絡條件的限制，詳情頁內更多的內容并不能實時被展現出來，為了讓內容能更快展現，過渡更加順滑，小紅書的數據加載做了一些的預處理：

1. 每次加載拉取 10 條內容的信息；
2. 拉取的信息包括第一張圖，標題，和內容；
3. 如果是視頻，會拉取一定時間長度作為緩存，即可保證點開即播放；
4. 文字內容拉取一定長度，保證一屏內可完整閱讀。

小紅書的預加載內容，圖為弱網下的測試效果

而對比雙列瀑布流設計的鼻祖 Pinterest，在內容的預加載上則更加保守，只加載了標題和圖片以及很少的描述內容：

動畫為 0.25 倍速播放

總結來說就是為了讓過渡更加順暢，技術上盡可能的將很多內容提前讀取到本地，從而讓新內容能夠在過渡動畫的時候就可以展現出來。

所以，要想做好一個好的容器變換，除了設計上做好動畫的過渡設計，技術上還要考慮好信息的加載。

前面講的是容器變換動畫打開的部分，接下來我們說說關閉動畫的設計。同樣對比滑入滑出，容器變換的關閉通過將頁面縮放為卡片，很好的幫用戶在返回原頁面的時候，引導視線的定位，幫助用戶找到之前瀏覽的斷點，繼續瀏覽原來沒看完的內容。

Material Design 中把此動畫關閉的過程分為了 4 個部分：

1. 原內容淡出消失；
2. 頁面變為卡片的大小變化；
3. 頁面變為卡片的位置變化；
4. 原頁面中的 UI 元素淡出消失。

動畫為 0.25 倍速播放

而在小紅書中，省略了第 4 步，直接從頁面縮放回卡片：

并且隨著右滑的關閉首先還會先進行一部分的縮放效果來保證過渡更加順滑??：

而在關閉過程中做的最細致的也是 Pinterest，在原來 Material Design 4 步的基礎上，關閉過程中還做了兩個優化：

1. 對返回后的頁面還做了一個從大縮放到小的處理，和原來頁面縮放的卡片動畫進行了一個大小的呼應；
2. 讓原頁面在滑動返回的過程中就從頁面縮放為圖片，和整體頁面的縮放融合的更加流暢；

通過慢動作，可以清楚看到后面頁面的元素被整體放大縮小，同時卡片變為圖片

其次，如果卡片是從中間或者屏幕偏下的位置被點擊，在返回后卡片會貼到屏幕頂部，讓下面更多的內容被呈現出來，持續吸引用戶點擊：

右下角的內容點開返回后，到了屏幕上方

總結

從流暢度上來講，一定是更加建議在雙列瀑布流中使用容器變換的動畫過渡。同時在設計過程中，注意過渡的細節和數據的處理，保證內容更加流暢。一個小小的內容過渡，也可以做很多精細的設計，從而提升用戶的瀏覽體驗。

引用：

• Material Design - Motion：
  https://material.io/design/motion/the-motion-system.html#container-transform
• 科學網：人機交互的控制及失誤：
  https://wap.sciencenet.cn/blog-40841-1227701.html?mobile=1

歡迎關注作者微信公眾號：「Minus Lab減法實驗室」