1. 主页 > 行业资讯 > 设计文章 >

Axure 9焦点事件案例教程,APP支付密码键盘输入效

编者按:我们经常使用Axure进行交互设计,比如输入密码、验证码界面、弹出窗口等。虽然都是小设计,但在整体体验上很重要;本文作者分享了关于APP支付密码键盘输入效果的解释。我们一起来看看。

在Axure中,有很多常用的交互事件,如检查/取消选择、启用/禁用、显示/隐藏等。

然后,在本教程中,我们将讲解一个相对冷门的交互事件,focus事件的应用,以及如何使用focus事件绘制APP支付密码的键盘输入效果。

APP支付密码键盘输入效果

APP支付密码键盘输入效果

我们先来看看竣工效果图。可以看到,APP支付密码键盘输入效果的主要组成部分包括:

页面载入时,获取输入框1为焦点;点击键盘时,自动输入对应数字;当焦点框输入数字后,焦点自动跳至下一框;删除时,当焦点框被清空时,焦点自动跳到上一框。

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

支付密码界面初稿

为了节省时间,我们提前准备了设置支付密码的界面初稿。下面来说明一下如何画出密码键盘的输入效果。

01步骤1:设置为加载时自动获得焦点

首先点击画布的白色部分空(不选择任何组件),在右栏的交互中依次点击新建交互-页面加载-获取焦点-输入框1;这里的交互是指页面加载时,输入焦点落在输入框1上。

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

在不选择任何组件的情况下,单击新建交互-页面加载时-获得焦点-输入框1

然后选择所有输入框,点击右栏的全部显示,展开所有属性,最大长度填入1。这里的交互是指将所有输入框的最大输入长度限制为1位。

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

选择所有输入框,然后单击全部显示

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

将最大长度设置为1

第二步:输入时设置焦点跳转效果

首先选择输入框1,在右栏的交互中依次点击新建交互-文字变化时-获得焦点-输入框2;然后点击启用情况,打开情况编辑窗口,在弹出窗口中点击添加条件,将第三个下拉菜单修改为!=(不等于)。

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

选择输入框1,然后单击新建交互

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

当文本改变时,再次点击获得焦点输入框2

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

然后单击启用方案,打开方案编辑窗口

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

在情况编辑窗口中点击【增加条件】,将第三个菜单修改为!=

这里的交互是指如果当前组件(输入框1)有输入字符,焦点跳转到下一个焦点(输入框2)。

因此,按照这个方法,我们可以在输入框2~6中设置焦点事件。先点击右栏选择要更改的文本,按Ctrl+C(将交互复制到剪贴板),逐个选择输入框2~6,再按Ctrl+V(将交互粘贴到输入框2 ~ 6);然后,交互中的采集焦点一个接一个变成3~6(输入框6中的下一个焦点还是它自己)。

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

第二步是其中一个输入框的交互

第三步:设置删除时的焦点跳转效果

前向焦点跳转在上一步中设置,但反向焦点跳转在这一步中设置。根据上一步的交互逻辑,推导出思路:如果当前组件清除了空个字符,焦点跳转到上一个焦点。

首先选择输入框6,点击右栏文本变化时的启用情况,打开情况编辑窗口,点击弹出窗口中的添加条件,保留默认条件,点击确定直接关闭弹出窗口。

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

选择输入框6,点击【增加情况】,打开情况编辑窗口

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

在情况编辑窗口中单击“添加条件”,然后直接单击“确定”

然后点击案例2中的添加动作,再依次点击获取焦点-输入框5;这里的交互是指如果当前元素(输入框6)为空,焦点跳转到上一个反向焦点(输入框5)。

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

单击方案2的添加操作

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

然后单击获取焦点-输入框5

同样,按照这个方法,我们可以在输入框5~1中设置反向聚焦事件。先点击右栏文字变化时选中的情况2,按Ctrl+C(将交互复制到剪贴板),逐个选择输入框5~1,再按Ctrl+V(将交互粘贴到输入框5 ~ 1);然后把交互中的采集焦点一个个改成4~1(输入框1的下一个反向焦点还是它自己)。

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

第三步是其中一个输入框的交互

第四步:设置密码键盘输入效果

首先选择1键,在右栏的交互中依次点击新建交互-点击时间-设置文本-焦点元素,将值设置为1。

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

选择1键,单击新建交互-单击-设置文本-焦点组件,并将值设置为1

这里的交互意味着当点击1键时,焦点元素的文本被设置为1。同样,按照这个方法,我们可以设置其他键盘的点击事件。

所以,点击右栏1键的交互(点击时),按Ctrl+C(将交互复制到剪贴板),逐个选择其他键,再按Ctrl+V(将交互粘贴到其他键);然后将交互中焦点组件的值一个个修改为对应的文本(Del键的文本为空)。

Axure 9 实战案例,交互事件的应用 3,APP支付密码键盘输入

第四步,删除按键的交互

05结论

OK,通过前四步,完成APP支付密码键盘输入效果;但是细心的同学可能会发现,为什么输入6位密码后就被删除了,如果只想删除一半呢?

这个我就留给学生自己挖吧。建议你可以通过判断输入框名称是否为空来控制删除当前框或前框。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://ffjianzhan.cn/a/sjwz/516.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息