蚂蚁财富余额宝转出详细说明 - zachard/product GitHub Wiki

用户可以通过余额宝的转出功能将资金提现到银行卡或者转出到余额, 并用于其他用途.

1. 业务流程图

用户可以将余额宝的资金提现到银行卡或余额.
转出到银行卡主要包含选择银行卡、输入转出金额、选择转出方式、输入支付密码等步骤, 如图1-1所示.

roll-out-bank-card-busi-flow

图`1-1` 转出到银行卡业务流程图

转出到余额主要包含输入转出金额、输入支付密码等步骤, 如图1-2所示.

roll-out-balance-busi-flow

图`1-2` 转出到余额业务流程图

2. 转出到银行卡功能描述

2.1 选择银行卡

2.1.1 页面流程图

roll-out-bank-card-pick-card-page-flow

图`2-1` 选择银行卡页面流程图

2.1.2 交互说明

(1) 从余额宝页面进入到转出页面时, 默认选中转出到银行卡, 银行卡选择框中默认设置为当前账户中第一张绑定的储蓄卡. 银行卡选择框格式为: [bankLogo] [bankName]([tailNum]) 快捷. 如图2-1-(a)所示.

注: (1) [bankLogo]表示银行对应的logo.
     (2) [bankName]表示银行对应的简称.
     (3) [tailNum]表示选择银行卡对应卡号后四位.

(2) 单击图2-1-(a)中的银行卡选择框

(2.1) 显示选择银行卡面板, 出现方式为从页面底部向上动态线性滑入, 时间为200毫秒.  
(2.2) 遮罩与选择银行卡面板同步从页面顶部向下动态线性滑入, 时间为0毫秒, 选择银行卡面板出现在遮罩的上层.  
(2.3) 选择银行卡面板出现时默认选中图2-1-(a)中的银行卡, 如图2-1-(b)所示.  

注: 选择银行卡面板中银行卡的呈现规则参见选择银行卡面板银行卡展示规则

(3) 单击图2-1-(a)选择银行卡面板中的关闭按钮()

(3.1) 隐藏选择银行卡面板, 隐藏方式为向页面底部动态线性滑出页面, 时间为200毫秒.  
(3.2) 遮罩与选择银行卡面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.  
(3.3) 关闭选择银行卡面板不触发任何页面数据的修改, 选择银行卡面板关闭后, 页面展示如图2-1-(a)所示.  

(4) 单击图2-1-(b)选择银行卡面板中的银行卡

(4.1) 设置银行卡选择框中银行logo为选择银行卡对应银行的logo.  
(4.2) 设置银行卡选择框中银行名称为选择银行卡对应银行的简称.  
(4.3) 设置银行卡选择框中银行卡尾号为选择银行卡卡号的后四位. 如图2-1-(c)所示.  
(4.4) 将选择银行卡面板中选择的银行卡设置为选中状态, 其他银行卡设置为未选中状态. 如图2-1-(d)所示.  
(4.5) 隐藏选择银行卡面板和遮罩, 隐藏方式与(3)中一致.  

2.1.3 规则描述

序号 规则名称 规则说明
1 选择银行卡面板银行卡展示规则 (1): 展示格式为[bankLogo] [bankName]([tailNum]) 快捷.(2): 仅展示当前账户中已绑定的储蓄卡.(3): 银行卡按照添加顺序排列.(4): 初始化页面时默认选择第一张储蓄卡.

注: (1) [bankLogo]表示银行对应的logo.
     (2) [bankName]表示银行对应的简称.
     (3) [tailNum]表示银行卡对应卡号后四位.

2.2 输入转出金额

2.2.1 页面原型图

input-roll-out-amount-page

图`2-2` 转出到银行卡输入转出金额页面原型图

2.2.2 交互说明

(1) 从余额宝页面进入到转出到银行卡页面时

(1.1) 转出金额输入框为空.  
(1.2) 转出金额输入框显示hint提示语: 可转出到卡[maxRollOutAmount]元.  
(1.3) 不可转出金额提示语设置为: 有[canNotRollOutAmount]元不可转到卡.  
(1.4) 隐藏清除金额按钮.  

如图2-2-(a)所示.

注: (1) [maxRollOutAmount]为余额宝中最大可转出到银行卡中的金额, 保留两位小数.
     (2) [canNotRollOutAmount]为余额宝中不可转出到银行卡的金额, 保留两位小数.
     (3) 余额宝中可转出到银行卡中的金额参见可转出到银行卡金额规则.

(2) 当转出金额输出框获取焦点时

(2.1) 清空转出金额输入框中的hint提示语.  
(2.2) 唤起数字键盘, 出现方式为从页面底部向上动态线性滑入, 时间为200毫秒.  
(2.3) 转出金额输入框显示已经输入的转出金额, 若未输入金额则展示为空.  

如图2-2-(b)所示, 数字键盘按键输入规则参见全局说明中的键盘说明.

