充值提現已經成為很多app不成或缺的重要部分，無論是支付平臺、直播打賞，還是付費閱讀、電商消費，凡是涉及業務金錢方面的產品都會涉及到余額賬戶系統，可以細分為三項功能模塊，別離是：充值、提現和賬戶綁定。

看似簡單，卻與相當多的產品功能用戶使用場景交織在一起，受到產品類型、用戶定位、業務邏輯、使用場景、用戶操作等差別因素影響，設計好充值提現模塊并沒有那么簡單。

本文主要從以下4個問題進行分析說明：

充值和提現的類型充值和提現模塊需求相關細節充值和提現的業務流程如何考慮充值提現一、充值的類型1、快捷按鈕充值

快捷按鈕充值是充值類型中比較常見的，主要按照一些產品類型的特點，會采用快捷按鈕，適用于對充值金額沒有那么大的靈活需求或對業務產品的針對性高（充值直接涉及獲得的辦事或者產品）。

快捷按鈕充值是比較簡單用戶操作體驗良好的一種充值方式。

優點：

對于用戶減少操作步驟，不需要太多思考，用戶操作體驗良好對于頁面開發，不需要加入太多的輸入判斷，開發簡便

缺點：

可選擇的充值金額太少，靈活性不強

注：支付寶話費充值&ofo&百度外賣

2、密碼兌換充值

密碼兌換充值恐怕應該是最傳統最古老的互聯網充值方式了，十幾年前，qq的Q幣充值，游戲充值，都是采用線下店鋪售賣點卡的模式，用戶刮點卡獲得密碼，上網兌換，達到充值的效果。

目前隨著互聯網發展，出現了很多第三方支付平臺，好比支付寶、微信支付、銀聯支付…這種密碼兌換的充值方式漸漸被取代。

當然，目前密碼兌換充值的方式以線上兌換碼代替點卡廣泛用于運營維護，好比：老用戶的喚活，特殊節假日點贈送兌換碼，電商平臺與B端的合作等。

注：百度糯米&百度外賣&天天果園

3、輸入金額充值

輸入金額充值也是app充值中比較常見的，部分app以快捷按鈕充值和輸入金額充值一起也有。

優點：輸入的數字靈活性更高，可以滿足用戶對差別金額的充值需求。缺點：輸入框的判斷邏輯太多，影響用戶體驗，比擬快捷按鈕，操作復雜。

注：微信&天天中彩票&天天果園

有沒有覺得這種方式最簡單，一個輸入框就ok了，但是看似簡單，最不簡單的就是輸入金額充值。

輸入框的默認顯示是？輸入類型的限制？輸入的最大金額？最小金額？是輸入框實時校驗還是點擊充值按鈕后判斷？判斷的要求？判斷后提示的顯示怎么顯示？還有鍵盤的彈出和隱藏規則，鍵盤類型？

二、充值模塊需求相關細節

下面我以比來做的充值頁面原型作為例子，講一下輸入快捷按鈕+金額充值方式的原型設計：

1、進行充值業務的條件說明

進入充值頁面時按照產品業務邏輯判斷用戶是否符合業務條件，別的后續該如何引導用戶完成業務條件再進入充值頁面。

以上原型為例：進入充值頁面判斷是否完成實名認證，未完成，引導用戶完成實名認證。（例：是否完成押金充值，共享單車必需完成押金充值才能對余額進行充值）。

2、默認顯示規則的設定

頁面的默認顯示，輸入框內的顯示，快捷充值按鈕的顯示，充值按鈕的顯示，鍵盤的彈出情況說明。

以上原型為例：默認顯示規則為快捷按鈕“100元”默認選中，輸入框內默認顯示“100元”，充值按鈕顯示充值對應輸入框內金額。

3、文本框獲得焦點時以及鍵盤交互說明

當文本框獲得焦點時，文本框的交互情況，鍵盤的類型，鍵盤的交互。

以上原型為例：當文本框獲得焦點時，文本框提示文字隱藏，不清空文本框數字，從下往上彈出鍵盤，因為需要輸入內容為數字且可輸入小數點，所以鍵盤類型為帶“點”的數字鍵盤。（注：鍵盤的類型有很多，為了達到最好的用戶體驗，按照差別的頁面和需求彈出差別類型的鍵盤，prd中必然要寫清楚，不然程序猿哥哥就會用默認鍵盤）

注：帶“點”的數字鍵盤

4、文本框失去焦點時以及鍵盤交互說明

當文本框失去焦點時，文本框的交互情況，按鈕的顯示，鍵盤的交互。

標簽：東營 林芝 鹽城 烏魯木齊 九江