app收銀臺交互設計思考，一個好的收銀系統需要不斷的重構，不斷的發(fā)現與更新，下面我們就來談談App收銀臺交互設計。

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

定義

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

業(yè)務背景

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

需求分析

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

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

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

1.app收銀臺包括的場景其中賬戶充值與其他場景不同的是，賬戶充值的資金源不包括：賬戶余額、白條;而且不參與優(yōu)惠活動，沒有折扣、代金券。梳理流程

2.賬戶充值整體流程上圖包括主流程賬戶充值和子流程綁定銀行卡(下文簡為“綁卡”)，這2個流程如何結合有講究。關于流程的設計有兩個注意的點：

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

方案一

3.未綁卡方案一方案二

4.未綁卡方案二個人認為讓用戶先輸金額后自動跳轉綁卡流程會好一些。理由如下：未綁卡時先輸入金額，使未綁卡和已綁卡的完成充值流程保持更高的一致性;

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

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

方案一

5.綁卡后方案方案二

6.綁卡后方案二從用戶體驗的角度來說，自動跳轉至支付密碼頁是最好的(即方案二)，整個過程很自然流暢，跳轉到已綁卡充值流程的首個頁面完全是多余的一個步驟。但此次我選擇的卻是方案一，原因在于一個合理的交互方案應當適當配合后臺開發(fā)的設計邏輯。

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

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

7.綁卡后后端方案一方案二對應的后端邏輯如下：

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

1、選擇資金源彈層

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

10.輸入支付密碼兩種方式跟產品經理爭論了很久輸入支付密碼時應該用整屏的頁面還是半透明彈層。產品經理的理由有兩個，一是使用整屏的頁面無需考慮數字安全鍵盤在不同屏幕的適配問題(數字安全鍵盤由外部提供，我們公司內部可控性較低)，二是微信在支付過程也出現整屏輸入支付密碼的頁面。

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

11.微信輸入支付密碼兩種方式截圖思考清楚后，發(fā)現彈層和頁面分別對應著兩種不同的場景。彈層的場景是：輸入支付密碼為了達到某個目標(充值、提現、轉賬等)，此場景下輸入支付密碼只是流程中的一個步驟，希望用戶快速操作以達到目標。

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

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

首位輸入小數點，輸入框顯示為“0.”;

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

小數點后只能有兩位數字，繼續(xù)輸入，輸入框無反應;

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

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

12.xx卡充值為保證卡號的可讀性，卡號每4位中間隔空格，若用戶發(fā)現輸入錯誤，要刪除，務必刪除“空格”;密碼不需要脫敏(因為紙質的xx卡上就印有密碼，所以app內也沒必要做“不可見”處理;另外密碼不是用戶自己設置的，密碼可見可降低輸錯率);

如果卡號超過16位，再輸入字符，輸入框沒有反應;如果密碼超過8位，再輸入字符，輸入框沒有反應;

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

友數門店零售管理系統，幫助企業(yè)打通線上線下讓網店，門店數據互聯互通。