入职公司以来,从0到1做了花生小店商家端app、花生小店渠道端app、花生优享小程序、花生严选小程序、花生直邮小程序等,因为是初创项目,经常产品要开会了解需求,而刚开始的项目人手也会经常不足,因此为了赶项目,设计师就担负起了交互和设计的工作;

一、关于银行卡的设计流程

步骤如下:

1、了解产品的需求是什么?为什么有这个需求?是要解决什么问题?如:之前的银行卡功能,前期产品原型设计有了银行卡信息的收集,但是没有一个展示已经绑定了的银行卡的展示;

2、了解需求的细节和功能要求,必定要的信息等;如:需要的信息是银行名称和银行卡号展示,默认和解绑银行卡功能;银行卡密码设置功能;成功反馈等;

3、竞品调研;如:银行卡的在微信和支付宝这2个我们日常是用的最多的支付app(如下图),用户习惯已经很好的养成了,因此可以参考他们的界面展示形式和交互流程(可以把整个流程弄在一张文件里面,可以看得见所有的交互和大概的流程;)

4、根据竞品的界面和交互展示方式,然后根据产品需要的功能和我们合作的支付第三方的特定的需求,整体综合起来做一个适用于自己产品的设计;记得要先做下快速原型,流程和表现方式给需求确认下没有问题之后就开干(我比较常用手绘原型和sketch快速原型)

交互和高保真需要考虑的情况如下:

A、竞品的界面展示方式(如渐变色/卡片等),交互方式(解绑等)参考;也就是你需要什么功能,需要用到什么,参考下竞品好的方式和常用的方式,吸收好的;

B、结合我们产品阶段:因为是从0到1的阶段,开发有很多功能要做,不可能一个功能过于细致,且一开始的时候就一个设计,也没有那么多的时间在一个功能里面时间过多;不可能像支付宝和微信那样,每一个银行的底片都给一个特定的银行logo底片,因此我这边是做了一个中和,只有颜色,没有logo底片;

C、因和我们合作的支付第三方只支持银联银行,根据产品的想法,从中选择了比较大的有代表性的17家银行;我根据竞品和银行的logo颜色,找出相关的规律,然后把相应的色系从前端和后台可以相对应;(对应的银行如下图)

后台对应规则:

a、红色系:BOB、BOC、CITICIB、CMB、GDB、HB、ICBC、
b、蓝色系:BCM、CCB、CIB、HCCB、SPDB

c、绿色系:ABC、CMBC、PSBC

d、黄色系:BOS、PABC、

e、紫色系:CEB

D、卡片的流程里面,有解绑和解锁的功能,这些参考了qq左滑的“置顶”和“删除”功能,但是因为这个功能和之前的“微信”和“支付宝”的功能不一样,且一开始没有养成用户习惯,因此,我在此设计的时候是有一个指引的插画的,这个是在用户第一次用这个功能的时候出现,后续知道了就不会出现;

设计出来的流程和界面如下:

这个功能因为自己做的时候是初稿,因此后续的修改和调整也是必不可少的,毕竟优秀的作品都是精雕细琢的;各位设计师们,一起加油!