关于登录注册页面的几点思考

UI设计不是简单的视觉设计，每个设计后面都有着思考。以下是我个人对登录注册界面设计的一些思考，抛砖引玉，肯定很多地方还有考虑得不到或是不当的地方，欢迎指出，互相交流。

一、登录注册界面出现在哪里？

  登录注册界面一般来说会出现在两种地方。一是，刚进入APP的时候，就提示用户要进行注册或是登录，二是，登录注册界面放在个人中心，用户进入APP的时候并不会提示登录或是注册，只有当用户使用到某些功能时才会提示登录或注册，当然用户也可以选择在这里进行登录或注册。

  第一种方式显然没有第二种用户体验好，登录和注册毕竟是个麻烦事，如果必须要登录或注册才能使用APP，等于给用户设定了一个门槛，必然会导致用户的流失或卸载，所以如果APP采用这种方式的时候，都会有一个选项就是不注册先进app体验一番。某些内部管理型APP，必须登录才能使用的除外。

二、登录注册界面的元素

   登录注册界面要分为两个界面来分析（以手机号登录注册为例）：

   1、登录界面：返回、输入手机号、输入密码、忘记密码、登录、注册、第三方登录。。。

   2、注册页面：返回、输入手机号、获取验证码、输入验证码、设置密码、同意注册协议、注册、登录。。。

由上面可以看出登录和注册两个页面是要互相关联的，即登录的页面中要有注册的选项，注册的页面中要有登录的选项，方便用户在两者之间进行快速的跳转。注册流程根据APP不用有长有短，这里只写流程最短的。设置密码有时其实都不需要，因为现在可以通过验证码进行快捷登录，设置密码可以等注册完成后在个人中心进行设置。第三方账号登录一般登录页面显示，而且首先显示的是登录页面，所以在注册页面可以不需要在展示使用第三方账号登录。

  目前还有一种将登录注册二合一的方式，即输入手机号和验证码，如果手机号没有注册会自动注册，之前后注册就进行登录。

三、元素的排版

   上一点的两张截图基本代表了目前的登录注册页面各元素的基本排布方式，大体上分为上下两部分；上部分是用自身账号进行登录注册，下部分是使用第三方账号登录。第一张不足之处在于，忘记密码四个字放在右上角，与其关联的密码输入框隔得太远了，应该放在密码输入框附近，如下图所示。

  

四、关于提示语

  一种是输入框中的提示语句，如在用户名、密码输入框等处。这种提示语句在信息层级上较为弱化，且在点击输入框或是输入内容时会消失。

 

  另一种提示语句为输入后的反馈提示，如提示密码不正确、用户名有误等。可以弹出警告对话框提示，或是直接在原先界面上提示。

五、关于获取验证码

  先看以下三种获取验证码的放置位置。

  A:放置在验证码输入框右侧，这也是很多app常用的方式。用户先看到输入框，然后再点击获取验证码，再回来输入验证码，验证码输入框用户看了两次；

  B：获取验证码放在了左侧，操作流程上很流畅，但是按钮放在这里视觉上会显得很突兀，验证码输入框与上面的输入框的联系好像被打断了。

  C：这种方式，操作流程很直，是一条线，而且也保证了上下两个输入框直接的视觉联系。

  

  现在的手机一般会在顶部短时间显示收到的短信内容，所以用户可以不跳出APP就能看到验证码进行填写，而且有些APP还会弹出获取读取短信的请求，如果你同意，APP会自动读取验证码并填上，非常方便。如果出现了需要跳出APP去看验证码短信的情况，则用户再次进入APP时，必须是刚才填输入验证码的界面。

六、关于按钮状态的反馈

  默认状态下，登录按钮状态是不可点击状态，只有当用户输入了有效的信息才会变成可点击状态。这里的有效信息并不是指正确信息，而是从信息的类型和长度来判断。如APP要求的密码必须是大于或是等于6位数，则当用户的输入字符长度少于六位时，登录按钮还是不可点击状态，只有当输入字符长度等于或是超过6位数时，按钮状态才变成可点击状态。

 

七、注册步骤的设定

   注册的步骤尽量简化，不要在注册时要求用户输入太多信息内容，手机号、验证码、密码（密码也可省略），这几个流程就可以了。至于其他的更多个人信息，可以放在用户的个人中心中，让用户登录后进行补充或修改。有些必填的信息，如金融产品类进行投资时要绑定银行卡，身份证等，可以在用户进行投资时再提示填写，或是通过任务奖励的方式鼓励用户进行填写。

八、关于手机号的显示

   其实这是个很小的点，手机号分段显示，便于用户查看是否输入有误。

当然其实真正设计时，还要考虑更多的方面，以上几点仅供大家设计登录注册界面是做参考。如果觉得不错，请记得点个赞噢！这样我更有动力写下去，深夜码字不易。。。