最近完成了“app收銀臺設(shè)計重構(gòu)”的需求，作為一個剛畢業(yè)的交互新人，踩了一些坑，總結(jié)了這次思考的過程（以賬戶充值為例子）與大家分享，不正確之處還請多多指正。

定義

app收銀臺：在移動端進行支付、賬戶充值時所調(diào)用的功能模塊。

業(yè)務(wù)背景

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

需求分析

收銀臺是我們公司app內(nèi)已存在的功能模塊，產(chǎn)品經(jīng)理打算整體改版，一期先從“賬戶充值”入手。

收銀臺在支付類app涉及的場景較多，任何改動都可謂“牽一發(fā)動全身”。在做賬戶充值的交互方案時需要把其他場景都考慮齊全，以保證交互方案可以適用app內(nèi)包含的所有場景。

通過與產(chǎn)品經(jīng)理溝通，確定使用收銀臺的場景如下：

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

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

梳理流程

圖2.賬戶充值整體流程

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

關(guān)于流程的設(shè)計有兩個注意的點：

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

方案一

圖3.未綁卡方案一

方案二

圖4.未綁卡方案二

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

• 未綁卡時先輸入金額，使未綁卡和已綁卡的完成充值流程保持更高的一致性；
• 用戶從上個頁面進入到此頁面是為了充值，如果一進來讓用戶去綁卡，會讓用戶覺得莫名其妙，先輸入金額更符合用戶的心智模型。

2、未綁卡時，用戶完成綁卡流程后，跳轉(zhuǎn)至哪個頁面，應(yīng)該采取下圖的方案一還是方案二？

方案一

圖5.綁卡后方案

方案二

圖6.綁卡后方案二

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

但此次我選擇的卻是方案一，原因在于一個合理的交互方案應(yīng)當適當配合后臺開發(fā)的設(shè)計邏輯。

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

方案一對應(yīng)的后端邏輯如下：

圖7.綁卡后后端方案一

方案二對應(yīng)的后端邏輯如下：

圖8.綁卡后后端方案二

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

交互細節(jié)

1、選擇資金源彈層

圖9.選擇資金源彈層

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

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

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

跟產(chǎn)品經(jīng)理爭論了很久輸入支付密碼時應(yīng)該用整屏的頁面還是半透明彈層。

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

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

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

思考清楚后，發(fā)現(xiàn)彈層和頁面分別對應(yīng)著兩種不同的場景。

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

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

3、總結(jié)了金額輸入框的數(shù)字金額規(guī)則，如下：

• 首位輸入小數(shù)點，輸入框顯示為“0.”；
• 首位輸入“0”后，輸入框顯示為“0.”；刪除小數(shù)點時，輸入框同時刪除“0.”（此處原來想的是如果輸入“081”，輸入框顯示“81”，跟同事討論時，同事覺得“0”在數(shù)字鍵盤上的位置，用戶誤操作的可能性較低。我倆還拿了傳統(tǒng)的計算器看首位輸入“0”的效果，最終敲定方案）；
• 小數(shù)點后只能有兩位數(shù)字，繼續(xù)輸入，輸入框無反應(yīng)；
• 不可輸入兩次小數(shù)點，第二次輸入小數(shù)點時，輸入框無反應(yīng)。

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

圖12.xx卡充值

• 為保證卡號的可讀性，卡號每4位中間隔空格，若用戶發(fā)現(xiàn)輸入錯誤，要刪除，務(wù)必刪除“空格”；
• 密碼不需要脫敏（因為紙質(zhì)的xx卡上就印有密碼，所以app內(nèi)也沒必要做“不可見”處理；另外密碼不是用戶自己設(shè)置的，密碼可見可降低輸錯率）；
• 如果卡號超過16位，再輸入字符，輸入框沒有反應(yīng)；如果密碼超過8位，再輸入字符，輸入框沒有反應(yīng)；
• 卡號一輸入，及時未滿16位，“下一步”按鈕高亮；密碼未輸滿8位，“下一步”按鈕置灰（此處考慮到卡號為16位，位數(shù)較長，用戶單肉眼看可能不容易發(fā)現(xiàn)輸漏，點擊按鈕后彈窗提示更為直觀）。

以上是我的一些思考，歡迎大家多多交流。

本文由 @柒零 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。