本人是一枚喜欢设计的大学狗，近期在团队里和小伙伴做了一款web后台管理界面，设计后觉得登录界面比较丑，于是假期间浏览了站酷上的一些文章和优秀的设计作品。故将设计登录界面的一些tips记录下来，方便自己的查阅和别的访客前来学习。
1、注意美观
上传一张母校的登录界面，为了怕被打，于是打上马赛克。。。不懂大家有没有感觉到这个登录界面存在的几点比较严重的问题：
①登录部分完全处在界面的右边，以致于完全顶格，使得整体看起来非常的不平衡以及右边拥挤。个人感觉登录部分不是处于中间就应该处在右边的黄金比例点上，总之应该很快吸引用户的眼球。
②背景太过于花花绿绿，甚至已经抢走了登录部分的风头。永远记得登录界面最大的作用应该是给用户登录以及彰显logo的品牌，不要喧宾夺主。因此背景可用纯色或者渐变色，很有档次感。当然如果你不喜欢太素的背景，完全可以有图片但加上毛玻璃效果或明暗对比效果。
关于刚才说的好看的登录界面，我随便上张图看看。注意，是好看，请别理解为有好的用户体验。下图这就是我所说的明暗对比，将背景高清图的亮度与对比度降低。
这是移动端的优秀作品，也就是我所说的背景是纯渐变色，使得界面大气上档次。当然这里也还含有扁平化的思想，我就不过多赘述了。
至于在美观方面还有哪些注意事项？请参看腾讯CDC网站上某位大牛的文章~他会从视觉的角度告诉设计者应该怎么去解决美观上的问题。。。拒绝平庸——浅谈WEB登录页面设计
2、允许邮箱（手机号）登录或者第三方登录
现在，有很多通过某社交网站的账号采用第三方授权登录的方式的app。这的确是一个不打搅用户去填写创建一个账户的好办法。比如在中国，一般都是可以通过qq、微信和微博账号登录。国外的话应该就是Facebook和Twitter了吧~无论是Web端还是移动端均是如此，轻松一点就可以直接登录。
那么为什么要允许邮箱（或手机号）登录呢？这个问题也很好解释。因为一般用来注册的用户名可能千奇百怪，由于前人先申请啊，或者不想透露真名啊，或纯粹想换一个拽一点的名字等等，总而言之用户名会多样化，但一般申请时用的邮箱或手机号只有那么一个两个。登录起来容易记起而不会盲目输入一大堆用户名还显示有错误。
比如前段时间红红火火的12306的登录界面，撇开文字和美观的角度，在登录名这一栏确实不错，告知用户可以通过用户名、邮箱以及手机号码来登录，而有些界面的登录可能就会给用户带来困扰。有的登录界面，只是一个username我怎么知道能不能用邮箱或手机号来登录。。。
同时这又牵扯到了标签的使用，不要只有一个输入框让用户填写，至少也要放一个图标在里面，但最好还是使用一个输入标签来提示用户该填写什么。我们来对比几款主流网站的标签是否做的有人性。
我们能看到基本上登录名中均能有标签告知应该怎么填，有的还会使用一些精致的Icon使得界面更美观。但请仔细看看第一个和第三个图的区别，第三个标签甚至还告诉用户应该填什么格式，可谓是体贴至极啊。同样的，在密码部分完全可以这样加入标签~
3、给予用户必要的预判性错误提示
我们必须得承认那种说什么“无效的输入”或者“您输入的用户名或者密码有误”对用户来说并没有帮助。比如说下图，我并不知道究竟是用户名不存在还是用户名正确但是密码输入有误，有的登录界面的错误提示甚至是说“您的用户名或密码或验证码有误”，尼玛这难道要我3个码分别控制变量来试吗？！这就增加了用户试错的成本。错误提示应该用比较清晰地告知用户究竟错在什么地方。
那究竟什么是预判性错误呢？就是在用户出错前告知用户：这样走，很可能会出错。举个例子，当用户在午夜时间提到“明天”时，siri会询问用户具体的时间，以防用户错误的做出对明天的定义。用户的一个行为很可能会引发预见性的错误，越早提示用户，并给出可行性的建议，错误越容易被接受和改正，用户的损失也就越小。
那么在登录界面上怎么应用呢？可以看一下下图，当光标定位于密码输入区时，如果此时键盘的大写锁被不小心打开了，界面会提示用户此时处于Caps Lock处于启用的状态，很可能会出现密码输入的错误。这样处理比用户输入完成点击提交之后再提示用户出了什么问题要来的友好和有效很多；比只是一味的批评用户 “你错了”从头至尾完全不告诉用户出了什么状况的界面要友好太多。
4、多用户登录时的备选方案
一款app或者某个站点很可能有多人登陆过，那么登录界面在设计时应该注意到能够有记忆性，比如以下的两个截图~QQ新版就是如此，在箭头下弹出几个使用过的好友的头像，而不是枯燥的qq号，既使界面更美观，同时扩大手指接触的面积，减少按错的概率。
当然这个备选方案还指邮箱的登录时的多种邮箱选择，这样我在输入数字后可直接通过鼠标选择邮箱的类别，而没有必要吧@××.com全部输完，节省用户的操作时间也是提升用户体验的方法之一。
5、找回密码的链接
当我们忘记密码时，常常会想要一个链接来找回忘记的密码。（忘记用户名也是！）不要将这个链接藏起来或者要让用户经历千辛万苦才找到它，它就应该出现在登录表单的周围。我就随便上一张图吧，一般绝大多数网站或app都会注意到这一点，当然也会有极少数网站会忽略，将它放在不显眼的地方或直接没有。
如下图的网易公开课的界面整体比较简单干净，所以“忘记密码？”的颜色那么淡那么不显眼也能让用户知道忘记密码时去点击。
若是像下图实习僧网站的登录界面一样信息和文字较多时，建议将“找回密码”的链接变成蓝色或者加下划线，告诉用户在忘记密码时可以通过此链接找回。
在这里可以单独表扬一下百度账号的登录界面，除了有醒目的“登录遇到问题”链接外，右上角还有一个短信快捷登录。在用户不愿意去挨个回答那些验证问题的时候，或者在用户赶时间使用的情况下，能通过注册的手机号发送验证码从而登录，快捷方便还减少了用户忘记密码时的焦虑感。
总结：
这篇文章并没有将登陆界面细分为交易类、工具类等种类的网站或app，存在着不小的局限性，也主要从用户的角度来谈谈设计时有哪些注意事项。我希望这几条能对各位看官有所帮助，毕竟一切都是为了让事情变得更加简化和方便，让用户有更好的体验！
本人作为一个喜欢交互与UI设计的小学徒，在只阅览了几篇文章后就斗胆在简书上随意发表博客，希望各位看官多多包涵，以及希望有大神前来指导拍砖！
