跳至主要內容
← 返回首頁作品集

滑動付款:一顆 App 按鈕的動畫規格

專案版本發布3 分鐘
微互動動畫支付 UX原型

為什麼付款按鈕要用滑的

付款是不能誤觸的動作。一般按鈕一碰就觸發,對「支付 70 歐元」這種事來說太輕率,所以我把確認付款設計成滑動手勢:使用者要把箭頭從左滑到右,途中隨時可以放棄,滑到底才真正送出。滑動的距離本身就是「你確定嗎」,不需要再跳一個確認彈窗。

把動畫規格寫給工程師

動畫要交付就要可實作。我在 Figma 原型上直接註記參數:延遲 200ms 後進場、smart animate 走 ease-in、單段 800ms,並把五個狀態排成規格表:待機時箭頭有微光提示方向、滑動中軌道逐漸填色、放開未過門檻就回彈、過門檻進入 loading 跑點點動畫、成功轉為綠色定格。工程師照著逐格做,不用猜任何一個曲線。

Swipe and Pay 按鈕原型:從待機、滑動、放開、載入到成功的五個狀態,右側是滑軌大圖
Swipe and Pay 按鈕:待機、滑動、放開、載入與成功五個狀態,左側是含註解的 Figma 原型。