在“互联网+”和新媒体的推动下,现在几乎每个群体、每个行业都有了自己的专属的APP,便于共享交流行业内的经验感受,特别是在金融行业尤为突出,下面深圳APP开发公司红孩儿科技小编为您说一下收银APP的设计方案:
app收银台:在移动端进行支付、账户充值时所调用的功能模块。
我们公司的app主打移动支付功能。
收银台是我们公司app内已存在的功能模块,产品经理打算整体改版,一期先从“账户充值”入手。
收银台在支付类app涉及的场景较多,任何改动都可谓“牵一发动全身”。在做账户充值的交互方案时需要把其他场景都考虑齐全,以保证交互方案可以适用app内包含的所有场景。
通过与产品经理沟通,确定使用收银台的场景如下:
图1.app收银台包括的场景
其中账户充值与其他场景不同的是,账户充值的资金源不包括:账户余额、白条;而且不参与优惠活动,没有折扣、代金券。
梳理流程
图2.账户充值整体流程
上图包括主流程账户充值和子流程绑定银行卡(下文简为“绑卡”),这2个流程如何结合有讲究。
关于流程的设计有两个注意的点:
1、用户未绑卡时,打开充值页面,应该如方案一让用户输入金额后自动跳转绑卡流程,还是如方案二页面上只有绑定银行卡的功能,让用户先去完成绑卡整个子流程再进入充值流程?
方案一
图3.未绑卡方案一
图4.未绑卡方案二
个人认为让用户先输金额后自动跳转绑卡流程会好一些。理由如下:
(1)未绑卡时先输入金额,使未绑卡和已绑卡的完成充值流程保持更高的一致性;
(2)用户从上个页面进入到此页面是为了充值,如果一进来让用户去绑卡,会让用户觉得莫名其妙,先输入金额更符合用户的心智模型。
2、未绑卡时,用户完成绑卡流程后,跳转至哪个页面,应该采取下图的方案一还是方案二?
方案一
方案二
图6.绑卡后方案二
从用户体验的角度来说,自动跳转至支付密码页是最好的(即方案二),整个过程很自然流畅,跳转到已绑卡充值流程的首个页面完全是多余的一个步骤。
但此次我选择的却是方案一,原因在于一个合理的交互方案应当适当配合后台开发的设计逻辑。
我一开始也没意识到前端的一个页面,竟有可能牵扯到后台整个逻辑的改变。
方案一对应的后端逻辑如下:
图7.绑卡后后端方案一
方案二对应的后端逻辑如下:
图8.绑卡后后端方案二
方案二在后端相当于把两个各自独立的流程打通,把绑卡流程嵌入到充值流程中。而在我们公司,后端是分开维护充值流程和绑卡流程的,如采用方案二需要花费大量精力重新设计后台,成本过高。
交互细节
1、选择资金源弹层
图9.选择资金源弹层
可以很直观地看出页面二在视觉上更聚焦,页面一所有内容平铺显示,视觉中心不够突出。但当列表项较多时,页面二不容易滚动选中想要的资金源,且不可用资金源在该方式下需要隐藏。
2、输入支付密码弹层or页面
图10.输入支付密码两种方式
跟产品经理争论了很久输入支付密码时应该用整屏的页面还是半透明弹层。
产品经理的理由有两个,一是使用整屏的页面无需考虑数字安全键盘在不同屏幕的适配问题(数字安全键盘由外部提供,我们公司内部可控性较低),二是微信在支付过程也出现整屏输入支付密码的页面。
我一开始也纳闷,为什么微信会在收银台使用两种输入支付密码方式(微信截图如下)?
图11.微信输入支付密码两种方式截图
思考清楚后,发现弹层和页面分别对应着两种不同的场景。
弹层的场景是:输入支付密码为了达到某个目标(充值、提现、转账等),此场景下输入支付密码只是流程中的一个步骤,希望用户快速操作以达到目标。
页面的场景是:输入支付密码本身就是目标(验证身份),所以此处交互上并没有希望用户快速输入,反而需要用户较为仔细慎重地进行操作。
3、总结了金额输入框的数字金额规则,如下
a、首位输入小数点,输入框显示为“0.”;
b、首位输入“0”后,输入框显示为“0.”;删除小数点时,输入框同时删除“0.”(此处原来想的是如果输入“081”,输入框显示“81”,跟同事讨论时,同事觉得“0”在数字键盘上的位置,用户误操作的可能性较低。我俩还拿了传统的计算器看首位输入“0”的效果,最终敲定方案);
c、小数点后只能有两位数字,继续输入,输入框无反应;
d、不可输入两次小数点,第二次输入小数点时,输入框无反应。
4、xx卡充值时输入框的规则(xx卡是我们公司内部的充值卡,类似话费卡充值;卡号为16位,密码为8位。)
图12.xx卡充值
a、为保证卡号的可读性,卡号每4位中间隔空格,若用户发现输入错误,要删除,务必删除“空格”;
b、密码不需要脱敏(因为纸质的xx卡上就印有密码,所以app内也没必要做“不可见”处理;另外密码不是用户自己设置的,密码可见可降低输错率);
c、如果卡号超过16位,再输入字符,输入框没有反应;如果密码超过8位,再输入字符,输入框没有反应;
d、卡号一输入,及时未满16位,“下一步”按钮高亮;密码未输满8位,“下一步”按钮置灰(此处考虑到卡号为16位,位数较长,用户单肉眼看可能不容易发现输漏,点击按钮后弹窗提示更为直观)。
如果您想了解更多关于深圳APP开发/深圳APP开发公司/深圳APP定制开发/直播APP开发等信息内容,详情请访问红孩儿科技官方网站:http://www.hhekj.com 此文章是由深圳市红孩儿信息技术有限公司原创,转载请注明信息来源。
咨询热线:赵先生:18719456473 段先生:13714194103
固话:0755-23610392 QQ:1678838862 QQ:1124225524
版权保护:本文为深圳红孩儿科技公司原创(翻译)文章,转载请注明来源深圳红孩儿科技公司
今年NBA我猜又是骑士和勇士相遇总决赛,用这款APP看更加震撼
2017-04-29 15:00:27
2017-12-21 16:18:27
2018-05-09 10:13:55
2018-08-30 09:54:20
2017-07-10 10:16:03
2018-02-10 10:37:51
2019-03-11 10:02:16
2017-04-20 09:54:00
2017-05-06 09:53:09
2018-02-03 10:35:02
2020-06-12 09:30:03
相关文章
RELATED ARTICLES
【深圳APP定制开发】智慧社区超市App开发
随着互联网的不断发展,人们的生活也越来越便利,并且移动手机端的发展也使得很多居住在社区人们的生活更加方便,其中智慧社区超市APP开发就给居住在社区的人们带来了一定的便利,利用APP就能轻易购买到自己想要的商品,十分方便,同时也带动了小区超市的经济发展。
【深圳APP开发公司】关于腾讯元宇宙的10个事实和7个猜想
「超级QQ秀」的最新发布,引起关于腾讯进军元宇宙的各种声浪。
【深圳APP定制开发】员工培训APP开发可以实现哪些便捷?
近年来,在线学习逐步在人才培训领域中广泛运用起来,企业想要长远的发展,内部培训是必不可少的,如今企业对内部员工培训也是越来越看中,企业本身非常重视人才的培养,需要分析企业的性质、企业未来的发展方向等方面,需要加入各种培训课程,以方便企业进行更好的管理措施。
【深圳APP开发】减肥瘦身app软件开发解决方案?
减肥关于不少人来说,不仅仅是一种寻求健康的方法,一起也是想要经过减肥来到达塑形的意图,毕竟我们都知道其实每一个胖子很大概率仍是潜力股,假如说可以瘦下来的话,那么不论是在形象上仍是气质上都会得到一定的提高,对此,也使得越来越多的人会想要挑选减肥瘦身的方法,这也为减肥瘦身app软件开发的盛行供给了更多的依据。
深圳语音社交APP系统开发,提供纯粹的语音社交
我们不难发现,语音社交app的应用十分广泛,像音乐电台、游戏开黑、语音游戏等场景下都有它们的身影。语音聊天交友app需要为用户提供长时间、高频次语音连麦互动功能,在网络抖动时保证语音通话流畅、延迟小、卡顿低、音质好。
叫外卖的APP开发需要多少钱?
叫外卖的APP开发需要多少钱?APP开发多少钱?一直是企业公司最关注的问题,因为考虑到自己的成本预算问题,很多时候在与客户谈的时候,都是一个硬核的问题,不过要知道的是在找APP开发公司.....
停车场APP开发,解决出行烦恼
在我国机动车数量越来越多,尤其是私家小车的数量。这就导致大家开车出行的时候,都面临着找停车位的问题,尤其在一些商圈、写字楼附近,停车位更是稀缺,很多时候人们开车找了半天的停车场可能没有车位了,拜拜耗费了时间和精力。这种情况下只需要一款停车场APP就能解决所有的烦恼,停车场APP开发不仅能帮车主找到空车位,车主还能通过APP自主缴费,极大地方便了人们的出行生活。
深圳APP开发公司开发娱乐城app
您想了解更多关于深圳APP开发,深圳APP开发公司,深圳APP定制开发,直播APP开发|APP开发公司|人工智能|AI等信息内容,详情请访问红孩儿信息技术网站:http://www.hhekj.com
使用我方自主研发的技术在后期可以节省很大一笔费用,在外面都是要接入sdk接口会产生很大一笔费的,有兴趣的来咨询。