(3) 通过单击数字键盘上的数字按键和清除按键, 可以改变转出金额输入框中的金额

(3.1) 当转出金额输入框的金额为空时  
    (a) 转出金额输入框获取焦点.  
    (b) 隐藏清除金额按钮.  
    (c) 隐藏转出金额不正确提示语.  
    (d) 如果转出方式选择框中存在已选中的转出方式, 则保持该转出方式为选中状态; 如果转出方式选择框中不存在已选中的转出方式, 则将转出方式选择框中快速到账转出方式设置为选中状态.  
    (e) 数字键盘上的确定按钮设置为禁用状态.  
    (f) 禁用确认转出按钮.  
    如图2-2-(b)所示.  
(3.2) 当转出金额输入框的金额不为空且金额不大于[maxRolloutableAmount]和[maxLimitAmount]时  
    (a) 转出金额输入框获取焦点.  
    (b) 显示清除金额按钮.  
    (c) 隐藏转出金额不正确提示语.  
    (d) 如果转出方式选择框中存在已选中的转出方式, 则保持该转出方式为选中状态; 如果转出方式选择框中不存在已选中的转出方式, 则将转出方式选择框中快速到账转出方式设置为选中状态.  
    (e) 数字键盘上的确定按钮设置为启用状态.  
    (f) 启用确认转出按钮.  
    如图2-2-(c)所示.  
(3.3) 当转出金额输入框的金额大于[maxLimitAmount]时  
    (a) 转出金额输入框获取焦点.  
    (b) 显示清除金额按钮.  
    (c) 显示转出金额不正确提示语, 并将提示信息设置为: 转出金额超限.  
    (d) 取消选中转出方式选择框中已经选中的转出方式.  
    (e) 数字键盘上的确定按钮设置为启用状态.  
    (f) 启用确认转出按钮.  
    如图2-2-(d)所示.  
(3.4) 当转出金额输入框的金额大于[maxRolloutableAmount]时  
    (a) 转出金额输入框获取焦点.  
    (b) 显示清除金额按钮.  
    (c) 显示转出金额不正确提示语, 并将提示信息设置为: 金额超过可转出到卡额度.  
    (d) 取消选中转出方式选择框中已经选中的转出方式.  
    (e) 数字键盘上的确定按钮设置为启用状态.  
    (f) 启用确认转出按钮.  
    如图2-2-(f)所示.  

注: (1) [maxRolloutableAmount]表示最大可转出到卡额度. 等于余额宝中的余额减去不可转出到卡额度.
     (2) [maxLimitAmount]表示储蓄卡转出金额最大限制, 不同银行的限制额度会有不同.

(4) 单击数字键盘上的确定按键或隐藏按键或者除数字键盘及转出金额输入框外的其他区域, 隐藏数字键盘, 转出金额输入框失去焦点, 隐藏清除金额按钮, 并且

(4.1) 当转出金额输入框的金额为空时  
    (a) 转出金额输入框显示内容为"可转出到卡[maxRollOutAmount]元"的hint提示语.  
    (b) 隐藏转出金额不正确提示语.  
    (c) 如果转出方式选择框中存在已选中的转出方式, 则保持该转出方式为选中状态; 如果转出方式选择框中不存在已选中的转出方式, 则将转出方式选择框中快速到账转出方式设置为选中状态.  
    (d) 禁用确认转出按钮.  
(4.2) 当转出金额输入框的金额不为空且金额不大于[maxRolloutableAmount]和[maxLimitAmount]时  
    (a) 转出金额输入框内容设置为输入的金额.  
    (b) 隐藏转出金额不正确提示语.  
    (c) 如果转出方式选择框中存在已选中的转出方式, 则保持该转出方式为选中状态; 如果转出方式选择框中不存在已选中的转出方式, 则将转出方式选择框中快速到账转出方式设置为选中状态.  
    (d) 启用确认转出按钮.  
(4.3) 当转出金额输入框的金额大于[maxLimitAmount]时  
    (a) 转出金额输入框内容设置为输入的金额.  
    (b) 显示转出金额不正确提示语, 并将提示信息设置为: 转出金额超限.  
    (c) 取消选中转出方式选择框中已经选中的转出方式.  
    (d) 启用确认转出按钮.  
    如图2-2-(e)所示.  
(4.4) 当转出金额输入框的金额大于[maxRolloutableAmount]时  
    (a) 转出金额输入框内容设置为输入的金额.  
    (b) 显示转出金额不正确提示语, 并将提示信息设置为: 金额超过可转出到卡额度.  
    (c) 取消选中转出方式选择框中已经选中的转出方式.  
    (d) 启用确认转出按钮.  
    如图2-2-(g)所示.  

注: (1) [maxRolloutableAmount]表示最大可转出到卡额度. 等于余额宝中的余额减去不可转出到卡额度.
     (2) [maxLimitAmount]表示储蓄卡转出金额最大限制, 不同银行的限制额度会有不同.

