多步驟預約流程

對外預約這類流程適合用 3–5 步 wizard:上方 stepper、中間一步一張表單卡、底部固定「上一步/下一步」。不要一次把所有欄位堆在同一屏。

多步驟預約 wizard

這是什麼

Stepper + 單步表單卡 + 底部 sticky footer。

什麼時候用

對外預約、申請等多步流程;一步一屏降低認知負荷。

預覽依本指南規則實作
  1. 1. 選擇服務
  2. 2. 排程
  3. 3. 聯絡資料
  4. 4. 確認

選擇服務

示範第 1 步表單內容區。

規格速查

項目定稿
步數3–5 步,一步一任務
FooterSticky 全寬,Cancel + Back/Next
URL每步可深連結(path 或 query)
成功確認頁 + 預約編號

常見做錯

做錯正確
多步驟仍顯示完整 app sidebar流程期間極簡 chrome
未驗證就進下一步當步 inline error

相關章節