60 秒決策
先確認使用者要完成的事。
適合使用
- 資料量大，且每一頁都是同一類、可獨立閱讀的結果。
- 使用者需要跳到特定頁碼或知道目前資料範圍。
不適合使用
- 用頁碼表示尚未完成的申請流程。
- 資料量很少或更適合搜尋、篩選、無限捲動的閱讀情境。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
說出資料範圍
「顯示第 11 至 20 筆，共 42 筆」比單獨一個 2 更能讓人判斷自己看到了什麼。
前後頁有邊界
在第一頁時上一頁不可用，在最後頁時下一頁不可用；不要按了才沒有反應。
頁碼是資料位置
目前頁使用 aria-current="page"，切換後更新表格與狀態文字。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
第一頁
上一頁控制不可用，顯示第一段資料範圍。
中間頁
可前後移動，且目前頁與表格內容同步。
最後頁
下一頁控制不可用，顯示最後不足一頁的資料數。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
申請紀錄的頁碼
先觀察：Pagination 控制的是「看哪一批資料」，不是表單要填到第幾步。
操作：切到第 2 頁，再使用上一頁回到第 1 頁。
預期結果：表格列、資料範圍文字、目前頁樣式與 aria-current 一起更新。
可操作 Demo
資料很多時，先確認正在看哪一頁。
近期申請紀錄
資料分頁| 申請編號 | 申請人 | 狀態 |
|---|---|---|
| APP-026 | 王小明 | 審核中 |
| APP-025 | 林佩珊 | 已核准 |
| APP-024 | 許博文 | 補件中 |
目前第 1 頁。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
在 LumenDesk 的申請紀錄表格下方加入 Pagination。每頁顯示 10 筆，提供上一頁、下一頁與明確頁碼；目前頁使用 aria-current="page"。切頁後更新表格資料與「顯示第 X 至 Y 筆，共 Z 筆」文字。若只有一頁資料，不顯示一整排失效頁碼；不要把 Pagination 拿來表示填表流程。驗收清單
不要只確認欄位能不能點。
- 是否顯示目前資料範圍與總筆數？
- 目前頁是否使用 aria-current="page"？
- 第一頁與最後頁是否正確處理邊界？
- 切頁後資料與狀態文字是否同步？
- 是否沒有把流程步驟做成頁碼？