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

錢包儲值與轉贈:讓人安心的帳戶頁

專案版本發布3 分鐘
錢包支付 UX行動流程金融科技 UX

一個帳戶頁,三份工作

錢包帳戶頁要同時做三件事:讓餘額一眼可見、讓儲值一步可達、讓交易紀錄查得清楚。我把餘額與 Top up wallet 固定在頁面最上方,餘額用最大的字級;交易列表每列都回答四個問題:哪個商家、什麼類型(購買、核銷、退款、優惠券)、金額多少、狀態如何,狀態用顏色編碼,取消與退款一眼就能分辨。

接收儲值:Token 路徑

轉贈是這個頁面最特別的流程:朋友把卡片送給你時,系統寄出一組 Token,你在帳戶頁輸入後卡片入帳。我為它做了醒目的「You received a card!」橫幅,輸入框直接嵌在橫幅裡,不用跳頁。圖裡的五個版本記錄了迭代過程:橫幅從角落的小提示慢慢長成頁面中段的主角,因為測試發現使用者會忽略角落,卻絕不會錯過擋在交易列表前面的那一塊。

帳戶頁五個版本:錢包餘額、儲值按鈕、推薦卡片、交易列表與輸入 Token 的收卡橫幅,品牌標誌已模糊
帳戶頁的五次迭代:上方是餘額與儲值、中段推薦卡片、交易列表,以及輸入 Token 的收卡橫幅。品牌標誌已模糊。