充值提现已经成为很多app不成或缺的重要部分，无论是支付平台、直播打赏，还是付费阅读、电商消费，凡是涉及业务金钱方面的产品都会涉及到余额账户系统，可以细分为三项功能模块，别离是：充值、提现和账户绑定。

看似简单，却与相当多的产品功能用户使用场景交织在一起，受到产品类型、用户定位、业务逻辑、使用场景、用户操作等差别因素影响，设计好充值提现模块并没有那么简单。

本文主要从以下4个问题进行分析说明：

充值和提现的类型充值和提现模块需求相关细节充值和提现的业务流程如何考虑充值提现一、充值的类型1、快捷按钮充值

快捷按钮充值是充值类型中比较常见的，主要按照一些产品类型的特点，会采用快捷按钮，适用于对充值金额没有那么大的灵活需求或对业务产品的针对性高（充值直接涉及获得的办事或者产品）。

快捷按钮充值是比较简单用户操作体验良好的一种充值方式。

优点：

对于用户减少操作步骤，不需要太多思考，用户操作体验良好对于页面开发，不需要加入太多的输入判断，开发简便

缺点：

可选择的充值金额太少，灵活性不强

注：支付宝话费充值&ofo&百度外卖

2、密码兑换充值

密码兑换充值恐怕应该是最传统最古老的互联网充值方式了，十几年前，qq的Q币充值，游戏充值，都是采用线下店铺售卖点卡的模式，用户刮点卡获得密码，上网兑换，达到充值的效果。

目前随着互联网发展，出现了很多第三方支付平台，好比支付宝、微信支付、银联支付…这种密码兑换的充值方式渐渐被取代。

当然，目前密码兑换充值的方式以线上兑换码代替点卡广泛用于运营维护，好比：老用户的唤活，特殊节假日点赠送兑换码，电商平台与B端的合作等。

注：百度糯米&百度外卖&天天果园

3、输入金额充值

输入金额充值也是app充值中比较常见的，部分app以快捷按钮充值和输入金额充值一起也有。

优点：输入的数字灵活性更高，可以满足用户对差别金额的充值需求。缺点：输入框的判断逻辑太多，影响用户体验，比拟快捷按钮，操作复杂。

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

有没有觉得这种方式最简单，一个输入框就ok了，但是看似简单，最不简单的就是输入金额充值。

输入框的默认显示是？输入类型的限制？输入的最大金额？最小金额？是输入框实时校验还是点击充值按钮后判断？判断的要求？判断后提示的显示怎么显示？还有键盘的弹出和隐藏规则，键盘类型？

二、充值模块需求相关细节

下面我以比来做的充值页面原型作为例子，讲一下输入快捷按钮+金额充值方式的原型设计：

1、进行充值业务的条件说明

进入充值页面时按照产品业务逻辑判断用户是否符合业务条件，别的后续该如何引导用户完成业务条件再进入充值页面。

以上原型为例：进入充值页面判断是否完成实名认证，未完成，引导用户完成实名认证。（例：是否完成押金充值，共享单车必需完成押金充值才能对余额进行充值）。

2、默认显示规则的设定

页面的默认显示，输入框内的显示，快捷充值按钮的显示，充值按钮的显示，键盘的弹出情况说明。

以上原型为例：默认显示规则为快捷按钮“100元”默认选中，输入框内默认显示“100元”，充值按钮显示充值对应输入框内金额。

3、文本框获得焦点时以及键盘交互说明

当文本框获得焦点时，文本框的交互情况，键盘的类型，键盘的交互。

以上原型为例：当文本框获得焦点时，文本框提示文字隐藏，不清空文本框数字，从下往上弹出键盘，因为需要输入内容为数字且可输入小数点，所以键盘类型为带“点”的数字键盘。（注：键盘的类型有很多，为了达到最好的用户体验，按照差别的页面和需求弹出差别类型的键盘，prd中必然要写清楚，不然程序猿哥哥就会用默认键盘）

注：带“点”的数字键盘

4、文本框失去焦点时以及键盘交互说明

当文本框失去焦点时，文本框的交互情况，按钮的显示，键盘的交互。