编者按:现在注册一个微信号或者登录微信，都会用手机号作为账号。登录微信会遇到输入验证码的步骤。验证码会有一个发送按钮，然后你会收到短信，然后输入。；本文作者分享了微信验证码登录原型图的交互，大家一起看看吧。

大家好，我发布微信原型图，做一系列文章。文章第一部分是微信登录-验证码登录系列。

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

本文将解释获取验证码的60秒动态显示(有两种方法)和输入验证码的交互。

一、示范

https://xjdlw1.axshare.com

二、操作步骤及说明

点击“获取验证码”按钮，按钮将变为60s动态显示。

点击“输入验证码文本框”获得焦点。

在“输入验证码文本框”中输入字符。“文本框”提示隐藏文本，显示输入字符，显示“关闭图标”，并更改“登录按钮”的颜色和字体。

点击“关闭图标”或删除“文本框”字符，提示文本将再次显示在“文本框”中，“关闭按钮”将被隐藏，“登录按钮”将被更改为原来的颜色和字体。

三、60s动态显示操作说明一

单击‘获取验证码按钮’后，按钮文本变为“还剩X秒”，X从60一直递减到0，按钮文本变为“获取验证码”，一直循环。X每隔一秒，数值改变一次，是一个变量，那我们可以设一个全局变量X，初始值设为60。接下来就是没过一秒，X的值减一。单击交互下有一个‘等待’动作，我们将等待时间设为1000ms（1s），然后设置变量X的值为x-1即X=X-1。以上就是X值改变一次的操作，我们需要让以上操作一直重复下去。单击交互下有触发事件，我们将触发事件设为单击‘获取验证码按钮’。

触发事件操作:设计鼠标点击时，再次触发鼠标点击时间。在这里，点击“获取验证码按钮”，经过以上123个步骤，再次触发“获取验证码按钮”，相当于再次点击按钮。点击按钮后，你会继续执行点击后的动作，这样你就可以保持这些步骤循环，也就是x-1保持循环。

以上操作的运行结果就是点击按钮，按钮文本改变，X一直递减，到-1，-2，-3…我们需要给单击按钮加一下判断，判断一：当X的值大于0时，进行以上操作。判断二：当X=0时，将按钮文本变为“获取验证码”，同时将X的值设为60。

四.原型设计

①文本框，命名为“验证码文本框”。

②图标，命名为“关闭图标”，设置为隐藏状态。

③按钮，名为“获取按钮”。

④按钮，名为“登录按钮”。

五、60秒动态显示交互设计步骤

设置全局变量X，默认值设为60；选中“获取按钮”，新建交互，单击时，设置“获取按钮”文本为“还剩X秒”。

设置等待动作，等待时间1000ms。

将变量x的值设置为x-1。

将触发事件设置为单击“获取”按钮。

为上述操作添加案例1，变量值x >: 0 .

加上情况2，变量值X=0。

在情况2中，添加一个动作，并将“获取按钮”的文本设置为“获取验证码”。将变量x的值设置为“60”。

​

60s动态显示操作讲解二

该方法是利用动态面板的状态开关来实现的。它具体使用了动态面板状态循环切换和动态面板状态变化时的交互。

在新交互设置的触发动作后的添加动作中，设置面板状态，面板状态可以设置为始终循环，循环间隔为1s。

在新交互的触发动作中出现面板状态变化时，将x的值设置为-1。

当面板状态改变时，是动态面板的多个面板状态的改变或切换。例如，动态面板有两种状态，即状态1和状态2。当状态1变为状态2或状态2变为状态1时，面板状态改变。

60秒动态显示交互设计第二步

设置全局变量X，默认值设为60新建动态面板������վ��ƹ�˾，添加动态面板状态大于等于两个，（因为需要动态面板的状态来回切换，达到状态间循环切换，所以面板状态不能少于两个）将动态面板隐藏。选中“获取按钮”，新建交互，单击时，设置动态面板到下一项循环，循环间隔为1000ms。选中动态面板，新建交互，状态改变时，设置“获取按钮”文本为“还剩X秒”；设置变量值X的值为X-1.为以上动作添加情形1，变量值X>0。

选择动态面板并创建新的交互。当状态改变时，将“获取按钮”的文本设置为“还剩X秒”；将变量值X的值设置为X-1。为上述操作添加案例1，变量值x >: 0 .

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

不及物动词其他交互设计步骤(输入验证码时& # 8230；)

选择“登录按钮”，设置交互方式；选中后，更改按钮填充颜色和文本颜色。

选择“验证码文本框”创建新的交互。当文字发生变化时，增加案例1:当组件文字长度不为0时(当文字长度不为0时，表示输入框中有文字)，显示关闭按钮，将“登录按钮”所选择的状态值设置为真(为了改变登录按钮的样式)。

增加案例2，当元素文本长度不为0时，隐藏“登录按钮”，选择状态值为false。

选择“关闭按钮”创建新的交互，点击时将“验证码文本框”的文本设置为空。

结论:完成以上操作后，验证码登录高保真原型图完成。