实例分析拆解:如何设计登录注册?

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

登录注册流程看似简单,实际考量设计功力。网上关于登录注册的综述有很多了,但是从零到一整合分析的很少,以下,将以实际的产品为例,精细分析如何设计账户体系。

最近对我们的APP的账户体系进行了改版,研究了各类产品的设计。账户体系虽然几乎是通用标配功能,但是各APP的都有差别,都是针对当前的产品形态、发展阶段和用户量级做出了符合自己的设计。

账户体系的关键点在登录注册流程上。

一、立项背景

我们的产品第一版账户体系由于历史原因,做的比较生硬。

初期主攻社交,希望可以沉淀用户信息,手机账号会是第一优先选择,当时的方案是手机号注册+账号密码登录/第三登录+立刻绑定手机账号。

如你日常体验那样,第三方登录+立刻绑定手机的方式,直接抵消了第三方登录的便利,比直接手机号注册更麻烦。而且,设计上,手机号注册需要设置两次密码,密码需要一致;设置之后,还得进入登录界面,再次填写账号密码,正确匹配才可以进入APP。

总的来说,用户进入APP的路径相当长,步骤多,用户体验低分。

近况是,产品方向探索,将重点落在商城上。完成交易的流程本身就多步骤,再叠加原来的登录注册,路径过深,对拉新损耗大,急需改进。

二、需求分析

从业务发展趋势来看,微信会是重要的用户来源,后续会布局更多的微信运营活动,和商城小程序,设计引流到APP,需重点突出微信登录。

而商城交易需要保证安全性,同时兼容老用户,手机注册密码登录必不可少。考虑到用户文化水平,和互联网产品使用习惯,需要在常规的基础上做简化。

第三方登录需要在关键点绑定,商城推广员提现时变更银行卡,需加以验证身份。

新用户刚进来,可以先浏览熟悉产品内容,在需要身份信息时,再进行引导登录。

三、功能点梳理

登录注册流程:微信/QQ第三方登录、验证码登录/注册、密码登录、找回密码。

账户体系配套:关键点引导绑定手机、关键点强制绑定手机、验证码验证账号、账号相互绑定。

细节功能点见下方的账户体系功能点梳理图。

四、流程图(登录注册)

未登录用户,到达需要获取用户身份信息的界面(为了平衡效率和体验,一般是除一级界面以外的),则触发注册登录流程。用户完成注册登录之后,才可使用和操作绝大部分的功能。

本流程图需要配合页面交互原型理解。

五、关键页面交互设计

登录注册体系将包含五个部分,主界面、验证码登录/注册、密码登录、忘记密码和新用户注册,在实际流程操作中会根据用户的选择,和系统的判断进行切换。账户体系的配套将会略过,以下是登录注册的页面交互设计、设计考量和功能点介绍。

1.主界面

  • 布局:主界面集合三种登录方式,将微信登录作为主方式。
  • 前提:成功登录的前提条件是必须先勾选同意用户协议,否则报错。
  • 授权:第三方的登录,点击微信orQQ,授权成功后,即可登录进入APP,自动获取用户的昵称性别头像信息填充社交页。

2.验证码登录/注册

(1)设计解析

  • 手机账号登录,考虑简单又快速进行,突出验证码快速登录/注册,辅以密码注册。
  • 密码注册的弊端是很容易忘记密码,忘记之后,找回密码流程也繁琐。
  • 验证码登录,虽然对频繁换手机的用户是个噩耗,短信也有达到率的问题,但考虑到效率跟成本,特别在拉新环节,还是作为主方式。

其实基于验证码到达率和安全性,我考虑过换移动认证,就是手机号码一键登录,无需密码跟验证码。可惜实际接洽的时候行不通,而放弃了,文本会介绍下这个事情。

