1. 主页 > 行业资讯 > 设计文章 >

微信高保真原型地图-验证码登录

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

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

验证码登录系列分为三篇,分别是获取验证码的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。

微信高保真原型图--验证码登录

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

微信高保真原型图--验证码登录

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

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/523.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息