登陆注册模块设计总结
做了两年独立设计，看了很多产品、设计文章，现在自己也做些总结。
说到“登陆注册”，应该很熟悉。
我们在使用一款软件的时候，除了少部分特殊的工具类应用，其他大部分都会要求你登陆注册，即使不是现在登陆注册，但也会在你要使用某些功能时要求你登陆注册。设计师在设计一款软件时，对登陆注册页进行设计，常常也是不可避免的。登陆注册页设计的重要性可见一斑...
既然登陆注册如此重要，那登陆注册页设计简单吗，又有哪些类型，哪些注意事项呢？
今天就跟大家分享下，我最近的相关总结。
#本次总结的内容有#
登陆注册有什么意义？
登陆注册常见的类型。
登陆注册常见的方式。
登陆注册的设计表现。
登陆注册设计要点。
一、登陆注册有什么意义？
二、登陆注册常见的类型。
1.无需登陆
无需登陆即可使用功能，主要用于工具类APP，由于无用户留存、无经济价值，多被系统类APP取代。
2.非强制性
用户无需登陆即可使用部分功能，但涉及到个人资料等更多功能则需要登陆。
3.强制性
需要登陆才能使用功能。
三、登陆注册常见的方式。
1.手机号
使用手机号获取验证码是目前最常用的注册登录方式，通过发送短信获取验证码在60-90秒内进行注册登录，这么做是为了确认用户拥有该手机号的使用权。
手机号+密码是用户常用的方式，而手机号+验证码是比较简便的方式。
这里注意一点的是在输入手机号后，为了让用户查看是否输入正确，建议手机号显示样式为3-4-4模式（比如156 1815 5555）。
2.邮箱
通过邮箱或账号登陆注册，登陆与注册分开，邮箱容易记忆，便于频繁使用的产品，注册后邮箱会收到验证链接，验证成功后会自动跳转进入该网页首页。多适用于PC端，国外比较常见。
3.第三方
使用第三方社交账号登陆，不仅能方便快捷体验产品，更有利于后期通过社交账号进行分享宣传推广。常用于不涉及重要隐私信息的小应用。
在第三方应用中进行授权后产品会直接调用接口，生成ID登录后，你的头像、昵称等个人信息甚至可能同时会获取你的好友列表，让你知道还有哪些好友也在使用产品，可以有效地减少对产品的陌生感，同时也便于应用在第三方中进行分享。
4.混合型
多种方式混合，其中手机号+邮箱是为方便维护账号体系，兼顾PC和移动端用户，提供多种选择的登陆注册方式。
四、登陆注册的设计表现
交互
独立分开：登陆页与注册页独立分开，让用户只聚焦注册、登录本身，去除多余的干扰元素，可以节省用户的时间。
合并分布：先输入手机号，点击“下一步”的同时，系统查询该手机号是否可以注册，通过的话则进入输入验证码页面，这样做的好处是可以及时反馈给用户，避免了用户在输完手机号和验证码之后出现错误toast的情况。需要注意的是步骤不宜过多，建议3步以内，如果你的产品对用户来说不是非用不可，可能会有很多用户会放弃注册。
2.视觉
风格类型：大标题+留白+、logo+
背景类型：纯主色、矢量插画、摄影图片、短视频
五、登陆注册设计要点
输入提示框
输入框提示语是必不可少的，措词需要简洁，大部分的做法是点击输入框后提示语自动消失，这样做也是可以，毕竟需要填写的选项不是很多，用户不易忘记；当然更好的做法是保留提示语，比如在点击输入框后，提示语会上移，依旧保留。
2.格式要求说明
引导并提示用户要输入的内容格式、长度要求，提高体验及效率。
3.输入反馈提示
用户输入完一项内容成后无需提交便自动检测该内容是否正确，并给出反馈。
4.弹出提示
这里的alert、toast提示一般用于用户提交后的错误反馈。比如密码与账号不匹配、验证码错误等，及时的反馈给用户注册登录不成功的地方在哪里，以免用户摸不着头脑，愤而离开应用。
5.忘记密码
忘记密码的功能一般都是放在登录页面，因为两者有较强的关联性。使用忘记密码功能一般是通过手机号发送验证码，验证通过后再进行新密码的设置；如果起初是用邮箱注册登录的话就要到邮箱中进行验证，验证通过后再进行新密码的设置。
6.验证码
出于安全考虑，有些应用会让用户输入图形验证码、字符验证码、旋转图片、滑动验证等方式，目的是确认是人为注册而非软件恶意注册。
7.用户协议
用户协议看似非常的不起眼，用户也很少会去点击查看，出现在注册页面的情况居多。早期一般是默认被选中状态或是点击注册即视为同意协议条款，用户填完账户密码之后点击注册就完成了。但是前去年支付宝默认用户协议被选中导致的一系列新闻提醒我们，用户协议最好需要用户自己去点击确认，现在很多应用也开始这么做，在没有勾选用户协议之前，“注册”button是无法点击的。
8.键盘类型
手机号和验证码一定是数字键盘、密码一般都是英文键盘，用户体验一定要贴心。
9.密码可见性
出于使用场景考虑，比如在户外或是注册登录时身边有人，为了有效保护用户的密码隐私，可在输入密码时关闭眼睛icon，只显示密码点；开启眼睛icon时是为了让用户清楚的看见自己的密码，避免密码输入错误。
10.一键清除
这个功能是给用户在注册登录页面输入有误或是切换账户时使用，可以有效减少用户的点击次数，提升用户体验。
11.保留账户名数据
在用户曾登录过的情况下，应该保留用户的账户名数据，这样用户重新登录时只需填写密码或验证码即可。当然，用户如果想重新输入账户名，一键删除数据的功能也显得很有必要。
还有一点是多账户之间的登录切换，在登录时可以选择多个账号，这个功能在to C类应用比较少，一般是to B类应用可能会用到，因为企业可能会拥有多个账号，这个功能就会显得很有必要。
12.账号后缀关联
这种针对使用邮箱注册，比如说在用户填写账户名输入@的同时，关联出@qq.com、@163.com等，可以减少用户的输入，体验也会更好。
13.附加内容
附加内容是指注册时需要用户填写的一些其他内容，如头像、性别、呢称、年龄、位置等信息。不同的产品会有不同的附加信息要求，得根据实际情况考虑。
14.去除鸡肋操作
在注册登录时也会有一些比较多余的操作，比如二次确认密码、完善个人资料等，这些操作最好是放置在个人中心或是设置里让用户自行填写，在注册登录页面只保留必须填写的内容。
作者：TANGYU
（配图来源于网络）
