起点学院课程

Axure教程:一个通用的app注册/登录页

6 评论 3150 浏览 21 收藏 12 分钟
15天0基础极速入门数据分析,掌握一套数据分析流程和方法,学完就能写一份数据报告!了解一下>>

今天给大家分享一套APP注册/登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博、微信、QQ、支付宝登录页面,注册页面,用户协议和隐私条款。该原型使用简单,交互完善。喜欢该原型的小伙伴们可以在评论处给我留言哦。

效果图如下:

制作方法

1. 本机号码登录页

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

  1. 本机号码一件登录,鼠标单击时,设置动态面板跳转到首页;
  2. 其他手机登录:鼠标单击其他手机登录时,设置动态面板跳转到其他手机号登录页面;
  3. 注册:鼠标单击注册按钮时,和上面其他手机登录一致,登录和注册页面一致,方便客户注册;
  4. 账密登录:鼠标单击账密登录时,设置动态面板跳转到账号密码登录页;
  5. 三方登录:鼠标单击不同图标(支付宝、微博、微信、QQ),设置动态面板跳转至对应页面。

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

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

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

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. 人脸登录页面

这里做了一个简单的模拟页面,交互如下:

  1. 在其他手机登录页面通过点击人脸登录,如果手机号码输入正确,设置动态面板跳转到人脸登录页;如果输入不正确,提示重新输入。
  2. 进入页面后会有动态提示文字,例如,没有识别到人脸等。设置文字多少秒后显示即可。
  3. 识别失败:等待n秒后,会弹出提示,识别失败。点击再来一次按钮,设置动态面板重新进入该页面即可,点击退出,设置动态面板回到之前的页面
  4. 返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。

没有输入手机号码或者手机号码不正确时:

5. 账密登录页面

账密登录页面,交互如下:

  1. 账号和密码输入框获取焦点时,弹出密码键盘,密码键盘制作方式可以参考我之前的文章《axure教程:手机键盘》
  2. 密码输入框设置2个,可转为动态面板。一个可见,一个可见,点击右边的显示、隐藏密码的按钮时,分别显示对应的输入框即可。这里需要注意,任意一个输入框文本变化时,需要设置另外一个输入框与该输入框的文本一致。
  3. 账号和密码验证:设置一个中继器,里面有两列,一列账户名、一列为密码。点击登录按钮后,进行账号的帅选,如果中继器可见数据条数为0,显示错误弹窗;如果不为0,对比中继器密码和输入密码是否一致,如不一致,显示错误弹窗,如果一致,设置动态面板跳转至首页。
  4. 登录按钮:默认禁用、如果账户输入框和密码输入框均不为空,则启用。
  5. 验证码登录:鼠标单击验证登录码时,设置动态面板跳转到其他手机号登录页面。
  6. 注册:鼠标单击注册按钮时,和上面验证码登录一致,登录和注册页面一致,方便客户注册。
  7. 返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。

账号密码错误时:

账号密码正确时:

6. 三方登录页面

支付宝登录页面,交互如下:

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

微博登录页面

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

微信登录页面

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

QQ登录页面

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

7. 用户协议和隐私条款

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

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

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

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

 

本文由 @梓贤Vigo 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
起点学院课程
评论
评论请登录
  1. 原型预览及下载地址:
    https://axhub.im/pro/0040d2844250a334

    回复
  2. 没有忘记密码???那一直记不得密码怎么办

    回复
    1. 用验证码进去啊,现在手机版的很多登录界面都是没有忘记密码的,要登录后进去设置里面重置,手机端和电脑端的有一定的不同哈

      回复
  3. 感谢分享

    回复
  4. 请问视频和视频上面的鼠标手形怎么做好的?

    回复
    1. 视频?那是gif

      回复