赞
踩
今天给大家分享一套APP注册/登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博、微信、QQ、支付宝登录页面,注册页面,用户协议和隐私条款。该原型使用简单,交互完善。希望您们喜欢。
登录首页为本机号码登录页,里面有交互如下:
其他手机号码登录页面,也是注册的页面,里面有交互如下:
短信登录页面,里面有交互如下:
(1)模拟生成短信验证码,利用random函数生成6为随机验证码,具体公式:[[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]]
(2)设置动态面板状态改变时事件,即动态面板进入该页是,弹出显示短信验证码,5秒后自动隐藏短信验证码。鼠标下滑时,弹出显示。
(3)通过键盘输入验证码,原理和上面手机号码输入一致,输入框一定要是数字框,然后控制6位数字,输入6位数之后,需要进行判断,输入的6位数和验证码一致,则登录成功,设置动态面板跳转至首页;如果输入的6位数和验证码不一致,则清空输入的验证码,弹出提示,验证码错误。
(4)重新获取验证码,每次获取验证码之后,有60秒倒计时,60秒后,显示重新获取验证码按钮,点后后,重新发送并显示验证码。倒计时用动态面板做,设置2个state不断循环,循环间隔为1s,状态改变时,设置文本,target.text=target.text-1,if target.text>0。
(5)复制:点击复制按钮:设置输入的6位数=验证码。
(6)返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。
短信验证码输入错误时:
短信验证码输入正确时:
短信验证码复制黏贴功能:
短信验证码60秒后重新发送:
这里做了一个简单的模拟页面,交互如下:
没有输入手机号码或者手机号码不正确时:
账密登录页面,交互如下:
账号密码错误时:
账号密码正确时:
支付宝登录页面,交互如下:
微博登录页面
逻辑和支付宝登录页面一致:
微信登录页面
逻辑和支付宝登录页面一致:
QQ登录页面
逻辑和支付宝登录页面一致:
鼠标单击用户协议按钮时:设置动态面板跳转至用户协议页。
鼠标单击隐私条款按钮时:设置动态面板跳转至隐私条款页。
返回:鼠标单击返回按钮时,设置动态面板回到之前的页面
今天的分享到这里就结束了,有问题的小伙伴们可以在下方评论处给我留言哦,我们下期见。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。