(5) 当单击全部按钮时

(5.1) 转出金额输入框内容设置为当前账户所有可转出到卡金额.  
(5.2) 隐藏数字键盘.  
(5.3) 隐藏清除金额按钮.  
(5.4) 隐藏转出金额不正确提示语.  
(5.5) 如果转出方式选择框中存在已选中的转出方式, 则保持该转出方式为选中状态; 如果转出方式选择框中不存在已选中的转出方式, 则将转出方式选择框中快速到账转出方式设置为选中状态.  
(5.6) 启用确认转出按钮.  

(6) 当转出金额输入框不为空且获取焦点时, 显示清除金额按钮, 当单击清除金额按钮时

(6.1) 清空转出金额输入框中已经输入的金额, 转出金额输入框获取焦点.  
(6.2) 隐藏清除金额按钮.  
(6.3) 隐藏转出金额不正确提示语.  
(6.4) 数字键盘的确定按键设置为禁用状态.  
(6.5) 如果转出方式选择框中存在已选中的转出方式, 则保持该转出方式为选中状态; 如果转出方式选择框中不存在已选中的转出方式, 则将转出方式选择框中快速到账转出方式设置为选中状态.  
(6.6) 禁用确认转出按钮.  

如图2-2-(b)所示.

(7) 单击不可转出金额查看原因按钮

(7.1) 隐藏数字键盘.  
(7.2) 隐藏清除金额按钮.  
(7.3) 显示不可转出金额原因提示框, 出现方式为淡入, 时间为0毫秒.  
(7.4) 遮罩与不可转出金额原因提示框同步出现, 出现方式为淡入, 时间为0毫秒, 不可转出金额原因提示框显示在遮罩的上层.  

注: 不可转出金额原因提示框内容设置为: 余额转入的资金不能直接转出到卡,可转回余额或用于转账、手机充值、信用卡还款、购物等消费;银行卡转入的资金,可免费转出到卡。

如图2-2-(h)所示.

(8) 在图2-2-(h)中单击不可转出金额原因确定按钮

(8.1) 隐藏不可转出金额原因提示框, 隐藏方式为淡出, 时间为0毫秒.  
(8.2) 遮罩与不可转出金额原因提示框同步隐藏, 隐藏方式为淡出, 时间为0毫秒.  

2.2.3 规则描述

序号 规则名称 规则说明
1 转出金额输入框输入规则 (1): 初始化时显示hint提示语: 可转出到卡[maxRollOutAmount]元.(2): 获取焦点时, 隐藏hint提示语.(3): 最大长度为11.(4): 只能输入数字和小数点, 最多保留两位小数.
2 可转出到银行卡金额规则 (1): 银行卡转入的资金, 可免费转出到卡.(2): 余额转入的资金不能直接转出到卡, 可转回余额或用于转账、手机充值、信用卡还款、购物等消费.

注: (1) [maxRollOutAmount]为余额宝中最大可转出到银行卡中的金额, 保留两位小数.

2.3 选择转出方式

2.3.1 页面原型图

pick-roll-out-method-page

图`2-3` 转出到银行卡选择转出方式页面原型图

2.3.2 交互说明

(1) 单击选择转出方式面板中的查看转出方式及额度说明按钮, 页面跳转到我的客服页, 如图2-3-(b)所示. 单击我的客服页左上角的返回按钮, 页面跳转到转出到银行卡页面, 如图2-3-(a)所示.

(2) 当转出金额输入框的金额为空时, 单击选择转出方式面板中的快速到账转出方式, 则选中快速到账转出方式, 取消选中普通到账转出方式; 单击选择转出方式面板中的普通到账转出方式, 则选中普通到账转出方式, 取消选中快速到账转出方式. 如图2-3-(a)所示.

(3) 当转出金额输入框的金额不为空且金额不大于[maxRolloutableAmount]和[maxLimitAmount]时, 单击选择转出方式面板中的快速到账转出方式, 则选中快速到账转出方式, 取消选中普通到账转出方式; 单击选择转出方式面板中的普通到账转出方式, 则选中普通到账转出方式, 取消选中快速到账转出方式. 如图2-3-(c)所示.

(4) 当转出金额输入框的金额大于[maxRolloutableAmount]时, 选择转出方式面板中的快速到账和普通到账转出方式都处于取消选中状态, 单击选择转出方式面板中的任一转出方式

(4.1) 显示转出金额不正确提示语, 出现方式为淡入, 时间为0毫秒.  
(4.2) 转出金额不正确提示语设置为: 金额超过可转出到卡额度.  
(4.3) 等待2秒后, 隐藏转出金额不正确提示语.  

如图2-3-(d)所示.

(5) 当转出金额输入框的金额大于[maxLimitAmount]时, 选择转出方式面板中的快速到账和普通到账转出方式都处于取消选中状态, 单击选择转出方式面板中的任一转出方式

