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

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

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

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和触屏端一致。

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

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

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

带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验
今日内容使用JQuery完成页面定时弹出广告使用JQuery完成表格的隔行换色使用JQuery完成复选框的全选效果使用JQuery完成省市联动效果使用JQuery完成下列列表左右选择使用J ...
用layui做一个简易的登录注册页面
用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导 ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结一.环境准备与开发工具二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
基于Springboot框架的登录注册页面
今天正式开始第一篇文章创作,很高兴大家能够见证我的成长,也祝愿大家早日升职加薪哈. 首先声明,本人是技术小白,我只做我自己学习的总结.如果有技术上的错误,误导了大家,希望大家能及时做出补充指正. 下面 ...
【原型制作】无素材-纯原生制作-登录注册页面原型图
有一段时间没有做过原型图了,现在因为项目需要,得做一套完整的原型图,由于时间关系,考虑制作低保真的原型,虽然低保,还是得抓一把细节,嘻嘻,在这里记录下登录注册页面纯原生做法的全过程. 工具:Axure ...
LayUi做登录注册
LayUi登录注册页面附代码登录页面注册页面附加CSS,JS代码 JS代码 CSS代码登录页面下面展示登录页面代码如下. <!DOCTYPE html> <html xm ...
Axure-蒙版遮罩，鼠标移入移出点击效果设置，登录注册页面
第二章主要讲解蒙版遮罩,鼠标移入移出点击效果设置及登录注册页面蒙版遮罩就是用和页面大小的并且设置为半透明灰色的矩形盖住原有的页面,与某一元件相关联系(在"交互"中添加" ...
jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...

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

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

最新文章

热门文章