设计登录注册时需要注意的细节

转载自http://www.woshipm.com/pd/267274.html

以注册为例,注册通用流程是:填写手机号码——获取验证码——填写密码

1.账号

1.1 账号有无格式的要求,如果只是手机号码,前端是否需要验证手机号码的有效性?
1.2 手机号码为纯数字,是否弹出纯数字键盘方便用户快速填写及避免用户来回切换?
1.3 手机号码的数字如何呈现?哪种格式?

2.验证码

2.1 验证码的格式,是四\六位数字验证码,还是英文+数字验证码,英文是否区分大小写?
2.2 按钮默认显示状态、用户输入信息后按钮颜色变化效果,该如何设计比较好?
2.3 倒计时如何设置?button还是label ?用哪个好?如何设计?

3.密码

3.1 最少和最多字符设置,提示文字为“位”还是“字符”?如“请输入6-16位字母或数字”?
3.2 密码是否要限制特殊字符?如“空格”、“\”等,为什么要限制?有没有安全方面的考虑?
3.3 密码设置好后,注册按钮如何变化?点击“注册”后,在网络较慢的情况下,页面和按钮如何响应,是否要加锁屏浮层+缓冲提示语?
3.4 是否显示明文。输入密码时默认显示密文,用户可切换显示明文;输入密码时,每输入一位先明文显示1s左右,再切换至密文。
3.5 设置密码时,再次输入密码是为了确保用户不会输错密码。
3.6 及时告知用户密码设置的规则,可以是点击密码输入框时提示,也可以在用户设置不符合规则时提示。例如:微博注册密码要求(6-16字符组成,区分大小写);头条号注册时密码要求(6-20个字符);QQ注册时密码要求(长度为6-16个字符,不能包含空格,不能是9位以下纯数字)
3.7 点击密码输入框,自动弹出英文输入键盘。
3.8 一键清空按钮

4.错误提示

4.1 错误时的报错提示文字是什么,提示格式是弹窗、Toast、还是在当前页面文字显示?
4.2 Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失。
4.3 弹框会阻断用户操作,需要手动点击确认以后才会消失。
4.4 在当前页面文字显示的话,提示文字摆放的位置,页面格式根据提示文字的变化,需要有怎样的视觉效果

5.异常提示

5.1 点击【获取验证码】,检测手机号已被注册,如无置灰设置,输入框为空,手机号码无效的情况,故需提示:

5.1.1 手机号已被注册,是否提示用户登录?
5.1.2 手机号不能为空,多次为空状态点击是否给出频繁操作提示?
5.1.3 手机号码不正确,“请输入正确的手机号码”是不是比“手机号码错误”好些?

5.2 点击【注册】时,可能会有输入框为空,验证码无效等情况,如无置灰设置,故需提示:

5.2.1 短信验证码不能为空
5.2.2 验证码已被使用,然后给出什么操作呢?
5.2.3 验证码已过期,过期了给出弹窗吗?在弹窗直接获取验证码?
5.2.4 验证码错误,弱提示?
5.2.5 验证码已达到最大尝试次数,最大是多少次?

6.短信验证码

6.1 短信验证码一般通过第三方通道发送,在技术侧做规避,还需要在产品规则上做一定限制;
6.2 验证码的格式需要简单明了,如“885267,XX验证码。【XXX】”
6.3 验证码的字数限制,4位或者6位纯数字?

7.邀请码

7.1 注册是否为邀请注册?如是邀请注册,邀请码格式如何设计?
7.2 邀请码错误提示?填写了邀请的用户和没填的用户,在注册成功后有何区别?有邀请码的用户是否有奖励?

8.注册成功后的提示、状态变更及页面跳转

8.1 注册成功后同时切换为登录状态,登录状态账号密码保存是否设置期限?
8.2 给予注册成功的提示并跳转到相应页面,目标页面状态如何是否有缓存,是否需要缓存?
8.3 之前是在需要token的页面跳转到注册页面的话,注册成功后需自动跳转回之前的页面
8.4 注册之前有第三方登录,用户注册后还需要用户绑定第三方账号吗?

其他注意事项:

  1. 输入框

