分頁系統 是做什麼的？
目的
「分頁系統」技能提供了一套設計介面的方法論，用於將大型資料集劃分為離散的頁面。它確保使用者能夠瀏覽長串的項目（產品、搜尋結果、文章），同時清楚掌握「目前所在位置」與「剩餘內容多寡」。一個穩固的分頁系統必須在導航精確性與簡潔性之間取得平衡，以減輕認知負擔，避免使用者迷失方向。
使用案例
- 為電子商務或目錄網站設計搜尋結果頁面。
- 整理長篇部落格或新聞檔案。
- 為內容中心實作「載入更多」 vs. 傳統數字分頁。
- 為數據密集的儀表板表格或日誌建立導航。
- 優化多頁面表單或逐步精靈，其中每個區段都被視為獨立的檢視。
不適用時機
- 小型資料集（< 12 項）： 如果所有內容都能舒適地容納在一到兩個畫面內，分頁只會增加不必要的點擊與阻力。
- 無限滾動情境： 當使用者正在探索以發現為主的社交動態或新聞串流，且特定頁面網址並不重要時（請改用
infinite-scroll-implementation）。 - 單一敘事性內容： 對於遵循線性流程的文章或故事，只要提供「上一頁 / 下一頁」連結就已足夠。
輸入
- 項目總數： 集合中總共有多少項目？
- 每頁顯示數： 標準密度為何（例如 12、24、48 項）？
- 當前頁面脈絡： 使用者目前正在檢視哪一頁？
- 顯示限制： 分頁列可用的水平空間有多少（來自
responsive-grid-system）？
輸出
- 分頁結構規格： 定義頁碼、上一頁/下一頁按鈕以及「跳轉」控制（省略號）的視覺樣式。
- 狀態矩陣： 預設、當前、懸停、焦點和禁用（例如第 1 頁時的「上一頁」按鈕）狀態的視覺處理方式。
- 響應式策略： 分頁列如何從桌機（完整範圍）收合到行動裝置（精簡檢視）的計畫。
- 無障礙地圖： 明確定義 ARIA 角色、標籤及鍵盤互動模式。
工作流程
1. 定義範圍策略
根據總頁數決定一次顯示多少個頁碼：
- 簡單（3-5 頁）： 顯示所有頁碼。
- 中等（6-10 頁）： 顯示首頁、末頁以及當前頁附近的視窗。
- 複雜（10 頁以上）： 使用省略號（
...）代表跳過的範圍（例如1 ... 4 5 6 ... 20）。
2. 設計導覽控制項
建立分頁列的視覺層級：
- 主要操作： 上一頁和下一頁按鈕應清楚可見，並置於分頁列的兩端。
- 當前頁面指示器： 使用高對比度樣式（背景顏色或粗邊框）讓當前頁面一目了然。
- 頁碼： 確保它們看起來像是可互動的元素（例如使用
interactive-state-system）。
3. 應用流體間距與尺寸
使用 fluid-spacing-system 確保操作目標可用：
- 觸控目標： 每個頁碼和按鈕應至少為 44x44px；如果視覺密度要求更小的控制項，WCAG 2.2（2.5.8 目標尺寸最小值）設定的絕對下限為 24x24px，且目標之間需留有足夠間距以避免誤觸。
- 內部間隙： 在頁碼之間使用一致的間距（例如
--space-xs）以避免誤點。
4. 建立無障礙性（WCAG AA/AAA）
- 地標： 將分頁包裹在
<nav>元素中，並加上aria-label="pagination"。 - 當前頁面： 在啟用的頁面連結上使用
aria-current="page"。 - 禁用狀態： 確保在第一頁時，「上一頁」按鈕在視覺上及程式上都被禁用（例如
aria-disabled="true"）。 - 鍵盤路徑： 使用者必須能夠透過
Tab鍵依序瀏覽每個頁碼與控制項，而且焦點控制項絕不能完全被粘性頁首/頁尾遮蔽（WCAG 2.2, 2.4.11 焦點不被遮蔽）。
5. 規劃響應式適應
繪製從桌機到行動裝置的轉換：
- 削減規則： 在行動裝置上，隱藏大部分頁碼，只顯示「上一頁」、「下一頁」與當前狀態（例如「第 4 頁，共 20 頁」）。
- 視覺比例： 如果必須保留頁碼，則將「視窗」縮小到僅顯示當前頁面及其相鄰頁面（例如
1 ... 4 ... 20）。
決策規則
- 數字 vs. 載入更多： 當使用者需要書籤或分享特定結果時（例如「查看第 4 頁」），使用數字分頁。當目標是延長探索與比較時，使用「載入更多」。
- 「7 項」最大值： 在桌機上，避免在分頁列中顯示超過 7-9 個項目（包含省略號與按鈕），以保持版面整潔。
- 可預測性： 始終將「上一頁」放在左側，「下一頁」放在右側。永遠不要隱藏這些按鈕；僅在它們不適用時將其禁用。
- 即時回饋： 點擊頁碼應立即將使用者滾動到內容列表頂部，或提供清晰的「載入中」狀態。
限制條件
- 無障礙性： 分頁必須可透過鍵盤導航，並對螢幕閱讀器友善。標籤必須具有描述性（例如「前往第 5 頁」而非僅顯示「5」）。互動目標必須至少符合 WCAG 2.2 24x24px 的最小值（2.5.8），主要的上/下一頁控制項最好達到 44x44px。
- 響應式設計： 分頁列絕不能造成水平溢出或與其他 UI 元素重疊。
- 視覺層級： 分頁在視覺上應與內容有所區別，但不能比內容本身更突出。
常見失敗模式
- 觸控目標過小： 太小且擠在一起的數字，在行動裝置上無法準確點擊。
- 看不見的啟用狀態： 使用者不知道自己在哪一頁，因為「啟用」樣式過於不明顯。
- 鍵盤循環中斷： 忘記在頁面內容透過 AJAX 更新時處理焦點（使用者應被移至結果頂部）。
- 「行動裝置爆炸」： 試圖在手機螢幕上顯示 10 個頁碼，導致水平滾動或版面破版。
- 標籤模糊： 只使用數字而沒有
aria-labels，使螢幕閱讀器使用者難以理解脈絡。
驗證標準
- 當前頁面在視覺上與眾不同，並帶有
aria-current="page"。 - 導覽區塊包裹在帶有描述性
aria-label的<nav>元素中。 - 觸控目標至少符合 WCAG 2.2 24x24px 最小值（主要上/下一頁控制項為 44x44px）。
- 禁用狀態（第 1 頁的上一頁、最後一頁的下一頁）清晰且已程式化定義。
- 已定義響應式行為（行動裝置的精簡檢視）。
- 鍵盤使用者可以瀏覽整個分頁列。
- 對於大型範圍已正確使用省略號。