偶然在网上搜索了一下利用axure做倒计时效果,但是看到的居然是利用动态面板一张一张叠起来,我脑补了一下60个数字叠在一个动态面板里的画面………… 所以今天和大家交流一下我的制作思路——利用“文本输入框”特有的交互条件制作倒计时效果。 【进入正题】1. 倒计时现在多用于获取短信验证码,下面是我自己随意绘制的一个图,把一些该有的元素先做好; 要点:先把短信验证码的三种情况都先列出来:
2. 添加一个文本输入框到数秒的框框那里(灰色的那个),并把数字、文本框的属性设置好(隐藏边框、填充设置为透明) 3. 把这三个按钮(获取、数秒、重新获取)放到一个动态面板的不同状态上,这个就不配图了; 然后设置他们的交互,这里先看数秒的交互:可以看到文本输入框有个特有的交互功能——文字改变时; 这里设置两个用例:
4. 然后就是其余两个按钮了: 获取: 直接动态面板状态改为“数秒”并设置数字为44(等待一秒,减一,这样才能触发交互) 重新获取: 设置动态面板的状态到数秒,并设置数字为45(因为之前已经数到0了,所以现在直接设置为45就能触发交互) 6. 好了,来看看效果吧(习惯性加了个手机壳): 如果你觉得有改进的地方,欢迎提出来。 来源:人人都是产品经理 |
|