Question

Axure如何设计制作APP支付密码键盘输入效果？

Answer 1

学会Axure，人人都是产品经理！这句话，想必对于准备自学Axure或者正在自学Axure的小伙伴们来说并不陌生！而想要完全掌握Axure成为产品经理，可能也并非容易，入门简单，但是交互原理可并不简单！因此提供了系列的Axure自学视频课，可以全面的学习Axure软件基础以及交互原型案例实操~

Axure设计制作APP支付密码键盘输入效果教程：

01第一步：设置载入时自动获取焦点

首先点击画布空白处（不用选中任何元件），在右侧栏的交互中，依次点击新建交互-页面载入时-获取焦点-输入框1；这里的交互是指，当页面载入时，输入焦点落在输入框1。

不用选中任何元件，点击新建交互-页面载入时-获取焦点-输入框1

接着选中全部输入框，在右侧栏中点击显示全部，展开全部属性，在最大长度中填上1。这里的交互是指，限制所有输入框的最大输入长度为1位。

选中全部输入框，点击显示全部

设置最大长度为1

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

首先选中输入框1，在右侧栏的交互中，依次点击新建交互-文本改变时-获取焦点-输入框2；然后点击启用情形，打开情形编辑窗，在弹窗中点击添加条件，修改第三个下拉菜单为!=(不等于)。

选中输入框1，点击新建交互

再点击文本改变时-获取焦点-输入框2

然后点击启用情形，打开情形编辑窗

在情形编辑窗中点击添加条件，修改第三个菜单为!=

这里的交互是指，如果当前元件（输入框1）有输入文字时，焦点跳至下一个焦点（输入框2）。

因此，依照此法，我们可以设置输入框2~6的焦点事件。首先在右侧栏中点击选中文本改变时，按Ctrl+C（将交互复制到剪贴板上），逐个选中输入框2~6，再按Ctrl+V（将交互粘贴到输入框2~6上）；然后逐个修改交互中的获取焦点为3~6（输入框6的下一个焦点仍然是自己）。

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

03第三步：设置删除时焦点跳转效果

上一步设置了正向焦点跳转，这一步就要设置反向焦点跳转了。依照上一步的交互逻辑，推断出这样的思路：如果当前元件被清空文字时，焦点跳至上一个焦点。

首先选中输入框6，在右侧栏中点击文本改变时的启用情形，打开情形编辑窗，在弹窗中点击添加条件，保持默认条件，直接点击确定关闭弹窗。

选中输入框6，点击添加情形打开情形编辑窗

在情形编辑窗中点击添加条件，再直接点击确定

接着点击情形2的添加动作，依次点击获取焦点-输入框5；这里的交互是指，如果当前元件（输入框6）为空时，焦点跳到上一个反向焦点（输入框5）。

点击情形2的添加动作

再点击获取焦点-输入框5

同样，依照此法，我们可以设置输入框5~1的反向焦点事件。首先在右侧栏中点击选中文本改变时的情形2，按Ctrl+C（将交互复制到剪贴板上），逐个选中输入框5~1，再按Ctrl+V（将交互粘贴到输入框5~1上）；然后逐个修改交互中的获取焦点为4~1（输入框1的下一个反向焦点仍然是自己）。

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

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

首先选中1键，在右侧栏的交互中，依次点击新建交互-单击时-设置文本-焦点元件，设置值为1。

选中1键，点击新建交互-单击时-设置文本-焦点元件，设置值为1

这里的交互是指，单击1键时，设置焦点元件的文本为1。同样的，依照此法，我们可以设置其他键盘的单击事件。

所以，接着在右侧栏中点击1键的交互（单击时），按Ctrl+C（将交互复制到剪贴板上），逐个选中其他键，再按Ctrl+V（将交互粘贴到其他键上）；然后逐个修改交互中，焦点元件的值为相应文字（Del键的文字为空）。

第四步删除键的交互

OK了，通过前面四步操作，APP支付密码键盘输入效果就绘制完成了

以上就是关于“Axure如何设计制作APP支付密码键盘输入效果？”的全部内容精彩分享了，希望能够帮助到你！更多Axure精彩分享，尽在Axure相关文章~如果你此时正在犹豫Axure去哪学、怎么学的话，那我不妨建议你直接学习体验一下我们的Axure自学自学课，专业讲师授课，可以从基础的知识点开始学起，逐步深入掌握哦~