分頁

分頁模式選錯,後台就會難用。這章講三種模式各自的地盤:後台 table 一律用 offset 頁碼、即時或超大資料用 cursor、feed 才用 infinite scroll。要決定列表怎麼翻頁前翻這頁,重點記住一句:後台 table 不要用 infinite scroll,會找不到 footer、無法書籤、永遠捲不到底。

三種 pagination 模式

這是什麼

三種翻頁方式:表格用頁碼跳頁、動態 feed 用無限捲動、介於兩者用「載入更多」按鈕。

什麼時候用

依內容型態選模式——需精確跳頁用頁碼;探索型瀏覽用捲動;想讓使用者掌控節奏用載入更多。

預覽依本指南規則實作
模式適用不適用
Offset後台 table、跳頁即時 feed
CursorTimeline、不需總數需精確跳頁
Infinite scrollDiscovery feed後台 table

頁碼翻頁(表格預設)

這是什麼

顯示「第幾到第幾筆,共幾筆」、上一頁/下一頁與頁碼,並可調整每頁筆數(預設 25)。

什麼時候用

後台表格資料量大、使用者需要跳頁或分享特定頁面狀態時。

預覽依本指南規則實作
Showing 5175 of 1,240 results

游標翻頁(Cursor Pagination)

這是什麼

後端以游標標記下一批資料,介面不顯示總頁數,用「載入更多」取得後續項目。

什麼時候用

時間軸、訊息串等即時 feed,總數不重要或難以精確計算時。

預覽依本指南規則實作
  • 訊息 A
  • 訊息 B
  • 訊息 C

不顯示總頁數 · cursor: eyJpZCI6MjUifQ==

無限捲動(Infinite Scroll)

這是什麼

接近底部時自動載入下一批,底部先顯示骨架占位;到底顯示「已無更多」並提供回到頂部。

什麼時候用

探索型 feed、社群動態等使用者預期持續往下瀏覽的場景。

預覽依本指南規則實作
Feed 項目 1
Feed 項目 2
Feed 項目 3
Feed 項目 4
Feed 項目 5
Feed 項目 6

End of results

載入更多按鈕

這是什麼

顯示已載入筆數,由使用者點「載入更多」才取得下一批,不自動預先載入。

什麼時候用

介於頁碼與無限捲動之間——想減少自動載入、又不需要精確頁碼時。

預覽依本指南規則實作

已載入 25 / 1240

顯示總數

這是什麼

後台表格顯示精確總筆數;搜尋結果可用「約」字;超大表計數慢時顯示「1000+」等近似值。

什麼時候用

讓使用者掌握結果規模,但在效能與精確度之間取得平衡。

預覽依本指南規則實作

Table

1,240

Search

about 12,500 results

Large table

1,000+

結果切換時

這是什麼

變更篩選或排序條件時,自動回到第一頁,避免留在已無資料的高頁碼。

什麼時候用

列表條件改變後筆數可能大幅減少,需防止空白頁。

預覽依本指南規則實作

目前頁碼: 3

網址同步(URL Sync)

這是什麼

頁碼、每頁筆數、排序寫入網址參數,方便分享連結或加入書籤後還原相同列表狀態。

什麼時候用

使用者常需要把特定列表狀態傳給同事或自己稍後返回時。

預覽依本指南規則實作

?page=3&pageSize=25&sort=created_at,desc

手機版翻頁

這是什麼

手機版按鈕點擊區域夠大;翻頁優先使用「載入更多」,避免擠滿小頁碼。

什麼時候用

列表在手機上瀏覽時,兼顧觸控易用與版面簡潔。

預覽依本指南規則實作

1–25 of 128

無障礙(A11y)

這是什麼

翻頁區塊加無障礙標籤、目前頁標示為當前頁、上一頁/下一頁按鈕有明確文字說明。

什麼時候用

確保螢幕閱讀器使用者能理解翻頁結構與目前位置。

預覽依本指南規則實作

規格速查

項目定稿值
後台 tableoffset 分頁(頁碼)+ 每頁 25
每頁筆數選單10 / 25 / 50 / 100
總數顯示「Showing 26–50 of 1,240」,後台顯示精確總數
大頁數頁數 > 100 時加 jump-to-page input
Cursor 分頁即時 feed、無限大資料、不需總數(offset 在大表很慢)
Infinite scrollfeed/discovery 適用,後台 table 不適用
Load more中等量(100–1000 筆)的折衷,使用者主動載入
結果切換filter/sort 變動 → 回到第 1 頁
URL sync?page=3&pageSize=25 寫入 URL,可分享可 back

常見做錯

做錯正確
後台 table 用 infinite scroll後台用 offset 頁碼,feed 才用 infinite scroll
列表不顯示總數後台 table 顯示精確「共 z 筆」,大表 COUNT 慢時用「1000+」
超大資料用 offset 深分頁即時或超大資料改 cursor 分頁,避免深 offset 變慢
filter 變了還停在第 5 頁filter/sort 一變動就回到第 1 頁

相關章節