60 秒決策
先確認使用者要完成的事。
適合使用
- 任務有固定順序，使用者需要在多個內容區段間前進或回看。
- 每一步都有名稱、完成條件與下一步。
不適合使用
- 只是想報告一項工作已完成多少百分比。
- 頁碼資料或文章章節沒有前後依賴關係。
畫面要說清楚的事
不要只交代外觀，也要交代資料與輸入規則。
狀態要分開
已完成、目前進行、尚未開始不是同一種藍色深淺；文字與圖示都要說出狀態。
目前步驟有內容對應
Stepper 指向「組織與帳號資訊」時，畫面正文就要是那一段，而不是只換圓點。
前進規則不可猜
若不能跳步，要提供上一步與下一步；若可回跳，也要交代資料是否會保留。
必要狀態與回應
每個狀態都要讓使用者知道下一步。
已完成
步驟清楚表示已通過，必要時可回看或修改。
目前進行
使用 aria-current="step" 與正文標題指出目前工作。
未開始
讓使用者知道後面還有什麼，但不假裝已完成。
操作 Demo
先知道要觀察什麼，再動手操作。
操作前先知道
四步帳號申請
先觀察：Stepper 描述的是固定順序的任務；它會跟著目前表單段落一起變。
操作：按下一步到「權限與角色」，再按上一步。
預期結果：目前步驟、內容標題、上一步／下一步可用性與 Live status 都同步。
可操作 Demo
有固定順序的任務，才需要步驟導覽。
帳號申請流程
組織與帳號資訊- ✓申請人資訊已完成
- 2組織與帳號資訊進行中
- 3權限與角色尚未開始
- 4確認送出尚未開始
目前工作
組織與帳號資訊
填寫組織名稱、統一編號與主要聯絡 Email。目前在第 2 步：組織與帳號資訊。
告訴 AI
把任務、規則、狀態與操作條件一次寫清楚。
建立四步驟的 LumenDesk 帳號申請 Stepper：申請人資訊、組織與帳號資訊、權限與角色、確認送出。清楚分出已完成、目前進行與尚未開始；目前步驟使用 aria-current="step"。提供「上一步」與「下一步」按鈕，不能只讓使用者點圓點猜能否跳轉。小螢幕保留目前步驟名稱、總步數與前後控制。驗收清單
不要只確認欄位能不能點。
- 每一個步驟是否真的有順序與內容？
- 完成、目前與未開始是否可辨識？
- 目前步驟是否使用 aria-current="step"？
- 前後移動是否有明確按鈕與邊界？
- 手機是否仍顯示目前步驟與總步數？