大家好,我将发布微信高保真原型图制作一系列文章,第一部分文章为微信登录——验证码登录系列。
验证码登录系列分为三篇文章,分别为获取验证码60秒动态展示、键盘模拟输入、验证码验证。
本文将为大家讲解获取验证码60秒动态展示(共有两种方法)以及输入验证码交互等。
点击”获取验证码按钮“,按钮变为60s动态显示。
点击“输入验证码文本框”,获取焦点。
在“输入验证码文本框”输入字符,“文本框”提示文字隐藏,显示输入字符,显示“关闭图标”,“登录按钮”颜色、字体改变。
点击“关闭图标”或删除“文本框”字符,“文本框”重新显示提示文字,隐藏“关闭按钮”,“登录按钮”变为原来的颜色、字体。
触发事件操作:设计鼠标单击时,再次触发鼠标单击时间,在这就是点击‘获取验证码按钮’,进行以上123步,再次触发单击‘获取验证码按钮’,相当于又点击了一次按钮,单击按钮以后就会继续进行单击后的动作,这样操作就可以让这几步一直在循环,也就是x-1一直在循环。
①文本框,取名“验证码文本框”。
②图标,取名“关闭图标”,设为隐藏状态。
③按钮,取名“获取按钮”。
④按钮,取名“登录按钮”。
设置等待动作,等待时间为1000ms。
设置变量X的值为x-1。
设置触发事件,为单击“获取按钮”。
为以上动作添加情形1,变量值X>0。
添加情形2,变量值X=0。
在情形2下添加动作,设置“获取按钮”文本为”获取验证码”。设置变量X的值为“60”。
选中“登录按钮”,设置交互样式;选中时的样式,改变按钮填充颜色和文字颜色。
选中“验证码文本框”新建交互,文本改变时,添加情形1为元件文字长度不为0时(当文本长度不为0时,说明输入框中有文字),显示关闭按钮,设置“登录按钮”选中状态值为真(为了让登录按钮改变样式)。
添加情形2,为元件文字长不为0时,隐藏“登录按钮”选中状态值为假。
选中“关闭按钮”,新建交互,单击时设置“验证码文本框”文本为空。
结语:完成以上操作,验证码登录的高保真原型图就完成了。
题图来自Unsplash,基于CC0协议
<