上次和大家分享了如何制作手机端的登录注册原型，《Axure教程：一个通用的app注册/登录页》，然后不少小朋友希望我能做一个web端的登录注册原型。
所以今天就和大家分享一下怎么样用web做一个高保真高交互的登录注册和找回密码的原型。
【原型预览】
用电脑点击左下方阅读原文或复制打开下面的原型预览地址
https://axhub.im/ax9/0c893a1e6dc8053d/#g=1
【原型下载】
方式2：https://weidian.com/item.html?itemID=3675185533
【效果演示】
二、制作方法
本原型包含登录（短信登录、账密登录、扫码登录、三方登录）、注册（短信注册、账密注册、邮箱注册）和找回密码（通过短信找回密码、通过邮箱找回密码），下面我将一一讲解。
1. 短信登录
材料
- 动态面板（短信登录、账密登录、扫码登录）
- 输入框：手机号码输入框、短信验证码输入框
- 按钮：立即注册按钮、登录按钮、微信登录按钮、支付宝登录按钮、发送验证码按钮
- 密码账号中继器
如下图所示摆放：
交互事件
- 点击（短信登录、账密登录、扫码登录）时：设置动态面板到对应的页面。
- 手机号码输入框：设置文本框格式为number，输入结束时需要判断是否为11位的手机号码，如果不是，提示文字内容为请输入11位手机号码。
- 发送验证码按钮：如果手机号码输入正确，启用发送验证码按钮。点击该按钮是，系统生成一个6位数的随机验证码，这里需要用到radom函数。如果手机号码输入不正确或未输入，设置提示文字，请输入11位手机号码。
- 登录按钮：点击时，首先判断手机号码是否正确，如不正确，设置设置提示文字内容为请输入11位手机号码。再判断短信验证码输入框的文字与随机生成的6位数是否一致，如果一致，显示登录成功的弹窗，并且进入首页；如果不成功，则设置设置提示文字内容为验证码错误，请重新输入。
- 微信按钮和支付宝按钮：鼠标单击按钮时，新建窗口打开对应的登录页面。
- 立即注册按钮：点击后设置动态面板为短信注册页面。
2. 账密登录
材料：
- 动态面板（短信登录、账密登录、扫码登录）
- 输入框：账号输入框、密码输入框
- 按钮：立即注册按钮、登录按钮、微信登录按钮、支付宝登录按钮、忘记密码按钮
- 密码账号中继器
如下图所示摆放：
交互事件
- 点击（短信登录、账密登录、扫码登录）时：设置动态面板到对应的页面。
- 账号输入框：输入账号后，按账号帅选中继器内容。如果中继器可见条数=0，即说明账号不存在，提醒用户账号不存在；如果中继器可见条数>0，可以继续实践。
- 密码输入框：可以做成可视和不可视的效果。
- 登录按钮：点击时，首先按账号对中继器进行筛选。如果中继器可见条数=0，即说明账号不存在，提醒用户账号不存在，如=1，则表示存在。然后需要验证账号和密码是否和中继器的一致 ，如果不一致，提示客户账号或密码错误，请重新输入，如果一致，则登录成功，进入首页。
- 微信按钮和支付宝按钮：鼠标单击按钮时，新建窗口打开对应的登录页面。
- 立即注册按钮：点击后设置动态面板为短信注册页面。
- 忘记密码：点击后设置动态面板为通过短信重置密码页面。
3. 扫码登录
材料
- 动态面板（短信登录、账密登录、扫码登录）
- 二维码图片
- 按钮：点击查看登录成功效果、微信登录按钮、支付宝登录按钮
如下图所示摆放：
交互事件
- 点击（短信登录、账密登录、扫码登录）时：设置动态面板到对应的页面。
- 点击查看登录成功效果：这里模拟成功登录的效果，鼠标单击时，显示登录成功，并进入首页。
- 立即注册按钮：点击后设置动态面板为短信注册页面。
- 忘记密码：点击后设置动态面板为通过短信重置密码页面。
4. 短信注册
材料
- 动态面板（短信注册、账密注册、扫码注册）
- 输入框：手机号码输入框、短信验证码输入框、密码输入框
- 按钮：注册按钮，马上登录按钮、发送验证码按钮
- 密码账号中继器
如下图所示摆放：
交互事件
- 点击（短信注册、账密注册、扫码注册）时：设置动态面板到对应的页面。
- 手机号码输入框：设置文本框格式为number，输入结束时需要判断是否为11位的手机号码。如果不是，提示文字内容为请输入11位手机号码。如果是11位数时，需要判断手机号是否已存在，通过按输入的手机号码对账号密码中继器进行筛选，如果中继器可见条数>0，则手机号已注册，提示用户，手机号码已注册。
- 发送验证码按钮：如果手机号码输入正确，且未注册，启用发送验证码按钮。点击该按钮是，系统生成一个6位数的随机验证码，这里需要用到radom函数。如果手机号码输入不正确或未输入，设置提示文字，请输入11位手机号码。
- 密码输入框：这里的话需要设置密码长度为8-20位，必须含数字和英文，这是一般系统密码的要求，如有特殊要求可以自行设置，如果密码格式不正确，设置提示文字内容为请输入8-20位含数字和英文的密码。
- 注册按钮：点击时，首先判断手机号码是否正确。如不正确，设置设置提示文字内容为请输入11位手机号码，再判断手机号码是否已注册。如果未注册，接着判断短信验证码输入框的文字与随机生成的6位数是否一致，如果一致，最后判断密码格式是否正确，如果正确显示登录成功的弹窗，并且进入首页。
- 马上登录按钮：点击该按钮设置动态面板页面为短信登录页面。
5. 账密注册
材料
- 动态面板（短信注册、账密注册、扫码注册）
- 输入框：账号输入框、密码输入框、确认密码输入框
- 按钮：注册按钮，马上登录按钮
- 密码账号中继器
如下图所示摆放：
交互事件
- 点击（短信注册、账密注册、扫码注册）时：设置动态面板到对应的页面。
- 账号输入框：失去焦点时，需要判断账号是否已存在，通过按输入的账号对账号密码中继器进行筛选，如果中继器可见条数>0，则账号已注册，提示用户，账号已注册。
- 密码输入框：这里的话需要设置密码长度为8-20位，必须含数字和英文，这是一般系统密码的要求，如有特殊要求可以自行设置，如果密码格式不正确，设置提示文字内容为请输入8-20位含数字和英文的密码。
- 确认密码输入框：输入的密码需要和密码输入框的一致，如果不一致，设置提示文字为两次输入的密码不一致，请重新输入。
- 注册按钮：点击时，首先判断账号是否已注册。如果未注册，接着判断密码格式是否正确；如果正确，最后判断两次密码输入是否一致。如果一致，显示登录成功的弹窗，并且进入首页。
- 马上登录按钮：点击该按钮设置动态面板页面为账密登录页面。
6. 邮箱注册
材料
- 动态面板（短信注册、账密注册、扫码注册）
- 输入框：邮箱输入框、验证码输入框、密码输入框
- 按钮：注册按钮，马上登录按钮、发送验证码按钮
- 密码账号中继器
如下图所示摆放：
交互事件
- 点击（短信注册、账密注册、扫码注册）时：设置动态面板到对应的页面。
- 电子邮箱输入框：输入结束时需要判断是否电子邮箱地址是否正确。如果不正确，提示文字内容为请输入正确的电子邮箱地址；如果正确，需要判断电子邮箱是否已存在。通过按输入的电子邮箱对账号密码中继器进行筛选，如果中继器可见条数>0，则电子邮箱已注册，提示用户，电子邮箱已注册。
- 发送验证码按钮：如果电子邮箱输入正确，且未注册，启用发送验证码按钮。点击该按钮是，系统生成一个6位数的随机验证码，这里需要用到radom函数。如果电子邮箱输入不正确或未输入，设置提示文字，请输入正确的电子邮箱地址。
- 密码输入框：这里的话需要设置密码长度为8-20位，必须含数字和英文，这是一般系统密码的要求，如有特殊要求可以自行设置，如果密码格式不正确，设置提示文字内容为请输入8-20位含数字和英文的密码。
- 注册按钮：点击时，首先判断电子邮箱地址是否正确。如不正确，设置设置提示文字内容为请输入正确的电子邮箱地址，再判断电子邮箱地址是否已注册。如果未注册，接着判断电子邮箱验证码输入框的文字与随机生成的6位数是否一致，如果一致，最后判断密码格式是否正确，如果正确显示登录成功的弹窗，并且进入首页。
- 马上登录按钮：点击该按钮设置动态面板页面为短信登录页面。
7. 通过短信找回密码
材料
- 动态面板（短信重置密码、邮箱重置密码）
- 输入框：手机号码输入框、短信验证码输入框、密码输入框
- 按钮：立即注册按钮，重置密码按钮，马上登录按钮、发送验证码按钮
- 密码账号中继器
如下图所示摆放：
交互事件
- 点击短信重置密码、邮箱重置密码时：设置动态面板到对应的页面。
- 手机号码输入框：设置文本框格式为number，输入结束时需要判断是否为11位的手机号码。如果不是，提示文字内容为请输入11位手机号码。如果是11位数时，需要判断手机号是否已存在，通过按输入的手机号码对账号密码中继器进行筛选。如果中继器可见条数=0，则手机号未注册，提示用户，该手机号码未注册。
- 发送验证码按钮：如果手机号码输入正确，且已经注册，启用发送验证码按钮。点击该按钮时，系统生成一个6位数的随机验证码，这里需要用到radom函数。如果手机号码输入不正确或未输入，设置提示文字，请输入11位手机号码。
- 密码输入框：这里的话需要设置密码长度为8-20位，必须含数字和英文，这是一般系统密码的要求，如有特殊要求可以自行设置，如果密码格式不正确，设置提示文字内容为请输入8-20位含数字和英文的密码。
- 注册按钮：点击时，首先判断手机号码是否正确。如不正确，设置设置提示文字内容为请输入11位手机号码，再判断手机号码是否已注册。如果已注册，接着判断短信验证码输入框的文字与随机生成的6位数是否一致，如果一致，最后判断密码格式是否正确，如果正确，这里先要更新中继器该手机号对应的密码行，然后显示登录成功的弹窗，并且进入首页。
- 马上登录按钮：点击该按钮设置动态面板页面为短信登录页面。
8. 通过邮箱找回密码
材料
- 动态面板（短信重置密码、邮箱重置密码）
- 输入框：邮箱输入框、验证码输入框、密码输入框
- 按钮：立即注册按钮，马上登录按钮、发送验证码按钮
- 密码账号中继器
如下图所示摆放：
交互事件
- 点击（短信注册、账密注册、扫码注册）时：设置动态面板到对应的页面。
- 电子邮箱输入框：输入结束时需要判断是否电子邮箱地址是否正确。如果不正确，提示文字内容为请输入正确的电子邮箱地址；如果正确，需要判断电子邮箱是否已存在，通过按输入的电子邮箱对账号密码中继器进行筛选，如果中继器可见条数=0，则电子邮箱未注册，提示用户，电子邮箱未注册。
- 发送验证码按钮：如果电子邮箱输入正确，且已注册，启用发送验证码按钮。点击该按钮时，系统生成一个6位数的随机验证码，这里需要用到radom函数。如果电子邮箱输入不正确或未输入，设置提示文字，请输入正确的电子邮箱地址。
- 密码输入框：这里的话需要设置密码长度为8-20位，必须含数字和英文。这是一般系统密码的要求，如有特殊要求可以自行设置，如果密码格式不正确，设置提示文字内容为请输入8-20位含数字和英文的密码。
- 注册按钮：点击时，首先判断电子邮箱地址是否正确。如不正确，设置设置提示文字内容为请输入正确的电子邮箱地址；再判断电子邮箱地址是否已注册；如果已注册，接着判断电子邮箱验证码输入框的文字与随机生成的6位数是否一致，如果一致，最后判断密码格式是否正确。如果正确，这里先要更新中继器该电子邮箱对应的密码行，然后显示登录成功的弹窗，并且进入首页。
- 马上登录按钮：点击该按钮设置动态面板页面为短信登录页面。
作者：梓贤vigo；
微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容
本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载
