在本文中，筆者將結合自身經歷，談談對充值提現中涉及到的相關的內容做一個分享。

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

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

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

• 充值和提現的類型
• 充值和提現模塊需求相關細節
• 充值和提現的業務流程
• 如何考慮充值提現

一、充值的類型

1、快捷按鈕充值

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

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

優點：

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

缺點：

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

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

2、密碼兌換充值

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

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

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

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

3、輸入金額充值

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

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

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

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

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

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

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

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

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

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

2、默認顯示規則的設定

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

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

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

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

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

注：帶“點”的數字鍵盤

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

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

以上原型為例：失去焦點時，從上往下收起鍵盤，當文本框為空時，顯示提示文字“請輸入充值金額”且充值按鈕顯示“充值0元”。

5、輸入框輸入規則說明

最復雜的就是輸入框的輸入規則，一定要說明清楚哦，輸入的類型，數字輸入情況，顯示情況，最小輸入，最大輸入，判斷的觸發點。

以上原型為例：

1. 可輸入小數點，小數點后可輸入2位數，第3位輸入無效；
2. 小數點只在手動輸入時顯示，if快捷充值金額選中時，輸入框不顯示小數點（即充值按鈕也不顯示小數點）；
3. 輸入數字必須大于等于5，否則點擊充值按鈕，toast顯示“充值金額不能少于5元”，3s隱藏。
4. 輸入框實時校驗，當輸入數據大于999999.99，toast顯示“金額最大999999.99”，且輸入框數字變為999999.99

注：最大數字的判斷一般分為2種，一種是位次判斷（即輸入多少位的后，再輸入數字無效），還有一種是數字值判斷（以上原型屬于數字值判斷）。

6、當輸入框為空時，點擊充值按鈕的交互說明

當輸入框為空時，點擊充值按鈕的情況，即沒有指定充值數字和金額，是默認顯示默認規則還是提示輸入？prd一定要寫清楚哦。

以上原型為例：當輸入框為空，即用戶清空了輸入框內的數字，點擊充值按鈕時，toast顯示“請選擇充值金額”，3s隱藏。

7、充值金額的可提現或者處理情況說明

有些業務會涉及到“凍結金額”，即不可提現金額，一般根據產品類型，業務邏輯，對于充值金額的處置情況是不一樣的，可能是為了防止信用卡套現，也有的是因為充值的金額需要消費，不能提，也有的情況是因為充值滿7天才可以提現等。

以上原型為例：充值金額全部為凍結金額，不可提現。

8、充值成功的反饋提示

充值成功之后反饋提示，是跳轉新頁面提示充值成功，還是該頁面按鈕變為充值成功，自動跳轉余額頁面，反饋的方式有很多，需要產品經理想細致，prd標注清楚。

三、充值第三方支付的業務邏輯

以app支付寶方式充值并發起銀行卡充值支付寶余額為例，梳理一下充值的業務邏輯。

四、提現的類型

1、第三方服務接口提現

這種方式對于用戶最為方便，目前大多的大平臺都采用這種方式，與第三方服務接口合作，比如當下風口共享單車的提現。

優點：

• 用戶體驗好，提現速度最快；
• 不需要線下打款，節約企業的人力資源，降低打款錯誤風險；

缺點：

• 提現接口相比于充值接口難很多，開發成本大；
• 因為是第三方接口合作，對于企業的賬戶安全有風險；
• 企業對提現資金的可控性可能會降低。

百度外賣&hello bike

?2、人工線下打款到賬

這種方式適用于app上線初期，業務體系還不成熟，用戶量還不高的時候或者還在開發MVP試錯市場的時候，目前市場上很多小廠的app都采用這種方式提現。

優點：

• 減少開發的量，有助于產品盡快上線；
• 不需要第三方接口合作，有利于增強企業對資金的掌控，可以加入審核機制；

缺點：

• 對于用戶而言不能即時到賬，存在焦慮感；
• 線下人工打款，增加企業的人工成本，并存在打款錯誤風險；
• 存在信息不對稱的情況，如：用戶前臺賬戶已扣款，但線下打款未到賬的情況。

五、提現模塊需求相關細節

下面我以最近做的提現頁面原型作為例子，講一下提現模塊需求的相關細節：

1、進行提現業務的條件說明

進入提現頁面時根據產品業務邏輯判斷用戶是否符合提現業務條件，另外后續該如何引導用戶完成業務條件再進入提現頁面。

以上原型為例：進入提現頁面判斷先判斷是否完成實名認證，再判斷是否已添加提現賬戶，未完成實名認證引導完成實名認證，未添加提現賬戶引導添加提現賬戶。（例：人人都是產品經理平臺的作家打賞所得的余額必須滿100元才能提現。）

