安安～我是ChiYu～

昨天把桌面和手機導覽重新分工後，我終於順利進入 LumenDesk 的帳號申請頁。這次沒有迷路，頁面裡卻一次冒出五種「我現在到哪裡」。

我想知道目前位在系統哪一層、申請做到第幾步、紀錄還有幾頁、文件完成多少；規則太長時，還想直接跳到「審核方式」。

結果我把需求濃縮成一句：

幫我在帳號申請流程和申請清單加上進度功能。

下面是依這句模糊需求還原的第一版：

圖 1：五個問題共用五條同款進度條，數字也全部停在 50%。

這句話很省字，也順便省掉了 AI 判斷的空間。它只要放上一條藍色進度條，再寫個 50%，看起來就已經有做「進度」。

只是這條進度條很忙，還得兼職回答：

• 我在首頁、帳號申請，還是建立申請？
• 我填到申請流程的第幾步？
• 目前看到第幾頁紀錄？
• 文件到底完成幾份？
• 這份規則有哪些章節，又該怎麼跳過去？

它一題都沒有真的答對。

我把這些問題放進 位置、資料頁數與流程進度完整比較頁：

圖 2：同一句「我現在到哪裡」，可能在問系統位置、資料頁次、任務步驟，或一件工作完成多少。

先把「到哪裡」翻成六個問題

元件名稱可以晚一點決定，先把使用者真正想問的事寫出來：

這張表最重要的不是英文，而是每一列的問句。當 AI 拿同一個元件回答兩三列，代表需求還沒拆乾淨。

我也把判斷整理成一張選型地圖：

圖 3：先確認問題發生在系統、資料、任務、完成量，還是長頁內容裡，再選元件。

我的判斷很直白：系統階層交給 Breadcrumb，資料批次交給 Pagination，有先後順序的任務交給 Stepper，可計算的完成量才交給 Progress Indicator。長頁則由 Table of Contents 列出章節，再由 Anchor Link 把人送到目標。

這不是六選一。同一張帳號申請頁完全可以同時有 Breadcrumb、Stepper 與文件完成比例，因為它們分別回答系統位置、任務步驟和完成量。真正要避免的是把三個答案壓成同一條 50%：畫面看起來少了元件，資訊也一起少了。

系統位置與資料頁次：Breadcrumb、Pagination 不能互相代班

Breadcrumb 回答「我在系統哪一層」

Breadcrumb 元件頁裡的路徑從首頁走到帳號申請，再停在建立申請。

圖 4：前面的項目可以回到上層區域，最後一段則標示目前頁。

首頁／帳號申請／建立申請 說的是系統路徑。前面的項目可以回到上層，最後一段已經是目前頁，不必再連回自己；它應使用 aria-current="page" 表明現在的位置。W3C WAI：Breadcrumb Example

如果畫面正在跑四步驟申請，就不要把 Breadcrumb 寫成「首頁／第 2 步／第 3 步」。第 2 步不是系統子目錄，那是任務順序，應交給 Stepper。

Breadcrumb 也不必把網站從首頁開始的每一層都塞進來。路徑太深時，可以保留足以理解目前位置與回到重要上層的節點；省略中間層級時，仍要確保路徑不會變成一條看不懂的捷徑。

Pagination 回答「我正在看哪一批資料」

Pagination 元件頁示範一份放不進單一畫面的申請紀錄。

圖 5：頁碼、資料範圍與表格內容是同一次切頁，不能各自更新。

假設申請紀錄有 42 筆，每頁 10 筆。切到第 2 頁時，畫面要同時更新：

• 表格資料改成第 11 至 20 筆。
• 範圍文字顯示「第 11 至 20 筆，共 42 筆」。
• 頁碼 2 成為目前頁。
• 上一頁與下一頁按鈕反映新的位置。

只讓數字 2 變藍，資料仍停在前 10 筆，這種 Pagination 很適合拍照，不太適合查資料。目前頁碼也可以使用 aria-current="page"。GOV.UK Design System：Pagination