(2)设计点

  • 验证码登录:登录注册界面为验证码登录,附以密码登录。
  • 按钮:登录注册的按钮合二为一。也就是说,用户不需要选择是登录还是注册,将判断交给了后台。只要用户的手机号码还在,直接凭验证码进入即可。比起选择密码登录之后忘记密码,或者是干脆就不记得自己是否注册过,在错误的界面输入信息之后来回切换,二合一的方式更加友好,也是本次设计的一个亮点。
  • 手机号码:采用更加清晰的的3-4-4数值格式,输入框末尾配清除按钮,错误输入后可一键清除。手机号码输入框也有记忆功能,可获取前一次登录的手机账号,可以获取同一次登录注册已填过的账号信息。
  • 验证码:手机号码位数输入正确类型和位数之后,才激活验证码功能。否则点击会报错。之后,验证码的激活以变色表现,这是个视觉指示。输入完成第一行,人眼会自然而言的落在第二行的开头,如无例外,用户需要寻找一番,才会觉知过来,去点击获取验证码。
  • 加载指示:数据传输到服务端,判断对错,再返回结果。这个流程费些时间,用加载小菊花,表示后台正在处理,舒缓下等待的焦急。

3.密码登录

(1)设计解析

密码登录考虑到向后兼容,老用户的账号以密码登录;也是适应本期的新用户注册。

同时标配忘记密码,也可切换新用户注册,或验证码登录,这些元素的布置考虑,是基于流程的。

密码的输入,其实正如设置密码,应该做格式限制。但是因为第一版没限制,不清楚用户设置了什么,所以此处不能轻易填坑。

数据输入都该考虑下限制的,为什么?在给产品经理讲技术这书里,要是你看到黑科技SQL注入攻击也会很印象深刻的……

(2)流程

跟验证码的简单路径不一样,密码登录因重在流程上逻辑自洽,更需配流程图查看才好理解。

正常流程是:输入手机号->输入密码->点击登录->登录成功。

异常流程是:

  • 输入手机号->输入密码->点击登录->提醒“未注册”->点击新用户注册or返回上一级验证码登录/注册。
  • 输入手机号->输入密码->点击登录->提醒“账号或密码不对”->重新输入or忘记密码or验证码登录。

4.忘记密码

(1)设计解析

步骤:忘记密码此处分两步,一步验证,一步设置。设置完之后,直接登录进入APP,无需再重复密码登录的步骤。(记不住密码更痛苦的事情是,忘记密码刚找回来,在下一步重新登录的时候又忘记了)。

异常流程:忘记密码此处还有个异常流程,是该账号不存在。有童鞋会说,正是密码输错才会到来这界面,这么还会有账号不存在的情况?对,情理上其实不大可能发生,但是程序逻辑上有这个可能,但是又无法通过前面的步骤过滤掉,是要补充下的。

此处判断账号不存在的提醒,是点击获取验证码之后,亮点之一。这里是考虑辛辛苦苦获取验证码,填写完毕之后才来告诉用户账号不存在,有些不厚道的……

(2)设计点:

验证账号:常规的做法,先验证码验证手机号,再下一步设置密码。

有些APP会将验证账号跟设置密码放在同一个页面,其实拆开会更清晰。而且,验证手机号码步骤复用率是很高的,比如,可以复用到推广员更改绑定银行卡时,作为账号验证。

设置密码:密码设置要限定格式,之后仅需输入一次就可以直接登录进入了。

重复两次数据,再次校验肯定更稳妥,但是登录成本提高了,以我们用户的耐心,我们的产品就没必要承担这个教育成本了。如果说担心手误输错了的,可以用验证码登录的,再不济可以用找回密码的。但是大多数用户其实只考虑本次能快点进入就好。

5.新用户注册

(1)设计解析

新用户注册界面近乎跟忘记密码是一样的流程,区别在点击获取验证码,此处的异常流程是该账号已存在。此处设置优化的流程,判断是已有账号之后,会直接跳转到验证码登录/注册界面处,直接获取已填写的手机号码,验证就行,对新用户尽量友好。

经过前面的界面筛选,此处的账号不存在的发生概率很少,但是作为关键流程而言,完整性是必要的。

 

移动认证

文内留个悬念要谈谈移动认证,移动认证是什么?最直接的体验是,无需输入任何数据,直接点击授权就登录。是不是很黑科技?!
但是为什么最终放弃了呢,请听细讲。

理想情况

移动认证是运营商移动提供的,基于手机sim卡和移动网络直接认证登录的技术,米家、爱回收跟同花顺应用在了自家APP里。当时上手体验,惊艳,简直零感登录;况且移动官网也有免费的sdk,更是窃喜。以移动认证为主登录的原型设计完毕,就立刻接洽移动认证sdk的接入。

