理完了注册和登录流程我只想报警

又到了两年一度的官网改版时刻！其实自我入职以来一直觉得官网的登录和注册流程体验不是很好，页面加载速度非常慢，同时我也想了解一下当时的产品经理在设计这部分功能时的所思所想，不如趁着这次机会好好分析和学习一下吧！

分析与思考

注册流程

1. 官网提供了2种注册方式：手机号注册和微信注册。
2. 手机号注册流程目前没有太大的问题。
3. 微信注册的入口有两处，合计流失率>33%。推测：

• 用户忘记自己先前有注册过，输入手机号后发现账号已被注册。（此时应该引导他去绑定账号）
• 除此之外，暂时还没找到更多合理的推测。接着我便去了解了一下其他产品支持第三方账号注册的目的：为了可以直接拿到第三方账号里的用户信息，减少用户注册需要填写的项目，从而简化流程。而事实上目前官网微信扫码之后，还需要用户去补充企业名称、手机号信息，实则并没有起到简化流程的作用。又去问了下当时这样设计的目的，是为了引导用户去绑定小程序。通过我的实际验证的时候发现：微信注册根本无法绑定小程序，微信注册仅仅起到了快捷登录的效果，并不是设想的可以直接进入小程序控制端，还需要重新绑定一次，完全不符合当时设计的目的。

微信绑定流程

目前仅支持通过手机号/邮箱密码绑定微信，流失率>21%，推测：

• 用户没有设置过密码无法绑定。目前绑定的方式单一，只有手机号/邮箱密码绑定这一种。而目前官网、SEM页面注册都不需要设置密码，若用户没有自发去个人账户设置，无法进行绑定。
• 用户对于绑定的概念不明确。用户到达绑定页面后发现自己走错了，下一步会选择回到继续注册的流程。
• 用户在绑定时发现自己忘记了密码，去走忘记密码的流程了。

登录流程

1. 官网提供了三种登录方式，账号密码登录、手机验证码登录和微信登录（默认的登录方式）。
2. 根据已有数据比对，账号密码登录按钮的点击次数明显高于手机验证码登录，推测：

• 账密登录是用户更倾向使用的登录方式，毕竟网页现在有记住密码的功能
• 密码容易输错（需关注忘记密码流程）
• 验证码容易输错（因为本身我自己在登录时验证码就老是输错，一旦出现了o或0基本都会输错，后来去问了开发大哥，验证码功能是他们自己写的，并未使用第三方插件。）

3. 在微信登录流程中，对于未使用微信注册过的用户，82%选择了去绑定微信，推测：

• 用户多来自于SEM渠道，也忘记自己没有使用微信注册过。经过验证发现其中有79%的用户确实都是来自于SEM注册渠道。

4. 微信登录为默认的登录方式，但目前欠缺使用相关的数据统计。后来了解到当初选择微信登录作为默认登录方式，也是为了鼓励用户绑定小程序，而实际上并没有达到绑定小程序的目的，也给用户初次登录加大了难度。

页面布局与设计

• 目前的注册页和登录页都采用的是左右结构，左侧强调的是注册试用活动和产品slogan，还用了动画效果，很容易剥夺视线。
• 注册页有很多多余的信息，页留下了很多导向其他页面的入口。用户被分散注意力是轻而易举的事情，最后就会导致注册流失。
• 页面有大图和动画，并且微信登录作为默认的登录方式，加载微信二维码也会影响到加载速度，这是不可避免的。

以上就是我的分析与思考过程啦，除此之外，我还顺便调研了下一些企业级产品官网的注册、登录流程。希望能给设计师一些页面布局上的启发吧！也顺便学习一下新的交互动效！

企业调研

1 Worktile

1.1 注册

注册--1

注册--2

流程分两步走

1. 注册企业（注册手机号）
2. 填写注册信息

收集信息

1. 手机号
2. 姓名
3. 登录密码
4. 企业/团队名称

设计布局

1. 没有其他页面的调整或信息干扰

2. 获得焦点时，输入框标签（说明文字）有一个向上切入的效果，输入框的样式改变很有特色，后来发现chrome登录输入框也是这样设计的。

   
   
