分頁、載入更多按鈕和無限滾動的指南

語言: CN / TW / HK

幾乎每個應用程式都有資料,而這些資料必須以某種方式進行視覺化。顯示一組資料的常見方法是通過一個列表,這可能很快就會變得很長,讓人難以閱讀。

用於顯示應用程式資料的常見方法

這些方法在動態網頁上顯示大型資料集,同時還提供更快的初始頁面載入。例如,Google Web對其搜尋答案使用分頁法。

Google Using Pagination

Twitter和Facebook使用無限滾動,使用者不斷滾動以不斷看到新的帖子。無限滾動在社交媒體渠道上已經變得特別流行。

在手機上,谷歌和谷歌圖片沒有使用分頁,而是使用 "載入更多 "按鈕來顯示搜尋結果和圖片。

Google's Show More Results

本文將比較這些方法中的每一種,並指導你在你的應用程式中實施它們。

使用分頁法來顯示資料

Google Pagination

使用分頁法的優點

  1. 分頁可以方便導航和搜尋。例如,在一個電子商務網站上,你可以通過點選回到某個特定的頁面,輕鬆找到你之前檢視的產品。
  2. 分頁是優先考慮實用性的網站的理想選擇,因為每個結果集都有自己的頁面和URL,這很容易記住並與頁碼共享。有時,一些資料集需要尊重特定的專案排列順序,而分頁就可以做到這一點。
  3. 這種方法很適合那些不是為了讓人上癮而設計的網站。社交媒體網站會讓人上癮,因為在上面很難停止滾動,但傳統的分頁法迫使使用者點選按鈕並通過頁面導航來訪問資料,這使得它不容易上癮。

使用分頁法的缺點

  1. 這是個老技術。分頁在網際網路誕生之初就已經存在了。所有過時的網站都有它,這種型別的分頁不再是直觀的了。
  2. 沒有人真正看完第一頁。你曾經檢查過谷歌結果的第二頁嗎?很可能沒有。點選數字 "1"、"2 "和 "下一頁 "可能是一個麻煩,使人們不敢看更多的結果。
  3. 分頁不那麼適合移動裝置。在移動裝置上,使用者寧願選擇載入更多按鈕或無限滾動,因為移動裝置的螢幕是垂直的。
  4. 每一個新的結果都在一個新的頁面上,導致了不必要的載入時間。這可以用淺層路由和預渲染來解決,但還是會讓使用者感到厭煩。

什麼時候在你的應用程式中使用分頁

如果你正在為網路建立一個目錄或電子商務網站,請使用分頁。然而,如果你正在建立任何移動網站或應用程式,你會想考慮實施一個 "載入更多 "按鈕來代替。

觀點。如果你在移動端以列表形式顯示資料,那麼一定要避免使用這種方法。這種方法在網格中執行良好。

在你的應用程式中使用 "載入更多 "按鈕

Spotify See All

使用 "載入更多 "按鈕的優點

  1. "載入更多 "按鈕在移動裝置上看起來很好,與分頁不同,"載入更多 "機制在現有結果的基礎上增加了更多的結果,而不會替換整個結果。
  2. 要找到一個結果,使用者只需不斷點選"載入更多",而不必記住該專案在哪一頁上
  3. "載入更多 "允許你通過使用者點選"載入更多 "的次數來輕鬆衡量使用者的興趣和參與度
  4. 這種方法可以用來幫助使用者更快地到達網站的頁尾,意味著你的網站廣告可以收集更多的印象。

使用 "載入更多 "按鈕的缺點

  1. 它可能很難搜尋到,因為使用者不會記得某個特定結果的位置。為了找到東西,他們大多要不斷點選"載入更多"。
  2. 使用 "載入更多",潛在的印象可能會丟失,因為與無限滾動的設定相比,無論你在 "載入更多 "按鈕下隱藏了什麼內容,都不太可能被瀏覽。

何時使用 "載入更多"?

如果你在手機上建立任何沒有無限滾動的列表視覺,請使用 "載入更多 "方法。如果你的應用程式不是一個社交媒體應用程式(在這種情況下,實現無限滾動會更好),如果你希望資料載入比分頁更直觀,你也應該使用這種方法。

請記住,在許多應用程式(包括社交媒體)中,使用者通過向上滑動來重新整理他們的feeds,特別是在Instagram中,通過點選新帖子。這些都是 "載入更多 "機制的形式,你可以從中獲得靈感。

