安安～我是ChiYu～
昨天把桌面和手機的導覽重新分工後，我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路，頁面裡卻一次冒出五類「我現在到哪裡」。
我想知道目前位在系統哪一層、申請做到第幾步、紀錄還有幾頁、文件完成多少，規則太長時還想直接跳到「審核方式」。
結果我把需求濃縮成一句：
「幫我在帳號申請流程和申請清單加上進度功能。」
昨天結尾先讓這句 Prompt 的第一版露了個臉。系統位置、申請步驟、資料頁次、文件完成量與規則閱讀位置，全部被換算成同一個答案。
圖 1：和昨天結尾是同一張還原畫面。五個問題共用五條同款進度條，數字也全部停在 50%。
這句話很省字，也順便省掉了 AI 判斷的空間。它只要在頁面上放一條藍色進度條，再寫個 50%，看起來就已經有做「進度」。
只是這條進度條很忙，還得兼職回答下面幾個問題：
它一題都沒有真的答對。
Vibe Coding 很常發生這種誤會。人習慣把幾個相近概念濃縮成同一個詞，AI 則會挑一個最像答案的元件直接開工。今天先把「進度」拆開，看看 Breadcrumb、Pagination、Stepper、Progress Indicator，以及由 Table of Contents 和 Anchor Link 組成的頁內導覽，到底各自在回答什麼。
在 位置、資料頁數與流程進度完整比較頁裡，可以先看到這六個元件同時出現在帳號申請情境時，各自站在哪個位置。
圖 2：同一句「我現在到哪裡」，可能在問系統位置、資料頁次、任務步驟，或一件工作完成多少。
畫面上的元件都和「位置」有關，回答的問題卻不同。只看外觀挑一條最像進度的藍線，通常就是後面開始混亂的地方。
我先不挑元件，直接把使用者心裡的問題寫出來：
| 使用者真正想問的事 | 適合回答的元件或機制 | LumenDesk 裡的答案 |
|---|---|---|
| 我在系統哪一層？ | Breadcrumb | 首頁／帳號申請／建立申請 |
| 我正在看哪一批資料？ | Pagination | 第 2 頁，顯示第 11 至 20 筆申請紀錄 |
| 這份申請做到哪一步？ | Stepper | 第 2／4 步：組織與帳號資訊 |
| 文件完成多少？ | Progress Indicator | 已完成 2／4 項，50% |
| 這份規則有哪些段落？ | Table of Contents | 申請資格、準備資料、審核方式、常見問題 |
| 我要直接去「審核方式」 | 目錄裡的 Anchor Link | 前往 #review 的同頁連結 |
這張表最重要的不是元件英文，而是每一列的問句。當 AI 第一版拿同一個元件回答兩三列，就代表需求還沒有拆乾淨。
如果想用圖來選，也可以看這張選型地圖：
圖 3：先確認問題發生在系統、資料、任務、完成量，還是長頁內容裡，再選元件。
我的判斷方式很直白：系統階層交給 Breadcrumb，資料批次交給 Pagination，有先後順序的任務交給 Stepper，可計算的完成量才交給 Progress Indicator。文章很長時，再由 Table of Contents 說明有哪些章節；目錄裡的 Anchor Link 負責真的把人送過去。後兩者是一套長頁導覽的結構與連結機制，不是兩個非得分開安裝的競爭元件。
接著逐一看看。它們有些都長得像一排文字或圓點，但只要問錯問題，用起來就會差很多。
先看 Breadcrumb 元件頁裡的路徑。它從首頁一路走到帳號申請，再停在建立申請。
圖 4：前面的項目可以回到上層區域，最後一段則標示目前頁。
首頁／帳號申請／建立申請 說的是系統路徑：目前頁屬於帳號申請，帳號申請又在首頁之下。使用者點前面的項目，可以回到上一層內容。
最後一段已經是目前頁，不必再連回自己；它應該用 aria-current="page" 表明現在的位置。W3C 的 Breadcrumb 範例也使用有名稱的導覽區域與 aria-current，把這條路徑提供給輔助科技。W3C WAI：Breadcrumb Example
如果畫面正在跑四步驟申請，請不要把 Breadcrumb 寫成「首頁／第 2 步／第 3 步」。第 2 步不是系統的子目錄，使用者也不會靠它回上一層。那是任務順序，晚一點交給 Stepper。
Pagination 元件頁示範一份放不進單一畫面的申請紀錄。它控制的是同一批資料前後翻頁。
圖 5：頁碼、資料範圍與表格內容是同一次切頁，不能各自更新。
假設申請紀錄有 42 筆，每頁顯示 10 筆。切到第 2 頁時，畫面應該告訴我「顯示第 11 至 20 筆，共 42 筆」，同時換掉表格資料、頁碼目前狀態與上一頁／下一頁按鈕。
只讓數字 2 變藍，表格仍停在前 10 筆，這種 Pagination 很適合拿來拍照，不太適合拿來查資料。
目前頁碼同樣可以使用 aria-current="page"。GOV.UK 的 Pagination 指引也把頁碼與上一頁／下一頁放在同一組資料瀏覽操作裡。GOV.UK Design System：Pagination
Pagination 不知道申請填到哪一步。使用者從第 1 頁切到第 2 頁，沒有完成任何任務，只是換了一批資料來看。
Stepper 元件頁裡有一條四步驟帳號申請流程：申請人資訊、組織與帳號資訊、權限與角色、確認送出。
圖 6：Stepper 同時表達步驟順序與狀態，分出已完成、目前進行和尚未開始。
這四段有明確順序，也各自有完成條件，所以適合 Stepper。畫面至少要區分已完成、目前進行和尚未開始；目前步驟還要和正文標題、表單內容及 aria-current="step" 同步。
至於能不能直接點第 4 步，得看任務規則。這個 Demo 使用明確的「上一步／下一步」，因為帳號資料和權限設定有前後依賴。產品若允許回頭修改，也要交代先前輸入的資料會不會保留。不要讓使用者回去改一個欄位，前面三頁跟著恢復出廠設定。
Stepper Demo 一開始顯示「第 2／4 步：組織與帳號資訊」。我按下「下一步」後，它移到「第 3／4 步：權限與角色」。
這時我對照四個位置：
四個地方都有變，Stepper 才真的帶著流程往前走。若我只寫「做一條四步驟進度條」，AI 很可能只移動高亮，正文還坐在第二步完全沒打算起身。
同一個 Demo 縮到 360px 時，我也沒有要求把四個完整步驟塞成一排。手機先保留目前步驟、總步數與前後按鈕，詳細內容改成單欄閱讀。
圖 7：手機保留當下需要的步驟資訊；分頁、進度與長頁目錄也各自回到單欄版面。
這張畫面要驗收的不是「字有沒有縮小」，而是操作仍能完成、整頁沒有水平溢出。桌面上能攤開的資訊，到了手機本來就可以換一種說法。
接著看 Progress Indicator 元件頁。這次不是第幾步，也不是第幾頁，而是四份文件已經完成兩份。
圖 8：已完成 2／4 項，所以顯示 50%；數字、文字和進度長度要說同一件事。
Progress Indicator 回報的是完成量。文件檢核、檔案上傳或資料匯入都有總量時，可以顯示「已完成 2／4 項，50%」，讓使用者知道還剩多少。
原生 <progress> 元素使用 value 與 max 表達已知完成量。若系統根本不知道總量，就別突然很有自信地寫 63%；改用不確定進度，並說明目前正在處理什麼。MDN：<progress>
Progress Indicator 可以和 Stepper 同時出現。Stepper 告訴我下一步要填權限，Progress Indicator 告訴我文件只備妥一半。兩個資訊都合理，只是不能互相代班。
Table of Contents 元件頁把帳號申請規則整理成申請資格、需要準備的資料、審核方式與常見問題。
圖 9：Table of Contents 攤開長頁結構，讀者不用從第一行一路捲到最後一行。
Table of Contents 回答「這頁有哪些內容」。它很適合規則說明、設定頁或技術文件，讓讀者先選自己要看的章節。
目錄項目應該跟頁面裡真實存在的標題一致。正文叫「審核方式」，目錄卻寫「流程說明」，讀者點下去就得先猜兩者是不是同一件事。AI 很愛幫標題換個比較漂亮的說法，這裡不用發揮文案創意，對得上比較重要。
Table of Contents 列出章節，Anchor Navigation 元件頁則示範每個目錄項目怎麼真的把人送到同頁目標。
圖 10：前往「審核方式」後，網址留下 #review，這個位置才能被複製、分享與返回。
這裡所說的 Anchor Navigation，是由可操作的同頁 Anchor Link 組成。每個目標要有穩定的 id，例如 #review；點擊後網址 hash 更新，標題出現在可見位置。至於鍵盤焦點是否也要移到標題，不能只看畫面已經捲到哪裡，必須依實作與瀏覽器行為另外測試。
HTML 的 <a> 原本就支援以 fragment 前往同頁目標。做平滑捲動沒有問題，但不要為了動畫把原生連結行為一起攔掉，否則複製網址、重新整理定位與瀏覽器返回都可能失效。WHATWG HTML Standard：Links
Table of Contents 和 Anchor Link 經常一起出現，責任分工也很直接：目錄整理這頁有哪些章節，裡面的連結負責走到章節。少了前者，長頁結構不清楚；少了後者，目錄就只剩一張很有禮貌、但不能按的清單。
原本那句「加上進度功能」只交代了外觀方向。我把每種資訊要回答的問題、互動結果與手機行為補進 Prompt：
為 LumenDesk 帳號申請建立位置與進度資訊。請先分開處理系統路徑、資料分頁、任務步驟、完成比例與長頁章節，不要用同一條進度條取代它們。
1. Breadcrumb：在頁面頂部顯示「首頁／帳號申請／建立申請」。前兩項是可回到上層的 Link；最後一項是目前頁，使用 aria-current="page"。這不是申請流程。
2. Stepper：帳號申請有四步：申請人資訊、組織與帳號資訊、權限與角色、確認送出。區分已完成、目前進行、尚未開始；目前步驟使用 aria-current="step"，並和正文標題與內容同步。提供上一步與下一步，第一步不能再上一步，最後一步不可再前進。
3. Progress Indicator：文件檢核顯示「已完成 2 / 4 項，50%」。使用原生 progress 或具有相同語意的 progressbar，讓百分比、完成份數與可見進度同步。它不取代 Stepper。
4. Pagination：申請紀錄每頁 10 筆，提供上一頁、下一頁和頁碼。顯示「顯示第 X 至 Y 筆，共 Z 筆」；目前頁使用 aria-current="page"。切頁後要更新資料列、範圍文字與目前頁狀態。
5. Table of Contents 與 Anchor Link：長頁目錄列出「申請資格、需要準備的資料、審核方式、常見問題」，每項都是可操作的同頁連結，分別指向 #eligibility、#materials、#review、#faq。點選後更新 URL hash，讓目標標題出現在可見位置；另外驗收鍵盤焦點與瀏覽器返回，不要只看捲動動畫。
360px 手機版：Stepper 保留目前步驟名稱、總步數與前後按鈕；資料表可以在自己的容器水平捲動，但整頁不能水平溢出；目錄改為正常單欄內容，不遮住正文。
這份 Prompt 沒有指定藍色要多深、圓點要多大。那些視覺細節可以之後調整；現在更急的是按下元件後，畫面要回答正確的問題。
畫面完成後，我會實際做下面四件事：
最後再縮到 360px。Stepper 可以精簡資訊，資料表可以在自己的容器內捲動，但整張頁面不能左右漂移；目錄也不能浮在上面蓋住正文。
這些操作走一遍，幾顆圓點和一條藍線到底有沒有真的接上功能，很快就會露餡。
現在 Breadcrumb 說明系統路徑，Pagination 控制申請紀錄，Stepper 帶著申請往下一步走，Progress Indicator 回報文件完成量；Table of Contents 則用章節清單與 Anchor Link 完成長頁導覽。
我接著進入工作區設定，想整理一般設定、雙重驗證、資料保留說明和專案檢視。需求只多了一句「畫面精簡一點」，AI 就很俐落地把它們全部塞進 Tabs。
下面這張圖，是我依照第一版的問題重新做出的錯誤現場，不含真實資料：
圖 11：八種內容只剩一個面板能見人；想找雙重驗證、資料保留說明或看板，都得先猜該點哪個 Tab。
有一說一，畫面確實變短了。代價是設定、規則、補充說明和檢視模式全被當成同一種內容，使用者得沿著八個 Tab 逐一開箱，才能知道資料到底藏在哪裡。
明天，我們再把 Tabs、Accordion、Disclosure 與 Segmented Control 攤開來看：哪些內容互相平行、哪些只是補充說明，哪些又只是同一份資料的不同看法。
<progress>
資料查閱：2026-08-07。
iThome鐵人賽
看影片追技術