快好知 kuaihz订阅观点

 

Axure原型技巧:利用文本输入框做倒计时的效果

偶然在网上搜索了一下利用axure做倒计时效果,但是看到的居然是利用动态面板一张一张叠起来,我脑补了一下60个数字叠在一个动态面板里的画面…………

所以今天和大家交流一下我的制作思路——利用“文本输入框”特有的交互条件制作倒计时效果。

【进入正题】

1. 倒计时现在多用于获取短信验证码,下面是我自己随意绘制的一个图,把一些该有的元素先做好;

要点:先把短信验证码的三种情况都先列出来:

第一次获取

倒计时

重新获取(当然你也可以换种显示方式)

2. 添加一个文本输入框到数秒的框框那里(灰色的那个),并把数字、文本框的属性设置好(隐藏边框、填充设置为透明)

3. 把这三个按钮(获取数秒、重新获取)放到一个动态面板的不同状态上,这个就不配图了;

然后设置他们的交互,这里先看数秒的交互:可以看到文本输入框有个特有的交互功能——文字改变时;

这里设置两个用例:

当秒数大于等于1的时候,让数字继续递减,

当秒数等于0的时候,设置动态面板状态到“重新获取

4. 然后就是其余两个按钮了:

获取

直接动态面板状态改为“数秒”并设置数字为44(等待一秒,减一,这样才能触发交互)

重新获取

设置动态面板的状态到数秒,并设置数字为45(因为之前已经数到0了,所以现在直接设置为45就能触发交互)

6. 好了,来看看效果吧(习惯性加了个手机壳):

【补充】

a.第三步开始,需要用到“局部变量”来获取文本框上的数字

b.毕竟是用文本输入框制作的,避免在预览展示的时候产生可点击输入文字的效果,建议加个透明的矩形或者把文本输入框的属性改为“只读”

c.附上我的原型文件:http://pan.baidu.com/s/1o6vOtFO

如果你觉得有改进的地方,欢迎提出来。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:原型  原型词条  倒计时  倒计时词条  文本  文本词条  输入  输入词条  利用  利用词条  
原型

 Axure教程:原型设计之获取验...

当前,很多表单的设计都会使用手机获取验证,一方面商家可以精准获取用户的手机号码,以便之后的精准推广,另一方面也防止用户批量注册小号扰乱平台秩序。今天就主要说说如...(展开)

原型

 Axure 美女浏览原型,内含:...

先上一张原型主界面的图片,原型在文章末尾,自己去下载本案例是以浏览图片为范本的原型设计(仅供娱乐与学习)。内部包含多层动态面板,函数应用,应该会对初学者有一点帮...(展开)

原型

 Axure教程:随机抽奖

前段时间在线下看到一个抽奖的转盘,发现很有意思,不过这个转盘是需要手动操作,突然我就联想到若是这种抽奖转盘若放在我们APP中如何实现;然而作为一名初级产品经理,...(展开)