现实情况:

但是呢,很快就被开发文档打脸了,简言之,就是层层筛选之下,能一键登录的用户远没有想象的多。

移动认证的原理是基于移动网络通信的。首先基于sim卡识别本机号码,在移动网络开启的前提下传输信息以授权通过,此时可顺利登陆;但是如果没开移动网络,就没辙了;如果WiFi跟移动网络同开,以WiFi为主,那将强制占道先验证再释放WiFi。如果移动网络通信不成,那就通过短信收发来完成数据传输。

所以,这么流氓的做法苹果肯定是不乐意的;电信不参与;oppo的ROM不支持此流程……层层筛选下来,加上关闭移动网络的,能顺利使用的其实不多;而且,除非付费,否则移动认证的logo说明只能用官方的,简直是给移动打广告….这些阻力远高于收益,所以,果断放弃了,采取了本文讲述的方案。

果然,合适的才是最好的。

 

本文由 @阅天 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自 Pexels ,基于 CC0 协议

评论
欢迎留言交流
  1. 学习了

    回复
  2. 1. 每次登录,都要勾选同意协议,不太合适吧?
    2. 忘记密码,在哪里,没找到。
    3. 手机号+验证码,登录与注册对用户来说操作上没有任何差异,不明白为什么要标注为“登录/注册”,还口口声声说这是亮点?难道不是给用户造成认知困难吗?市场上基本上都是直接写“登录”或者“快捷登录”,清晰告知用户能登录进入产品页面,作者的处理怎么会是“亮点”呢?我觉得文案上要简单、符合大家认知习惯。后台判断是新用户(–记忆存档)还是老用户(–调取用户数据)就好了。
    4. 密码登录的,提醒“未注册””->账号或密码不对,不懂为什么是这样,账号或密码不对跟未注册是两回事呀。
    5. 总的来说,还有优化空间。流程图也看得很费劲。另外,可以画个页面跳转流转图,更好理解一点。

    回复
  3. 最近自家app也在做登录注册,现在基本已经做完,读完后,发现做的逻辑很是相像,如果早发现这篇文章,会省不少功夫 :cry:

    回复
  4. 具体是哪个网站?

    回复
  5. 看得出来是用心了的。登录注册可以有更大的想象空间,指纹声控虹膜解锁也是一种方式。

    回复
    1. 这些要考虑硬件支持、成本效益等。指纹声控虹膜解锁有案例分享不,在APP应用层面的?

      回复
  6. 有1个疑问:
    对于一直没有设置过密码的用户(可能通过第三方或验证码登录),什么时候需要引导设置密码?
    比如,有该类用户可能忘记是否设置了登录密码,然后进入页,输入“登录过的手机号”和“随便一个密码”后,下一步:是直接返回页;还是Toast提示,然后进入流程?

    回复
    1. 你提到的是很多个的问题。
      首先,对于大多数功能而言,第三方登录跟手机账号登录是同等效果,这种情况下不需要引导;但是有些安全性高的环节,需要验证账号是本人或者要求手机账号,也就是绑定或者是验证手机。
      对于手机账号登录注册而言,密码登录跟验证码登录是平行的两个方法,不存在一定得要设置密码的。需要密码的场景考虑的是换手机或者是验证码收发迟滞。如果是用验证码方式登录进来,需要更换手机,可以在找回密码处设置密码。

      回复
  7. 这个说的不正是人人都是产品经理PC端的登陆方式么哈哈?“第三方登录+立刻绑定手机的方式,直接抵消了第三方登录的便利,比直接手机号注册更麻烦。而且,设计上,手机号注册需要设置两次密码,密码需要一致;设置之后,还得进入登录界面,再次填写账号密码,正确匹配才可以进入APP。”

    回复
    1. 对呀,这个很烦的,所以一定不会再用到自家APP上。

      回复
  8. 文章讲了很多内容,但是最感兴趣还是登录注册合一的亮点,我觉得这个是很可以的,对于已经注册的用户直接调取登录的入口,对于未注册的用户直接调取注册的入口,只是会增加一些后台同学的校验工作,另外还有就是对于很多APP,目前采用手势指纹的更多一些,所以这一步亮点在某种程度上来讲只是一个小亮点吧,只是个人意见,不喜勿喷。

    回复
    1. 很多APP是采用手势指纹,举出些例子吧。
      我们的用户并非是移动互联网的深度用户,所以基本是 在常规的方式上做优化是最合适的。

      回复
  9. 有个疑问,为什么点击 忘记密码 前一步 不能去明确判断 是账号不存在 还是 密码错误,那如果账号不存在的话 就直接toast提示 然后让用户选择 手机号密码登陆 或者 新用户注册就可以。如果是密码错误 就直接重置密码

    回复
    1. 密码登录处账号密码校验不一致,其实出错的不是两种情况,而是三种情况。
      第一个是账号未注册,这个已经提醒了,因为有两种方式可以注册,返回上一步验证码注册和新用户密码方式注册,所以此处留给用户来选择;
      第二种是账号正确,密码错误,这个就是用户输错密码了,去找回密码就可以;
      第三种是很多人会忽略掉的,用户账号输错了,这个不论是输错了是未注册和还是侥幸输入了正确的已注册的账号,将正确的密码一输入,还是会报错,这时候是应该怎么提醒呢?其实判断不了用户输错账号的情况,设置的提醒也不能误导用户。所以,提醒账号或者密码错误,而不替用户做决定是合适的。

      回复
    2. 嗯 对第三种我的确有忽略了,感谢耐心解答~谢谢!

      回复
  10. 流程图看不清呀,老哥可以换一个高清的嘛

    回复
    1. 另存图片,用图片编辑器查看就能放大了

      回复
  11. 登录注册安全防护这块作者是怎么考虑的啊 比如有些程序自动注册、短信轰炸或自动登录破解密码

    回复
    1. 1.安全防护这方面在产品设计上可规避的并不多,比如传输给服务端的数据(账号秘密等)采取字符类型跟长度的限制以防止SQL注入攻击,在关键的环节要求绑定手机,验证码验证手机账号为本人。其实更多的是在技术实现上,标注好安全等级一些总要求,然后放心交给技术童靴来完成。
      2.登录注册上会涉及到加密设计,在往服务端传输之前,给密码做哈希和加盐生成面无全非不可逆推的字符串,然后再传输,这个可以保证在传输过程中的数据安全性。服务端校验密码账号一致之后,就会给客服端下方凭证,客户端在有效期(一般一个月)内根据凭证校验就好,自动登录过程已经不涉及密码。凭证过期之后,再来一次第2步骤就是了。
      3.短信轰炸如果不是运营设定的,那就是基站跟手机通信协议的欠缺造成的,伪基站问题,在APP层面是解决不了的。
      程序自动注册是指什么情况?有些工具型APP确实不需要登录注册,给本地分配个id就可以用了的。

      回复
  12. 手机号码 3-3-4 。作者做的不是国内的产品 ?

    回复
    1. 笔误,感谢指正。

      回复
  13. 把注册和登录按钮合一,看似是让用户的操作简单了,实则会让用户困惑,目前通用的还是分开,这样是比较明确的,个人意见,仅供讨论~

    回复
    1. 不考虑下弱化注册,实现注册和登录的功能性合一?美滋滋…

      回复
    2. 注册和登录两者的合并会产生很多的问题,个人觉得这点不妥~注册属于一次性使用,不是高频操作~

      回复
    3. 合并具体会有什么问题?
      有时候不记得自己是否注册过,这种情况下选择手机登录或注册都是50%的成功概率,选错了要来回切换是很不方便的。

      回复
    4. 如果仅是针对这个问题,我倒觉得这样会更好:在登录时输入手机号后,判断,若没有注册,则可以提供跳到注册页面的入口。注册和登录按钮合并,使得整个流程具有不可预知性,导致用户困惑~另外,要明确产品的主流用户到底是谁?

      回复
    5. 导致整个流程有不可预知性,有说法的话可以再具体说明下。
      导致用户迷惑这点倒不会,用户只想顺利进入APP做他想要的操作而已,至于是登录还是注册,他并不关心。如果之前注册过,还给他原来的账户数据就可以了。

      回复
    6. 所以我说考虑弱化注册,目前我改版的2款APP,没有因此出现任何问题, 且客服少了一些单子。 我蛮推崇的, 有兴趣可以聊一聊。

      回复
    7. 弱化注册,我是赞成的~

      回复
    8. 吧需要用户判断的内容修改为系统判断,只需一步一步的往下走,为啥需要注册?只有登录,老用户登录和新用户登录,对于用户来说只是登录

      回复
    9. 那你觉得为啥现在还要区分注册和登录呢?为啥不直接把注册去掉呢?从用户角度来看,还是要让用户感知自己是在注册还是登录的,不然会很疑惑的~

      回复
  14. “比如长度正确,但是数字不是手机号码”这种情况怎么判断出来手机号码数字(非字母)不是正确的手机号码啊?
    例如:125-5858-8585,这个怎么判断不是正确手机号码?用短信供应商的接口吗?求解答?

    回复
    1. 号码校验,目前有成熟的插件可以直接拿来用, 你说的这些问题已经不是什么障碍了。

      回复
  15. 产品小白,说个不成熟的想法。可不可以这样,当用户输入手机号码>获取验证码>系统判断是否为已有账户。是>进入主页,否>直接跳转安全协议>勾选>成为新用户。。。此时的新用户未设置密码,在主页进行提醒,引导用户设置密码。
    这样的话是不是让用户的操作步骤减少许多?
    请指教下可行性。

    回复
    1. 在本文方案,验证码验证登录/注册的流程上,如果是判断为否(新用户),无需设置密码,也是直接进入主页的。后台会获取否的情况,判定为新用户,注册账号。这个步骤已是优化了。

      你提及的判断为新用户老用户,去不同的界面操作,是在密码登录的环节。其实已经经过两道筛选(第三方登录、验证码快捷登录),到达这个界面的用户已经很少了,但是为了兼容老版本的情况,是必须补全相关的流程,只是在指引的时候,会有倾向性。

      回复
    2. 是个不错的想法,不过跳转协议前,最好给予用户一个明确的注册提示

      回复
    3. 其实你还没理解登录/注册一体的设计考量点在哪里

      回复
    4. 感觉 登录/注册一体的设计 就是弱化了注册,不知不觉就进来了。。

      回复
    5. 恩,是的

      回复
  16. 有个疑问,为什么【点击登陆方式】后需要进行【协议的勾选】呢?
    一般登陆流程里是不涉及到协议部分的吧,进行账号注册的时候才需要确认勾选

    回复
    1. 这个是不同产品的设计考虑了,有许多确实是只放在手机号码注册环节。
      至于为什么放在这里,是有两点考虑。
      第一,流程图虽然写的是点击登录,其实他是登录/注册,是填写手机号码之后才判定是新老用户,新注册必须遵守用户协议,放在这里是合适的;
      第二,难道第三方登录的用户不需要遵守用户协议么?要的。既然要的话,为什么不放在一开始的总页面里?

      回复
    2. 1、你这里的用户协议,全程是“用户注册协议”
      2、第三方登录在用户层面并没有“协议”这个概念,只有“授权”,本质上只是借用其他平台的账号在自己的账号体系下建了一个用户;
      3、可以参考刚刚那个产品小白兄弟的评论,他是放在自有账号体系下的手机登录里放上协议勾选,而不是放在更上一层的、包括第三方登录的地方,我觉得这是更准确一点的

      回复
    3. 用户协议不一定是用户注册协议,可以是用户服务协议、平台服务协议,用户隐私协议等说明用户权利跟义务、平台提供的服务的文件和条款,原则上是所有进入APP的用户都要遵守的规范。既然是所有的用户,那么第三方登录只是快速登录(or注册的方法)的一种方法,不同注册方式并不享在这类型的平台条款上有什么特殊的权力跟义务。

      回复
  17. 很详细,有亮点,发现需要提示给用户的东西太多了,之前确实没注意,感谢

    回复
    1. 嗯嗯,常规的地方也有可优化的地方。

      回复
  18. 讲解的非常详细。

    回复
  19. 受教了,谢谢

    回复