(5.1) 显示转出金额不正确提示语, 出现方式为淡入, 时间为0毫秒.  
(5.2) 转出金额不正确提示语设置为: 转出金额超限.  
(5.3) 等待2秒后, 隐藏转出金额不正确提示语.  

如图2-3-(e)所示.

注: (1) [maxRolloutableAmount]表示最大可转出到卡额度. 等于余额宝中的余额减去不可转出到卡额度.
     (2) [maxLimitAmount]表示储蓄卡转出金额最大限制, 不同银行的限制额度会有不同.

2.4 确认转出

2.4.1 页面原型图

roll-out-bank-card-sure-page

图`2-4` 转出到银行卡确认转出页面原型图

2.4.2 交互说明

(1) 当转出金额输入框的金额不为空且金额不大于[maxRolloutableAmount]和[maxLimitAmount], 并且选择转出方式面板中快速到账处于选中状态时, 单击确认转出按钮

(1.1) 显示输入支付密码面板, 出现方式为从页面底部向上动态线性滑入, 时间为200毫秒.  
(1.2) 遮罩与输入支付密码面板同步从页面顶部向下动态线性滑入, 时间为0毫秒, 输入支付密码面板出现在遮罩上层.  

如图2-4-(b)所示.

(2) 当转出金额输入框的金额不为空且金额不大于[maxRolloutableAmount]和[maxLimitAmount], 并且选择转出方式面板中普通到账处于选中状态时, 单击确认转出按钮

(2.1) 显示预计到账提示框, 出现方式为淡入, 时间为0毫秒.  
(2.2) 遮罩与预计到账提示框同步出现, 出现方式为淡入, 时间为0毫秒, 预计到账提示框出现在遮罩上层.  
(2.3) 预计到账提示语设置为: 转出预计 [rollOutEstimatedDays]天后到账.  
(2.4) 最迟到账提示语设置为: 最迟到账时间 [rollOutLatestArrivalTime] 前.  

如图2-4-(d)所示.

注: (1) [rollOutEstimatedDays]表示转出到银行卡预计到账所需天数, 为整数.
     (2) [rollOutLatestArrivalTime]表示转出到银行卡最迟到账时间, 格式为: MM-dd HH:mm.
     (3) [rollOutEstimatedDays]和[rollOutLatestArrivalTime]的取值规则参加余额宝转出到银行卡普通到账时间规则

(3) 单击预计到账提示框的普通到账取消按钮

(3.1) 隐藏预计到账提示框, 隐藏方式为淡出, 时间为0毫秒.  
(3.2) 遮罩与预计到账提示框同步隐藏, 隐藏方式为淡出, 时间为0毫秒.  

如图2-4-(c)所示.

(4) 单击预计到账提示框的普通到账确认转出按钮

(4.1) 隐藏预计到账提示框, 隐藏方式为淡出, 时间为0毫秒.  
(4.2) 遮罩与预计到账提示框同步隐藏, 隐藏方式为淡出, 时间为0毫秒.  
(4.3) 显示输入支付密码面板, 出现方式为从页面底部向上动态线性滑入, 时间为200毫秒.  
(4.4) 遮罩与输入支付密码面板同步从页面顶部向下动态线性滑入, 时间为0毫秒, 输入支付密码面板出现在遮罩上方.  

如图2-4-(e)所示.

(5) 当转出金额输入框的金额大于[maxRolloutableAmount]时, 单击确认转出按钮

(5.1) 显示转出金额不正确提示框, 出现方式为淡入, 时间为0毫秒.  
(5.2) 遮罩与转出金额不正确提示框同步出现, 出现方式为淡入, 时间为0毫秒.  
(5.3) 转出金额不正确提示语设置为: 金额超过可转出到卡额度.  

如图2-4-(f)所示.

(6) 当转出金额输入框的金额大于[maxLimitAmount]时, 单击确认转出按钮

(6.1) 显示转出金额不正确提示框, 出现方式为淡入, 时间为0毫秒.  
(6.2) 遮罩与转出金额不正确提示框同步出现, 出现方式为淡入, 时间为0毫秒.  
(6.3) 转出金额不正确提示语设置为: 转出金额超限.  

如图2-4-(g)所示.

(7) 单击转出金额不正确提示框的转出金额不正确确定按钮

(7.1) 隐藏转出金额不正确提示框, 隐藏方式为淡出, 时间为0毫秒.  
(7.2) 遮罩与转出金额不正确提示框同步隐藏, 隐藏方式为淡出, 时间为0毫秒.  

注: (1) [maxRolloutableAmount]表示最大可转出到卡额度. 等于余额宝中的余额减去不可转出到卡额度.
     (2) [maxLimitAmount]表示储蓄卡转出金额最大限制, 不同银行的限制额度会有不同.

2.4.3 规则描述

