注册、登录、找回密码、注销账号模块的设计构思

编辑导语:我们在使用很多产品时,首先都会经历的就是注册登录这一步,以前的手机号、邮箱方式,到现在的第三方直接授权登录,也是用户登录系统的一种转变;本文作者分享了关于注册登录找回密码模块的设计构思,我们一起来了解一下。

注册、登录、找回密码、注销账号模块的设计构思

一、注册模块的设计构思

用户登陆注册系统分为两大类,一类是自建用户系统(例如:手机号、用户名、邮箱),另一类是第三方账号授权用户系统(例如:微信支付宝淘宝等)。

注册、登录、找回密码、注销账号模块的设计构思

1. 手机号注册账号

注册、登录、找回密码、注销账号模块的设计构思

设计说明:

1)输入手机号、验证码、密码(均为必填)

  • 输入密码:输入密码时输入框右侧出现“显示/隐藏icon”,默认密码显示状态,点击可切换隐藏状态;
  • 输入手机号、验证码:输入手机号、验证码时输入框右侧出现“清空icon”,点击清空按钮后将已输入的内容清空;
  • 输入框字数限制:手机号:11位;密码:大于等于8位,不超过20位;
  • 输入手机号、验证码时唤起数字键盘;输入密码时唤起全键盘;
  • 两次密码输入不一致:两次输入的密码不一致,请重新输入。

2)手机号、验证码、密码校验:

  • 手机号格式错误:提示用户“请输入正确的手机号”;
  • 手机号重复注册:提示用户“该手机号码已被注册“;
  • 密码格式错误:提示用户“密码至少八位,同时包含数字以及字母”;
  • 未填写手机号,获取验证码按钮置灰,不允许点击;
  • 点击验证码按钮,自动发送短信验证码并提示用户“验证码已发送,5分钟内输入有效”;
  • 验证码不正确:提示用户“验证码不正确,请重新输入”。

3)勾选用户服务协议:未勾选用户服务协议不允许注册,提示用户“请阅读并勾选用户服务协议”。

4)单个手机号,单日接收验证码的次数和频率限制:

  • 验证码接收次数:1h内不得超过5次,若超过5次,用户点击获取验证码的按钮后弹窗提示“获取验证码次数已达上限,请一个小时后再试”;
  • 获取验证码的时间间隔为60s,有效期5min,点击获取验证码按钮后,按钮文字变为“重新获取(59s)”并倒计时;
  • 若多次获取验证码,仅最后一次获取的验证码有效。

5)注册成功后自动登录,跳转至“xxxxx”界面(或返回至原页面,若用户在“我的”页面触发登录,则登录成功后返回至“我的”页面)。

2. 用户名注册账号

在自建用户系统中,用户名 + 密码的这种注册方式已经很少见了,这种方式有很大的弊端,若用户忘记用户名或密码就找不回账号了;通常会将用户名+密码与手机号或邮箱结合,忘记密码可以通过手机号或邮箱找回,将文中提到的手机号注册账号或邮箱注册账号加个“用户名”字段即可,该文章就不详细讲解。

3. 邮箱注册账号(无需验证邮箱的注册方式)

注册、登录、找回密码、注销账号模块的设计构思

设计说明:

1)输入邮箱、密码(均为必填)

  • 输入邮箱:输入邮箱时输入框右侧出现“清空icon”,点击清空按钮后将已输入的内容清空;
  • 输入密码:输入密码时输入框右侧出现“显示/隐藏icon”,默认密码显示状态,点击可切换隐藏状态;
  • 输入框字数限制:密码:大于等于8位,不超过20位;
  • 输入邮箱、密码时唤起全键盘;
  • 两次密码输入不一致:两次输入的密码不一致,请重新输入。

2)邮箱、密码校验:

  • 邮箱格式错误:提示用户“请输入正确的邮箱”;
  • 邮箱重复注册:提示用户“该邮箱已被注册“;
  • 密码格式错误:提示用户“密码至少八位,同时包含数字以及字母”;

3)勾选用户服务协议:未勾选用户服务协议不允许注册,提示用户“请阅读并勾选用户服务协议”。

4)注册成功后自动登录,跳转至“xxxxx”界面(或返回至原页面,若用户在“我的”页面触发登录,则登录成功后返回至“我的”页面)。

4. 邮箱注册账号(需验证邮箱的注册方式)

由于无需验证邮箱的注册方式存在着可能乱填写邮箱,或邮箱填写错误的情况,导致忘记密码后无法找回账号或邮箱真正的主无法注册,所以最好是在注册时进行邮箱验证。

