设计思路

Paste_Image.png

三类典型注册模式

• 58同城没有邮箱注册，主打QQ登录；
• 简书加入了“豆瓣”第三方账户登录；
• 印象笔记只有邮箱注册。

Paste_Image.png

注册流程

目前的注册流程基本可以分为：分布式注册、新开页面的一步式注册、弹窗打开的一步式注册。
无论哪种注册流程都尤其优势和劣势，其设计的核心原则都是精简注册填写项，降低用户的填写难度，同时，激发用户填写动力。

登录流程

目前 APP 上什么时候需要用户登录有三种模式：
可以先浏览再登录：京东、淘宝、美团、饿了么、美团外卖、携程、飞猪……
可以先使用部分功能，登录后使用更多的服务功能：知乎、简书……
必须先登录才能再使用服务：微信、一直播、小咖秀、探探、花椒、Facebook、Instagram、in、same、百度网盘、QQ邮箱、微云……

注册登录 PRD 文档需考虑细节

• 用户名的格式要求
• 邮箱/手机的格式校验
• 密码的长度要求
• 密码包含的字符要求
• 两次密码输入时的一致性校验
• 按钮默认显示状态
• 用户输入信息后按钮颜色变化效果描述
• 输入框用户输入错误时的报错提示文字
• 提示文字的摆放的位置
• 页面格式根据提示文字的变化，需要有怎样的视觉效果
• 用户不小心点击了左上角的返回按钮后的提示文字
• 误点之后的下一步动作描述
• 用户点击立即注册时在网络较慢的情况下，页面和按钮如何响应、是否要加锁屏浮层等。

image.png

注册后去向

注册后，不能让用户一直停留在注册完成页，需要将他们引导到网站期望用户去到的地方：
用户从哪里来的？（跳转到注册页的前一个页面是什么）
注册后最关键路径是什么？（前往购买、前往留资、返回前页）
除了最关键路径，还可以提供用户哪些行为入口？（与关键路径形成差异）

十个要点

1、不同时使用登录和注册

按钮太相似或者都使用相同的动词文本标签，用户可能会点击错误。
（英语里面Sign in/Sign up）

image.png

可以使用：

image.png

2、减少表格填写项

注册流程越少，越容易提高用户留存。
不要重复填写邮箱、密码等信息；
如有必要填写过多信息，增加“可选填”备注

3、区分登录与注册

image.png

4、可显示密码

使用“显示密码”复选框方式去预防用户输入错误密码。你可以把复选框放在接近密码框附近。当用户点击它的时候，密码就会显示给用户，而不会被隐藏。
如：

或：

5、提供填写引导

1、向用户展示哪个表格框是错误的，并解释正确的填写方式。
2、实时数据验证

image.png

6、尽量避免用用户名登录

选用邮箱或手机号进行登录
用户名的弊端：
1、用户喜欢的用户名通常已被占用，需耗时去编辑新的用户名；
2、新应用的用户名可能经常被遗忘。

image.png

7、允许第三方登录

image.png

8、用户注册后保持登录状态

常见问题是用户注册账户后，又要求用户立刻登录。这个额外的步骤让用户感到很困惑。

9、轻松找回密码

在登录页保留找回密码的功能

image.png

10、先试后买

如，YouTUbe允许新用户浏览他们想要尽可能多的内容，当他们想试图回答或者创建自己的视频内容的时候，它就会提示用户去注册。

不友好的设计范例

1、权重相同样式相似的俩个注册登录按钮放到一起

2、不保存用户在输入框中输入的数据

场景：
填完了长长的表单信息，某个输入框不合规范需要重填，但之前所有的表单数据都变为空。

3、第三方关联登录后仍需注册

场景：
点开某一网站进行登录操作，看到下面有第三方登录，点击QQ 或微信登录后，到达第二个界面，我想此时点击绿色的登录按钮就应该登录成功了，谁知又到达第三个界面问我关联新账号还是已有账号，用第三方登录当然没有已有账号啊，于是点击了关联新账号，进入注册页面。
第三方关联登录的本意就是减少用户注册操作，可以方便用已有的账号对网站进行访问。

好看登录页收藏

image.png image.png image.png

——————————————————————————
——————————————————————————
学习文章来源：
http://www.woshipm.com/pd/286207.html
http://www.woshipm.com/pd/309557.html
http://www.woshipm.com/pd/395517.html
http://www.woshipm.com/pd/571514.html
http://www.woshipm.com/pd/589522.html