分頁也不能和搜尋、篩選、排序各自保存一份世界觀。使用者在「待審核」條件下切到第 3 頁，下一頁仍要沿用同一組條件；條件改變後，若結果只剩一頁，頁碼也應回到有效範圍，而不是停在不存在的第 3 頁看空白。

產品若希望重新整理、分享網址或按瀏覽器返回後仍回到相同結果，可以把頁碼與條件放進 URL 查詢參數。這不是每個內部工具都必須做，但要明確決定；不能一邊顯示第 2 頁，一重新整理又假裝使用者從沒離開第 1 頁。

從第 1 頁切到第 2 頁，沒有完成任何申請步驟，只是換了一批資料來看。

任務步驟與完成量：Stepper、Progress 看起來像，回答的事不同

Stepper 帶著任務往下一步走

Stepper 元件頁裡有四段帳號申請：申請人資訊、組織與帳號資訊、權限與角色、確認送出。

圖 6：Stepper 同時表達步驟順序與狀態，分出已完成、目前進行和尚未開始。

這四段有明確順序，也各自有完成條件，因此適合 Stepper。畫面至少要區分已完成、目前進行和尚未開始；目前步驟還要和正文標題、表單內容及 aria-current="step" 同步。

我從「第 2／4 步：組織與帳號資訊」按下下一步後，不只檢查第三顆圓點有沒有變色，而是對照四個位置：

四個地方一起更新，Stepper 才真的帶著流程往前走。若只寫「做一條四步驟進度條」，AI 很可能只移動高亮，正文還坐在第二步完全沒打算起身。

能不能直接點第 4 步，要由任務規則決定。LumenDesk 的帳號資料與權限設定有前後依賴，因此使用明確的上一步、下一步；回頭修改時，先前輸入的資料也不能恢復出廠設定。

如果下一步需要先通過驗證，畫面要把錯誤留在目前步驟，不能只把 Stepper 停住卻不說原因。若允許回頭修改已完成步驟，也要重新計算後續資料是否仍有效；「已完成」不是塗成綠色後就永久畢業。

到了 360px，我不要求四個完整步驟硬塞成一排。手機保留目前步驟、總步數與前後按鈕，詳細內容改成單欄閱讀。

圖 7：手機保留當下需要的步驟資訊；分頁、進度與長頁目錄也各自回到單欄版面。

Progress Indicator 只回答「做完多少」

Progress Indicator 元件頁處理的是四份文件已經完成兩份。

圖 8：已完成 2／4 項，所以顯示 50%；數字、文字和進度長度要說同一件事。

Progress Indicator 回報完成量，不告訴人目前正在填哪一步。文件檢核、檔案上傳或資料匯入有總量時，可以顯示「已完成 2／4 項，50%」。

原生 <progress> 使用 value 與 max 表達已知完成量。系統若不知道總量，就別突然很有自信地寫 63%；改用不確定進度，並說明目前正在處理什麼。MDN：<progress>

Stepper 和 Progress 可以同時出現：一個告訴我下一步要填權限，另一個告訴我文件只備妥一半。兩個資訊都合理，只是不能互相代班。

也不要直接拿「目前第 2／4 步」推算成 50% 完成。四個步驟的工作量可能完全不同；除非產品真的把每一步定義成等量，否則步驟位置和完成比例應各自根據真實資料計算。

長頁導覽：Table of Contents 列章節，Anchor Link 才真的帶路

Table of Contents 元件頁把帳號申請規則整理成申請資格、需要準備的資料、審核方式與常見問題。

圖 9：Table of Contents 攤開長頁結構，讀者不用從第一行一路捲到最後一行。

目錄回答「這頁有哪些內容」，項目也應和正文標題一致。正文叫「審核方式」，目錄卻寫「流程說明」，讀者點下去還得先猜兩者是不是同一件事。這裡不用替標題重新包裝，對得上比較重要。

真正移動位置的，是目錄裡的 Anchor Link。Anchor Navigation 元件頁讓每個項目指向穩定的目標 id。

圖 10：前往「審核方式」後，網址留下 #review，這個位置才能被複製、分享與返回。

點擊後，網址 hash 要更新，目標標題也要出現在可見位置。頁面若有固定 Header，還要確認標題不會剛好被遮住；畫面捲到了，不代表使用者真的看得到目的地。

