你喜歡這種無限下拉式的瀑布流呢，還是喜歡翻頁呢？

07-05

無限下拉滾動 Vs 分頁，究竟該使用哪一個？

本文將兩種方法的適用場景並分析哪類項目適合用哪種方式，相信對你有一定的幫助。
應該是使用無限下拉滾動還是分頁的形式來展現內容?究竟那一個更好？相信這是一些設計師經常需要去思考的問題。其實任何事物都有優缺點，無限下拉滾動和分頁也不例外。本文將兩種方法的適用場景並分析哪類項目適合用哪種方式，相信對你有一定的幫助。

一、無限下拉滾動

無限下拉載入技術使用戶在大量成塊的內容面前一直滾動查看。這種方法是在你向下滾動的時候不斷載入新內容。雖然聽起來比較誘人，但該技術並不是一個面向任何網站或應用程序的通用方案。

優點1：用戶參與和內容發現

當你使用滾動作為發現數據的主要方法時，它可能使你的用戶在網頁上停留更長時間並提升用戶參與度。隨著社交媒體的流行，大量的數據被用戶消費。無線滾動提供了一個高效的方法讓用戶瀏覽海量信息，而不必等待頁面的預載入。
無限滾動幾乎是一個發現界面的必備功能。當用戶並不特意尋找特定的內容時，他們需要通過查看大量內容找到自己中意的信息。
你可以通過Facebook信息流的例子來評估無線滾動的好處。用戶知道他們不可能看到信息流裡面的所有內容，因為內容更新太頻繁了。通過無線滾動技術，Facebook正竭盡所能促使更多的信息能呈獻給用戶面前，用戶則產生對信息的瀏覽和消費行為。

優點2：滾動要比點擊好

用戶使用滾動能獲得比點擊/輕點更好的體驗。滑鼠滾輪和觸控屏使滾動行為要比點擊更快更容易。對於那些連續且冗長的內容，比如一本說明書，滾動要比把這些信息分成幾個獨立的屏幕或頁面有更好的易用性。

優點3：滾動對移動設備很友好

屏幕越小，滾動就越長。移動瀏覽的普及也促使了長滾動。移動設備的手勢控制使滾動更直觀和易用。其結果就是，用戶享受響應式的體驗不論他們使用何種設備。

缺點1：頁面性能和設備資源

頁面載入速度是良好用戶體驗的一切。多項研究已經表明緩慢的載入速度會造成用戶離開你的網站或者刪除你的應用程序從而降低轉換率。這對那些應用了無線滾動方案的開發者自然是壞消息。用戶在一個頁面越向下滾動，就會載入更多的內容。結果就是頁面性能越來越低。
另一個問題是用戶設備資源的限制性。在很多應用無線滾動方案的網站上，尤其那些包含很多圖片的站點，那些受資源限制的設備，比如iPad會越來越慢因為其載入了大量外部資源。

缺點2：搜索和位置標記

無線滾動的另一個問題是當用戶到了當前信息流中的一個特定點，他們沒法標記當前位置且不能再隨後再回到這裡。他們一旦離開，就會丟失當前的瀏覽記錄，以至於如果要回到上次的位置，他們必須得重新滾動去發現。這種做法的結果就是用戶產生困擾厭煩更影響了其全程的體驗。
在2012年，Esty花時間使用了無線滾動方案，最後發現該方案並沒有分頁方案表現的好。雖然兩種方案下的購買轉化率差不多，但是用戶的參與度降低了—用戶沒再過多的使用搜索功能。
就像Dmitry Fadeev 指出：「人們會想要回到他們的搜索結果列表中檢查他們剛剛找到的東西，並跟列表之外他們發現的東西做對比。無線滾動不光打破了這種動態，它也使得上下移動列表變得困難，尤其當你返回到列表頁卻發現自己又回到頂部，不得不重新滾動等待結果的載入。從這個角度來看，無線滾動確實要比分頁方案效率低。」

缺點3：無關緊要的滾動條

另一個討厭的問題是滾動條並沒有反映出實際的數據量。假設你快要接近底部了，你會很容易受滾動條的引誘再滾動一點點，但結果卻發現當你到那裡的時候數據量又翻倍了。從一個可用性的角度來說，打破滾動條的正常使用規則對用戶來講是非常糟糕的。

缺點4：頁腳的缺失

頁腳的存在是有原因的：它們包含一些用戶可能會需要的信息—如果用戶找不到它們想找的東西或它們需要一些額外的信息的話，他們通常會到頁腳看看。但是因為這種信息流的無線滾動，用戶經常一到底部就會有更多的數據載入出來從而將頁腳永遠的置於了視野之外。

