分頁模式選錯,後台就會難用。這章講三種模式各自的地盤:後台 table 一律用 offset 頁碼、即時或超大資料用 cursor、feed 才用 infinite scroll。要決定列表怎麼翻頁前翻這頁,重點記住一句:後台 table 不要用 infinite scroll,會找不到 footer、無法書籤、永遠捲不到底。
這是什麼
三種翻頁方式:表格用頁碼跳頁、動態 feed 用無限捲動、介於兩者用「載入更多」按鈕。
什麼時候用
依內容型態選模式——需精確跳頁用頁碼;探索型瀏覽用捲動;想讓使用者掌控節奏用載入更多。
這是什麼
顯示「第幾到第幾筆,共幾筆」、上一頁/下一頁與頁碼,並可調整每頁筆數(預設 25)。
什麼時候用
後台表格資料量大、使用者需要跳頁或分享特定頁面狀態時。
這是什麼
後端以游標標記下一批資料,介面不顯示總頁數,用「載入更多」取得後續項目。
什麼時候用
時間軸、訊息串等即時 feed,總數不重要或難以精確計算時。
這是什麼
接近底部時自動載入下一批,底部先顯示骨架占位;到底顯示「已無更多」並提供回到頂部。
什麼時候用
探索型 feed、社群動態等使用者預期持續往下瀏覽的場景。
這是什麼
顯示已載入筆數,由使用者點「載入更多」才取得下一批,不自動預先載入。
什麼時候用
介於頁碼與無限捲動之間——想減少自動載入、又不需要精確頁碼時。
這是什麼
後台表格顯示精確總筆數;搜尋結果可用「約」字;超大表計數慢時顯示「1000+」等近似值。
什麼時候用
讓使用者掌握結果規模,但在效能與精確度之間取得平衡。
這是什麼
變更篩選或排序條件時,自動回到第一頁,避免留在已無資料的高頁碼。
什麼時候用
列表條件改變後筆數可能大幅減少,需防止空白頁。
這是什麼
頁碼、每頁筆數、排序寫入網址參數,方便分享連結或加入書籤後還原相同列表狀態。
什麼時候用
使用者常需要把特定列表狀態傳給同事或自己稍後返回時。
這是什麼
手機版按鈕點擊區域夠大;翻頁優先使用「載入更多」,避免擠滿小頁碼。
什麼時候用
列表在手機上瀏覽時,兼顧觸控易用與版面簡潔。
這是什麼
翻頁區塊加無障礙標籤、目前頁標示為當前頁、上一頁/下一頁按鈕有明確文字說明。
什麼時候用
確保螢幕閱讀器使用者能理解翻頁結構與目前位置。