Axure 9 学习教程:制作验证码倒计时获取交互效果

2020-08-0714:24:07原型设计Comments2,520 views字数 767阅读模式

思考一下获取验证码到重新获取的流程:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

一、元件准备

根据这个流程,我们可以很清楚地知道,我们需要的元件有文本输入框、按钮以及全局变量的设置(一般涉及到数据动态变化的设计效果,我们都可以考虑是否需要全局变量)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

二、元件布局与美化

准备好元件之后,我们接下来将元件进行布局以及细节的美化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

文本框:进行输入内容提示(手机号、验证码)、位数限制(11位、6位)、边框美化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

按钮:说明按钮功能、按钮颜色与大小、圆角大小。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

最终布局效果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

三、全局变量设置

我们在Axure9的最上面找到「项目」-「全局变量设置」,并点击添加新的变量captcha(命名随意),默认值设置为60。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

四、交互效果设置

在设置交互效果之前,我们再进一步思考一下,点击获取验证码这个动作之后,元件有哪些变化。我们可以了解到,点击之后,获取验证码的按钮文案变为了倒计时+后重新获取,计时结束后文案变为重新获取且可以再次点击获取。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

这一过程我们可以对应拆分到交互设置上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

第一阶段:点击进入倒计时

文案变化为倒计时文案:点击后对按钮进行「设置文本」。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

倒计时:设置等待时间为1000ms,且设置变量值captcha-1,之后对于这个动作进行循环触发。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

在我们思考第二阶段如何去做时,我们需要了解到,captcha值最终会变为0,当为0时继续触发执行变量值-1时,会变为负值,这时恰好是变为重新获取的时机,即为进入第二阶段,故我们在第一阶段和第二阶段应该分别假如情形进行判断,则第一阶段完整的交互设置如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

第二阶段:重新获取并可再次点击倒计时

文案再变化为重新获取:点击后对按钮进行「设置文本」。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

再次点击可倒计时,重置倒计时:设置变量值captcha为60。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

五、最终效果

设置完所有交互效果之后,我们可以在每个元件上添加说明,方便与开发人员进行沟通。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

Axure 9 学习教程:制作验证码倒计时获取交互效果Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

最终效果:Axure 9 学习教程:制作验证码倒计时获取交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

本文由 @伪文青 原创发布于人人都是产品经理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/19946.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/19946.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定