那些應用無線滾動方案的站點應該讓頁腳或者固定或者將其遷移至頂部或側邊欄顯示。
另一個解決方案是出發載入更多的按鈕的時候再去載入信息。新的內容不會自動載入直到用戶點擊了載入按鈕。通過這種方法，用戶能很容易地到達頁腳而不要一直追趕它。

二、分頁

分頁技術是指將內容信息劃分成獨立的頁面來顯示。如果你滾到一個頁面的底部看到一行數字，這些數字就是當前站點或者應用程序裡面的分頁。

優點1：良好的轉換

當用戶是在結果列表查找特定的信息而不是僅僅瀏覽信息流時，分頁就是好的選擇。
你可以用谷歌搜索的例子來評估分頁的好處。查找最好的搜索結果可能需要花費1分鐘或者1個小時，這取決於你的搜索。但是放你在谷歌現有的搜索格式下停止搜尋時，你會知道搜索結果的準確數量。你能夠決定在哪裡停下或者精讀哪些結果。

優點2：掌控感

無限滾動就像個無止境的遊戲——無論你滾動多久，你會感覺永遠結束不了。當用戶知道可用結果的數量時，他們能夠做出更知情的決定而不是被動的無限滾動列表。按照David Kieras 在他的研究Psychology in Human-Computer Interaction中提出：「能夠到達結束點提供了一種掌控感」。該研究同時揭示了當用戶有有限且相關的結果時，他們更容易決定他們在尋找的究竟在不在裡面。

同樣的，當用戶能夠看到結果的數量時，他們將能夠預估他們找到想找的東西大概要花費多長時間。

優點3：位置標記

分頁方案讓我們能夠大概定向搜索的目標位置。用戶可能難以記錄頁面的精確數字，但至少能夠記錄大概位置，而且頁碼鏈接能讓他們更容易到達那裡。
分頁方案對電子商務網站或應用程序來說很好。用戶在線購物的時候，他們希望能夠回到他們之前離開的地方繼續購物。

缺點1：額外的動作

在分頁方案中，用戶要到達下一張頁面，就必須找到頁碼鏈接，移動滑鼠置於其上，點擊然後等待新頁面的載入。
這種方案的主要的問題是大多數網站中，每一頁只向用戶戰象相當有限的信息。在不影響載入速度的情況下，加長你的頁面，用戶就能在每一頁獲取到更多的內容，他們就不必太頻繁的點擊那些頁碼鏈接。

三、什麼時候使用無限滾動/分頁方案？

實際上，應用無限滾動方案的實例只有很少部分。它最適合於那些靠用戶生產內容（Twitter，Facebook）或表現視覺內容（Printerest，Instagram）的站點/應用程序。而分頁方案對那些希望滿足用戶目標導向的站點/應用程序來說則是一個安全、友好的解決方案。
谷歌的經驗就很好的說明了這一點。谷歌圖片使用無限滾動是為了保證用戶能夠比文本更快的瀏覽處理圖片。閱讀一個搜索結果列表往往花費一些時間。

這就是為什麼谷歌索索仍舊使用傳統的分頁方案。

四、結論

設計者在選擇解決方案前應該權衡無限滾動/分頁方案的優缺點。這個選擇取決於你設計中的上下午和內容的呈現方式。一般來說，無限滾動適用於向Twitter等那些用戶重在消費無限的信息流而並不常搜尋特定的信息的應用。分頁則適用於那些用戶在尋找特定信息的搜索結果列表頁以及那些用戶的瀏覽記錄比較重要的場合。

相關閱讀：

App啟動頁設計實例和技巧，啟動即讓人心動
APP可訪問性設計：拒絕體驗「障礙」
移動應用體驗設計之江湖傳言，相信，你就輸了
5大移動端表單設計原則及案例賞析
2018年必看最新創意手機聊天界面設計
「手把手教你設計」—12個最佳手機APP界面設計教程
「成語猜猜看」「拼多多」「肯德基」微信小程序原型模板分享

Mockplus 做原型，更快，更簡單！?
mockplus.cn

現在一般都是下拉10+屏左右，然後翻頁，你們說的問題開發者都考慮到過。

哈哈哈，無盡的暗流~~~同感

我個人還是喜歡翻頁形式的網頁，對於無限下拉式的瀑布流，永遠看不到網頁底部，心裡非常彆扭。

【現在一般都是下拉10+屏左右】
表示現在我們在這裡扯淡的知乎都沒有這個設計，隨便找個人的歷史記錄，比如 @十八蛋疼的我數了一下，有66屏。。。
建議給這種下拉流加個編號，然後又一個跳轉編號的功能，這樣，如果中間網頁崩潰，或者手殘刷新。。。就不用從新找讀到那裡了。還有知乎的評論回復也很蛋疼，十幾頁的回復，就開始找不到東西了。

推薦閱讀：