App收銀台交互設計思考

作者：柒0。作者授權早讀課轉載。編輯：Juvae

最近完成了「app收銀台設計重構」的需求（一期為「賬戶充值」），作為一個剛畢業的交互新人，踩了一些坑，總結了這次思考的過程與大家分享，不正確之處還請多多指正。

定義

app收銀台：在移動端進行支付、賬戶充值時所調用的功能模塊。

業務背景

我們公司的app主打移動支付功能。

需求分析

收銀台是我們公司app內已存在的功能模塊，產品經理打算整體改版，一期先從「賬戶充值」入手。

收銀台在支付類app涉及的場景較多，任何改動都可謂「牽一髮動全身」。在做賬戶充值的交互方案時需要把其他場景都考慮齊全，以保證交互方案可以適用app內包含的所有場景。

通過與產品經理溝通，確定使用收銀台的場景如下：

圖1.app收銀台包括的場景

其中賬戶充值與其他場景不同的是，賬戶充值的資金源不包括：賬戶餘額、白條；而且不參與優惠活動，沒有折扣、代金券。

梳理流程

圖2.賬戶充值整體流程

上圖包括主流程賬戶充值和子流程綁定銀行卡（下文簡為「綁卡」），這2個流程如何結合有講究。

關於流程的設計有兩個注意的點：

1、用戶未綁卡時，打開充值頁面，應該如方案一讓用戶輸入金額后自動跳轉綁卡流程，還是如方案二頁面上只有綁定銀行卡的功能，讓用戶先去完成綁卡整個子流程再進入充值流程？

方案一

圖3.未綁卡方案一

方案二

圖4.未綁卡方案二

個人認為讓用戶先輸金額后自動跳轉綁卡流程會好一些。理由如下：

（1）未綁卡時先輸入金額，使未綁卡和已綁卡的完成充值流程保持更高的一致性；

（2）用戶從上個頁面進入到此頁面是為了充值，如果一進來讓用戶去綁卡，會讓用戶覺得莫名其妙，先輸入金額更符合用戶的心智模型。

2、未綁卡時，用戶完成綁卡流程后，跳轉至哪個頁面，應該採取下圖的方案一還是方案二？

方案一

圖5.綁卡後方案一

方案二

圖6.綁卡後方案二

從用戶體驗的角度來說，自動跳轉至支付密碼頁是最好的（即方案二），整個過程很自然流暢，跳轉到已綁卡充值流程的首個頁面完全是多餘的一個步驟。

但此次我選擇的卻是方案一，原因在於一個合理的交互方案應當適當配合後台開發的設計邏輯。

我一開始也沒意識到前端的一個頁面，竟有可能牽扯到後台整個邏輯的改變。

方案一對應的後端邏輯如下：

圖7.綁卡后後端方案一

方案二對應的後端邏輯如下：

圖8.綁卡后後端方案二

方案二在後端相當於把兩個各自獨立的流程打通，把綁卡流程嵌入到充值流程中。而在我們公司，後端是分開維護充值流程和綁卡流程的，如採用方案二需要花費大量精力重新設計後台，成本過高。

交互細節

1、選擇資金源彈層

圖9.選擇資金源彈層

可以很直觀地看出頁面二在視覺上更聚焦，頁面一所有內容平鋪顯示，視覺中心不夠突出。但當列表項較多時，頁面二不容易滾動選中想要的資金源，且不可用資金源在該方式下需要隱藏。

2、輸入支付密碼彈層or頁面

圖10.輸入支付密碼兩種方式

跟產品經理爭論了很久輸入支付密碼時應該用整屏的頁面還是半透明彈層。

產品經理的理由有兩個，一是使用整屏的頁面無需考慮數字安全鍵盤在不同屏幕的適配問題（數字安全鍵盤由外部提供，我們公司內部可控性較低），二是微信在支付過程也出現整屏輸入支付密碼的頁面。

我一開始也納悶，為什麼微信會在收銀台使用兩種輸入支付密碼方式（微信截圖如下）？

圖11.微信輸入支付密碼兩種方式截圖

思考清楚后，發現彈層和頁面分別對應著兩種不同的場景。

彈層的場景是：輸入支付密碼為了達到某個目標（充值、提現、轉賬等），此場景下輸入支付密碼只是流程中的一個步驟，希望用戶快速操作以達到目標。

頁面的場景是：輸入支付密碼本身就是目標（驗證身份），所以此處交互上並沒有希望用戶快速輸入，反而需要用戶較為仔細慎重地進行操作。

3、總結了金額輸入框的數字金額規則，如下

a、首位輸入小數點，輸入框顯示為「0.」；

b、首位輸入「0」后，輸入框顯示為「0.」；刪除小數點時，輸入框同時刪除「0.」（此處原來想的是如果輸入「081」，輸入框顯示「81」，跟同事討論時，同事覺得「0」在數字鍵盤上的位置，用戶誤操作的可能性較低。我倆還拿了傳統的計算器看首位輸入「0」的效果，最終敲定方案）；

c、小數點后只能有兩位數字，繼續輸入，輸入框無反應；

d、不可輸入兩次小數點，第二次輸入小數點時，輸入框無反應。

4、xx卡充值時輸入框的規則（xx卡是我們公司內部的充值卡，類似話費卡充值；卡號為16位，密碼為8位。）

圖12.xx卡充值

a、為保證卡號的可讀性，卡號每4位中間隔空格，若用戶發現輸入錯誤，要刪除，務必刪除「空格」；

b、密碼不需要脫敏（因為紙質的xx卡上就印有密碼，所以app內也沒必要做「不可見」處理；另外密碼不是用戶自己設置的，密碼可見可降低輸錯率）；

c、如果卡號超過16位，再輸入字元，輸入框沒有反應；如果密碼超過8位，再輸入字元，輸入框沒有反應；

d、卡號一輸入，及時未滿16位，「下一步」按鈕高亮；密碼未輸滿8位，「下一步」按鈕置灰（此處考慮到卡號為16位，位數較長，用戶單肉眼看可能不容易發現輸漏，點擊按鈕后彈窗提示更為直觀）。

投稿郵箱：[email protected]

本文由作者授權早讀課發表，轉載請聯繫作者。

3月29日，100offer 邀請了被稱作「架構師的搖籃」的阿里中間件參加知乎 Live。

阿里中間件承載了世界上最有挑戰的場景，應對了一次次雙十一的流量洪峰，他們對人才的要求指引優秀架構師之路的方向。

掃描二維碼，參與 Live 會讓你了解怎麼樣的架構師才能勝任頂尖團隊中的工作。