2、提現賬戶的設置

提現賬戶的設置和選擇，app是智能設計一個提現賬戶還是多個提現賬戶，提現賬戶的類型有哪些，綁定提現賬戶需要填寫的內容，未添加提現賬戶的引導。

以上原型為例：以上prd截圖的部分只截取了提現頁面，關于提現賬戶的添加為截圖，這里不重點講提現賬戶，以上原型因業務要求，只能綁定一個提現賬戶，進入提現頁面判斷是否添加提現賬戶，未添加彈窗引導。

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

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

以上原型為例：當文本框獲得焦點時，文本框提示文字隱藏，不清空文本框數字，從下往上彈出鍵盤，因為需要輸入內容為數字且可輸入小數點，所以鍵盤類型為帶“點”的數字鍵盤。

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

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

以上原型為例：失去焦點時，從上往下收起鍵盤，當文本框為空時，顯示提示文字“請輸入提現金額”。

5、輸入框輸入規則說明

最復雜的就是輸入框的輸入規則，一定要說明清楚哦，輸入的類型，數字輸入情況，顯示情況，最小輸入，最大輸入，判斷的觸發點。

以上原型為例：

1. 可輸入小數點，小數點只在手動輸入時顯示，小數點后可輸入2位數，第3位輸入無效；
2. 輸入數字必須大于等于10，否則點擊充值按鈕，toast顯示“提現金額不能少于10元”，3s隱藏。

注：根據產品業務，因有判斷輸入金額不能大于可提現金額，所以未限制輸入的最大金額。

6、當輸入框為空時，點擊充值按鈕的交互說明

當輸入框為空時，點擊充值按鈕的情況，即沒有指定充值數字和金額，是默認顯示默認規則還是提示輸入？prd一定要寫清楚哦。

以上原型為例：當輸入框為空，點擊提現按鈕時，toast顯示“請輸入提現金額”，3s隱藏。

7、提現申請成功的反饋提示

提現申請成功之后反饋提示，是跳轉新頁面提示充值成功，還是該頁面彈窗提現申請成功，提示的內容需要結合產品的提現邏輯向用戶進行說明，以免產生不必要的焦慮。

以上原型為例：彈窗提示“提現申請成功”，本原型提現的相關說明，全部放入右上角的說明頁面。

8、是否設置提現密碼

根據不同產品類型和業務邏輯來確定是否需要或有必要設置提現密碼，提現密碼的安全性。

以上原型為例：未設置提現密碼。

六、提現的業務邏輯

第三方支付接口流程

以app調用支付寶接口完成即時提現為例。

人工線下打款流程

七、如何考慮充值提現？

1、產品類型

不同的產品類型需要考究不同的充值提現需求。

比如支付平臺類的產品，充值數字的靈活性，需要用到輸入金額充值，以及輸入金額的額度需要根據產品類型和業務而定；

比如O2O類的產品，主要目的是為了消費，一般只會在發起消費需求的時候直接利用第三方支付平臺支付，而不會先提前充余額，那么有些產品為了達到用戶充余額的運營效果，會出現快捷充值按鈕，并附贈“充50充50”等運營活動。

2、目標用戶

互聯網產品向來準則是用戶至上，那么你的產品目標用戶是什么樣的人，面對不同的目標群里，充值提現也會有不同。

比如：你的目標是企業，那么金額的限制就會不一樣，或者會在C端用戶中加入企業兌換碼充值。

3、業務邏輯

充值提現的業務邏輯一定要梳理通，畫好充值提現以及資金去向的流程圖，有些產品需要加入“凍結金額”的概念，可能用戶端前臺不展示，但是在開發上需要這樣設計。

充值提現的功能使用條件，觸發條件，充值提現的頁面設計都需要根據產品業務來整理，需要做到業務流暢，不然程序猿哥哥要來找你小麻煩咯！

4、注重細節

充值提現的輸入框要求，鍵盤類型，以及輸入框的交互效果，所有情況要考慮清楚，最好原型demo自己所走幾遍，換著不同的情況也走幾遍，備注說明要詳細。

小結

以上是筆者對充值提現模塊的個人總結，希望對你們有所幫助，如有遺漏，歡迎交流補充。

作者：玲子，微信公眾號：玲子奮斗史。職業產品經理，關注互聯網人工智能、商業產品，擅長需求挖掘和運營管理。

本文由 @玲子 原創發布于人人都是產品經理。未經許可，禁止轉載。