序号 规则名称 规则说明
1 余额宝转出到银行卡普通到账时间规则 普通到账转出方式采用T+1方式计算到账时间, 即: T日转出, T+1日24:00前到账(T日指基金交易日). 中国基金交易日为非节假日的周一到周五, 15:00前为上一个交易日, 15:00后为下一个交易日.normal-roll-out-bank-card-arrival-time-rule-img

2.5 校验密码

2.5.1 页面流程图

roll-out-bank-card-check-password-flow

图`2-5` 转出到银行卡校验密码页面流程图

2.5.2 交互说明

(1) 单击图2-4-(a)的确认转出按钮和图2-4-(d)的普通到账转出按钮

(1.1) 显示输入支付密码面板, 出现方式为从页面底部向上动态线性滑入, 时间为200毫秒.  
(1.2) 遮罩与输入支付密码面板同步从页面顶部向下动态线性滑入, 时间为0毫秒, 输入支付密码面板出现在遮罩上层.  
(1.3) 支付密码输入框显示为空并展示内容为"支付密码"的hint提示语.  
(1.4) 隐藏清除密码按钮.  
(1.5) 支付密码确认按钮处于禁用状态.  

如图2-5-(a)所示.

(2) 单击输入支付密码面板的关闭按钮()

(2.1) 隐藏输入支付密码面板, 隐藏方式为向页面底部动态线性滑出页面, 时间为200毫秒.  
(2.2) 遮罩与输入支付密码面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.  

(3) 在支付密码输入框中输入密码

(3.1) 当支付密码输入框为空时  
  (a) 支付密码输入框获取焦点.  
  (b) 支付密码输入框展示内容为"支付密码"的hint提示语.  
  (c) 隐藏清除密码按钮.  
  (d) 支付密码确认按钮设置为禁用状态.  
  如图2-5-(a)所示.  
(3.2) 当支付密码输入框不为空时  
  (a) 支付密码输入框获取焦点.  
  (b) 清除支付密码输入框中的hint提示语.  
  (c) 对支付密码输入框中已经输入的密码进行脱敏显示.  
  (d) 显示清除密码按钮.  
  (e) 支付密码确认按钮设置为启用状态.  
  如图2-5-(b)和图2-5-(d)所示.  

(4) 单击清除密码按钮

(4.1) 清除支付密码输入框已经输入的密码.  
(4.2) 支付密码输入框展示内容为"支付密码"的hint提示语.  
(4.3) 支付密码输入框失去焦点.  
(4.4) 隐藏清除密码按钮.  
(4.5) 支付密码确认按钮设置为禁用状态.  

如图2-5-(a)所示.

(5) 单击支付密码确认按钮

(5.1) 当支付密码不正确时  
  (a) 显示密码错误信息提示框, 出现方式为淡入, 时间为0毫秒.  
  (b) 遮罩与密码错误信息提示框同步出现, 出现方式为淡入, 时间为0毫秒.  
  (c) 支付密码提示语设置为支付密码不正确.  
  如图2-5-(c)所示.  
(5.2) 当支付密码正确并且2.3中选择的转出方式为快速到账时  
  (a) 隐藏输入支付密码面板, 隐藏方式为向页面底部线性滑出页面, 时间为200毫秒.  
  (b) 遮罩与输入支付密码面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.  
  (c) 对接天弘基金赎回份额, 如果赎回失败, 提示转出失败, 操作结束, 不再执行后续步骤. 如果赎回成功, 开始执行(d)中的通知银行入账.  
  (d) 当(c)中天弘基金赎回份额成功时, 通过银行入账, 如果通知失败, 回滚(c)中的赎回操作, 提示转出失败, 操作结束, 不再执行后续步骤. 如果通知成功, 则表示转出操作成功, 跳转到转出成功页面, 如图2-5-(e)所示.  
  (e) 转出成功页面的转出成功提示语设置为: 转出申请申请已提交,等待银行处理. 并设置为选中状态.  
  (f) 转出成功页面的转出成功时间设置为转出操作时间, 格式为: MM-dd HH:mm. 处于未选中状态.  
  (g) 转出成功页面的转出到账时间提示语设置为: 预计到账时间. 并设置为未选中状态.  
  (h) 转出成功页面的转出到账时间设置为转出操作时间之后的两个小时, 格式为: MM-dd HH:mm. 处于未选中状态.  