此外,如果你有大量的內容,但希望使用者能到達頁尾或將內容隱藏在付費牆後面,或者在這種情況下,你應該考慮使用 "載入更多 "按鈕。

實施無限滾動

Infinite Scroll

使用無限滾動的優點

  1. 無限滾動鼓勵使用者在更長的時間內參與你的應用程式。通過無限滾動,沒有任何東西可以阻止使用者連續滾動,而且與分頁和 "載入更多 "的方法相比,這樣做需要花費最少的精力。
  2. 與其他方法相比,無限滾動讓使用者感覺很快。滾動是無縫的,當用戶到達接近觀點的終點時,你總是可以在後臺載入更多的內容,所以他們甚至不會意識到新內容是如何和何時載入的。
  3. 它也適合於按時間順序和基於演算法的動態服務內容。用分頁法,你的資料必須按一定的順序排列。使用無限滾動意味著你可以靈活地決定如何提供內容,以何種順序提供,這對社交媒體應用程式來說是理想的。

使用無限滾動的缺點

  1. 如果你的網站或應用程式有一個頁尾,它將永遠不會被看到。
  2. 採用無限滾動可能會讓你的使用者上癮,這可能對他們的數字健康沒有好處。截至發稿時,參議院提出了一項法案,如果通過,將禁止無限滾動。
    Senate Bill當然,它不太可能通過,但這說明了無限滾動在讓使用者迷戀你的平臺方面有多大影響。
  3. 無限卷軸更難瀏覽和搜尋。通過分頁,你可以記住特定的頁碼來檢索特定的結果。但有了 "載入更多 "和無限滾動,人們將不得不向上滾動很長時間來尋找特定的內容。

你可以在這裡閱讀更多關於為什麼你不應該使用無限滾動的資訊。

何時使用無限滾動

如果你正在建立一個移動應用或社交媒體應用,或者只是想讓使用者連續滾動瀏覽大量內容(即部落格),你應該使用無限滾動。

無限滾動如何工作

當用戶到達視口的末端時,你會載入更多的結果。在普通的JavaScript中,它是這樣工作的。

``` window.onscroll = function(ev) { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { // you're at the bottom of the page, load more content here. } };

// from stackoverflow (stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom)

```

我畫了一個圖來幫助解釋資料是如何被遍歷的,以及游標是如何工作的。

Data Diagram

所以,想象一下,你查詢後端API,資料庫中總共有90萬個條目。你不會想要獲取所有的條目,因為這會降低應用程式的效能。

為了簡化,讓我們用數字9來代替90萬。

為了顯示這些資料,你必須把它分成多個部分。它不一定要以相等的時間間隔顯示,但通常是這樣。這裡是資料庫中所有條目的列表。

``` { "data": [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 } ] }

```

現在,因為一次性獲取它們並不可行,你可以從後臺的資料庫中分塊獲取資料。

對於第一個結果,你只想獲取前三個條目。

為了獲取第一頁,在資料庫中查詢 "前3條,後0條"。對於獲取第二頁,查詢 "獲取前3條,後3條",以此類推。

你也可以使用術語limit/offset ,而不是first/skip

對於分頁資料的獲取,另一種經常使用的方法叫做遊標。當使用遊標時,"after "值被用來獲取特定點之後的節點。

Data Diagram 2

這裡有一篇全面的文章,解釋了為什麼你可能想使用遊標而不是limit/offset 方法。

當後端從資料庫中獲取選擇性資料時,它會發送一個響應,通常看起來像這樣。

``` { "data": [ { id: 4 }, { id: 5 }, { id: 6 } ], "totalCount": 9, "fetchedCount": 3, "pageInfo": { "prevCursor": "prev_4", // <- this is usually converted to base64 "nextCursor": "after_6", // <- this is usually converted to base64 "hasNextPage": true // <- are there more pages remaining to fetch? } }

```

然後,前端在這些遊標上進行迭代,以獲取分頁資料的頁面。

這個方法對於分頁、"載入更多 "和無限滾動都是類似的,所以你可以通過使用上述方法獲取資料來實現所有這些。

對於正常的分頁,你必須同時使用nextprevious 游標。對於 "載入更多 "和無限滾動,你只需要next 遊標,因為你必須通過它們來迭代,以不斷獲取更多的資料。

結論

通過使用這些分頁方法中的一種--或混合使用--可以以最理想的方式顯示大型資料集。編碼愉快。

分頁、載入更多按鈕和無限滾動指南》一文出現在LogRocket部落格上。