时间：2023-08-24 09:51:02 点击次数：19
今天就和大家分享一下怎么样用web做一个高保真高交互的登录注册和找回密码的原型。
该原型涵盖常用的登录（短信登录、账密登录、扫码登录、三方登录）、注册（短信注册、账密注册、邮箱注册）和找回密码（通过短信找回密码、通过邮箱找回密码）的界面，而且交互效果都设置好了，大家可以在第一个页面【注册+登录+忘记密码（总体效果）】查看效果。其他页面时单页效果，您们可以自己搭配使用。
原型里面的账号（手机号、邮箱、账户名）和密码大家可以通过中继器表格填写，也可以在演示页面添加修改。
原型演示地址：https://www.pmdaniu.com/storage/119356/3da9de5ad9f627c23e59eb87b781b706-69620/start.html
原型下载地址：https://weidian.com/item.html?itemID=3675185533
微信交流：522073109
总体效果
短信登录
账密登录
扫码登录
https://www.axureshop.com/shop/14282 (二维码自动识别)
短信注册
账密注册
邮箱注册
通过短信找回密码
通过邮箱找回密码
本原型包含登录（短信登录、账密登录、扫码登录、三方登录）、注册（短信注册、账密注册、邮箱注册）和找回密码（通过短信找回密码、通过邮箱找回密码），下面我将一一讲解。
材料
动态面板（短信登录、账密登录、扫码登录）输入框：手机号码输入框、短信验证码输入框按钮：立即注册按钮、登录按钮、微信登录按钮、支付宝登录按钮、发送验证码按钮密码账号中继器如下图所示摆放：
交互事件
点击（短信登录、账密登录、扫码登录）时：设置动态面板到对应的页面。手机号码输入框：设置文本框格式为number，输入结束时需要判断是否为11位的手机号码，如果不是，提示文字内容为请输入11位手机号码。发送验证码按钮：如果手机号码输入正确，启用发送验证码按钮。点击该按钮是，系统生成一个6位数的随机验证码，这里需要用到radom函数。如果手机号码输入不正确或未输入，设置提示文字，请输入11位手机号码。登录按钮：点击时，首先判断手机号码是否正确，如不正确，设置设置提示文字内容为请输入11位手机号码。再判断短信验证码输入框的文字与随机生成的6位数是否一致，如果一致，显示登录成功的弹窗，并且进入首页；如果不成功，则设置设置提示文字内容为验证码错误，请重新输入。微信按钮和支付宝按钮：鼠标单击按钮时，新建窗口打开对应的登录页面。立即注册按钮：点击后设置动态面板为短信注册页面。材料：
动态面板（短信登录、账密登录、扫码登录）输入框：账号输入框、密码输入框按钮：立即注册按钮、登录按钮、微信登录按钮、支付宝登录按钮、忘记密码按钮密码账号中继器如下图所示摆放：
交互事件
点击（短信登录、账密登录、扫码登录）时：设置动态面板到对应的页面。账号输入框：输入账号后，按账号帅选中继器内容。如果中继器可见条数=0，即说明账号不存在，提醒用户账号不存在；如果中继器可见条数>0，可以继续实践。密码输入框：可以做成可视和不可视的效果。登录按钮：点击时，首先按账号对中继器进行筛选。如果中继器可见条数=0，即说明账号不存在，提醒用户账号不存在，如=1，则表示存在。然后需要验证账号和密码是否和中继器的一致 ，如果不一致，提示客户账号或密码错误，请重新输入，如果一致，则登录成功，进入首页。微信按钮和支付宝按钮：鼠标单击按钮时，新建窗口打开对应的登录页面。立即注册按钮：点击后设置动态面板为短信注册页面。忘记密码：点击后设置动态面板为通过短信重置密码页面。材料
动态面板（短信登录、账密登录、扫码登录）二维码图片按钮：点击查看登录成功效果、微信登录按钮、支付宝登录按钮如下图所示摆放：
https://www.axureshop.com/shop/14282 (二维码自动识别)
交互事件
点击（短信登录、账密登录、扫码登录）时：设置动态面板到对应的页面。点击查看登录成功效果：这里模拟成功登录的效果，鼠标单击时，显示登录成功，并进入首页。立即注册按钮：点击后设置动态面板为短信注册页面。忘记密码：点击后设置动态面板为通过短信重置密码页面。材料
动态面板（短信注册、账密注册、扫码注册）输入框：手机号码输入框、短信验证码输入框、密码输入框按钮：注册按钮，马上登录按钮、发送验证码按钮密码账号中继器如下图所示摆放：
交互事件
点击（短信注册、账密注册、扫码注册）时：设置动态面板到对应的页面。手机号码输入框：设置文本框格式为number，输入结束时需要判断是否为11位的手机号码。如果不是，提示文字内容为请输入11位手机号码。如果是11位数时，需要判断手机号是否已存在，通过按输入的手机号码对账号密码中继器进行筛选，如果中继器可见条数>0，则手机号已注册，提示用户，手机号码已注册。发送验证码按钮：如果手机号码输入正确，且未注册，启用发送验证码按钮。点击该按钮是，系统生成一个6位数的随机验证码，这里需要用到radom函数。如果手机号码输入不正确或未输入，设置提示文字，请输入11位手机号码。密码输入框：这里的话需要设置密码长度为8-20位，必须含数字和英文，这是一般系统密码的要求，如有特殊要求可以自行设置，如果密码格式不正确，设置提示文字内容为请输入8-20位含数字和英文的密码。注册按钮：点击时，首先判断手机号码是否正确。如不正确，设置设置提示文字内容为请输入11位手机号码，再判断手机号码是否已注册。如果未注册，接着判断短信验证码输入框的文字与随机生成的6位数是否一致，如果一致，最后判断密码格式是否正确，如果正确显示登录成功的弹窗，并且进入首页。马上登录按钮：点击该按钮设置动态面板页面为短信登录页面。材料
动态面板（短信注册、账密注册、扫码注册）输入框：账号输入框、密码输入框、确认密码输入框按钮：注册按钮，马上登录按钮密码账号中继器如下图所示摆放：
交互事件
点击（短信注册、账密注册、扫码注册）时：设置动态面板到对应的页面。账号输入框：失去焦点时，需要判断账号是否已存在，通过按输入的账号对账号密码中继器进行筛选，如果中继器可见条数>0，则账号已注册，提示用户，账号已注册。密码输入框：这里的话需要设置密码长度为8-20位，必须含数字和英文，这是一般系统密码的要求，如有特殊要求可以自行设置，如果密码格式不正确，设置提示文字内容为请输入8-20位含数字和英文的密码。确认密码输入框：输入的密码需要和密码输入框的一致，如果不一致，设置提示文字为两次输入的密码不一致，请重新输入。注册按钮：点击时，首先判断账号是否已注册。如果未注册，接着判断密码格式是否正确；如果正确，最后判断两次密码输入是否一致。如果一致，显示登录成功的弹窗，并且进入首页。马上登录按钮：点击该按钮设置动态面板页面为账密登录页面。材料
动态面板（短信注册、账密注册、扫码注册）输入框：邮箱输入框、验证码输入框、密码输入框按钮：注册按钮，马上登录按钮、发送验证码按钮密码账号中继器如下图所示摆放：
交互事件
点击（短信注册、账密注册、扫码注册）时：设置动态面板到对应的页面。电子邮箱输入框：输入结束时需要判断是否电子邮箱地址是否正确。如果不正确，提示文字内容为请输入正确的电子邮箱地址；如果正确，需要判断电子邮箱是否已存在。通过按输入的电子邮箱对账号密码中继器进行筛选，如果中继器可见条数>0，则电子邮箱已注册，提示用户，电子邮箱已注册。发送验证码按钮：如果电子邮箱输入正确，且未注册，启用发送验证码按钮。点击该按钮是，系统生成一个6位数的随机验证码，这里需要用到radom函数。如果电子邮箱输入不正确或未输入，设置提示文字，请输入正确的电子邮箱地址。密码输入框：这里的话需要设置密码长度为8-20位，必须含数字和英文，这是一般系统密码的要求，如有特殊要求可以自行设置，如果密码格式不正确，设置提示文字内容为请输入8-20位含数字和英文的密码。注册按钮：点击时，首先判断电子邮箱地址是否正确。如不正确，设置设置提示文字内容为请输入正确的电子邮箱地址，再判断电子邮箱地址是否已注册。如果未注册，接着判断电子邮箱验证码输入框的文字与随机生成的6位数是否一致，如果一致，最后判断密码格式是否正确，如果正确显示登录成功的弹窗，并且进入首页。马上登录按钮：点击该按钮设置动态面板页面为短信登录页面。材料
动态面板（短信重置密码、邮箱重置密码）输入框：手机号码输入框、短信验证码输入框、密码输入框按钮：立即注册按钮，重置密码按钮，马上登录按钮、发送验证码按钮密码账号中继器如下图所示摆放：
交互事件
点击短信重置密码、邮箱重置密码时：设置动态面板到对应的页面。手机号码输入框：设置文本框格式为number，输入结束时需要判断是否为11位的手机号码。如果不是，提示文字内容为请输入11位手机号码。如果是11位数时，需要判断手机号是否已存在，通过按输入的手机号码对账号密码中继器进行筛选。如果中继器可见条数=0，则手机号未注册，提示用户，该手机号码未注册。发送验证码按钮：如果手机号码输入正确，且已经注册，启用发送验证码按钮。点击该按钮时，系统生成一个6位数的随机验证码，这里需要用到radom函数。如果手机号码输入不正确或未输入，设置提示文字，请输入11位手机号码。密码输入框：这里的话需要设置密码长度为8-20位，必须含数字和英文，这是一般系统密码的要求，如有特殊要求可以自行设置，如果密码格式不正确，设置提示文字内容为请输入8-20位含数字和英文的密码。注册按钮：点击时，首先判断手机号码是否正确。如不正确，设置设置提示文字内容为请输入11位手机号码，再判断手机号码是否已注册。如果已注册，接着判断短信验证码输入框的文字与随机生成的6位数是否一致，如果一致，最后判断密码格式是否正确，如果正确，这里先要更新中继器该手机号对应的密码行，然后显示登录成功的弹窗，并且进入首页。马上登录按钮：点击该按钮设置动态面板页面为短信登录页面。材料
动态面板（短信重置密码、邮箱重置密码）输入框：邮箱输入框、验证码输入框、密码输入框按钮：立即注册按钮，马上登录按钮、发送验证码按钮密码账号中继器如下图所示摆放：
交互事件
点击（短信注册、账密注册、扫码注册）时：设置动态面板到对应的页面。电子邮箱输入框：输入结束时需要判断是否电子邮箱地址是否正确。如果不正确，提示文字内容为请输入正确的电子邮箱地址；如果正确，需要判断电子邮箱是否已存在，通过按输入的电子邮箱对账号密码中继器进行筛选，如果中继器可见条数=0，则电子邮箱未注册，提示用户，电子邮箱未注册。发送验证码按钮：如果电子邮箱输入正确，且已注册，启用发送验证码按钮。点击该按钮时，系统生成一个6位数的随机验证码，这里需要用到radom函数。如果电子邮箱输入不正确或未输入，设置提示文字，请输入正确的电子邮箱地址。密码输入框：这里的话需要设置密码长度为8-20位，必须含数字和英文。这是一般系统密码的要求，如有特殊要求可以自行设置，如果密码格式不正确，设置提示文字内容为请输入8-20位含数字和英文的密码。注册按钮：点击时，首先判断电子邮箱地址是否正确。如不正确，设置设置提示文字内容为请输入正确的电子邮箱地址；再判断电子邮箱地址是否已注册；如果已注册，接着判断电子邮箱验证码输入框的文字与随机生成的6位数是否一致，如果一致，最后判断密码格式是否正确。如果正确，这里先要更新中继器该电子邮箱对应的密码行，然后显示登录成功的弹窗，并且进入首页。马上登录按钮：点击该按钮设置动态面板页面为短信登录页面。这样就制作完成了。喜欢该原型的小伙伴们点个订阅，也可以在评论处给我留言哦。