注册、登录、找回密码、注销账号模块的设计构思

设计说明:

1)输入邮箱、验证码、密码(均为必填)

  • 输入邮箱、验证码:输入邮箱、验证码时输入框右侧出现“清空icon”,点击清空按钮后将已输入的内容清空;
  • 输入密码:输入密码时输入框右侧出现“显示/隐藏icon”,默认密码显示状态,点击可切换隐藏状态;
  • 输入框字数限制:密码:大于等于8位,不超过20位;
  • 输入验证码时唤起数字键盘;输入邮箱、密码时唤起全键盘。

2)邮箱、验证码、密码校验:

  • 邮箱格式错误:提示用户“请输入正确的邮箱”;
  • 邮箱重复注册:提示用户“该邮箱已被注册“;
  • 密码格式错误:提示用户“密码至少八位,同时包含数字以及字母”;
  • 未填写邮箱,获取验证码按钮置灰,不允许点击;
  • 点击验证码按钮,自动发送邮箱验证码并提示用户“验证码已发送,5分钟内输入有效”;
  • 验证码不正确:提示用户“验证码不正确,请重新输入”。

3)勾选用户服务协议:未勾选用户服务协议不允许注册,提示用户“请阅读并勾选用户服务协议”。

4)单个邮箱,单日接收验证码的次数和频率限制:

  • 验证码接收次数:1h内不得超过5次,若超过5次,用户点击获取验证码的按钮后弹窗提示“获取验证码次数已达上限,请一个小时后再试”;
  • 获取验证码的时间间隔为60s,有效期5min,点击获取验证码按钮后,按钮文字变为“重新获取(59s)”并倒计时;
  • 若多次获取验证码,仅最后一次获取的验证码有效。

5)注册成功后自动登录,跳转至“xxxxx”界面(或返回至原页面,若用户在“我的”页面触发登录,则登录成功后返回至“我的”页面)。

5. 第三方账号授权

注册、登录、找回密码、注销账号模块的设计构思

通过第三方账号授权的方式进行登录并获取用户信息(openid、头像、昵称、地区、性别、手机号),省去用户注册步骤,以下以“微信授权”为例子讲述。

  • 用户点击“微信授权登录”,打开微信app,调起授权用户微信个人息页面,用户点击同意/拒绝;
  • 点击拒绝则登录失败
  • 点击同意则登录成功。

二、登录模块的设计构思

1. 用户名+密码登录

注册、登录、找回密码、注销账号模块的设计构思

1)输入用户名、密码,点击登录;未输入用户名和密码时,“登录”按钮置灰,不允许点击;已输入用户名和密码,“登录”按钮为可点击状态;输入用户名、密码时,唤起全键盘;输入用户名、密码时,输入框右侧出现“清空icon”,点击清空按钮后将已输入的内容清空;密码输入框右侧设计“显示/隐藏icon”,默认密码隐藏状态。

2)用户名、密码校验:密码或用户名不存在/不匹配,则提示用户“用户名与密码不匹配,请重新输入”。

3)账号被停用:提示用户“账号已被停用,请联系管理员!”。

4)登录成功后进入首页。

5)退出登录:点击退出登录按钮后则退出到登录页。

2. 手机号+密码/验证码

注册、登录、找回密码、注销账号模块的设计构思

手机号+验证码登录方式:

1)输入手机号、验证码,点击登录;未输入手机号和验证码时,“登录”按钮置灰,不允许点击;未输入手机号时,“发送验证码”按钮置灰,不允许点击;已输入手机号和验证码,“登录”按钮为可点击状态;输入手机号和验证码时,唤起数字键盘;输入手机号、验证码时,输入框右侧出现“清空icon”,点击清空按钮后将已输入的内容清空。

2)用户点击“发送验证码”按钮后,提示“验证码已发送”。

3)验证码校验:输入的验证码错误,提示“验证码不正确,请重新输入”。

4)单个手机号,单日接收验证码的次数和频率限制:

  • 验证码接收次数:1h内不得超过5次,若超过5次,用户点击获取验证码的按钮后弹窗提示“获取验证码次数已达上限,请一个小时后再试!”;
  • 获取验证码的时间间隔为60s,有效期5min,点击获取验证码按钮后,按钮文字变为“重新获取(59s)”;
  • 若多次获取验证码,仅最后一次获取的验证码有效;

5)手机号格式错误或手机号不存在:提示用户“请输入正确的手机号”。

