1、背景和目标
1.1、背景说明
目标市场上几乎所有产品都会涉及金钱交易，毕竟公司开发一个产品还是为了赚钱。
如社交产品发红包，社区产品打赏，教育产品知识付费，电商产品购物支付，游戏产品充值支付，互金理财产品、借贷产品等更是围绕资金交易，还有各种产品的各种付费会员，方方面面离不开资金交易。
只针对支付功能，对资金交易没有强需求的产品，如社区产品打赏、教育产品知识付费，大多会接入微信支付与支付宝，不会开发太多附加功能；
而涉及到充值、提现的产品，对资金交易有强场景和强需求，如互金理财、借贷产品等，简单的支付宝和微信支付没有办法满足全部场景，而且涉及资金交易量大，用户也不会把所有钱都放到微信和支付宝中，这时候，就需要开发绑卡功能，以满足用户大资金交易的需求。当然对于充值（支付），也是可以直接走微信和支付宝的，这种方式对于大多人来说，也是十分方便快捷的，但是就金融产品的属性来说，银行卡还是必须的，身份验证角度也好，风险与安全角度也好，银行卡的绑定和管理都是必不可少的功能。
1.2、目标
-
完成绑卡逻辑、交互、细节梳理
-
对常见的绑卡方式做示例
2、绑卡状态
绑卡一般为四要素鉴权（姓名、身份证号、银行卡号、手机号），但是接口方式有多种，如可先进行二要素鉴权（姓名、身份证号），然后在进行绑卡；也有不可以分开的；针对不同的接口用户绑卡状态一共有三种，如图：
image
针对前两种状态，需要引导用户进行绑卡，针对第三种已绑卡状态，直接展示银行卡列表即可。
3、实例展示
针对实名和绑卡可分开进行的场景，有两种情况：
-
明确引导添加银行卡的场景：该种情况，绑卡的流程交互与实名绑卡需一步完成的一致即可
-
非引导添加银行卡的场景：该种情况，可先引导用户完成实名，在需要用户绑卡的时候再进行引导绑卡
下面主要针对引导添加银行卡的场景展示绑卡流程与交互，其中以京东金融、微信、支付宝、小米金融、人人贷、唯品金融做简单说明。
3.1、京东金融
image
分析：
-
该展示为已实名未绑卡的状态
-
展示采用拟实物的卡片样式，并将切换光标的动作融合为下一步的button，并将button下移，使用户编辑时所有操作都集中在键盘部分，避免来回跳跃
-
卡类型自动识别，若未识别出来，提供手动选择，但因为提示不明显，很容易被忽略而无法继续进行
-
由于卡片有背景色，所以很吸引眼球，导致在刚进入的一段时间内无法注意到键盘上方的编辑框
-
编辑内容前端校验通过即可进入下一步，直到手机号等全部编辑完成提交才进入后台验证，验证通过则绑卡成功，验证不通过则在当前页（手机号）提示错误信息
3.2、微信和支付宝
微信：
image
支付宝
image
分析：
-
微信和支付宝的绑卡基本是一样的，所以放在一起讨论
-
因为是绑卡引导，所以两者都在第一个页面引导用户编辑银行卡号，编辑完成再补充其他需要的相关信息
-
全部编辑完成提交后台验证，验证未通过微信会直接回到银行卡编辑页，支付宝留在其他相关信息编辑页；对于容易编辑错误的用户并不友好，但显然微信和支付宝并不对此种情况做更多的处理，编辑错误大概是经过了验证，不因20%的用户去影响80%的用户
-
样式采用的是最简单最传统的列表式，对用户习惯没有任何影响
3.3、小米金融
image
分析：
- 同样，小米金融也使用同样的方式，进入直接引导用户编辑银行卡信息，然后在下一个页面判断用户是否已实名，若已实名，则只需编辑手机号码即可
3.4、人人贷
image
分析：
- 人人贷为三要素鉴权，内容相对较少，所以在一个页面内展示，也不会有更多的心里负担。
3.5、唯品金融
image
分析：
-
唯品金融采用最传统的方式，若用户未实名认证，则直接引导用户编辑身份信息，编辑完成满足前端检验规则，则直接进入绑卡页，编辑完银行卡信息后满足前端校验规则“立即绑卡”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提示。
到此，基本所有细节以赘述完毕，希望对你的绑卡设计有所帮助。
网友评论