蚂蚁财富余额宝转入详细说明 - zachard/product GitHub Wiki
用户可以通过余额宝的转入功能将资金转入到余额宝, 从而获取一定的理财收益.
用户将资金转入余额宝主要包含选择付款方式、输入转入金额、输入支付密码等步骤, 转入功能的业务流程图如图1-1所示:
(1) 从余额宝页面进入到转入余额宝页面时, 付款方式选择框组件根据默认付款方式选择规则回显对应的付款方式, 付款方式选择框组件包含付款方式logo、 付款方式名称、付款方式限额说明三个要素. 如图2-1-(a)所示.
注: 付款方式选择框数据展现规则参见付款方式选择框组件规则
(2) 在图2-1-(a)中单击付款方式选择框, 显示选择付款方式面板和遮罩.
(2.1) 选择付款方式面板的出现方式为从页面底部向上动态线性滑入, 时间为200毫秒
(2.2) 遮罩与选择付款方式面板同步从页面顶部向下动态线性滑入, 时间为0毫秒, 选择付款方式面板出现在遮罩的上层
(2.3) 选择付款方式面板出现时默认选中回显在图2-1-(a)中的付款方式, 如图2-1-(b)所示
注: 选择付款方式面板中付款方式的呈现规则参见余额宝转入选择付款方式面板付款方式呈现规则.
(3) 单击图2-1-(b)中选择付款方式面板的关闭按钮(✕)
(3.1) 隐藏选择付款方式面板和遮罩, 选择付款方式面板的隐藏方式为向页面底部动态线性滑出页面, 时间为200毫秒
(3.2) 遮罩与选择付款方式面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒
(3.3) 关闭选择付款方式面板不触发任何页面数据的修改, 选择付款方式面板关闭后, 页面展示如图2-1的(a)所示
(4) 单击图2-1-(b)中选择付款方式面板的问询按钮, 页面跳转到我的客服页面, 如图2-1-(e)所示. 此时, 单击图2-1-(e)中返回按钮, 重新回到步骤(1)中的转入余额宝页面. 如图2-1-(a)所示.
(5) 单击图2-1-(b)中选择付款方式面板下可选择的付款方式.
(5.1) 如果选择的付款方式为账户余额, 将图2-1-(a)付款方式选择框组件中的
(a) 付款方式logo设置为账户余额选中状态下的logo(与选择付款方式面板中展示logo不一致)
(b) 付款方式名称设置为账户余额
(c) 付款方式限额说明设置为账户余额中的当前余额, 单位为元
(d) 显示转入金额输入框后面的全部按钮, 如图2-1-(a)所示
(e) 将选择付款方式面板中账户余额付款方式设置为选中状态, 其他付款方式取消选中状态.
(f) 隐藏选择付款方式面板和遮罩, 隐藏方式与步骤(3)一致.
(5.2) 如果选择的付款方式为银行储蓄卡, 将图2-1-(a)付款方式选择框组件中的
(a) 付款方式logo设置为对应银行的logo
(b) 付款方式名称设置为对应银行的简称
(c) 付款方式限额说明设置为: 该卡本次最多可转入[maxIntoAmount]元
(d) 隐藏转入金额输入框后面的全部按钮, 如图2-1-(c)所示
(e) 将选择付款方式面板中对应银行的付款方式设置为选中状态, 其他付款方式取消选中状态, 如图2-1-(d)所示
(f) 隐藏选择付款方式面板和遮罩, 隐藏方式与步骤(3)一致.
注:
[maxIntoAmount]为银行对应的单笔限额. 保留两位小数.
| 序号 | 规则名称 | 规则说明 |
|---|---|---|
| 1 | 默认付款方式选择规则 | (1): 如果账户余额不为0, 则默认付款方式为账户余额.(2): 在(1)不成立的情况下, 根据当前帐号中绑定的银行储蓄卡顺序选择第一张绑定的银行储蓄卡. |
| 2 | 付款方式选择框组件规则 | (1): 当付款方式选择为账户余额时, 付款方式logo设置为账户余额特定的logo, 付款方式名称设置为账户余额, 付款方式限额说明设置为: [balance]元. 显示转入金额输入框后面的全部按钮.(2): 当付款方式选择银行储蓄卡时, 付款方式logo设置为银行logo, 付款方式名称设置为银行简称, 付款方式限额说明设置为: 该卡本次最多可转入[singleStrokeAmount]元, 隐藏转入金额输入框后面的全部按钮. |
| 3 | 余额宝转入选择付款方式面板付款方式呈现规则 | (1): 选择付款方式面板中的付款方式包含所有已经绑定的储蓄卡和信用卡、以及账户余额、余额宝. 除了展示付款方式之外, 增加一条添加银行卡付款, 用于为用户提供便捷绑卡入口.(2): 面板中付款方式包含付款方式 logo、付款方式名称、付款方式说明、是否选中标识.(3): 付款方式从上到下的排序规则为: 账户余额(启用状态)>储蓄卡(启用状态)> 添加银行卡支付>账户余额(禁用状态)>储蓄卡(禁用状态)>信用卡(禁用状态)>余额宝(禁用状态). 相同状态下的储蓄卡和信用卡按添加顺序排列.(4): 付款方式在启用状态下, 正常展示且可被选中, 在禁用状态下置灰且不可被选中. (5): 当账户余额的剩余金额大于0时, 账户余额付款方式处于启用状态, 启用状态下展示账户余额付款方式 logo、付款方式名称, 隐藏付款方式说明. 付款方式名称的格式为: 账户余额 (剩余: ¥[balance]); 当账户余额剩余金额为0时, 账户余额付款方式处于禁用状态, 禁用状态下展示账户余额付款方式logo、付款方式名称和付款方式说明, 付款方式名称的格式为: 账户余额 (剩余: ¥[balance]), 付款方式说明设置为: 金额不足.(6): 储蓄卡付款方式的付款方式 logo设置为银行的logo, 付款方式名称的格式为: [bankName]储蓄卡(tailNum), 付款方式说明设置为: 银行单笔限额[singleStrokeAmount]元. 默认为启用状态.(7): 添加银行卡付款隐藏付款方式logo, 付款方式名称设置为: 添加银行卡付款, 付款方式说明设置为: 该交易仅支持储蓄卡. 始终保持为启用状态. 单击之后不会更新为选中状态, 而是进入银行卡绑卡流程. (8): 信用卡付款方式的付款方式 logo设置为银行的logo, 付款方式名称的格式为: [bankName]信用卡(tailNum), 付款方式说明设置为: 该付款方式不支持当前交易. 始终保持为禁用状态.(9): 余额宝付款方式的付款方式 logo设置为余额宝的logo, 付款方式名称设置为: 余额宝, 付款方式说明设置为: 该付款方式不支持当前交易. 始终保持为禁用状态.(10): 单击选择付款方式面板中任意启用状态下的付款方式, 将对应的付款方式设置为选中状态, 同时取消其他付款方式的选中状态. |
注: (1) [balance]表示当前可用的账户余额.
(2) [singleStrokeAmount]表示对应银行单笔交易限额.
(3): [bankName]表示银行对应的简称.
(4) [tailNum]表示银行卡号后四位.
(1) 从余额宝页面进入到转入余额宝页面时.
(1.1) 转入金额输入框为空并展示内容为"请输入转入金额"的hint提示语
(1.2) 根据2.1步骤中选择的付款方式决定是否隐藏全部按钮, 当选择的付款方式为账户余额时, 显示全部按钮, 否则隐藏全部按钮
(1.3) 隐藏清除金额按钮
(1.4) 提示语提示转入金额预计收益到账时间, 格式为: 预计收益到账时间 [date]([dayOfWeek])
(1.5) 确认转入按钮设置为禁用状态
如图2-2-(a)所示.
注: (1) [date]表示转入余额宝预计到账收益日期, 格式为MM-dd.
(2) [dayOfWeek]表示转入余额宝预计到账收益日期为一周中的第几天. 展示示例: 星期三.
(3)[date]([dayOfWeek])标红显示.
(4) 收益到账时间计算参见收益规则.
(2) 单击转入金额输入框, 转入金额输入框获取焦点, 隐藏转入金额输入框的hint提示语, 唤起数字键盘, 如图2-2-(b)所示. 数字键盘按键的输入规则参见全局说明中的键盘说明.
(3) 通过单击数字键盘上的数字按键及清除按键, 可以改变转入金额输入框中对应的转入金额
(3.1) 当转入金额输入框中的金额为空时
(a) 输入金额转入框获取焦点
(b) 隐藏清除金额按钮
(c) 提示语显示转入金额预计收益到账时间, 格式与(1)中一致
(d) 确认转入按钮设置为禁用状态
(e) 数字键盘的确定按钮设置为禁用状态
(f) 将选择付款方式面板对应付款方式选择框中的付款方式设置为启用状态并选中
如图2-2-(b)所示.
(3.2) 当转入金额输入框中的金额不为空且没有超过[maxAmount]时
(a) 转入金额输入框获取焦点
(b) 显示清除金额按钮
(c) 提示语显示转入金额预计收益到账时间, 格式与(1)中一致
(d) 确认转入按钮设置为启用状态
(e) 数字键盘的确定按钮设置为启用状态
(f) 将选择付款方式面板对应付款方式选择框中的付款方式设置为启用状态并选中
如图2-2-(c)所示.
(3.3) 当转入金额输入框中的金额超过[maxAmount]时
(a) 转入金额输入框获取焦点
(b) 显示清除金额按钮
(c) 提示语设置为: 转入金额超限, 标红显示
(d) 确认转入按钮设置禁用状态
(e) 数字键盘的确定按钮设置为启用状态
(f) 将选择付款方式面板中已选择的付款方式取消选中并设置为禁用状态
如图2-2-(d)所示. 选择付款方式面板如图2-2-(f)所示.
注: (1) [maxAmount]为最大可转入金额, 当选择的付款方式为账户余额时, [maxAmount]为当前账户中的余额, 当选择的付款方式为银行卡时, [maxAmount]为对应银行单笔限额.
(4) 单击数字键盘上的确定按键或隐藏按键或者除数字键盘及转入金额输入框外的其他区域, 隐藏数字键盘, 转入金额输入框失去焦点, 隐藏清除金额按钮, 并且
(4.1) 当转入金额输入框中的金额为空时
(a) 转入金额输入框内容设置为"请输入转入金额"的hint提示语
(b) 提示语显示转入金额预计收益到账时间, 格式与(1)中一致
(c) 确认转入按钮设置为禁用状态
(d) 将选择付款方式面板对应付款方式选择框中的付款方式设置为启用状态并选中
如图2-2-(a)所示.
(4.2) 当转入金额输入框中的金额不为空且不超过[maxAmount]时
(a) 转入金额输入框内容设置为输入的金额
(b) 提示语显示转入金额预计收益到账时间, 格式与(1)中一致
(c) 确定转入按钮设置为启用状态
(d) 将选择付款方式面板对应付款方式选择框中的付款方式设置为启用状态并选中
(4.3) 当转入金额输入框中的金额超过[maxAmount]时
(a) 转入金额输入框内容设置为输入的金额
(b) 提示语设置为: 转入金额超限, 标红显示
(c) 确定转入按钮设置为禁用状态
(d) 将选择付款方式面板中已选择的付款方式取消选中并设置为禁用状态
如图2-2-(e)所示.
注: (1) [maxAmount]为最大可转入金额, 当选择的付款方式为账户余额时, [maxAmount]为当前账户中的余额, 当选择的付款方式为银行卡时, [maxAmount]为对应银行单笔限额.
(5) 当付款方式选择账户余额时, 显示全部按钮, 当单击全部按钮时
(5.1) 转入金额输入框内容设置为当前账户所有可用余额
(5.2) 隐藏数字键盘
(5.2) 隐藏清除金额按钮
(5.3) 提示语显示转入金额预计收益到账时间, 格式与(1)中一致
(5.4) 确认转入按钮设置为启用状态
(5.5) 选择付款方式面板中账户余额付款方式设置为启用状态并选中
如图2-2-(c)所示.
(6) 当转入金额输入框获取焦点并且不为空时, 显示清除金额按钮, 当单击清除金额按钮时
(6.1) 清空转入金额输入框中已经输入的金额, 转入金额输入框获取焦点
(6.2) 隐藏清除金额按钮
(6.3) 提示语显示转入金额预计收益到账时间, 格式与(1)中一致
(6.4) 确认转入按钮设置为禁用状态
(6.5) 数字键盘的确定按键设置为禁用状态
(6.6) 将选择付款方式面板对应付款方式选择框中的付款方式设置为启用状态并选中
如图2-2-(b)所示.
| 序号 | 规则名称 | 规则说明 |
|---|---|---|
| 1 | 转入金额输入框校验规则 | (1): 初始化时显示hint提示语: 请输入转入金额.(2): 获取焦点时, 隐藏hint提示语.(3): 最大长度为11.(4): 只能输入数字和小数点, 最多保留两位小数. |
| 2 | 收益到账时间计算规则 | 转入金额采取T+1收益规则, 即: T日15点前转入, T+1日开始计息, 计息后下一个自然日可查看收益(T为交易日)
|
当在2.2中转入金额输入框的金额不为空且不超限时, 确定转入按钮为启用状态, 此时可将金额转入到余额宝, 如图2-3-(a)所示.
(1) 单击图2-3-(a)中的确认转入按钮
(1.1) 显示输入支付密码面板, 出现方式为从页面底部向上动态线性滑入, 时间为200毫秒.
(1.2) 遮罩与输入支付密码面板同步从页面顶部向下动态线性滑入, 时间为0毫秒, 输入支付密码面板出现在遮罩上层.
(1.3) 支付密码输入框显示为空并展示内容为"支付密码"的hint提示语.
(1.4) 隐藏清除密码按钮.
(1.5) 支付密码确认按钮处于禁用状态.
如图2-3-(b)所示.
(2) 单击输入支付密码面板的关闭按钮(✕)
(2.1) 隐藏输入支付密码面板, 隐藏方式为向页面底部动态线性滑出页面, 时间为200毫秒.
(2.2) 遮罩与输入支付密码面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.
结果如图2-3-(a)所示.
(3) 在支付密码输入框中输入密码
(3.1) 当支付密码输入框为空时
(a) 支付密码输入框获取焦点.
(b) 支付密码输入框展示内容为"支付密码"的hint提示语.
(c) 隐藏清除密码按钮.
(d) 支付密码确认按钮设置为禁用状态.
如图2-3-(b)所示.
(3.2) 当支付密码输入框不为空时
(a) 支付密码输入框获取焦点.
(b) 清除支付密码输入框中的hint提示语.
(c) 对支付密码输入框中已经输入的密码进行脱敏显示.
(d) 显示清除密码按钮.
(e) 支付密码确认按钮设置为启用状态.
如图2-3-(c)所示.
(4) 单击清除密码按钮
(4.1) 清除支付密码输入框已经输入的密码.
(4.2) 支付密码输入框展示内容为"支付密码"的hint提示语.
(4.3) 支付密码输入框失去焦点.
(4.4) 隐藏清除密码按钮.
(4.5) 支付密码确认按钮设置为禁用状态.
如图2-3-(b)所示.
(5) 单击支付密码确认按钮
(5.1) 当支付密码不正确时
(a) 显示密码错误信息提示框, 出现方式为淡入, 时间为0毫秒.
(b) 遮罩与密码错误信息提示框同步出现, 出现方式为淡入, 时间为0毫秒.
(c) 支付密码提示语设置为: 支付密码不正确.
如图2-3-(d)所示.
(5.2) 当支付密码输入正确时
(a) 隐藏输入支付密码面板, 隐藏方式为向页面底部线性滑出页面, 时间为200毫秒.
(b) 遮罩与输入支付密码面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.
(c) 进入<2.4 校验账户余额>流程.
(6) 单击密码错误信息提示框中的重新输入密码按钮
(6.1) 隐藏密码错误信息提示框, 隐藏方式为淡出, 时间为0毫秒.
(6.2) 遮罩与密码错误信息提示框同步隐藏, 隐藏方式为淡出, 时间为0毫秒.
(6.3) 支付密码输入框失去焦点.
(6.4) 清除支付密码输入框中已输入的密码并展示内容为"支付密码"的hint提示语.
(6.5) 隐藏清除密码按钮.
(6.6) 支付密码确认按钮设置为禁用状态.
如图2-3-(b)所示.
| 序号 | 规则名称 | 规则说明 |
|---|---|---|
| 1 | 支付密码输入框规则 | (1): 初始化时显示hint提示语: 支付密码.(2): 当输入框不为空时, 隐藏hint提示语.(3): 最大长度为16.(4): 输入密码时对密码进行脱敏显示.(5): 只可输入字母、数字、特殊符号. |
当支付密码输入框中密码输入正确时, 单击支付密码确认按钮
(a) 隐藏输入支付密码面板, 隐藏方式为向页面底部动态线性滑出页面, 时间为200毫秒.
(b) 遮罩与输入支付密码面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.
(1) 当付款方式的账户余额不足时
(1.1) 显示余额不足错误信息提示框, 出现方式为淡入, 时间为0毫秒.
(1.2) 遮罩与余额不足错误信息提示框同步出现, 出现方式为淡入, 时间为0毫秒. 余额不足错误信息提示框出现在遮罩上层.
(1.3) 余额信息不足提示语设置为: 银行反馈此卡可用额度不足, 你可查询银行明细或更换其他付款方式.
(1.4) 将选择付款方式面板中对应账户余额不足的付款方式设置为禁用状态.
(1.5) 将确认转入按钮设置为禁用状态.
如图2-4-(b)所示.
(2) 单击图2-4-(b)中的提示信息确认按钮
(2.1) 隐藏余额不足错误信息提示框, 隐藏方式为淡出, 时间为0毫秒.
(2.2) 遮罩与余额不足错误信息提示框同步隐藏, 隐藏方式为淡出, 时间为0毫秒.
(2.3) 显示选择付款方式面板, 出现方式为从页面底部向上动态线性滑入, 时间为200毫秒.
(2.4) 遮罩与选择付款方式面板同步从页面顶部向下动态线性滑入, 时间为0毫秒, 选择付款方式面板出现在遮罩上层.
如图2-4-(c)所示.
(3) 单击图2-4-(c)选择付款方式面板中的关闭按钮(✕)
(3.1) 隐藏选择付款方式面板, 隐藏方式为向页面底部动态线性滑出页面, 时间为200毫秒.
(3.2) 遮罩与选择付款方式面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.
(4) 在图2-4-(c)选择付款方式面板中可重新选择付款方式, 在选择对应的付款方式之后
(4.1) 隐藏选择付款方式面板, 隐藏方式为向页面底部动态线性滑出页面, 时间为200毫秒.
(4.2) 遮罩与选择付款方式面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.
(4.3) 将在选择付款方式面板中重新选择的付款方式信息设置到付款方式选择框.
(4.4) 将确认转入按钮设置为启用状态.
如图2-4-(d)所示.
(5) 当付款方式的账户余额充足时, 开始执行转入操作
(5.1) 对接银行/支付宝进行扣款
(a) 如果扣款失败, 提示转入失败.
(b) 如果扣款成功, 执行(5.2)申购操作.
(5.2) 当(5.1)中扣款成功时, 对接天弘基金申购基金份
(a) 如果申购失败, 回滚(5.1)中的扣款操作, 提示转入失败.
(b) 如果申购成功, 则表示转入操作成功, 跳转到转入成功页面. 如图2-5-(b)所示.
注: (1) 步骤(5.1)和步骤(5.2)为原子操作, 要么一起成功, 要么一起失败.
转入成功页面主要包含转入成功提示语、计算收益提示语、收益到账提示语和付款信息提示语四部分信息. 其中转入成功提示语设置为选中状态, 提示语左侧对应的进度条设置为选中状态. 转入成功、计算收益和收益到账的提示语参见转入成功提示语显示规则.
转入成功提示语格式:
成功转入[transferInfoAmount]元
今天
计算收益提示语格式:
[date] [dayOfWeek]
开始计算收益
收益到账提示语格式:
[date] [dayOfWeek]
收益到账
付款信息提示语格式:
(a) 当付款方式为账户余额时展示为: 付款信息 账户余额 [transferInfoAmount]
(b) 当付款方式为银行储蓄卡时展示为: 付款信息 [bankName]储蓄卡([tailNum]) [transferInfoAmount]
注: (1) [transferInfoAmount]为转入金额, 保留两位小数.
(2) [date]表示开始计算收益时间或者收益到账时间, 格式为MM-dd. 时间的计算规则参见收益时间计算规则.
(3) [dayOfWeek]表示对应日期为一周中的第几天. 展示示例: 星期三.
(4) [bankName]表示付款方式对应银行的简称.
(5) [tailNum]表示付款方式储蓄卡卡号后四位.
(6) 单击图2-5-(b)中的转入完成按钮, 跳转到余额宝首页. 如图2-5-(c)所示.
| 序号 | 规则名称 | 规则说明 |
|---|---|---|
| 1 | 转入成功提示语显示规则 | (1): 转入成功提示语第一行显示转入金额;计算收益提示语和收益到账提示语第一行显示到账日期和星期.(2): 转入成功提示语第二行显示转入日期(今天);计算收益提示语第二行显示开始计算收益;收益到账提示语第二行显示收益到账.(3): 提示语第一行未选中状态显示为黑色, 选中状态显示为蓝色.(4): 提示语第二行始终显示为灰色. |
| 2 | 收益时间计算规则 | 转入金额采取T+1收益规则, 即: T日15点前转入, T+1日开始计息, 计息后下一个自然日可查看收益(T为交易日)
|
转入余额宝功能产品结构图如图3-1所示.
