在本文中，筆者將結(jié)合自身經(jīng)歷，談?wù)剬Τ渲堤岈F(xiàn)中涉及到的相關(guān)的內(nèi)容做一個分享。

充值提現(xiàn)已經(jīng)成為很多app不可或缺的重要部分，無論是支付平臺、直播打賞，還是付費(fèi)閱讀、電商消費(fèi)，凡是涉及業(yè)務(wù)金錢方面的產(chǎn)品都會涉及到余額賬戶系統(tǒng)，可以細(xì)分為三項功能模塊，分別是：充值、提現(xiàn)和賬戶綁定。

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

本文主要從以下4個問題進(jìn)行分析說明：

• 充值和提現(xiàn)的類型
• 充值和提現(xiàn)模塊需求相關(guān)細(xì)節(jié)
• 充值和提現(xiàn)的業(yè)務(wù)流程
• 如何考慮充值提現(xiàn)

一、充值的類型

1、快捷按鈕充值

快捷按鈕充值是充值類型中比較常見的，主要根據(jù)一些產(chǎn)品類型的特點(diǎn)，會采用快捷按鈕，適用于對充值金額沒有那么大的靈活需求或?qū)I(yè)務(wù)產(chǎn)品的針對性高（充值直接涉及獲得的服務(wù)或者產(chǎn)品）。

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

優(yōu)點(diǎn)：

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

缺點(diǎn)：

• 可選擇的充值金額太少，靈活性不強(qiáng)

注：支付寶話費(fèi)充值&ofo&百度外賣

2、密碼兌換充值

密碼兌換充值恐怕應(yīng)該是最傳統(tǒng)最古老的互聯(lián)網(wǎng)充值方式了，十幾年前，qq的Q幣充值，游戲充值，都是采用線下店鋪售賣點(diǎn)卡的模式，用戶刮點(diǎn)卡獲得密碼，上網(wǎng)兌換，達(dá)到充值的效果。

目前隨著互聯(lián)網(wǎng)發(fā)展，出現(xiàn)了很多第三方支付平臺，比如支付寶、微信支付、銀聯(lián)支付…這種密碼兌換的充值方式漸漸被取代。

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

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

3、輸入金額充值

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

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

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

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

輸入框的默認(rèn)顯示是？輸入類型的限制？輸入的最大金額？最小金額？是輸入框?qū)崟r校驗還是點(diǎn)擊充值按鈕后判斷？判斷的要求？判斷后提示的顯示怎么顯示？還有鍵盤的彈出和隱藏規(guī)則，鍵盤類型？

二、充值模塊需求相關(guān)細(xì)節(jié)

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

1、進(jìn)行充值業(yè)務(wù)的條件說明

進(jìn)入充值頁面時根據(jù)產(chǎn)品業(yè)務(wù)邏輯判斷用戶是否符合業(yè)務(wù)條件，另外后續(xù)該如何引導(dǎo)用戶完成業(yè)務(wù)條件再進(jìn)入充值頁面。

以上原型為例：進(jìn)入充值頁面判斷是否完成實(shí)名認(rèn)證，未完成，引導(dǎo)用戶完成實(shí)名認(rèn)證。（例：是否完成押金充值，共享單車必須完成押金充值才能對余額進(jìn)行充值）。

2、默認(rèn)顯示規(guī)則的設(shè)定

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

以上原型為例：默認(rèn)顯示規(guī)則為快捷按鈕“100元”默認(rèn)選中，輸入框內(nèi)默認(rèn)顯示“100元”，充值按鈕顯示充值對應(yīng)輸入框內(nèi)金額。

3、文本框獲得焦點(diǎn)時以及鍵盤交互說明

當(dāng)文本框獲得焦點(diǎn)時，文本框的交互情況，鍵盤的類型，鍵盤的交互。

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

注：帶“點(diǎn)”的數(shù)字鍵盤

4、文本框失去焦點(diǎn)時以及鍵盤交互說明

當(dāng)文本框失去焦點(diǎn)時，文本框的交互情況，按鈕的顯示，鍵盤的交互。

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

5、輸入框輸入規(guī)則說明

最復(fù)雜的就是輸入框的輸入規(guī)則，一定要說明清楚哦，輸入的類型，數(shù)字輸入情況，顯示情況，最小輸入，最大輸入，判斷的觸發(fā)點(diǎn)。

以上原型為例：

