Fork me on GitHub

关于注册登录的那些细节梳理(一)

不论是B/S架构的产品还是C/S架构的产品,基本都需要登录注册。当然,不同产品形态的可能有所不同,简单来区分有以下三种情况:

  • 完全不用注册登录:这类产品一般都是工具类产品,比如计算器;
  • 需要注册登录才能完整使用产品功能:比如一些读书类工具软件,直接读书不需要注册登录,但是要收藏,添加笔记等操作就需要注册登录;
  • 必须注册登录才能够使用:这类APP一般跟我们自身的数据相关性较高,比如支付宝,微信等。

1. 注册登录的意义

注册登录的意义有多种,有针对用户的意义,也有针对产品的意义。

用户要使用产品,会产生很多用户行为(数据),而这些行为(数据)需要与用户唯一的id关联,这个时候就必须进行注册登录了,举个简单的例子,移动通信APP需要用户唯一ID来进行数据的存储,否则数据就乱了。

对产品来说,产品需要收集用户的操作行为,以便于更好的迭代产品以及了解用户,这些数据也需要注册登录才能存储。产品可以利用这些数据来进行分析,比如最近大热的短视频APP抖音,就详细的记录了用户的喜欢,观看时长,用以推荐给用户更多的感兴趣视频。

2. 登录的方式

说了这么多,本篇文章主要分析下登录部分的细节,注册的细节后续再分析。可能有人会说,有多少种注册方式就有多少种登录方式,这么说没错,但也不全对,登录方式主要有以下几种:

序号 方式 说明
1 账号登录 包括手机号/邮箱/用户名等,比如常用的微信号跟QQ号
2 第三方登录 微信登录/QQ登录/微博登录/Google登录
3 生物特征 指纹/刷脸/语音
4 关联登录 比如闲鱼可用淘宝或支付宝关联登录

其中生物特征登录一般出现在金融类APP中,因为涉及到资金安全性的问题,所以每次退出APP再次进去查看资金都需要登录。当然,目前最主要的登录方式仍然是账号登录,本篇文章主要就账号登录来剖析,其它三种方式暂不叙述。

3. 登录/忘记密码流程

image.png

在上图中,我们省略了一些判断,比如:

  • 账号为空;
  • 密码为空;
  • 手机号格式不正确;
  • 验证码位数错误;
  • 密码长度不够;
  • 输入栏为空;

上述这些问题其实用交互的办法来解决更好,比如,输入框都为空的时候,让按钮禁用,格式正确之后按钮可用,可以减少无效判断。

4. 交互细节

为了减少一部分后台的判断,部分功能用前端判断即可,比如上文提到的省略部分,除此之外,还有加载中跟提示。

4.1 加载交互

同传统的整屏加载效果不同,这里我建议用按钮局部载入效果体验更好,见下图。

image.png

4.2 提示交互

提示以不打断操作为主的toast提示,除非是异常信息,否则别轻易使用diglog对话框弹窗。

4.3 密码输入框

传统设计一般是设计两次输入,用以核对密码是否正确,但为了减少用户输入,提高登录效率,可将密码输入栏增加显示/隐藏开关,便于用户核对密码。

4.4 特殊文字输入

例如手机号,输入后可展示为344格式,比如138 0013 8000;又或者邮箱,输完@前半部分,后缀由用户选择。

5. 功能细节

5.1 要不要保存密码

对于用户来说,登录后退出保存好密码,重新登录体验更好。

5.2 登录方式

采用账号密码+token的方式登录,token的有效期可根据不同公司需求设置,用户每次登录刷新token时间戳。

5.3 异常登录

异常登录的情况大多数单一登录,密码泄露,以及登录过期。

异常情况 说明 提示
登录已过期 服务端token过期 登录已过期,请重新登录
密码已被重置 密码被修改/重置 密码已被重置,请重新登录
单一登录 账号在其它终端登录,密码泄露风险 你的账号在其它终端登录,请及时修改密码

这里需要说明的是账号是否需要单一登录(一个账号只能登录在一台设备,不允许其它设备同时登录,如果登录则踢掉另外的设备登录态)

6. 其他细节

为了防止短信验证码被恶意获取,可在单击验证码之后弹出二次验证,常见的二次验证有:

  • 拼图验证;
  • 依次点击文字验证;
  • 字母验证码;
  • 计算题;

对于登录时候没有网络的情况也应该加以说明,在请求的时候先判断是否有网络,如果没有网络则提示无网环境,以及提供解决办法引导文案。