1.1 手机号码输入框,手机号码显示一般是344格式,这样便于用户检查号码是否正确,如:138 8888 8888;
1.2 验证码输入框,长度一般比较短;
1.3 密码输入框,默认一般为密文显示,为了更好的交互可以设置明文显示按钮,最好只设置1次密码,为什么这样?
1.4 其他输入框,如邮箱、邀请码、昵称、个人信息等根据使用场景的不同自行设计;
1.5 不同的输入框需要有不同的提示内容和显示状态。

2.按钮

1.1 按钮设计,提交按钮和文字按钮的位置和主次布局设计;
1.2 按钮状态的设计,不同的状态操作都要考虑,默认置灰和高亮的条件,按钮置灰的意义何在?
1.3 按钮提交反馈,点击操作要给出响应或反馈。

3.验证码

3.1 验证码的格式,字母、数字、字符等,一般为数字4位或者6位;
3.2 验证码的有效时间,根据不同的产品设计不同的有效时间,在有效时间内的验证码操作需要给出明确的反馈;
3.3 验证码的获取次数上限,技术限制和产品设计限制同步,避免被无限制获取;
3.4 验证码获取时间,一般为第三方发送,但时间最好限定在5.5秒内让用户获取到(不要问我为什么是5.5秒,因为我也不知道)
3.5 验证码是怎么触发得到的?为什么有些设计为点击下一步或者获取验证码后在页面跳转时就获取,有些页面跳转后再次点击按钮才能获取?为什么有不同?
3.6 触发后倒计时状态有何变化?重新获取验证码后,原验证码如何处理?
3.7 短时间内多次获取验证码,是否还要给用户发送验证码?还是提示验证码已发送请输入?

4.返回按钮

4.1 在注册、找回密码、第三方登录等操作流程中,返回时需要特别注意点击返回后的操作提示;比如注册手机的修改,验证码提交后设置密码等。
4.2 点击返回时,干扰了正常流程的操作一般需要强提示,提示弹窗注意文案和按钮文字怎么设计好?
4.3 点击返回后,当前页面和目标页面状态是否变化?例如从填写验证码返回到填写手机号码页面,手机号码是置空还是显示已输入过的手机号码?
4.4 浏览应用过程中进入登录页面,登录页面是否需要有返回按钮?

5.虚拟键盘

5.1 虚拟键盘何时弹出?触发条件是什么?
5.2 弹出的虚拟键盘是什么类型的?数字键盘、字母键盘?系统自带输入法还是第三方输入法?
5.3 键盘上的”Go”按钮是否有变化?变成”完成“或者”登陆“等后点击有何交互?
5.4 键盘如何隐藏?怎么触发?自动隐藏?按键隐藏?
5.5 键盘上的删除按钮和一键清除按钮是否有区别?有何区别?有无必要设计一键清除?

6.异常提示

6.1 登录时,账户是否在其他设备登录,是否允许多端同时登陆?不允许同时登陆,之前登录设备的账户是否要下线?给出怎样的提示?
6.2 密码第一次错误给出什么提示?第二次仍然输入错误,错误提示是否需要强提示并给出找回密码的按钮?在弹窗点击找回密码,手机号码在新页面是否需要重新填写?密码连续多次输入错误是否要做出禁用限制?
6.3 注册流程中,检测到手机号码已经注册,是否可以继续获取验证码?或者验证后直接登录免去页面跳转和输入密码?
6.4 找回密码和重置密码都有哪些区别?
6.5.网络状态不好,都该给出怎样的反馈或提示?

6.5.1 用户所处环境网络信号不好(用户向服务器请求超时),是否需要检查用户的网络状态?还是只给出提示?
6.5.2 服务器没有正常接收请求或没有回复,给出怎样的提示较好?
6.5.3 手机停机,验证码、数据传输如何处理?
6.5.4 手机没开wifi或者流量,如何指导用户进行设置?

7.第三方登录

7.1 昵称的长度设置,不同平台的账户昵称的长度要求不同,该如何获取?
7.2 绑定多个第三方账户,公开信息如何获取?公开信息不同如何处理?
7.3 用户注册前使用过第三方登录,是否还有绑定手机号码?
7.4 用户在PC网页和APP分别进行第三方登录,是否有1个第三方账号生成2个本地账号的情况?