1. 可輸入小數(shù)點(diǎn)，小數(shù)點(diǎn)后可輸入2位數(shù)，第3位輸入無效；
2. 小數(shù)點(diǎn)只在手動輸入時顯示，if快捷充值金額選中時，輸入框不顯示小數(shù)點(diǎn)（即充值按鈕也不顯示小數(shù)點(diǎn)）；
3. 輸入數(shù)字必須大于等于5，否則點(diǎn)擊充值按鈕，toast顯示“充值金額不能少于5元”，3s隱藏。
4. 輸入框?qū)崟r校驗，當(dāng)輸入數(shù)據(jù)大于999999.99，toast顯示“金額最大999999.99”，且輸入框數(shù)字變?yōu)?99999.99

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

6、當(dāng)輸入框為空時，點(diǎn)擊充值按鈕的交互說明

當(dāng)輸入框為空時，點(diǎn)擊充值按鈕的情況，即沒有指定充值數(shù)字和金額，是默認(rèn)顯示默認(rèn)規(guī)則還是提示輸入？prd一定要寫清楚哦。

以上原型為例：當(dāng)輸入框為空，即用戶清空了輸入框內(nèi)的數(shù)字，點(diǎn)擊充值按鈕時，toast顯示“請選擇充值金額”，3s隱藏。

7、充值金額的可提現(xiàn)或者處理情況說明

有些業(yè)務(wù)會涉及到“凍結(jié)金額”，即不可提現(xiàn)金額，一般根據(jù)產(chǎn)品類型，業(yè)務(wù)邏輯，對于充值金額的處置情況是不一樣的，可能是為了防止信用卡套現(xiàn)，也有的是因為充值的金額需要消費(fèi)，不能提，也有的情況是因為充值滿7天才可以提現(xiàn)等。

以上原型為例：充值金額全部為凍結(jié)金額，不可提現(xiàn)。

8、充值成功的反饋提示

充值成功之后反饋提示，是跳轉(zhuǎn)新頁面提示充值成功，還是該頁面按鈕變?yōu)槌渲党晒?，自動跳轉(zhuǎn)余額頁面，反饋的方式有很多，需要產(chǎn)品經(jīng)理想細(xì)致，prd標(biāo)注清楚。

三、充值第三方支付的業(yè)務(wù)邏輯

以app支付寶方式充值并發(fā)起銀行卡充值支付寶余額為例，梳理一下充值的業(yè)務(wù)邏輯。

四、提現(xiàn)的類型

1、第三方服務(wù)接口提現(xiàn)

這種方式對于用戶最為方便，目前大多的大平臺都采用這種方式，與第三方服務(wù)接口合作，比如當(dāng)下風(fēng)口共享單車的提現(xiàn)。

優(yōu)點(diǎn)：

• 用戶體驗好，提現(xiàn)速度最快；
• 不需要線下打款，節(jié)約企業(yè)的人力資源，降低打款錯誤風(fēng)險；

缺點(diǎn)：

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

百度外賣&hello bike

?2、人工線下打款到賬

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

優(yōu)點(diǎn)：

• 減少開發(fā)的量，有助于產(chǎn)品盡快上線；
• 不需要第三方接口合作，有利于增強(qiáng)企業(yè)對資金的掌控，可以加入審核機(jī)制；

缺點(diǎn)：

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

五、提現(xiàn)模塊需求相關(guān)細(xì)節(jié)

下面我以最近做的提現(xiàn)頁面原型作為例子，講一下提現(xiàn)模塊需求的相關(guān)細(xì)節(jié)：

1、進(jìn)行提現(xiàn)業(yè)務(wù)的條件說明

進(jìn)入提現(xiàn)頁面時根據(jù)產(chǎn)品業(yè)務(wù)邏輯判斷用戶是否符合提現(xiàn)業(yè)務(wù)條件，另外后續(xù)該如何引導(dǎo)用戶完成業(yè)務(wù)條件再進(jìn)入提現(xiàn)頁面。

以上原型為例：進(jìn)入提現(xiàn)頁面判斷先判斷是否完成實(shí)名認(rèn)證，再判斷是否已添加提現(xiàn)賬戶，未完成實(shí)名認(rèn)證引導(dǎo)完成實(shí)名認(rèn)證，未添加提現(xiàn)賬戶引導(dǎo)添加提現(xiàn)賬戶。（例：人人都是產(chǎn)品經(jīng)理平臺的作家打賞所得的余額必須滿100元才能提現(xiàn)。）

2、提現(xiàn)賬戶的設(shè)置

提現(xiàn)賬戶的設(shè)置和選擇，app是智能設(shè)計一個提現(xiàn)賬戶還是多個提現(xiàn)賬戶，提現(xiàn)賬戶的類型有哪些，綁定提現(xiàn)賬戶需要填寫的內(nèi)容，未添加提現(xiàn)賬戶的引導(dǎo)。