(5.3) 当支付密码正确并且2.3中选择的转出方式为普通到账时  
  (a) 隐藏输入支付密码面板, 隐藏方式为向页面底部线性滑出页面, 时间为200毫秒.  
  (b) 遮罩与输入支付密码面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.  
  (c) 对接天弘基金赎回份额, 如果赎回失败, 提示转出失败, 操作结束, 不再执行后续步骤. 如果赎回成功, 开始执行(d)中的通知银行入账.  
  (d) 当(c)中天弘基金赎回份额成功时, 通过银行入账, 如果通知失败, 回滚(c)中的赎回操作, 提示转出失败, 操作结束, 不再执行后续步骤. 如果通知成功, 则表示转出操作成功, 跳转到转出成功页面, 如图2-5-(f)所示.  
  (e) 转出成功页面的转出成功提示语设置为: 转出申请申请已提交,等待银行处理. 并设置为选中状态.  
  (f) 转出成功页面的转出成功时间设置为转出操作时间, 格式为: MM-dd HH:mm. 处于未选中状态.  
  (g) 转出成功页面的转出到账时间提示语设置为: 预计到账时间. 并设置为未选中状态.  
  (h) 转出成功页面的转出到账时间设置为普通转账最迟到账时间(参见2.4.3中的余额宝转出到银行卡普通到账时间规则), 格式为: MM-dd HH:mm. 处于未选中状态.  

注: (1) 步骤(5.2)中的子步骤(c)和子步骤(d)为原子操作, 要么一起成功, 要么一起失败.
     (2) 步骤(5.3)中的子步骤(c)和子步骤(d)为原子操作, 要么一起成功, 要么一起失败.

(6) 单击密码错误信息提示框中的重新输入密码按钮

(6.1) 隐藏密码错误信息提示框, 隐藏方式为淡出, 时间为0毫秒.  
(6.2) 遮罩与密码错误信息提示框同步隐藏, 隐藏方式为淡出, 时间为0毫秒.  
(6.3) 支付密码输入框失去焦点.  
(6.4) 清除支付密码输入框中已输入的密码并展示内容为"支付密码"的hint提示语.  
(6.5) 隐藏清除密码按钮.  
(6.6) 支付密码确认按钮设置为禁用状态.  

如图2-5-(a)所示.

(7) 单击图2-5-(e)和图2-5-(f)中的转出完成按钮, 页面跳转到余额宝首页, 如图2-5-(g)所示.

2.5.3 规则描述

序号 规则名称 规则说明
1 支付密码输入框规则 (1): 初始化时显示hint提示语: 支付密码.(2): 当输入框不为空时, 隐藏hint提示语.(3): 最大长度为16.(4): 输入密码时对密码进行脱敏显示.(5): 只可输入字母、数字、特殊符号.
2 转出到银行卡转出成功页面展示规则 (1): 转出成功提示语和转出到账提示语包含未选中和选中状态, 未选中状态展示为黑色, 选中状态展示为蓝色.(2): 转出成功时间和转出到账时间只有未选中状态, 显示为灰色.(3): 跳转到转出成功页面时, 转出成功提示语设置为选中状态, 转出到账时间提示语设置为未选中状态.(4): 转出成功页面中左侧的进度条状态与提示语保持一致.

3. 转出到银行卡产品结构图

转出到银行卡功能产品结构图如图3-1所示.

roll-out-bank-card-prd-structure

图`3-1` 转出到银行卡产品结构图

4. 转出到余额功能描述

4.1 输入转出金额

4.1.1 页面原型图

roll-out-balance-input-amount-page

图`4-1` 余额宝转出到余额输入转出金额页面原型图

4.1.2 交互说明

(1) 当从余额宝页面进入到转出到余额页面时

(1.1) 转出金额输入框为空.  
(1.2) 转出金额输入框显示hint提示语: 本次最多可转出[maxRollOutAmount]元.  
(1.3) 隐藏清除金额按钮.  
(1.4) 禁用确认转出按钮.  

如图4-1-(a)所示.

注: (1) [maxRollOutAmount]为余额宝的余额, 保留两位小数.

(2) 当转出金额输入框获取焦点时

(2.1) 清空转出金额输入框的hint提示语.  
(2.2) 唤起数字键盘, 出现方式为从页面底部向上动态线性滑入, 时间为200毫秒.  
(2.3) 转出金额输入框显示已经输入的转出金额, 若未输入金额则展示为空.  

如图4-1-(b)所示, 数字键盘按键输入规则参见全局说明中的键盘说明.

(3) 单击数字键盘上的数字按键和清除按键, 可以改变转出金额输入框中的金额.

(3.1) 当转出金额输入框中的金额为空时  
  (a) 转出金额输入框获取焦点.  
  (b) 隐藏清除金额按钮.  
  (c) 隐藏转出金额不正确提示语.  
  (d) 禁用数字键盘的确定按钮.  
  (e) 禁用确认转出按钮.  
  如图`4-1`-`(b)`所示.  
(3.2) 当转出金额输入框中的金额不为空且金额不大于[maxRollOutAmount]时  
  (a) 转出金额输入框获取焦点.  
  (b) 显示清除金额按钮.  
  (c) 隐藏转出金额不正确提示语.  
  (d) 启用数字键盘的确定按钮.  
  (e) 启用确认转出按钮.  
  如图`4-1`-`(c)`所示.  
