蚂蚁财富余额宝账户明细详细说明 - zachard/product GitHub Wiki
用户可以通过余额宝的账户明细功能查询最近两个月的转入、转出、收益、消费及冻结的资金记录.
用户可以通过账户明细页面查看近两个月的资金变动记录. 账户明细页面提供筛选功能, 用于筛选出符合条件的记录, 提高用户的查询效率. 此外, 转入与转出类资金变动记录还可以查询对应的账单详情. 账户明细的业务流程图如图1-1所示.
图1-1 账户明细业务流程图
(1) 单击余额宝首页(图2-1-(a))的总金额按钮或账户明细按钮, 页面跳转到账户明细页
(1.1) 当账户中的明细记录为空时
(a) 明细类别说明设置为: 明细.
(b) 明细筛选按钮处于未选中状态, 文本内容设置为筛选.
(c) 隐藏明细筛选面板.
(d) 不显示任何明细记录.
(e) 显示数据为空提示图案.
(f) 明细列表提示信息设置为: 近2个月无收支明细记录.
(1.2) 当账户中的明细记录不为空且记录条数小于10时
(a) 明细类别说明设置为: 明细.
(b) 明细筛选按钮处于未选中状态, 文本内容设置为筛选.
(c) 隐藏明细筛选面板.
(d) 展示全部明细记录.
(e) 隐藏数据为空提示图案.
(f) 明细列表提示信息设置为: 没有更多了.
(1.3) 当账户中的明细记录不为空且记录条数大于10时
(a) 明细类别说明设置为: 明细.
(b) 明细筛选按钮处于未选中状态, 文本内容设置为筛选.
(c) 隐藏明细筛选面板.
(d) 对明细记录列表数据进行分页展示, 每页十条, 默认展示第一页.
(e) 隐藏数据为空提示图案.
(f) 明细列表提示信息设置为: 没有更多了.
如图2-1-(b)所示.
注: (1) 账户明细中的记录可分为转入、收益、消费、转出、冻结五大类.
(2) 账户明细列表的每个明细子项主要包含明细记录说明、明细发生时间、明细记录金额、明细交易余额及明细详情按钮五个要素, 这五个要素的展示按照(1)中对账户明细记录的分类动态变化, 展示规则参见账户明细子项要素展示规则.
(2) 向上滑动账户明细页面时, 如果账户明细列表并非展示展示筛选状态下的全部明细并且已展示的最后一条明细处于最底部, 则账户明细列表随之滑动并加载下一页账户明细数据.
(3) 当鼠标在账户明细子项上按下时, 对应的明细子项设置为鼠标按下状态, 如图2-1-(i)所示. 当鼠标松开时, 取消对应的明细子项取消鼠标按下状态, 恢复正常状态.
(4) 当明细筛选按钮处于未选中状态时, 明细筛选按钮文本为"筛选", 此时单击明细筛选按钮
(4.1) 将明细筛选按钮设置为选中状态.
(4.2) 将明细筛选按钮文本设置为: 收起.
(4.3) 显示明细筛选面板, 出现方式为从页面顶部向下动态滑入页面, 时间为100毫秒.
(4.4) 遮罩与明细筛选面板同步出现, 出现方式为淡入, 时间为0毫秒, 明细筛选面板出现在遮罩上方.
如图2-1-(c)所示.
(5) 单击明细筛选面板中的明细类别选择按钮
(5.1) 选中对应的明细类别选择按钮, 取消选中其他明细类别选择按钮.
(5.2) 当单击的明细类别选择按钮为全部时, 明细类别说明设置为: 明细; 当单击的明细类别选择按钮不为全部时, 明细类别说明设置为对应按钮的文本内容.
(5.3) 取消明细筛选按钮的选中状态.
(5.4) 将明细筛选按钮文本设置为: 筛选.
(5.5) 隐藏明细筛选面板, 隐藏方式为向页面顶部动态滑出页面, 时间为100毫秒.
(5.6) 遮罩与明细筛选面板同步隐藏, 隐藏方式为淡出, 时间为0毫秒.
(5.7.1) 筛选出符合条件的账户明细记录, 当符合条件的明细记录为空时
(a) 不显示任何明细记录.
(b) 显示数据为空提示图案.
(c) 如果单击的明细类别选择按钮为冻结按钮, 明细列表提示信息设置为:无冻结信息记录; 否则, 明细列表提示信息设置为: 近2个月无收支明细记录.
如图2-1-(h)所示.
(5.7.2) 筛选出符合条件的账户明细记录, 当符合条件的明细记录不为空且记录条数小于10时
(a) 展示全部明细记录.
(b) 隐藏数据为空提示图案.
(c) 明细列表提示信息设置为: 没有更多了.
如图2-1-(d)、图2-1-(f)、图2-1-(g)所示.
(5.7.3) 筛选出符合条件的账户明细记录, 当符合条件的明细记录不为空且记录条数大于10时
(a) 对明细记录列表数据进行分页展示, 每页十条, 默认展示第一页.
(b) 隐藏数据为空提示图案.
(c) 明细列表提示信息设置为: 没有更多了.
如图2-1-(e)所示.
注: (1) 明细类别选择按钮的样式参见明细类别按钮样式规则.
(6) 当明细筛选按钮处于选中状态时, 明细筛选按钮文本为"收起", 此时单击明细筛选按钮
(6.1) 取消明细筛选按钮的选中状态.
(6.2) 将明细筛选按钮文本设置为: 筛选.
(6.3) 隐藏明细筛选面板, 隐藏方式为向页面顶部动态滑出页面, 时间为100毫秒.
(6.4) 遮罩与明细筛选面板同步隐藏, 隐藏方式为淡出, 时间为0毫秒.
如图2-1-(b)所示.
| 序号 | 规则名称 | 规则说明 |
|---|---|---|
| 1 | 账户明细子项要素展示规则 | (1): 明细记录说明为这笔明细的简要来源/用途说明, 当长度超过10个字时, 展示格式为前10个字加省略号, 各个类别的明细记录说明规则见表1. (2): 明细发生时间为这笔明细发生的交易时间.(3): 明细记录金额为这笔明细对应的金额, 按千分位展示, 保留两位小数, 转入和收益为收入金额, 应该在金额前加上+号, 消费和转出为支出金额, 应该在金额前加上-号, 冻结的金额不添加任何符号.(4): 明细交易余额为这笔交易发生后余额宝账户对应的余额, 按千分位展示, 保留两位小数.(5): 明细详情按钮表示这笔明细还可以查看对应的详情, 只有转入和转出类型的明细详情按钮.(2)~(5)的显示规则如表2所示.
|
| 2 | 明细类别按钮样式规则 | (1): 正常状态下, 字体颜色为黑色, 边框颜色为浅灰色.(2): 选中状态下字体颜色为蓝色, 边框颜色为蓝色.(3): 当一个按钮处于选中状态时, 其他按钮自动取消选中状态. |
图2-2 余额宝账户明细查看账单详情页面原型图
(1) 单击账户明细列表中明细类别为转入的明细子项(如图2-2-(a)所示), 跳转到转入账单详情页
(1.1) 转入说明设置为转入到余额宝时系统自动生成的转入备注.
(1.2) 转入基金设置为: 余额宝-天弘余额宝基金.
(1.3) 转入时间设置为转入明细交易发生时间, 格式为: yyyy-MM-dd HH:mm.
(1.4) 转入金额设置为: +[transferIntoAmount].
(1.5) 转入后余额设置为转入交易完成后的账户余额, 按千分位展示, 保留两位小数.
(1.6) 转入日期提示语设置为: [transferIntoDate] 转入.
(1.7) 计算收益日期提示语设置为: [calIncomeDate] [calIncomeDayOfWeek].
(1.8) 开始计算收益提示语设置为: 开始计算收益.
(1.9) 收益到账日期提示语设置为: [earnedIncomeDate] [earnedIncomeDayOfWeek].
(1.10) 收益到账提示语设置为: 第一笔收益到账.
注: (1) [transferIntoAmount]表示转入明细的金额, 按千分位展示, 保留两位小数.
(2) [transferIntoDate]表示转入交易发生的日期, 格式为: MM-dd.
(3) [calIncomeDate]表示转入交易开始计算收益的日期, 格式为: MM-dd.
(4) [calIncomeDayOfWeek]表示转入交易开始计算收益日期为一周中的星期几. 例如: 星期二.
(5) [earnedIncomeDate]表示转入交易第一笔收益到账的日期, 格式为: MM-dd.
(6) [earnedIncomeDayOfWeek]表示转入交易第一笔收益到账日期为一周中的星期几. 例如: 星期二.
(7) 转入账单详情页各个元素的展示规则参见转入账单详情各元素展示规则.
(2) 根据转入明细的转入时间不同, 每笔转入明细的状态会各不相同, 对应的转入进度条状态也各不相同.
(2.1) 若当前时间大于转入成功时间而小于开始计算收益时间
(a) 转入明细为转入成功状态.
(b) 转入进度条中仅转入成功部分进度条处于选中状态.
(c) 转入日期提示语处于选中状态.
其账单详情页如图2-2-(b)所示.
(2.2) 若当前时间大于开始计算收益时间而小于第一笔收益到账时间
(a) 转入明细为开始计算收益状态.
(b) 转入进度条中转入成功和开始计算收益部分进度条处于选中状态.
(c) 转入日期提示语和计算收益日期提示语处于选中状态.
其账单详情页如图2-2-(c)所示.
(2.3) 若当前时间大于第一笔收益到账时间
(a) 转入明细为收益到账状态.
(b) 整个转入进度条处于选中状态.
(c) 转入日期提示语、计算收益日期提示语及收益到账日期提示语都处于选中状态.
其账单详情页如图2-2-(d)所示.
(3) 单击账户明细列表中明细类别为转出的明细子项(如图2-2-(e)所示), 跳转到转出账单详情页
(3.1) 当转出明细为转出到银行卡并且当前时间大于转出申请提交时间而小于转出到账时间时
(a) 转出账单详情页只展示与转出到银行卡有关的元素.
(b) 转出说明设置为: 转出到银行卡.
(c) 转出时间设置为转出申请提交的时间, 格式为: yyyy-MM-dd HH:mm.
(d) 转出金额设置为: -[rollOutAmount].
(e) 转出后余额设置为转出交易成功后的账户余额, 按千分位展示, 保留两位小数.
(f) 转出到银行卡申请提示语设置为: 申请与提交，等待银行处理. 并设置为选中状态.
(g) 转出到银行卡到账银行卡设置为: [bankName] (尾号[tailNum]).
(h) 转出到银行卡申请时间设置为转出申请提交的时间, 格式为: MM-dd HH:mm.
(i) 转出到银行卡到账提示语设置为: 预计到账时间.
(j) 转出到银行卡到账时间设置为: [arrivalTime] [arrivalTimeDayOfWeek].
(k) 转出进度条中转出申请提交部分设置为选中状态.
如图2-2-(f)所示.
(3.2) 当转出明细为转出到银行卡并且当前时间大于转出到账时间时
(a) 转出账单详情页只展示与转出到银行卡有关的元素.
(b) 转出说明设置为: 转出到银行卡.
(c) 转出时间设置为转出申请提交的时间, 格式为: yyyy-MM-dd HH:mm.
(d) 转出金额设置为: -[rollOutAmount].
(e) 转出后余额设置为转出交易成功后的账户余额, 按千分位展示, 保留两位小数.
(f) 转出到银行卡申请提示语设置为: 提交转出申请. 并设置为选中状态.
(g) 转出到银行卡到账银行卡设置为: [bankName] (尾号[tailNum]).
(h) 转出到银行卡申请时间设置为转出申请提交的时间, 格式为: MM-dd HH:mm.
(i) 转出到银行卡到账提示语设置为: 到账时间. 并设置为选中状态.
(j) 转出到银行卡到账时间设置为: [arrivalTime] [arrivalTimeDayOfWeek].
(k) 转出进度条中全部设置为选中状态.
如图2-2-(g)所示.
(3.3) 当转出明细为转出到余额时
(a) 转出账单详情页只展示与转出到余额有关的元素.
(b) 转出说明设置为: 转出到余额.
(c) 转出时间设置为转出申请提交的时间, 格式为: yyyy-MM-dd HH:mm.
(d) 转出金额设置为: -[rollOutAmount].
(e) 转出后余额设置为转出交易成功后的账户余额, 按千分位展示, 保留两位小数.
(f) 转出到余额成功提示语设置为: 成功转出至账户余额. 并设置为选中状态.
(g) 转出到余额成功时间设置为: 实时到账 [arrivalTime].
如图2-2-(g)所示.
注: (1) [rollOutAmount]表示转出明细金额, 按千分位展示, 保留两位小数.
(2) [bankName]表示转出到银行卡的银行简称.
(3) [tailNum]表示转出到银行卡卡后的后四位.
(4) [arrivalTime]表示转出到银行卡的到账时间(还未到账时表示预计到账时间), 格式为: MM-dd HH:mm.
(5) [arrivalTimeDayOfWeek]表示到账时间(还未到账时表示预计到账时间)为一周中的星期几. 例如: 星期三.
(6) 转出账单详情页各个元素的展示规则参见转出账单详情各元素展示规则.
| 序号 | 规则名称 | 规则说明 |
|---|---|---|
| 1 | 转入账单详情各元素展示规则 | (1): 转入说明与转入金额以黑色展示.(2): 转入基金、转入时间和转入后余额以灰色展示.(3): 转入日期提示语、计算收益日期提示语、收益到账日期提示语未选中状态下以黑色展示.(4): 转入日期提示语、计算收益日期提示语、收益到账日期提示语选中状态下以蓝色展示.(5): 转入进度条未选中状态以灰色展示, 选中状态以蓝色展示.(6): 开始计算收益提示语、收入到账提示语以黑色展示. |
| 2 | 转出账单详情各元素展示规则 | (1): 转出说明和转出金额以黑色展示.(2): 转出时间和转出后余额以灰色展示.(3): 转出到银行卡申请提示语、转出到银行卡到账提示语、转出到余额成功提示语未选中状态下以黑色展示.(4): 转出到银行卡申请提示语、转出到银行卡到账提示语、转出到余额成功提示语选中状态下以蓝色展示.(5): 转出到银行卡到账银行卡、转出到银行卡申请时间、转出到银行卡到账时间、转出到余额成功时间以黑色展示.(6): 转出进度条未选中状态下以灰色展示, 选中状态下以蓝色展示. |
账户明细功能产品结构图如图3-1所示.
图3-1 账户明细产品结构图