Axure微信高保真原型图--验证码登录方法二

文章教程简介

大家好，我将发布微信高保真原型图制作一系列文章，第一部分文章为微信登录——验证码登录系列。

验证码登录系列分为三篇文章，分别为获取验证码60秒动态展示、键盘模拟输入、验证码验证。

本文将为大家讲解获取验证码60秒动态展示（第二种方法，第一种和其他交互请查看第一篇文章）

演示（动图+在线）

https://xjdlw1.axshare.com

60s动态展示操作讲解

这个办法使用动态面板的状态切换来完成。具体使用了动态面板状态循环切换和动态面板状态改变时的交互。

在新建交互设置完触发动作后的添加动作中有设置面板状态，可将面板状态设置为一直循环，循环间隔为1s。

在新建交互的触发动作中有一个面板状态改变时，设置面板状态改变时，将X的值-1。

面板状态改变时就是动态面板多个面板状态改变或者切换，比如动态面板有有两个状态分别为状态1和状态2，当从状态1变为状态2或者状态2变为状态1时，面板状态就改变了

60秒动态展示交互设计步骤

1. 设置全局变量X，默认值设为60

2. 新建动态面板，添加动态面板状态大于等于两个，（因为需要动态面板的状态来回切换，达到状态间循环切换，所以面板状态不能少于两个）将动态面板隐藏。

3. 选中“获取按钮”，新建交互，单击时，设置动态面板到下一项循环，循环间隔为1000ms。

4. 选中动态面板，新建交互，状态改变时，设置“获取按钮”文本为“还剩X秒”；设置变量值X的值为X-1.

5. 为以上动作添加情形1，变量值X>0。

1. 添加情形2，变量值X=0.

2. 在情形2下添加动作，设置动态面板停止循环；设置变量X的值为“60”；设置“获取按钮”文本为”获取验证码”。

其它交互设计步骤（输入验证码时...）

查看上篇文章...

结语：完成以上操作，验证码登录的高保真原型图就完成了。