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

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

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

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

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

快捷按鈕充值是比較簡(jiǎn)單用戶操作體驗(yàn)良好的一種充值方式。

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

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

缺點(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)了很多第三方支付平臺(tái)，好比支付寶、微信支付、銀聯(lián)支付…這種密碼兌換的充值方式漸漸被取代。

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

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

3、輸入金額充值

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

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

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

有沒(méi)有覺得這種方式最簡(jiǎn)單，一個(gè)輸入框就ok了，但是看似簡(jiǎn)單，最不簡(jiǎn)單的就是輸入金額充值。

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

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

下面我以比來(lái)做的充值頁(yè)面原型作為例子，講一下輸入快捷按鈕+金額充值方式的原型設(shè)計(jì)：

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

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

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

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

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

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

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

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

以上原型為例：當(dāng)文本框獲得焦點(diǎn)時(shí)，文本框提示文字隱藏，不清空文本框數(shù)字，從下往上彈出鍵盤，因?yàn)樾枰斎雰?nèi)容為數(shù)字且可輸入小數(shù)點(diǎn)，所以鍵盤類型為帶“點(diǎn)”的數(shù)字鍵盤。（注：鍵盤的類型有很多，為了達(dá)到最好的用戶體驗(yàn)，按照差別的頁(yè)面和需求彈出差別類型的鍵盤，prd中必然要寫清楚，不然程序猿哥哥就會(huì)用默認(rèn)鍵盤）

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

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

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

標(biāo)簽：東營(yíng) 林芝 鹽城 烏魯木齊 九江