59

超详细的登录注册的业务逻辑流程梳理

 5 years ago
source link: https://www.uisdc.com/login-registration-process?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

UJBZFjz.jpg!web

登录注册在不同的产品中有不同的体现,因为对于它的很多功能细节使用的好坏也没法一概而论,还是基于具体场景考虑。

这是早前实习期间做的一个登录注册流程的优化,主要是关于登录注册的业务流程图(Transaction Flow Diagram)梳理,包括短信验证码登录、账号密码登录、第三方登录、忘记密码、图形验证码等以及注意的一些情况。

业务流程图中最主要的几个问题就是:

谁(who),在什么时候(when),在什么条件下(condition),输入什么(input),输出什么(output),输出流向(flow)……

业务流程图表现形式我用的泳道图,可以突出用户操作、后端系统、前端页面之间的逻辑关系,以及如何运作。

一、手机验证码登录

Ur67v26.jpg!web

注意事项:

  1. 11位手机号的显示方式可以用「344」形式(如:000 0000 0000);
  2. 手机、验证码的验证先后顺序(验证码是否超时、验证码是否正确、手机号是否注册过等);
  3. 错误反馈的方式(toast、HUD、alert文字、弹框);
  4. 输入错误后,是用户点键盘上的删除键一个一个删除?还是在输入框上提供一个一键删除 icon?还是自动删除?
  5. 对于手机号和验证码这种纯数字的输入,键盘弹出的类型预先设定,以及设定何时弹出;
  6. 是否需要自动验证?(比如当输入的手机号为11位时,自动获取短信验证码;当输入的验证码为4or6位时,自动验证短信验证码,不需要用户点击 button);
  7. 当验证手机号为未注册过时,是否需要设置密码?设置密码是否可以跳过?若未设置,重新用验证码登录时,是否还需要设置?

二、图形验证码流程

JjmEbq7.jpg!web

注意事项:

  1. 应不同产品不同业务需求,为防刷短信验证码,可在每次点击获取短信验证码前增设图形验证过程;
  2. 图形验证码验证存在形式,是在页面内?还是弹框的形式?因为要考虑到在多个场景下可复用的情况;
  3. 若为弹框出现的形式,当图形验证码输入错误,用 toast 或者 HUD 的形式反馈错误会不会不合适?
  4. 用文字提示图形验证码输入错误后,是否可以自动清空图形验证码?

三、账号密码登录

F7Vbu2e.jpg!web

注意事项:

  1. 默认登录方式是手机号验证码登录还是账号密码登录?(看产品和场景:比如初次下载时,可以用验证码登录,用户主动登出后,下次登录可用账号密码登录);
  2. 产品多长时间不使用,需要重新登录呢?(重新登录时,是否可以自动记住手机号),还是每次进入的时候都需要重新登录?(比如我用的农行和中行移动app,在每次进入的时候都需要重新登录,应该是为了安全性考虑);
  3. 手机号,密码的验证先后顺序(手机号格式是否正确、手机号是否注册过、手机号和密码是否匹配等);
  4. 关于输入密码的二次确认,在我实习的时候,我导师给我讲过什么时候用「再次输入密码」,什么时候用「密码可见开关」,以及密码可见开关在什么场景下默认可见,什么场景下默认不可见。(因为不想把这些限定成一个规则,大家可自行根据自己产品思考);
  5. 若系统判断手机号未注册,是直接反馈用户手机号未注册?还是反馈手机号or密码错误?还是引导用户进入注册流程或者验证码登录流程?(当然还是依场景而异:部分产品如果直接反馈手机号未注册,其实很容易泄露隐私,哪些手机号注册过该产品就容易被他人知道)

四、第三方登录

RBnMNnB.jpg!web

注意事项:

  1. 第三方登录最常见的需要考虑的点就是是否还需要绑定手机号,是否可以跳过;(看产品:简书这个产品也是让我比较困扰的,我用手机号,微信,微博登录,是三个不同的账号,并且还没法合并到一起)
  2. 比如美团打车这种需要手机号验证码身份的,在用第三方登录时候,就需要绑定手机号;一些产品想给用户打造较轻体验,也可以不需要绑定手机号。

五、忘记密码流程

UbENBzB.jpg!web

注意事项:

  1. 在输入新密码的时候需要考虑密码的形式是否符合要求,以及怎么明示用户以及反馈给用户;
  2. 新旧密码是否能够一样?(比如 Adobe Creative Cloud 每次找回密码时,新密码和旧密码不能一模一样);
  3. 在密码找回后,进入哪一个流程?是直接进入首页?还是进入账号密码登录页?是否需要自动输入刚找回的账号密码?
  4. 有些产品可能会使用邮箱找回密码,不过看场景,是不是所有人都会有邮箱,并且移动端是否能随时收到邮件?

总结

QNjuui7.jpg!web

△ 当时做的简单超低保真版原型

回到最开始,登录注册里的很多功能细节使用的好坏没法一概而论,还是基于具体场景考虑。

在我之前两份实习中,我的两位导师都告诉过我,登录注册的逻辑是几大复杂场景复杂逻辑之一(此外还有购物车的逻辑,退换货的逻辑等等)。

以上是我对登录注册的业务逻辑和一些需要注意的 case 的总结,也算是理了下最近比较乱的思绪,希望有不同想法的大家多跟我交流。

印象很深的一句话是:做任何分析的时候,不要拘泥于表面,去思考背后的逻辑与深层原因,不需要得到一个准确的答案,思考的过程本就是一种收获。

欢迎关注作者的微信公众号:「UED设计笔记」

mY7nyyZ.jpg!web

图片素材作者:Jordan Jenkins

「如何做好注册登录页」


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK