1介紹
2票種
3資料
4付款
5完成
9:41
活動介紹
先把上面的資料填完
點頂部任一步可以跳到那個畫面、看流程的不同段落。
畫面切換的設計考慮
這些是我做這個 prototype 時刻意挑的細節、你可以推翻、推翻前先感受一遍。
- 畫面是滑進來、不是淡進來。前進往左滑、後退往右滑。這 40ms 的方向感讓「我現在往前」「我退一步」自己會被身體記住、不用看 breadcrumb。
- 下一步按鈕不會永遠亮著。該填的沒填、按鈕變灰、滑鼠移過去會冒「先填完上面那個」的小提示——而不是讓你按下去才告訴你哪裡錯。
- Email 邊填邊驗。離開 input 那一刻才檢查格式、輸入中不打斷你。錯的時候紅、對的時候安靜——「對」不需要慶祝。
- 確認付款會 loading 800ms。真實系統有網路延遲、prototype 騙過去等於沒做。spinner 在按鈕內、不是另開一個 overlay 蓋住整個畫面。
- 票券有撕線、有 QR code、有截角。不是「成功！」一個綠勾結束。讀者看到的最後一個畫面決定他覺得整個流程「有沒有做完」。