今天给大家分享一套APP注册/登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博、微信、 *** 、支付宝登录页面,注册页面,用户协议和隐私条款。该原型使用简单,交互完善。喜欢该原型的小伙伴们可以在评论处给我留言哦。
效果图如下:
*** *** 1. 本机号码登录页登录首页为本机号码登录页,里面有交互如下:
本机号码一件登录,鼠标单击时,设置动态面板跳转到首页;
其他手机登录:鼠标单击其他手机登录时,设置动态面板跳转到其他手机号登录页面;
注册:鼠标单击注册按钮时,和上面其他手机登录一致,登录和注册页面一致,方便客户注册;
账密登录:鼠标单击账密登录时,设置动态面板跳转到账号密码登录页;
三方登录:鼠标单击不同图标(支付宝、微博、微信、 *** ),设置动态面板跳转至对应页面。
2. 其他手机号码登录页面其他手机号码登录页面,也是注册的页面,里面有交互如下:
手机号码输入框获取焦点时,弹出密码键盘,密码键盘 *** 方式可以参考我之前的文章《axure教程:手机键盘》。
获取短信验证码按钮默认禁用,当验证到手机号无误时,启用,启用后,鼠标单击时设置动态面板跳转至短信验证码页面。
手机号码判断方式,我们判断国内的手机号码,做了一个简单的验证,之一,输入必须是数字,第二,字符长度为11,第三,首位数是1。
刷脸登录:点击刷脸登录按钮,设置动态面板跳转至,刷脸登录页面。
三方登录:鼠标单击不同图标(支付宝、微博、微信、 *** ),设置动态面板跳转至对应页面。
账密登录:鼠标单击账密登录时,设置动态面板跳转到账号密码登录页。
返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。
3. 短信登录页面短信登录页面,里面有交互如下:
(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秒后重新发送:
4. 人脸登录页面这里做了一个简单的模拟页面,交互如下:
在其他手机登录页面通过点击人脸登录,如果手机号码输入正确,设置动态面板跳转到人脸登录页;如果输入不正确,提示重新输入。
进入页面后会有动态提示文字,例如,没有识别到人脸等。设置文字多少秒后显示即可。
识别失败:等待n秒后,会弹出提示,识别失败。点击再来一次按钮,设置动态面板重新进入该页面即可,点击退出,设置动态面板回到之前的页面
返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。
没有输入手机号码或者手机号码不正确时:
5. 账密登录页面账密登录页面,交互如下:
账号和密码输入框获取焦点时,弹出密码键盘,密码键盘 *** 方式可以参考我之前的文章《axure教程:手机键盘》
这篇文章围绕Behance的创始人和Adobe的首席产品官——斯科特·贝尔斯基对于如何优化产品的思考而展开,介绍了几个关于简化和迭代产品的部分,从事产品工作的读者不要错过呀! 在Techcrunch...
每年我都能遇到很多到了发愁的小伙伴,不知道怎么评估员工的绩效成绩,不知道怎么给员工定来年的绩效,没有好的方法考核设计师的绩效。甚至很多人很排斥绩效考核,认为设计师根本不需要通过绩效来考核。 我将会用...
公司想要发展一个新领域,需要产品经理去了解这个领域的信息。或者产品经理从事一个新的业务领域,需要了解这个新的行业。那么如何快速了解这个行业呢? 一、容易陷入的误区 去了解一个领域,很容易陷入一个误区...
罗永浩从来都不缺新闻,一直都是焦点。锤子科技的前任掌门人罗永浩在沉寂了一段时间之后,日前正式在微博上宣布即将“王者归来”。并表示,“看了招商证券那份著名的调研报告之后,我决定做电商直播了。虽然我不适合...
近些年来,在企业运营中数据统计和分析越来成为一项日常且重要的工作,数据报表开始在企业中承担着十足轻重的作用,本章节将结合基本的数据分析方法“分布、对比、趋势”,搭建一个体系化的“会员销售报表”。 第...
“品牌的定位能够将产品转化为品牌,以及发现自己的目标群体,建立新的认知。”那么我们该如何构建产品品牌定位模型?这篇文章从概念、定位方法、定位策略等方面对该问题进行了解答,欢迎感兴趣的童鞋阅读。 品牌...