Axure微信支付界面制作操作实例

0 2021-06-04 17:37 内容校对:盖帽老弟
收藏(0) 共有 485 人学习了本教程

《Axure微信支付界面制作操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,交互产品,界面等多维度案例或实操来进行更多的学习;此教程是由zilin在2021-06-04发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。

今天教大家怎么制作微信支付界面微信支付axure原型设计,微信支付的时候,需要输入支付金额和支付密码,具体制作过程如下:

Axure微信支付界面制作操作实例

效果查看:

【需求分析】

1、点击数字键盘,在转账金额区域录入对应的金额;

2、点击删除键,删除对应的金额数字;

3、0不能作为第一个数字字符;

4、小数点不能作为第一个字符,并且只能出现一次;

5、小数点只能出现一次;

6、小数点后面最多出现两位数字;

7、所有输入的字符不能超过10个;

【原型设计】

1、拖入转账金额输入框,用于显示转账的金额;

2、拖入0-9,小数点,以及删除和转账等矩形框,如上图那样布局;

【交互设计】

1、对于1-9的数字键盘,判断已经输入的是否大于10,或者是否已经输入了小数点,如果不是,则把数字键盘的字符输入金额输入框;

Axure微信支付界面制作操作实例

2、对于0,除了判断步骤1的条件之外,还需要添加是否当前金额输入框是否为空,即如果当前金额输入框为空,则不能输入0(0不能作为第一个字符);

Axure微信支付界面制作操作实例

3、对于小数点,除了判断步骤1的条件之外,还需要添加判断当前金额输入框是否为空,以及是否已经输入小数点,即小数点不能为第一个字符,小数点只能输入一次;

Axure微信支付界面制作操作实例

4、对于删除键,判断转账输入框的金额是否为空,如果不为空,则删除输入框中最后一个字符;

Axure微信支付界面制作操作实例

到了这一步,微信支付小键盘就算完成了,同学们赶紧试试吧。

以上就是Axure微信支付界面制作操作实例全部内容介绍了,关于更多axure9教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由zilin原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员