(3.3) 当转出金额输入框的金额大于[maxRollOutAmount]时  
  (a) 转出金额输入框获取焦点.  
  (b) 显示清除金额按钮.  
  (c) 显示转出金额不正确提示语, 并设置为: 超出可转金额上限.  
  (d) 启用数字键盘的确定按钮.  
  (e) 启用确认转出按钮.  
  如图`4-1`-`(e)`所示.  

注: (1) [maxRollOutAmount]为余额宝的余额, 保留两位小数.

(4) 单击数字键盘上的确定按键或隐藏按键或者除数字键盘及转出金额输入框外的其他区域, 隐藏数字键盘, 转出金额输入框失去焦点, 隐藏清除金额按钮, 并且

(4.1) 当转出金额输入框的金额为空时  
  (a) 转出金额输入框显示内容为"本次最多可转出[maxRollOutAmount]元"的提示语.  
  (b) 隐藏转出金额不正确提示语.  
  (c) 禁用确认转出按钮.  
  如图`4-1`-`(a)`所示.  
(4.2) 当转出金额输入框的金额不为空且不大于[maxRollOutAmount]时  
  (a) 转出金额输入框内容设置为输入的金额.  
  (b) 隐藏转出金额不正确提示语.  
  (c) 启用确认转出按钮.  
  如图`4-1`-`(d)`所示.  
(4.3) 当转出金额输入框的金额大于[maxRollOutAmount]时  
  (a) 转出金额输入框内容设置为输入的金额.  
  (b) 显示转出金额不正确提示语, 并设置为: 超出可转金额上限.  
  (c) 启用确认转出按钮.  

注: (1) [maxRollOutAmount]为余额宝的余额, 保留两位小数.

(5) 当单击转出全部金额按钮时

(5.1) 转出金额输入框设置为余额宝当前的余额.  
(5.2) 隐藏数字键盘.  
(5.3) 隐藏清除金额按钮.  
(5.4) 隐藏转出金额不正确提示语.  
(5.5) 启用确认转出按钮.  

如图4-1-(d)所示.

(6) 当转出金额输入框不为空且获取焦点时, 显示清除金额按钮, 当单击清除金额按钮时

(6.1) 清空转出金额输入框中已经输入的金额, 转出金额输入框获取焦点.  
(6.2) 隐藏清除金额按钮.  
(6.3) 隐藏转出金额不正确提示语.  
(6.4) 禁用数字键盘的确定按钮.  
(6.5) 禁用确认转出按钮.  

如图4-1-(b)所示.

4.1.3 规则描述

序号 规则名称 规则说明
1 转出金额输入框输入规则 (1): 初始化时显示hint提示语: 本次最多可转出[maxRollOutAmount]元.(2): 获取焦点时, 隐藏hint提示语.(3): 最大长度为11.(4): 只能输入数字和小数点, 最多保留两位小数.

注: (1) [maxRollOutAmount]为余额宝的余额, 保留两位小数.

4.2 确认转出

4.2.1 确认转出页面原型图

roll-out-balance-sure-page

图`4-2` 转出到余额确认转出页面原型图

4.2.2 交互说明

(1) 当转出金额输入框的金额不为空并且不大于[maxRollOutAmount]时, 单击确认转出按钮

(1.1) 显示输入支付密码面板, 出现方式为从页面底部向上动态线性滑入, 时间为200毫秒.  
(1.2) 遮罩与输入支付密码面板同步从页面顶部向下动态线性滑入, 时间为0毫秒, 输入支付密码面板出现在遮罩上层.  

如图4-2-(b)所示.

(2) 单击输入支付密码面板的关闭按钮()

(2.1) 隐藏输入支付密码面板, 隐藏方式为向页面底部动态线性滑出页面, 时间为200毫秒.  
(2.2) 遮罩与输入支付密码面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.  

如图4-2-(a)所示.

(3) 当转出金额输入框的金额大于[maxRollOutAmount]时, 单击确认转出按钮

(3.1) 显示转出金额不正确提示框, 出现方式为淡入, 时间为0毫秒.  
(3.2) 遮罩与转出金额不正确提示框同步出现, 出现方式为淡入, 时间为0毫秒.  
(3.3) 金额不正确提示语设置为: 超出可转金额上限.  

如图4-2-(d)所示.

(4) 单击图4-2-(d)中转出金额不正确确定按钮

(4.1) 隐藏转出金额不正确提示框, 隐藏方式为淡出, 时间为0毫秒.  
(4.2) 遮罩与转出金额不正确提示框同步隐藏, 隐藏方式为淡出, 时间为0毫秒.  

如图4-2-(c)所示.

注: (1) [maxRollOutAmount]为余额宝的余额, 保留两位小数.

4.3 校验密码

4.3.1 页面流程图

roll-out-balance-check-password-flow

图`4-3` 转出到余额校验密码页面流程图

4.3.2 交互说明

(1) 单击图4-2-(a)的确认转出按钮

