導覽與資訊架構
看到「進度」兩個字，先問它是在說位置、資料、步驟還是完成比例。
Breadcrumb、Pagination、Stepper、Progress Indicator、目錄與錨點都會出現在長頁或流程裡，但它們各自回答不同問題。元件選錯時，AI 做得再漂亮，使用者還是會迷路。
選型流程
先回答眼前的問題，再挑元件。
- 使用者需要回到上層位置嗎？是：使用 Breadcrumb；最後一段表示目前頁。
- 是在瀏覽大量同類型資料嗎？是：使用 Pagination，說清楚頁碼與資料範圍。
- 任務有固定順序與下一步嗎？是：使用 Stepper；目前步驟要有對應內容。
- 只是回報完成多少，或在長頁跳章節嗎？前者用 Progress Indicator；後者用 Table of Contents 與 Anchor Navigation。
比較表
這六個元件都能幫人定位，卻不能互相頂替。
點選元件名稱可查看 LumenDesk 操作 Demo、AI Prompt 與驗收清單。
| 比較面向 | Breadcrumb｜麵包屑導覽 | Pagination｜分頁 | Stepper｜步驟導覽器 | Progress Indicator｜進度指示器 | Table of Contents｜目錄 | Anchor Navigation｜錨點導覽 |
|---|---|---|---|---|---|---|
| 主要回答的問題 | 我在系統哪個層級？ | 我在看哪一頁資料？ | 流程現在走到哪一步？ | 這件工作完成多少？ | 這頁有哪些章節？ | 如何跳到同頁目標？ |
| 適合的內容 | 有父層的網站或系統位置 | 大量、同類型資料集合 | 有順序與完成條件的任務 | 可計算的處理量或完成比例 | 長文章、規則頁或長設定頁 | 同頁中有穩定 id 的區段 |
| 目前狀態 | 目前頁 | 目前資料頁 | 目前步驟 | 目前完成值 | 目前閱讀章節 | 目前網址 hash 與目標區段 |
| 不適合取代 | Stepper | Stepper | Progress Indicator | Stepper | 全站導覽 | 跨頁導覽 |
| 常見誤用 | 把表單步驟列成路徑 | 把流程進度做成 1、2、3 頁碼 | 只有圓點，沒有步驟內容與前進規則 | 假裝百分比、卻沒有總數或工作說明 | 目錄項目和正文標題不一致 | 只平滑捲動，不更新 hash 或目標位置 |
這組結論
流程的下一步、資料的下一頁，不能共用同一套提示。
在 LumenDesk 情境中，帳號申請用 Stepper，文件檢核用 Progress Indicator，申請紀錄用 Pagination，規則長頁用目錄與錨點；Breadcrumb 則只處理頁面所在的上層位置。
操作 Stepper 與 Progress Demo →