以上原型為例：以上prd截圖的部分只截取了提現(xiàn)頁面，關(guān)于提現(xiàn)賬戶的添加為截圖，這里不重點(diǎn)講提現(xiàn)賬戶，以上原型因業(yè)務(wù)要求，只能綁定一個提現(xiàn)賬戶，進(jìn)入提現(xiàn)頁面判斷是否添加提現(xiàn)賬戶，未添加彈窗引導(dǎo)。

3、文本框獲得焦點(diǎn)時以及鍵盤交互說明

當(dāng)文本框獲得焦點(diǎn)時，文本框的交互情況，鍵盤的類型，鍵盤的交互。

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

4、文本框失去焦點(diǎn)時以及鍵盤交互說明

當(dāng)文本框失去焦點(diǎn)時，文本框的交互情況，按鈕的顯示，鍵盤的交互。

以上原型為例：失去焦點(diǎn)時，從上往下收起鍵盤，當(dāng)文本框為空時，顯示提示文字“請輸入提現(xiàn)金額”。

5、輸入框輸入規(guī)則說明

最復(fù)雜的就是輸入框的輸入規(guī)則，一定要說明清楚哦，輸入的類型，數(shù)字輸入情況，顯示情況，最小輸入，最大輸入，判斷的觸發(fā)點(diǎn)。

以上原型為例：

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

注：根據(jù)產(chǎn)品業(yè)務(wù)，因有判斷輸入金額不能大于可提現(xiàn)金額，所以未限制輸入的最大金額。

6、當(dāng)輸入框為空時，點(diǎn)擊充值按鈕的交互說明

當(dāng)輸入框為空時，點(diǎn)擊充值按鈕的情況，即沒有指定充值數(shù)字和金額，是默認(rèn)顯示默認(rèn)規(guī)則還是提示輸入？prd一定要寫清楚哦。

以上原型為例：當(dāng)輸入框為空，點(diǎn)擊提現(xiàn)按鈕時，toast顯示“請輸入提現(xiàn)金額”，3s隱藏。

7、提現(xiàn)申請成功的反饋提示

提現(xiàn)申請成功之后反饋提示，是跳轉(zhuǎn)新頁面提示充值成功，還是該頁面彈窗提現(xiàn)申請成功，提示的內(nèi)容需要結(jié)合產(chǎn)品的提現(xiàn)邏輯向用戶進(jìn)行說明，以免產(chǎn)生不必要的焦慮。

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

8、是否設(shè)置提現(xiàn)密碼

根據(jù)不同產(chǎn)品類型和業(yè)務(wù)邏輯來確定是否需要或有必要設(shè)置提現(xiàn)密碼，提現(xiàn)密碼的安全性。

以上原型為例：未設(shè)置提現(xiàn)密碼。

六、提現(xiàn)的業(yè)務(wù)邏輯

第三方支付接口流程

以app調(diào)用支付寶接口完成即時提現(xiàn)為例。

人工線下打款流程

七、如何考慮充值提現(xiàn)？

1、產(chǎn)品類型

不同的產(chǎn)品類型需要考究不同的充值提現(xiàn)需求。

比如支付平臺類的產(chǎn)品，充值數(shù)字的靈活性，需要用到輸入金額充值，以及輸入金額的額度需要根據(jù)產(chǎn)品類型和業(yè)務(wù)而定；

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

2、目標(biāo)用戶

互聯(lián)網(wǎng)產(chǎn)品向來準(zhǔn)則是用戶至上，那么你的產(chǎn)品目標(biāo)用戶是什么樣的人，面對不同的目標(biāo)群里，充值提現(xiàn)也會有不同。

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

3、業(yè)務(wù)邏輯

充值提現(xiàn)的業(yè)務(wù)邏輯一定要梳理通，畫好充值提現(xiàn)以及資金去向的流程圖，有些產(chǎn)品需要加入“凍結(jié)金額”的概念，可能用戶端前臺不展示，但是在開發(fā)上需要這樣設(shè)計。

充值提現(xiàn)的功能使用條件，觸發(fā)條件，充值提現(xiàn)的頁面設(shè)計都需要根據(jù)產(chǎn)品業(yè)務(wù)來整理，需要做到業(yè)務(wù)流暢，不然程序猿哥哥要來找你小麻煩咯！

4、注重細(xì)節(jié)

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

小結(jié)

以上是筆者對充值提現(xiàn)模塊的個人總結(jié)，希望對你們有所幫助，如有遺漏，歡迎交流補(bǔ)充。

作者：玲子，微信公眾號：玲子奮斗史。職業(yè)產(chǎn)品經(jīng)理，關(guān)注互聯(lián)網(wǎng)人工智能、商業(yè)產(chǎn)品，擅長需求挖掘和運(yùn)營管理。

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