发表于: 2019-12-14 22:21:14
0 470
今天完成的事情:
今天把逻辑理顺了 接下来画原型图就快了
明天计划的事情:
请一天假
存在问题:
进度太慢了,再划水感觉自己都没脸了
收获:
绑卡逻辑与细节
1、背景和目标
1.1、背景说明
目标市场上几乎所有产品都会涉及金钱交易,毕竟公司开发一个产品还是为了赚钱。
如社交产品发红包,社区产品打赏,教育产品知识付费,电商产品购物支付,游戏产品充值支付,互金理财产品、借贷产品等更是围绕资金交易,还有各种产品的各种付费会员,方方面面离不开资金交易。
只针对支付功能,对资金交易没有强需求的产品,如社区产品打赏、教育产品知识付费,大多会接入微信支付与支付宝,不会开发太多附加功能;
而涉及到充值、提现的产品,对资金交易有强场景和强需求,如互金理财、借贷产品等,简单的支付宝和微信支付没有办法满足全部场景,而且涉及资金交易量大,用户也不会把所有钱都放到微信和支付宝中,这时候,就需要开发绑卡功能,以满足用户大资金交易的需求。当然对于充值(支付),也是可以直接走微信和支付宝的,这种方式对于大多人来说,也是十分方便快捷的,但是就金融产品的属性来说,银行卡还是必须的,身份验证角度也好,风险与安全角度也好,银行卡的绑定和管理都是必不可少的功能。
1.2、目标
完成绑卡逻辑、交互、细节梳理
对常见的绑卡方式做示例
2、绑卡状态
绑卡一般为四要素鉴权(姓名、身份证号、银行卡号、手机号),但是接口方式有多种,如可先进行二要素鉴权(姓名、身份证号),然后在进行绑卡;也有不可以分开的;针对不同的接口用户绑卡状态一共有三种,如图:针对前两种状态,需要引导用户进行绑卡,针对第三种已绑卡状态,直接展示银行卡列表即可。
3、实例展示
针对实名和绑卡可分开进行的场景,有两种情况:
明确引导添加银行卡的场景:该种情况,绑卡的流程交互与实名绑卡需一步完成的一致即可
非引导添加银行卡的场景:该种情况,可先引导用户完成实名,在需要用户绑卡的时候再进行引导绑卡
下面主要针对引导添加银行卡的场景展示绑卡流程与交互,其中以京东金融、微信、支付宝、小米金融、人人贷、唯品金融做简单说明。
3.1、京东金融
分析:
该展示为已实名未绑卡的状态
展示采用拟实物的卡片样式,并将切换光标的动作融合为下一步的button,并将button下移,使用户编辑时所有操作都集中在键盘部分,避免来回跳跃
卡类型自动识别,若未识别出来,提供手动选择,但因为提示不明显,很容易被忽略而无法继续进行
由于卡片有背景色,所以很吸引眼球,导致在刚进入的一段时间内无法注意到键盘上方的编辑框
编辑内容前端校验通过即可进入下一步,直到手机号等全部编辑完成提交才进入后台验证,验证通过则绑卡成功,验证不通过则在当前页(手机号)提示错误信息
3.2、微信和支付宝
微信:
支付宝
分析:
微信和支付宝的绑卡基本是一样的,所以放在一起讨论
因为是绑卡引导,所以两者都在第一个页面引导用户编辑银行卡号,编辑完成再补充其他需要的相关信息
全部编辑完成提交后台验证,验证未通过微信会直接回到银行卡编辑页,支付宝留在其他相关信息编辑页;对于容易编辑错误的用户并不友好,但显然微信和支付宝并不对此种情况做更多的处理,编辑错误大概是经过了验证,不因20%的用户去影响80%的用户
样式采用的是最简单最传统的列表式,对用户习惯没有任何影响
3.3、小米金融
分析:
- 同样,小米金融也使用同样的方式,进入直接引导用户编辑银行卡信息,然后在下一个页面判断用户是否已实名,若已实名,则只需编辑手机号码即可
3.4、人人贷
分析:
- 人人贷为三要素鉴权,内容相对较少,所以在一个页面内展示,也不会有更多的心里负担。
3.5、唯品金融
分析:
唯品金融采用最传统的方式,若用户未实名认证,则直接引导用户编辑身份信息,编辑完成满足前端检验规则,则直接进入绑卡页,编辑完银行卡信息后满足前端校验规则“立即绑卡”button变为可点状态
点击“立即绑卡”button后台校验信息是否正确,若正确则绑卡成功,不正确则在当前页提示错误信息
该种提示方式如果在身份证号编辑错误的情况下,不容易定位问题,且基本全部信息都需要重新编辑
4、细节与交互
4.1、整体流程
进入页面,光标自动对焦到第一个可编辑且需要编辑的编辑框
用户点击编辑框后调用相应键盘
编辑框编辑信息后,在编辑框后面出现“x”,点击则清空编辑框
一项编辑完成后对该项进行必要的前端校验
前端全部校验通过,引导用户提交(button变为可点状态)后台
后台校验后实时反馈校验结果
根据校验结果进行相应提示和交互
4.2、输入键盘
点击编辑框后调起键盘,不同的编辑框需要不同的键盘,键盘可以用系统的,也可以自开发,调起相对应的键盘类型及相应键说明如下:
编辑框 | 键盘类型 | 键盘说明 |
---|---|---|
姓名 | 默认键盘(全键盘、拼音9键等) | 系统键盘 |
身份证 | 数字键盘 | 系统键盘或自开发键盘,10个数字、删除及“X” |
银行卡 | 数字键盘 | 系统键盘或自开发键盘,10个数字及删除 |
手机号 | 数字键盘 | 系统键盘或自开发键盘,10个数字及删除 |
验证码 | 数字键盘 | 系统键盘或自开发键盘,10个数字及删除 |
4.3、编辑框
当未编辑内容时,编辑框有相应的编辑提示,编辑后编辑框后出现删除的“x”,点击删除的“x”直接清空编辑框,编辑框为空提示说明如下:
编辑框 | 编辑框为空提示 |
---|---|
姓名 | 请输入真实姓名 |
身份证 | 请输入身份证号 |
银行卡 | 请输入银行卡号 |
手机号 | 请输入银行预留手机号 |
验证码 | 请输入短信验证码 |
为空提示注意:手机号要说明是银行预留手机号,因为现在一人多个手机号十分常见,注册手机号不一定是银行预留手机号,所以对此要进行具体说明
银行卡类型一般会在编辑银行卡号识别出开户行时自动展示,若编辑到相应位数依然不能识别,则需要给用户展示编辑框,引导用户自己选择
有的编辑框在特定情境下为了减少用户编辑工作量,会自动带入一些信息,如手机号,在该场景下,可能需要给用户展示一种安全的状态,做成加密的样式,此时编辑框交互:
如果该编辑框为加密状态,则点击选中该编辑框且点击键盘删除则清空编辑框
如果该编辑框不为加密状态,则点击选中该编辑框且点击键盘删除则只删除最近的一个字符
4.4、前端校验规则
姓名和验证码不做校验,身份证、银行卡、手机号做位数限制和校验,下表举例以实时提示前端校验结果为例(错误则进行提示,正确则可进行下一步):
编辑框 | 编辑框规则 | 判断说明 |
---|---|---|
身份证 | 18位数字(或X) 最长可输入18位 | 1、首次最大可编辑到18位,没有编辑到18位即切换焦点,则切换焦点后提示错误信息 2、编辑到18位后进行了删除,不提示错误信息,且button不亮;此时切换焦点提示错误信息 3、如果为最后一个编辑框,则在其他编辑框编辑无误且该编辑框编辑到18位时button变为可点状态,否则不可点 |
银行卡 | 16位-19位; 最长可输入19位 | 1、编辑框编辑到16-19位即正确,没有编辑到16位即切换焦点,则切换焦点后提示错误信息 2、编辑到16-19位后进行了删除且剩余位数<16位,不提示错误信息,且button不亮;此时切换焦点提示错误信息 3、如果为最后一个编辑框,则在其他编辑框编辑无误且该编辑框编辑到16位时button变为可点状态,否则不可点 |
手机号 | 11位;第一位需是1; 最长可输入11位 | 1、只可编辑到11位,没有编辑到11位即切换焦点,则切换焦点后提示错误信息 2、编辑到11位后进行了删除,不提示错误信息,且button不亮;此时切换焦点提示错误信息 3、如果为最后一个编辑框,则在其他编辑框编辑无误且该编辑框编辑到11位时button变为可点状态,否则不可点 |
4.5、前端校验错误信息提示
前端校验方式有多种:
编辑框只要不为空即可点击button:点击button后进行前端校验并提示,该种方法对于开发和逻辑都是极为简单的,但错误提示不是实时的,若前端校验有误但修改正确并提交后台后,如果后台不通过会反复提示错误;但如果用户输错率较低,也可以简单处理
编辑框只要编辑完成即进行前端校验并提示,全部校验通过button才可点:这种方式对用户的反馈比较及时,但开发逻辑会增加
无论哪一种方式,适合自己用户的才是最好的
下面仅针对实时提示错误信息进行说明:
校验节点
编辑中判断
失去焦点判断
(判断说明中提示错误信息的情况均为不为空的情况,编辑框为空不提示错误信息)
当前编辑框编辑完成后,无论对错,只要进行了重新编辑,即不提示错误信息
当前编辑框只要不合规则,无论有没有错误提示,button都为不可点状态
错误提示文案:
若只有一个编辑框有误,则提示:{编辑框名称}格式有误,如身份证格式有误
若多个编辑框同时有误,则提示最近编辑的编辑框错误信息
4.6、后端校验错误信息提示
用户全部编辑且前端校验全部通过后提交后台验证:
验证通过则绑卡成功
验证不通过则提示错误信息
4.7、绑卡结果
此处只针对绑卡结果实时返回的情况进行分析,此种情况下,绑卡结果有以下三种:
状态 | 提示方式 | 提示文案 | 交互 |
---|---|---|---|
绑卡成功 | toast | 绑卡成功 | 跳转到银行卡列表页,并同时toast提示,2秒消失 |
绑卡失败-网络异常、通道异常 | toast | 网络异常,请检查网络后重试 | toast提示2秒消失,留在当前页 |
绑卡失败-编辑错误 | 页面 | 手机号、身份证号、银行卡号等 | 页面提示,再次编辑错误提示消失 |
绑卡重复 | toast | 您已绑定该银行卡 | toast提示2秒消失,留在当前页 |
提示方式针对需要特别让用户注意的做成toast会太弱,所以对四要素编辑有误的做成页面提示,其他只需了解,所以做成toast提示。
评论