AXURE手机版注册登录原型（下载+教学）

今天给大家分享一套APP注册/登录界面模板，其中包括本机登录页面，短信验证登录页面，密码登录页面，人脸登录页面，微博、微信、QQ、支付宝登录页面，注册页面，用户协议和隐私条款。该原型使用简单，交互完善。希望您们喜欢。

原型预览及下载页面：

https://www.pmdaniu.com/jump?go=https%3A%2F%2Fwww.pmdaniu.com%2Fstorages%2F119690%2F088f7baaed946b1e15b220431194dd81-69620%2Fstart.html

效果介绍

1. 本机号码登录页

2. 手机号码登录页

3. 短信验证码登录页

4. 账号密码登录页

5. 刷脸登录页

6. 支付宝授权登录页

7. 微博授权登录页

8. 微信授权登录页

9. QQ授权登录页

10. 用户协议页

11.隐私政策页

12. 正在登录页面

制作方法

1. 本机号码登录页

登录首页为本机号码登录页，里面有交互如下：

本机号码一件登录，鼠标单击时，设置动态面板跳转到首页；
其他手机登录：鼠标单击其他手机登录时，设置动态面板跳转到其他手机号登录页面；
注册：鼠标单击注册按钮时，和上面其他手机登录一致，登录和注册页面一致，方便客户注册；
账密登录：鼠标单击账密登录时，设置动态面板跳转到账号密码登录页；
三方登录：鼠标单击不同图标（支付宝、微博、微信、QQ），设置动态面板跳转至对应页面。

2. 其他手机号码登录页面

其他手机号码登录页面，也是注册的页面，里面有交互如下：

手机号码输入框获取焦点时，弹出密码键盘，密码键盘制作方式可以参考我之前的文章《axure教程：手机键盘》。
获取短信验证码按钮默认禁用，当验证到手机号无误时，启用，启用后，鼠标单击时设置动态面板跳转至短信验证码页面。
手机号码判断方式，我们判断国内的手机号码，做了一个简单的验证，第一，输入必须是数字，第二，字符长度为11，第三，首位数是1。
刷脸登录：点击刷脸登录按钮，设置动态面板跳转至，刷脸登录页面。
三方登录：鼠标单击不同图标（支付宝、微博、微信、QQ），设置动态面板跳转至对应页面。
账密登录：鼠标单击账密登录时，设置动态面板跳转到账号密码登录页。
返回：鼠标单击返回按钮时，设置动态面板回到之前的页面。

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教程：手机键盘》
密码输入框设置2个，可转为动态面板。一个可见，一个可见，点击右边的显示、隐藏密码的按钮时，分别显示对应的输入框即可。这里需要注意，任意一个输入框文本变化时，需要设置另外一个输入框与该输入框的文本一致。
账号和密码验证：设置一个中继器，里面有两列，一列账户名、一列为密码。点击登录按钮后，进行账号的帅选，如果中继器可见数据条数为0，显示错误弹窗；如果不为0，对比中继器密码和输入密码是否一致，如不一致，显示错误弹窗，如果一致，设置动态面板跳转至首页。
登录按钮：默认禁用、如果账户输入框和密码输入框均不为空，则启用。
验证码登录：鼠标单击验证登录码时，设置动态面板跳转到其他手机号登录页面。
注册：鼠标单击注册按钮时，和上面验证码登录一致，登录和注册页面一致，方便客户注册。
返回：鼠标单击返回按钮时，设置动态面板回到之前的页面。

账号密码错误时：

账号密码正确时：

6. 三方登录页面

支付宝登录页面，交互如下：

点击支付宝图标时，设置动态面板跳转至支付宝登录页面。这里需要做一个相识的页面。
点击授权按钮，设置动态面板跳转至首页。
点击用户协议，设置动态面板跳转至支付宝用户协议。
返回：鼠标单击返回或暂不授权按钮时，设置动态面板回到之前的页面。

微博登录页面

逻辑和支付宝登录页面一致：

微信登录页面

逻辑和支付宝登录页面一致：

QQ登录页面

逻辑和支付宝登录页面一致：

7. 用户协议和隐私条款

鼠标单击用户协议按钮时：设置动态面板跳转至用户协议页。

鼠标单击隐私条款按钮时：设置动态面板跳转至隐私条款页。

返回：鼠标单击返回按钮时，设置动态面板回到之前的页面

今天的分享到这里就结束了，有问题的小伙伴们可以在下方评论处给我留言哦，我们下期见。