鍵盤焦點是否跟著移到標題，不能只看畫面位置，仍要依實作與瀏覽器行為測試。HTML 的 <a> 原本就支援 fragment，做平滑捲動沒有問題，但不要為了動畫把原生連結行為攔掉，否則複製網址、重新整理定位與瀏覽器返回都可能失效。WHATWG HTML Standard：Links

Table of Contents 與 Anchor Link 是同一套長頁導覽的兩個責任：前者整理章節，後者真的把人送過去。若內容短到一眼就能掃完，也不必為了顯得完整另外加一張目錄。

改寫 Prompt：別再用同一條藍線回答所有問題

為 LumenDesk 帳號申請建立位置與進度資訊。請分開處理系統路徑、資料分頁、任務步驟、完成比例與長頁章節。

1. Breadcrumb：顯示「首頁／帳號申請／建立申請」。前兩項是上層 Link；最後一項是目前頁，使用 aria-current="page"。這不是申請流程。

2. Pagination：申請紀錄每頁 10 筆，提供上一頁、下一頁與頁碼。顯示「第 X 至 Y 筆，共 Z 筆」；切頁後同步更新資料列、範圍文字與目前頁狀態。搜尋、篩選與排序條件要在切頁時保留；條件改變後，頁碼回到有效範圍。若產品需要分享與返回相同結果，把頁碼與條件寫入 URL。

3. Stepper：四步為申請人資訊、組織與帳號資訊、權限與角色、確認送出。區分已完成、目前進行、尚未開始；目前步驟使用 aria-current="step"，並和正文標題、內容及狀態文字同步。提供上一步與下一步，保留先前輸入資料；驗證失敗時留在目前步驟並顯示修正方式。

4. Progress Indicator：文件檢核顯示「已完成 2／4 項，50%」。讓百分比、完成份數與可見進度同步；未知總量時改用不確定進度。它不取代 Stepper，也不要直接用步驟編號推算完成比例。

5. Table of Contents 與 Anchor Link：目錄列出「申請資格、需要準備的資料、審核方式、常見問題」，分別指向 #eligibility、#materials、#review、#faq。點選後更新 URL hash，讓目標標題出現在固定 Header 下方的可見位置；另外驗收鍵盤焦點、重新整理定位與瀏覽器返回。

360px：Stepper 保留目前步驟名稱、總步數與前後按鈕；資料表可以在自己的容器內捲動，但整頁不能水平溢出；目錄維持單欄，不遮住正文。

畫面完成後，我會真的走四條路：

1. Stepper 前進再返回，檢查步驟、正文、狀態文字與資料是否同步。
2. 在套用篩選的情況下把 Pagination 切到第 2 頁，再改變條件，確認資料範圍與頁碼仍有效。
3. 完成一項文件，確認份數、百分比與進度長度沒有各算各的。
4. 從目錄前往「審核方式」，檢查目標、網址 hash、鍵盤焦點、重新整理定位與瀏覽器返回。

圓點和藍線到底有沒有接上功能，操作一次就會露餡。

五類位置分清楚後，八個 Tab 又排隊報到

現在 Breadcrumb 說明系統路徑，Pagination 控制申請紀錄，Stepper 帶著申請往下一步走，Progress Indicator 回報文件完成量；Table of Contents 與 Anchor Link 則處理長頁導覽。

我接著進入工作區設定，需求只多了一句「畫面精簡一點」，AI 就很俐落地把一般設定、雙重驗證、資料保留說明和專案檢視全部塞進 Tabs。

圖 11：八種內容只剩一個面板能見人；想找雙重驗證、資料保留說明或看板，都得先猜該點哪個 Tab。

明天要看的不是 Tab 底線，而是哪些內容互相平行、哪些需要同時比較、哪些只是補充說明，又有哪些只是同一批資料的不同看法。

延伸閱讀

• W3C WAI：Breadcrumb Example
• GOV.UK Design System：Pagination
• MDN：<progress>
• WHATWG HTML Standard：Links

資料查閱：2026-08-07。