最近公司在做的一个网站项目，在做视觉设计的时候与项目负责人进行沟通时发现了

好多的交互细节并未体现在原型之中，索性就通过此项目对登录注册的交互进行一下细节的整理。

一、登录的目的

登录的目的是有两个维度的，如果站在用户的角度来说是为了能够浏览此网站更多受限的内容；站在公司的角度来说是为了获取用户。

而往往登录的方式也有很多，

通过第三方快捷登录的方式，优势在于方便快捷，直接利用第三方授权直接登录；劣势在于用户并不是你的，而是第三方的，从而没有达到公司的目的—获取用户。但是大多数用户更倾向于第三方登录，因为用最短的时间达到了用户的目的。我们可以通过后期的设置和绑定手机号等流程进行真对性转化，从而达到获取用户的目的。

通过邮箱注册登录、手机验证登录的方式，在本质上这两种验证登录方式是没有区别的，都是通过填写信息后获取邮件验证或手机验证码来注册登录的。那么能够提升整个注册体验的过程就放在了填写信息的流程中，在填写表单的过程中无疑会增加用户注册的难度，那么如何设计注册流程呢？

二、提升注册登录体验

1、删减不必要的填写信息

我们比较上面两个注册页面，很明显左侧的注册成功率会高于右侧。在让用户填写信息时我们只展示给用户几个必要信息就行，信息展示过多就会使用户产生抵触心里。用户会想“我还没看见你的网站到底有没有我想要的内容，就让我填写这么多的信息，我才懒得填”，可能就是这样一个无情的理由使得我们失去了一个用户。

仅需保留以下信息就能满足注册登录的目的

（1）能够识别用户身份的任意一条信息（手机号、邮箱、用户名等）

（2）web验证码

（3）用户密码

（4）手机验证、邮箱验证

2、少任务多界面的注册流程

在进行信息删减后保留了四条信息填写，如果把四条信息在一个界面上完全展示给用户不是不行，只是在无形中对用户产生了压力。不如我们把注册分成两部分，一是填写，二是验证。作为一种引导式的注册方式让用户不知不觉的就完成了注册流程。

以手机注册为例，开始的界面内只显示两条内容供用户填写，当用户填写完手机号时我们在弹出验证码的输入框，也就是说在不填写手机号的时候验证码的输入框是不会出现在用户的视野内的。当用户全部完成三项信息的填写后，点击“注册”会跳转到收取手机验证码的页面，用户填写验证码完成验证。

3、填写的信息需要记住

这句话可能不太好理解，意思就是我填写完手机号、密码之后这时需要填写web验证码，但是有的网站就真的很恶心了，由于验证码填写错误，点击注册之后有需要我把所有的内容重新填写，心里简直一万只草泥马在奔腾。所以就需要在我不刷新网页的前提下web验证码填写错误后只需要重新填写验证码就好了，必经手机号和密码是无辜的。所以就需要我们利用简单的验证码来进行验证，像下图这样的一秒完成验证。

4、输入的信息给出合理的提示

在没有输入信息的时候需要有默认的提示信息。比如填写密码时除了要有密码icon的提示之外还要加上密码的格式要求，因为考虑到密码的安全系数大多数会用字母与数字结合并限制字符，所以要给出明确的提示信息。

比如：“8-20位字符，空格除外”、“8-20位字符，不区分大小写”等。除了给出默认提示外，如果密码允许区分大小写字母的话，当我们切换大写输入法时也要给出“大写锁定已开启”的提示。

5、给出合理的信息反馈并定位输入焦点

有些网站可能用户长时间没有登录，忘记了自己是否注册过，所以在用户输完手机号时就需要判断用户是否进行过注册并给出反馈。为了避免用户在输入手机号时输入错误我们可以把手机号分段显示，例如180-3654-6581一定比18036546581更便于检查。在提交注册信息时如果有信息错误项，此时直接把输入焦点定位到错误项并给出错误原因。如下图

6、开放记住用户名和密码的权限

这个功能最好开放给用户来自我选择，因为web端的私密性不是很高，可能会多人用一台电脑，如果是这样用户自主选择“不记住密码”后也不必担心自己的账号安全问题；如果是私人电脑并经常访问此网站，那么“记住密码”后就方便多了，如果每次进来都需要重新输入用户名和密码无疑给用户增加难度。

7、找回密码

找回密码一定要有，而且要放在登录界面上。不然就真的囧大了，密码不能找回可是真真切切的失去了一个用户啊。

三、注册登录交互设计总结

尽量有第三方登录渠道，如果没有一定要在后期的设置和绑定手机号等流程进行真对性转化，从而达到获取用户的目的。

在填写注册信息时删减不必要的信息元素，利用少任务多界面来完成注册流程，并且在注册登录过程中要给出足够的信息提示及其反馈。

这就么多吧！会有好多想不到的内容，而且具体的需求要根据不同的项目而定。

感谢老铁点赞