6)账号被停用:提示用户“账号已被停用,请联系管理员!”。

7)登录成功后进入首页。

8)退出登录:点击退出登录按钮后则退出到登录页。

手机号+密码登录方式:

1)输入手机号、密码,点击登录;未输入手机号和密码时,“登录”按钮置灰,不允许点击;已输入手机号和密码,“登录”按钮为可点击状态;输入手机号,唤起数字键盘;输入密码时,唤起全键盘;输入手机号、密码时,输入框右侧出现“清空icon”,点击清空按钮后将已输入的内容清空;密码输入框右侧设计“显示/隐藏icon”,默认密码隐藏状态。

2)手机号格式错误:提示用户“请输入正确的手机号”。

3)手机号、密码校验:密码或手机号不存在/不匹配,则提示用户“手机号与密码不匹配,请重新输入”。

4)账号被停用:提示用户“账号已被停用,请联系管理员!”。

5)登录成功后进入首页。

6)退出登录:点击退出登录按钮后则退出到登录页。

3. 邮箱+密码

注册、登录、找回密码、注销账号模块的设计构思

色涂君网络-互联网私享定制级综合营销服务商

点击上述文字,直接与客服取得联系,色涂君络为您带来互联网综合一站式营销服务!小程序、网站、微信全渠道营销定制

1)输入邮箱、密码,点击登录;未输入邮箱和密码时,“登录”按钮置灰,不允许点击;已输入用户名和密码,“登录”按钮为可点击状态;输入用户名、密码时,唤起全键盘;输入邮箱、密码时,输入框右侧出现“清空icon”,点击清空按钮后将已输入的内容清空;密码输入框右侧设计“显示/隐藏icon”,默认密码隐藏状态。

2)邮箱、密码校验:密码或邮箱不存在/不匹配,则提示用户“邮箱与密码不匹配,请重新输入”。

3)账号被停用:提示用户“账号已被停用,请联系管理员!”。

4)登录成功后进入首页。

5)退出登录:点击退出登录按钮后则退出到登录页。

4. 第三方账号授权登录

前面注册那块已讲述,这里不再进行讲述

5. 游客登录

让用户在先体验后登录,需在一些点击后需登录的页面做触发登录的标记,即一些页面可供用户免登录即可浏览,而有些页面则需要登录后才可以浏览。

三、找回密码模块的设计构思

1. 手机号找回密码

注册、登录、找回密码、注销账号模块的设计构思

1)输入手机号、验证码、密码、再次输入密码(均为必填):

  • 输入密码:输入密码时输入框右侧出现“显示/隐藏icon”,默认密码隐藏状态;
  • 输入手机号、验证码、密码时输入框右侧出现“清空icon”,点击清空按钮后将已输入的内容清空;
  • 输入框字数限制:手机号:11位;密码:大于等于6位,不超过20位;

2)手机号、密码、短信验证码校验:

  • 手机号格式错误或手机号不存在:提示用户“请输入正确的手机号!”;
  • 未填写手机号,获取验证码按钮置灰,不允许点击;
  • 点击验证码按钮,自动发送短信验证码并提示用户“验证码已发送,5min内输入有效”;
  • 短信验证码不正确:提示用户“短信验证码不正确,请重新输入!”;
  • 密码格式错误:提示用户“请输入6-20个字符的密码”;
  • 两次密码输入不一致:两次输入的密码不一致,请重新输入;

3)单个手机号,单日接收验证码的次数和频率限制:

  • 验证码接收次数:1h内不得超过5次,若超过5次,用户点击获取验证码的按钮后弹窗提示“获取验证码次数已达上限,请一个小时后再试!”;
  • 获取验证码的时间间隔为60s,有效期5min,点击获取验证码按钮后,按钮文字变为“重新获取(59s)”;
  • 若多次获取验证码,仅最后一次获取的验证码有效;

4)找回密码成功:提示用户“密码重置成功!”,并跳转至“xxx”页面。

5)手机号已停用,联系客服:用户在手机号已停用的情况下,可以点击联系客服,点击“联系客服”弹出“手机号码”弹窗,点击呼叫则唤醒手机拨号。

注:在手机号已停用等,接收不了验证码的情况下,可联系客服验证身份,客服在后台修改密码。

2. 邮箱找回密码

注册、登录、找回密码、注销账号模块的设计构思

