产品设计思考充值提现模块解析
⇨⇦
在本文中，笔者将结合自身经历，谈谈对充值提现中涉及到的相关的内容做一个分享。
充值提现已经成为很多app不可或缺的重要部分，无论是支付平台、直播打赏，还是付费阅读、电商消费，凡是涉及业务金钱方面的产品都会涉及到余额账户系统，可以细分为三项功能模块，分别是：充值、提现和账户绑定。
看似简单，却与相当多的产品功能用户使用场景交织在一起，受到产品类型、用户定位、业务逻辑、使用场景、用户操作等不同因素影响，设计好充值提现模块并没有那么简单。
本文主要从以下4个问题进行分析说明：
充值和提现的类型
充值和提现模块需求相关细节
充值和提现的业务流程
如何考虑充值提现
一、充值的类型
1、快捷按钮充值
快捷按钮充值是充值类型中比较常见的，主要根据一些产品类型的特点，会采用快捷按钮，适用于对充值金额没有那么大的灵活需求或对业务产品的针对性高（充值直接涉及获得的服务或者产品）。
快捷按钮充值是比较简单用户操作体验良好的一种充值方式。
优点：
对于用户减少操作步骤，不需要太多思考，用户操作体验良好
对于页面开发，不需要加入太多的输入判断，开发简便
缺点：
可选择的充值金额太少，灵活性不强
注：支付宝话费充值&ofo&百度外卖
2、密码兑换充值
密码兑换充值恐怕应该是最传统最古老的互联网充值方式了，十几年前，qq的Q币充值，游戏充值，都是采用线下店铺售卖点卡的模式，用户刮点卡获得密码，上网兑换，达到充值的效果。
目前随着互联网发展，出现了很多第三方支付平台，比如支付宝、微信支付、银联支付…这种密码兑换的充值方式渐渐被取代。
当然，目前密码兑换充值的方式以线上兑换码代替点卡广泛用于运营维护，比如：老用户的唤活，特殊节假日点赠送兑换码，电商平台与B端的合作等。
注：百度糯米&百度外卖&天天果园
3、输入金额充值
输入金额充值也是app充值中比较常见的，部分app以快捷按钮充值和输入金额充值一起也有。
优点：输入的数字灵活性更高，可以满足用户对不同金额的充值需求。
缺点：输入框的判断逻辑太多，影响用户体验，相比快捷按钮，操作复杂。
注：微信&天天中彩票&天天果园
有没有觉得这种方式最简单，一个输入框就ok了，但是看似简单，最不简单的就是输入金额充值。
输入框的默认显示是？输入类型的限制？输入的最大金额？最小金额？是输入框实时校验还是点击充值按钮后判断？判断的要求？判断后提示的显示怎么显示？还有键盘的弹出和隐藏规则，键盘类型？
二、充值模块需求相关细节
下面我以最近做的充值页面原型作为例子，讲一下输入快捷按钮+金额充值方式的原型设计：
1、进行充值业务的条件说明
进入充值页面时根据产品业务逻辑判断用户是否符合业务条件，另外后续该如何引导用户完成业务条件再进入充值页面。
以上原型为例：进入充值页面判断是否完成实名认证，未完成，引导用户完成实名认证。（例：是否完成押金充值，共享单车必须完成押金充值才能对余额进行充值）。
2、默认显示规则的设定
页面的默认显示，输入框内的显示，快捷充值按钮的显示，充值按钮的显示，键盘的弹出情况说明。
以上原型为例：默认显示规则为快捷按钮＂100元＂默认选中，输入框内默认显示＂100元＂，充值按钮显示充值对应输入框内金额。
3、文本框获得焦点时以及键盘交互说明
当文本框获得焦点时，文本框的交互情况，键盘的类型，键盘的交互。
以上原型为例：当文本框获得焦点时，文本框提示文字隐藏，不清空文本框数字，从下往上弹出键盘，因为需要输入内容为数字且可输入小数点，所以键盘类型为带＂点＂的数字键盘。（注：键盘的类型有很多，为了达到最好的用户体验，根据不同的页面和需求弹出不同类型的键盘，prd中一定要写清楚，否则程序猿哥哥就会用默认键盘）
注：带＂点＂的数字键盘
4、文本框失去焦点时以及键盘交互说明
当文本框失去焦点时，文本框的交互情况，按钮的显示，键盘的交互。
以上原型为例：失去焦点时，从上往下收起键盘，当文本框为空时，显示提示文字＂请输入充值金额＂且充值按钮显示＂充值0元＂。
5、输入框输入规则说明
最复杂的就是输入框的输入规则，一定要说明清楚哦，输入的类型，数字输入情况，显示情况，最小输入，最大输入，判断的触发点。
以上原型为例：
可输入小数点，小数点后可输入2位数，第3位输入无效；
小数点只在手动输入时显示，if快捷充值金额选中时，输入框不显示小数点（即充值按钮也不显示小数点）；
输入数字必须大于等于5，否则点击充值按钮，toast显示＂充值金额不能少于5元＂，3s隐藏。
输入框实时校验，当输入数据大于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、输入框输入规则说明
最复杂的就是输入框的输入规则，一定要说明清楚哦，输入的类型，数字输入情况，显示情况，最小输入，最大输入，判断的触发点。
以上原型为例：
可输入小数点，小数点只在手动输入时显示，小数点后可输入2位数，第3位输入无效；
输入数字必须大于等于10，否则点击充值按钮，toast显示＂提现金额不能少于10元＂，3s隐藏。
注：根据产品业务，因有判断输入金额不能大于可提现金额，所以未限制输入的最大金额。
6、当输入框为空时，点击充值按钮的交互说明
当输入框为空时，点击充值按钮的情况，即没有指定充值数字和金额，是默认显示默认规则还是提示输入？prd一定要写清楚哦。
以上原型为例：当输入框为空，点击提现按钮时，toast显示＂请输入提现金额＂，3s隐藏。
7、提现申请成功的反馈提示
提现申请成功之后反馈提示，是跳转新页面提示充值成功，还是该页面弹窗提现申请成功，提示的内容需要结合产品的提现逻辑向用户进行说明，以免产生不必要的焦虑。
以上原型为例：弹窗提示＂提现申请成功＂，本原型提现的相关说明，全部放入右上角的说明页面。
8、是否设置提现密码
根据不同产品类型和业务逻辑来确定是否需要或有必要设置提现密码，提现密码的安全性。
以上原型为例：未设置提现密码。
六、提现的业务逻辑
第三方支付接口流程
以app调用支付宝接口完成即时提现为例。
人工线下打款流程
七、如何考虑充值提现？
1、产品类型
不同的产品类型需要考究不同的充值提现需求。
比如支付平台类的产品，充值数字的灵活性，需要用到输入金额充值，以及输入金额的额度需要根据产品类型和业务而定；
比如O2O类的产品，主要目的是为了消费，一般只会在发起消费需求的时候直接利用第三方支付平台支付，而不会先提前充余额，那么有些产品为了达到用户充余额的运营效果，会出现快捷充值按钮，并附赠＂充50充50＂等运营活动。
2、目标用户
互联网产品向来准则是用户至上，那么你的产品目标用户是什么样的人，面对不同的目标群里，充值提现也会有不同。
比如：你的目标是企业，那么金额的限制就会不一样，或者会在C端用户中加入企业兑换码充值。
3、业务逻辑
充值提现的业务逻辑一定要梳理通，画好充值提现以及资金去向的流程图，有些产品需要加入＂冻结金额＂的概念，可能用户端前台不展示，但是在开发上需要这样设计。
充值提现的功能使用条件，触发条件，充值提现的页面设计都需要根据产品业务来整理，需要做到业务流畅，不然程序猿哥哥要来找你小麻烦咯！
4、注重细节
充值提现的输入框要求，键盘类型，以及输入框的交互效果，所有情况要考虑清楚，最好原型demo自己所走几遍，换着不同的情况也走几遍，备注说明要详细。
小结
以上是笔者对充值提现模块的个人总结，希望对你们有所帮助，如有遗漏，欢迎交流补充。