3. 填写信息后，点击【完成注册】，按钮上的文字会变成【注册中……】，这个细节设计的很好。（网易七鱼也是哦）即时反馈
   比如表单的提交按钮，可能因为数据太大或网络问题，当点击提交按钮时可能会有一定时间的延迟，如果没有及时的反馈，用户可能以为点击提交无效，为了避免这种情况，可以让按钮有一个动态效果的变化，比如在按钮上增加一个进度条动画，让用户知道提交正在进行。

1.2 登录

登录

2 Ucloud

2.1 注册

注册--1

注册--2

注册--3：[email protected]激活成功，将于3s内自动跳转至控制台（开始倒计时）

流程

1. 填写注册信息
2. 激活账号（邮箱）

收集信息

1. 邮箱（用户名）
2. 手机号
3. 密码

使用需要实名认证，所以企业名称不作为注册流程的必填项

2.2 登录

登录

仅支持邮箱登录

3 钉钉

3.1 注册

注册--1

注册--3

注册分两步

1. 注册账号
2. 完善企业信息

收集的信息

1. 手机号
2. 企业/团队名称
3. 真实姓名
4. 登录密码

设计布局

1. 用户感知的是注册非常快捷。用户到达注册页后第一感知是：我只需要填写手机号就可以注册了。而事实上，填完手机号就会出现验证码的输入框。
2. 到达第2步才告知用户完整的注册流程是有3步，这个时候用户已经通过了手机号验证了，只要将手机号验证环节拿下后面的都好说了。

3.2 登录

登录

支持app扫码登录、手机号登录（即将下线）

4 百度智能云

4.1 注册

注册

注册只有一步

1. 注册账号

收集信息

1. 用户名
2. 密码
3. 手机号

4.2 登录

登录

百度智能云市场账号与百度账号打通，用户可以直接使用百度账号登录
支持百度账号（手机号/邮箱/用户名）登录和云市场用户名登录

5 网易七鱼

5.1 注册

注册--1

注册--2

注册分两步走

1. 注册手机号
2. 完善企业信息（完成！进入试用）

收集信息

1. 手机号
2. 企业名称
3. 邮箱
4. 密码

5.3 登录

登录

6 飞书

6.1 注册

注册--1

注册--2

注册--3

注册--4

注册分为三步，每步用户只需填写1项或2项

1. 填写手机号
2. 填写验证码
3. 完善团队信息
4. 邀请其他团队成员（可跳过）

收集信息

1. 手机号
2. 姓名
3. 团队名称

设计布局

选中输入框后，输入框中的提示文字会有一个向上缩起的效果！

6.2 登录

手机号登录

支持app扫码登录（默认）、手机号登录、邮箱登录

• 注册时用户无需填写邮箱，只有在用户主动修改个人信息时会要求用户填写邮箱，若不填无法保存修改，所以邮箱登录是嵌在手机号登录板块的，而不是与扫码和手机号登录为统一级别的登录方式）

改版方案

流程

1. 注册增加了“密码”作为必填项，而“邮箱”从注册必填项转移到补充信息的板块，与“行业性质”、“公司规模”同一级别。（原来的想法是企业名称、行业性质和公司规模是属于同一级别的，不过由于某一特殊要求就只能做到加上密码了）
2. 增加了手机验证码输错三次，再次点击发送手机验证码，需要进行验证
3. 密码登录作为默认的登录方式，且不需要填写验证码即可登录
4. 绑定微信、找回密码的流程更加清晰
5. 移去微信注册流程，仅支持手机号注册

官网3.0注册和登录流程 .png

页面&交互

1. 流程相关居中展示。移去一切可能会影响到登录、注册流程，让用户分心的信息
2. 有加载动画，缓解用户等待的焦虑感
3. 由于注册时对密码要求是大写、小写和数字的组合，我们在这次改版中加上了键盘大小写切换的提示。

总结

• 优化上线后，因为密码登录作为默认的登录方式了，明显发现忘记密码的用户开始增多，一周内找回密码的短信数已经超过了以往一个月的发送数量，因此后续需要关注这些用户找回密码的情况。
• 从反馈数据来看，一定程度解决了注册和微信绑定流失率高的问题，注册成功人数环比增长了8%，微信绑定成功的人数环比增长了11%。
• 数据是驱动产品增长的，每一个功能的优化与迭代都有他的目的所在，如何论证是否真正达到了目的，数据是最好的武器。
• 在需求提出之前，深入调研真的非常重要。对于一个产品经理来说，如果因为自己前期的调研不足，功能开发上线后与实际目标不符合，造成各方面成本的浪费，是非常不应该的。