1)输入邮箱、验证码、密码、再次输入密码(均为必填):

  • 输入密码:输入密码时输入框右侧出现“显示/隐藏icon”,默认密码隐藏状态;
  • 输入邮箱、验证码、密码时输入框右侧出现“清空icon”,点击清空按钮后将已输入的内容清空;
  • 输入框字数限制:密码:大于等于6位,不超过20位;

2)邮箱、密码、短信验证码校验:

  • 邮箱格式错误或手机号不存在:提示用户“请输入正确的邮箱”;
  • 未填写邮箱,获取验证码按钮置灰,不允许点击;
  • 点击验证码按钮,自动发送短信验证码并提示用户“验证码已发送,5分钟内输入有效”;
  • 邮箱验证码不正确:提示用户“验证码不正确,请重新输入”;
  • 密码格式错误:提示用户“请输入6-20个字符的密码”;
  • 两次密码输入不一致:提示用户“两次输入的密码不一致,请重新输入”;

3)单个邮箱,单日接收验证码的次数和频率限制:

  • 验证码接收次数:1h内不得超过5次,若超过5次,用户点击获取验证码的按钮后弹窗提示“获取验证码次数已达上限,请一个小时后再试”;
  • 获取验证码的时间间隔为60s,有效期5min,点击获取验证码按钮后,按钮文字变为“重新获取(59s)”;
  • 若多次获取验证码,仅最后一次获取的验证码有效;

4)找回密码成功:提示用户“密码重置成功”,并跳转至“xxx”页面。

5)邮箱已停用,联系客服:用户在手机号已停用的情况下,可以点击联系客服,点击“联系客服”弹出“手机号码”弹窗,点击呼叫则唤醒手机拨号。

注:在邮箱已停用等,接收不了验证码的情况下,可联系客服验证身份,客服在后台修改密码。

四、注销账号模块的设计构思

1、用户端注销账号界面,告知用户注销账号的险(例如下图)

1)该账号用户个人资料将被情况:头像、昵称、实名认证…

2)该账号绑定的第三方账号、银行卡信用卡

3)该账号关联的订单记录、浏览记录、优惠券记录、消息记录…

4)该账号的余额等资金信息…

5)其他关联信息

注册、登录、找回密码、注销账号模块的设计构思

2、用户点击“已清楚风险,确定注销”后,弹出二次确认弹窗

注册、登录、找回密码、注销账号模块的设计构思

3、用户点击“立即注销”,需校验账号是否存在未完成订单,余额是否大于或等于0等等

1)若账号存在未完成状态的订单,提示用户“注销申请提交失败,您存在未完成的订单!”

注册、登录、找回密码、注销账号模块的设计构思

2)若账号余额小于0,则提示用户“注销申请提交失败,您的余额为负
数,请先充值余额!”

注册、登录、找回密码、注销账号模块的设计构思

3、校验通过,则进入下一步,身份验证,这里采用手机号+验证码验证的方式

注册、登录、找回密码、注销账号模块的设计构思

4、手机号验证通过,点击“确认注销”,根据项目情况进行考虑,可确认注销后直接注销;也可设置冻结期,例如几天后自动注销,期间可以撤销,以防用户后悔。

1)注销成功

注册、登录、找回密码、注销账号模块的设计构思

2)设置冻结期

注册、登录、找回密码、注销账号模块的设计构思

5、注销成功后的数据处理

个人信息

1)头像:账号已被注销的用户头像,变更为默认头像

2)昵称:变更为“账号已注销”

3)个人动态:清除,显示用户已注销,不展示任何信息

4)与其他用户/在平台上的互动痕迹:保留

5)该账号绑定的第三方账号

金融信息

1)该账号绑定的银行卡、信用卡等:解除绑定

2)该账号的余额:清空

订单记录、浏览记录、优惠券记录、公告记录等

1)后台的用户注册记录:保留,若用户注销则在用户账号旁边括号备注“用户已注销”,用户后续重新使用同一个手机号进行注册,则给该账号重新赋予一个新的ID,重新生成注册记录。

2)订单记录:保留,若用户注销则在用户账号旁边括号备注“用户已注销”。

3)浏览记录、优惠券记录、公告记录:清空。

 

本文由 @蜜桃 原创发布于涂社互联,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

快乐星球出圈始末

编辑导读:“什么是快乐星球?”你的脑海里是不是开始自动播放音乐了。这段时间,各大社交软件都被这段音乐刷屏了,就连央视也开始玩梗。这个来源于童神剧《快乐星球》的音乐,是怎么在多年后爆火的?本文作者对此展开分析,与你分享。 “什么是快乐星球?什么是快乐星球?”

相关文章

暂无评论

暂无评论...