做登录/注册页面需考虑哪些问题？

【文章摘要】现在人手一部手机的前提下，手机号登录/注册的方式无疑是最简单直接的方式。而且现在很多其他注册方式，到后面还是会引导用户去绑定手机。

这几天在做登录/注册页面。做之前看了很多其他公司的登录/注册页面。看的时候觉得登录/注册页面挺简单的。无非就是表单的设计和各类报错提示。我想麻烦应该在各类报错提示上面，因为比较多。只是麻烦而已，应该也不算难。后面才发现并不简单。

1、选择登录/注册方式

注册方式一般有：手机号码注册、电子邮箱注册、用户名注册、手机短信注册。登录方式一般有：手机号码登录、电子邮箱登录、用户名登录、手机短信登录、其他社交账号登录、扫二维码登录。

（手机号码/邮箱/用户名登录注册都比较常见，图为百度的手机短信的注册（图左）、登录（图右）。另：图右的这种方式也可以用于注册）

现在人手一部手机的前提下，手机号登录/注册的方式无疑是最简单直接的方式。而且现在很多其他注册方式，到后面还是会引导用户去绑定手机。所以最好还是最开始就采用手机号码来登录/注册。

2、确定登录/注册界面元素

注册页面，一般会有：手机号输入框、密码输入框、短信验证码输入框、短信验证码获取按钮、用户协议选择、注册按钮。（图为优酷的注册界面）

登录页面，一般会有：用户名输入框、密码输入框、登录按钮、记住密码按钮、忘记密码按钮、注册按钮以及其他登录方式 。（图为优酷的登录界面）

找回密码页面，一般是：手机号输入框、短信验证码输入框、短信验证码获取按钮、重置密码框，完成按钮。

在确认界面元素的时候，发现了其他几个问题。

2.1登录和注册怎么切换？是在同一个页面做成tab切换？还是做成跳转页面？

两种方式都有。不过把注册设置为较小入口，然后做成跳转页面的比较多。我是这样理解的，看网站的目前的状态。如果处于还是拉新的状态，应该给注册一个比较大的入口。我们公司以前web端没有登录注册，开放以后，注册的用户数应该比较多。于是我选择tab切换的方式。（图左为优酷的登录界面，图又为简书的登录界面）

2.2登录页面-记住密码按钮是做成默认选中？

默认选中、不选中，这两种方式在其他网站都存在。还有一种是根本没有记住密码。其实复选框点选非常简单。但是也毕竟是增加了用户的一次操作。考虑到我们网站的用户场景（做驾考题，一般不太容易跑到网吧去做）、账号也不涉及交易。所以打算做成默认。

2.3登录页面-记住密码按钮、忘记密码按钮是放到登录按钮之上还是之下？

同样是两种都有。我觉得问题不大。

2.4登录页面-其他登录方式具体叫什么？

这个我老大比较纠结。因为我们的其他登录方式只允许QQ一种。所以我写的是：其他社交账号登录。他觉得不太好。他认为直接写QQ登录，不要写其他社交账号登录比较好。因为更简洁。

2.5注册页面-密码输入框需不需要设置两次？

我看到还是有比较多的密码需要再次确认。我觉得没有必要。一般用户输入密码时都会比较谨慎。我们也会设置可以查看已输入密码字符的小功能。如果实在不行，也可以找回密码。用手机找回，相对来说还是比较快捷的。

2.6注册页面-需不需要图片验证码？

这个问题我犹豫了很久。图片验证码主要是识别是否机器注册。不过很多验证码看不太清，多次输不对会让用户很烦躁，体验很不好。我问了技术，一般来说其实后台可以控制。不过后来得知，因为一般我们使用的短信平台是第三方短信平台。第三方要求必须要有短信验证码。

2.7注册页面-用户协议复选框需不需要默认选中？

默认选中、默认不选中、还有就是根本不要复选框。其实无论默认选不选中，用户其实都不会去看。放一个选择框在那里，用户说不定还会犹豫下，停顿下。所以我想干脆就不要复选框好了。（图左为美团的注册界面，图右为优酷的注册界面。细心的小伙伴可能也注意到了，这里优酷的注册界面和上面优酷的注册界面不同。因为上面的优酷注册界面是弹窗，这里的是页面。）

2.8找回密码页面-统一为一个页面行不行得通？

一般是先验证身份， 再重置密码。如果是两步的话，有流程提示比较好。像下图，百度这样。分为了三步，每一步一个页面。但我想统一为一个页面应该问题不大。因为步骤其实也是一样的。（图为百度找回密码界面。分了三步，三个页面 。）

3、报错提示

3.1哪些信息是及时报错，哪些信息是统一返回报错？

手机号码是否注册、手机号码的格式、图片验证码、注册时候密码的格式及时报错没有问题。手机号码和密码的匹配，一般是点了登录之后统一返回报错。

3.2报错提示全部统一在一个地方好，还是在各自输入框下面好？

现在的报错提示好像基本上都是统一一个地方，统一在上面或者下面。（图左为京东的登录界面，图右为去哪儿的登录界面。）

3.3登录、注册、找回密码的某些报错提示是否一致？

我开始设置为一样的。但是后面发现有问题。比如手机号码，登录的时候如手机号码位数出错，其实不必提醒为“请输入11位手机号码”这样具体。直接提示“手机号码格式有误”就行了。因为注册的时候提醒过。而注册的时候就有必要了，注册时教育和引导用户的过程，越详细其实越好。

4、其他问题

4.1登录注册做成页面还是弹窗？

你会发现同一个网站，同样是登录/注册功能，但有的入口进去是弹窗，有的入口进去是页面。这个我后来总结了下，一般点“登录/注册”按钮进入，是页面，因为这个时候用户的目的就是登录或者注册，比较明确。而比如点其他功能，这个功能需要登录注册才可以使用，一般就是弹窗。因为用户的目的不是登录注册，而是完成其他功能。弹窗的形式让用户觉得简单，对用户的其他目的干扰较小。

4.2找回密码做成页面还是弹窗？

一般是页面。我想是因为找回密码一般分为两个步骤的关系。

4.3弹窗-页面-弹窗？

由于我们第一期准备做登录/注册弹窗，在考虑qq快捷登录这样的方式的时候，需要绑定手机号。 绑定手机号也打算做成一个弹窗。qq快捷登录是一个页面。这样的话，就会经历从弹窗到页面再到弹窗，这样感觉还是比较奇怪。所以本期web端暂且不打算做qq登录。

4.4web和触屏端是否一致？

由于web的登录和注册也算做到极简了，调整下宽度，用于触屏端基本也没有问题。所以打算web和触屏端一致。

总之，登录/注册界面虽然看上去内容非常少，但由于网站性质不同、用户场景不同、第三方要求不同、还有产品一般性原则等，需要考虑的点还是蛮多。

不过由于时间问题，还是存在参考网站较少，参考国外网站较少的问题。以前觉得，大多数登录注册页面还是太过中规中矩，并不是那么有趣。轮到自己做的时候，却也不敢放开来做。