(1.1) 显示输入支付密码面板, 出现方式为从页面底部向上动态线性滑入, 时间为200毫秒.  
(1.2) 遮罩与输入支付密码面板同步从页面顶部向下动态线性滑入, 时间为0毫秒, 输入支付密码面板出现在遮罩上层.  
(1.3) 支付密码输入框显示为空并展示内容为"支付密码"的hint提示语.  
(1.4) 隐藏清除密码按钮.  
(1.5) 支付密码确认按钮处于禁用状态.  

如图4-3-(a)所示.

(2) 单击输入支付密码面板的关闭按钮()

(2.1) 隐藏输入支付密码面板, 隐藏方式为向页面底部动态线性滑出页面, 时间为200毫秒.  
(2.2) 遮罩与输入支付密码面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.  

(3) 在支付密码输入框中输入密码

(3.1) 当支付密码输入框为空时  
  (a) 支付密码输入框获取焦点.  
  (b) 支付密码输入框展示内容为"支付密码"的hint提示语.  
  (c) 隐藏清除密码按钮.  
  (d) 支付密码确认按钮设置为禁用状态.  
  如图4-3-(a)所示.  
(3.2) 当支付密码输入框不为空时  
  (a) 支付密码输入框获取焦点.  
  (b) 清除支付密码输入框中的hint提示语.  
  (c) 对支付密码输入框中已经输入的密码进行脱敏显示.  
  (d) 显示清除密码按钮.  
  (e) 支付密码确认按钮设置为启用状态.  
  如图4-3-(b)和图4-3-(d)所示.  

(4) 单击清除密码按钮

(4.1) 清除支付密码输入框已经输入的密码.  
(4.2) 支付密码输入框展示内容为"支付密码"的hint提示语.  
(4.3) 支付密码输入框失去焦点.  
(4.4) 隐藏清除密码按钮.  
(4.5) 支付密码确认按钮设置为禁用状态.  

如图4-3-(a)所示.

(5) 单击支付密码确认按钮

(5.1) 当支付密码不正确时  
  (a) 显示密码错误信息提示框, 出现方式为淡入, 时间为0毫秒.  
  (b) 遮罩与密码错误信息提示框同步出现, 出现方式为淡入, 时间为0毫秒.  
  (c) 支付密码提示语设置为支付密码不正确.  
  如图4-3-(c)所示.  
(5.2) 当支付密码正确时  
  (a) 隐藏输入支付密码面板, 隐藏方式为向页面底部线性滑出页面, 时间为200毫秒.  
  (b) 遮罩与输入支付密码面板同步隐藏, 隐藏方式为向页面顶部动态线性滑出页面, 时间为0毫秒.  
  (c) 对接天弘基金赎回份额, 如果赎回失败, 提示转出失败, 操作结束, 不再执行后续步骤. 如果赎回成功, 开始执行(d)中的通知支付宝入账.  
  (d) 当(c)中天弘基金赎回份额成功时, 通知支付宝入账, 如果通知失败, 回滚(c)中的赎回操作, 提示转出失败, 操作结束, 不再执行后续步骤. 如果通知成功, 则表示转出操作成功, 跳转到转出成功页面, 如图4-3-(e)所示.  
  (e) 转出成功页面的转出成功提示语设置为: 成功转出[rollOutSuccAmount]元至支付宝账户余额。.  

注: (1) [rollOutSuccAmount]为成功转出到账户余额的金额, 保留两位小数.
     (2) 步骤(5.2)中的子步骤(c)和子步骤(d)为原子操作, 要么一起成功, 要么一起失败.

(6) 单击密码错误信息提示框中的重新输入密码按钮

(6.1) 隐藏密码错误信息提示框, 隐藏方式为淡出, 时间为0毫秒.  
(6.2) 遮罩与密码错误信息提示框同步隐藏, 隐藏方式为淡出, 时间为0毫秒.  
(6.3) 支付密码输入框失去焦点.  
(6.4) 清除支付密码输入框中已输入的密码并展示内容为"支付密码"的hint提示语.  
(6.5) 隐藏清除密码按钮.  
(6.6) 支付密码确认按钮设置为禁用状态.  

如图4-3-(a)所示.

(7) 单击图4-3-(e)中的转出完成按钮, 页面跳转到余额宝首页, 如图4-3-(f)所示.

4.3.3 规则描述

序号 规则名称 规则说明
1 支付密码输入框规则 (1): 初始化时显示hint提示语: 支付密码.(2): 当输入框不为空时, 隐藏hint提示语.(3): 最大长度为16.(4): 输入密码时对密码进行脱敏显示.(5): 只可输入字母、数字、特殊符号.

5. 转出到余额产品结构图

转出到余额功能产品结构图如图5-1所示.

roll-out-balance-prd-structure

图`5-1` 转出到余额产品结构图
⚠️ **GitHub.com Fallback** ⚠️