UX | 分頁和無限滾動自動載入之間如何選擇

之前在 Review 別人的原型圖時有為這個問題思考過。

因為當時我下意識地覺得在「控制台」這種地方使用「自動載入」（無限滾動）直覺上好奇怪，為什麼不用分頁？於是我開始反思這兩種交互方式的適用場景。

先說我個人思考後得出的結論（下劃線部分為主要結論）：

肯定沒有哪種方案是絕對的「體驗最好」的，分頁和無限滾動瀏覽的選擇均是視場景而定，且各有優劣勢。（這也幾乎是任何交互方案選擇時的通用回答吧）

無限滾動自動分頁載入（即，一頁數據拉到底後會自動載入出下一頁數據）適用的場景

1）發現內容，需要快速激發用戶積極性時

此場景的特點是：

• 需要讓用戶在短時間裡找到&瀏覽自己喜歡的合適的條目，更多感興趣的條目

• 內容間邏輯上的先後順序並不重要
• 單條內容與全部內容間並無有意義的邏輯關係

所以結合以上特點，無限滾動被廣泛使用於內容型社區的 Feed 或發現頁當中，比如，知乎、Medium 首頁、Pinterest……

2）信息流條目更新速度快，且用戶不需要逐條瀏覽時

同樣，在這樣的場景里，條目之間並沒有太大的依賴關係，用戶在每一頁都是一晃而過，並不會逐條逐句瀏覽，漏掉一條信息並不會對用戶造成負面影響。

所以很多社交網站的 Feed，如 Facebook、Twitter、微博……均選用了無限滾動自動載入的方式供用戶獲取數據瀏覽。

另外選用「無限滾動自動載入」還有很多優勢：

1) 滾動操作或在移動端上的滑動手勢，相比點擊操作成本更低，用戶心理會更加輕鬆

• 點擊操作的體驗過程：看完一頁，點擊，然後等待載入 —— 對等待會有預期也有明顯感知（焦慮或負擔）

• 滑動操作的體驗過程：一邊瀏覽一邊滾動一邊載入——對等待無預期無明顯感知（輕鬆隨意）

• 於是在「自動載入」時切忌讓用戶明顯感知到載入過程，完全感知不到是最好

2) 對移動設備友好

• 移動端屏幕小，並不適合放太多功能按鈕用作點擊

• 滾動拉取更多信息手勢簡單，更加符合直覺

同時「無限滾動自動載入」也有其缺陷：

1) 難以定位和檢索

• 瀏覽到信息流中部，由於有其他事中斷了瀏覽，或者關閉了窗口，過一段時間重新訪問頁面瀏覽（數據整個刷新了），我無法從位置來找到上一次所瀏覽的條目了，也很難通過位置的記憶來找到之前有印象的某個條目。
• 很難快速找到歷史第一條內容或比較舊於是排序很後的內容。

2) 滾動條礙事，視覺上遮擋和失衡

• 雖然通常滾動條都是會在停止滾動時自動隱藏，但在小屏幕或小窗口裡一直不斷滑動瀏覽內容時，滾動條的存在感還是會顯得很強烈。

• 其實滾動條該不該要為什麼需要這一點以前也跟朋友討論過。我自己的思考是：滾動條用於表現當前位置與總的內容長度之間的數量和位置關係。而無限滾動自動載入時，你處於正在載入的狀態，意味著內容總長度是未知的，或者滾動條表達的內容總長度並不等於真正的歷史內容總長度，所以滾動條位置只能表達一個「相對位置」而不是「絕對位置」。因此並不能正確展示當前位置與內容總長度之間的關係，我覺得在無限滾動時出現意義不大。於是還會衍生出第 (1) 個問題——難以定位。
• 而從直覺上我覺得滾動條表現出的「相對位置」依然能給人一種臨時的對數據量和瀏覽進度「控制感」。

3) 可能永遠看不到 Footer

• 頁面滾動到底時本該看到 Footer ，然後自動載入又刷出了新的一屏內容，Footer 成功被瞬間擠走。比如 Instagram 的首頁。

• 這種時候你需要權衡，Footer 的信息是否需要在首頁被看到，或者思考還有沒有別的地方可以讓用戶訪問到 Footer 的信息。於是可以像知乎和 Facebook 那樣把 Footer 放在側欄：

  

於是相應地，分頁就可以用於彌補無限滾動自動載入的缺陷，於是也就成了分頁的優勢：

1) 方便檢索、定位

• 能快速到達首頁末頁等內容的任一位置

2) 給人控制感

• 能獲取到自己當前瀏覽的內容的絕對位置
• 對接下來即將出現的內容量有預期

分頁適用的場景：

1) 需要對數據逐頁或逐條處理的地方

• 有分頁時，每頁數據僅 10 條左右，能讓人更專註地閱讀或處理當前頁內容。比如處理郵件、讀書分頁看……

2) 產品需要展示數據量，用戶需要對數據總量快速感知的時候

• 不必展開所有條目，僅通過頁碼就能感知到數據總量大小，比如搜索結果展示…

  

因此回到最開頭，我曾經直覺「控制台」用「無限滾動自動載入」很奇怪，也就找到可以名狀的緣由了。管理後台控制台這類場景需要用戶對數據進行操作管理，需要對內容全局有很強的控制感，同時也兼有快速定位查找的需求，所以「分頁」才是更適合該場景的選擇。

現在也有一些網站取無限滾動自動載入和分頁各自優點結合使用。

比如，（找到圖了再補上）

• 內容區域使用自動載入無限滾動，讓內容拉取更加輕鬆自然。但每次自動載入出來的內容會有區塊分割並標上序號，同時在 url 里添加頁碼欄位，方便用戶通過修改 url 快速定位。
• 但這樣做有點把實現模式強加到用戶的心智模型之嫌，不夠友好。我認為可以將修改 url 的方式通過用戶界面的操作實現，讓用戶更容易理解。

最後總結一下結論：

1）按照 Web 和 App 來比較，無限滾動是對移動端天生友好

2）如果按產品定位或者場景來談

• 無限滾動更適合用於 Timeline 快速瀏覽內容和發現內容的場景，所以社交或內容型社區的 Feed 通常都選擇無限滾動；
• 分頁更適合於操作、管理大量條目，且更需要專註、嚴謹的場景，所以工具類、檢索類、歸檔頁面，管理後台更傾向於用分頁。
• 總體而言，移動端更適合於使用滾動手勢進行瀏覽。

P. S：交互設計主要專註於封裝並隱藏實現模式用符合用戶心智模型的方式引導用戶與界面交互從而完成任務、達成目標。而本篇討論的「分頁」和「無限滾動」從實現上看，無論在移動端還是 PC 端，無論選無限滾動還是分頁的交互形態，數據層都是「分頁」來獲取數據，所以對後端來說這兩者展示形式的實現沒差別。

*有沒想到的點，歡迎補充 ^^

*題圖來自 趙皂趙 轉載需標明出處

想看更多工友關於設計的分享？

可以關注以下帳號

內容會跟專欄不太一樣的微信公眾號:

@workshed

Instagram: @hominthesky · @gingerbread0912

歡迎關注和反饋 ^ ^

推薦閱讀：