关于登录功能的一点思考

登录功能是大多数app都具备的功能，其重要性不言而喻。作为一个交互设计初学者，最近终于从控件、界面的分析学习升级到功能的分析学习了。然而在学习过程中却发现一个看似简单的功能都包含太多需要考虑的因素了，因此决定将自己最近关于登录功能的思考整理成文。一方面可以帮助自己做个总结，一方面也希望能够和对这个领域感兴趣的小伙伴们共同交流。下面进入正文。

登录界面提供的最核心最主要的功能便是“登录”，这也是用户在此界面要完成的终极任务。细分下来，对于已有账号的老用户，需要通过输入帐号密码登录；对于新用户，则可以选择通过第三方社交平台登录或者注册新账号登录这两种方式完成登录目标。因此，登录界面的一般包含以下主要功能：帐号密码登录、第三方登录和注册。为了顺利完成上述功能，还会有类似于“忘记密码”、“自动补全”、“明文密码”等辅助功能的参与。由于对于注册的技术要求等不甚熟悉，因此本文主要分析登录功能。

一、功能优先级排列

可能的排列顺序

1.帐号密码登录优先

2.第三方登录优先

3.登录和注册同级

影响因素：吸纳用户，用户体验

三大功能中第三方登录是最省事最便捷的一个登录方式，注册则是最麻烦的。所以很少会有注册优先于其他两个功能的情况。但出于吸纳用户的考虑，注册有时会与登录处于同一层级，例如简书、知乎。豆瓣、知乎、简书，其实都有一个相同点，那就是它们都是基于已有的网站进行开发的。也就是说，该品牌已经在网络上运行了一段时间，有了一定量的用户积累，因此将帐号密码登录这一针对老用户的功能优先级提到最高。对比一下还可以发现，对于简书和知乎中注册的优先级要高于豆瓣中注册的优先级，前两者将注册提到了几乎和登录等同的地位，后者则将注册的功能弱化，我想这其中原因自然也和已有用户量有很大关系。对于后三者则不必多说了，都是用户量巨大的社交巨头，几乎人手一个帐号，并且，登录本就是使用这类社交帐号的前提，账号登录功能优先是无疑的。

二、界面设计

登录表单

必备元素：帐号输入框、密码输入框、登录按钮。

总结：

1．帐号和密码输入框应通过形状、大小、位置上的相近性来体现其逻辑上的关联性。因此形状、大小等外观应一致，位置上应紧密相连。

2．输入框应以恰当的方式对用户需要输入的信息进行提示，可使用的方法有：占位文本（通常在输入后消失）、左侧文字或图标提示（够简洁）……

3．登录按钮应在一致性的前提下尽可能的显著，同时在页面上需要和输入框看起来是一个整体，以创造一种流畅的任务流。

4．登录表单的设计还应重点考虑有键盘的情况，因为此时的页面会被键盘遮挡住一部分，要注意适时调整，一定不能被键盘盖住！（不信看下图！！）

我的内心是崩溃的！

登录时的辅助功能

用户在登录时会遇到各种可能的问题阻碍他们完成登录任务，其中最常见的就是忘记密码，有的app甚至会把一些常遇到的问题整合起来供用户选择，例如知乎的“无法登录”，Facebook的“需要帮助”。因为是辅助功能，所以不能提供的太明显，以免抢了登录的风头，但又不能太默默无闻，让用户难以在需要帮助时及时快速找到。考虑到这些辅助功能本就是帮助解决用户登录时存在的问题，因此往往将其安置在登录表单附近，以无边框按钮的形式存在来显示其可交互性。

像简书和知乎这样在用户输入时才在键盘上动态呈现出辅助功能的按钮也是一个不错的选择，既可以保持界面的简洁性，同时又能及时提醒用户这一功能的存在。

点击输入框呼出键盘时会在键盘上方出现“忘记密码”

点击输入框呼出键盘时才会在屏幕中央显示“无法登录？”

第三方登录

在很多app中，第三方登录的优先级是最高的，因为和登录注册相比它确实十分方便省事，还能直接获取用户许多已有信息，快速完成设置，免去用户许多麻烦，自然会留下更多用户。第三方登录按钮则往往使用简化的logo或配以名称就可以很好地表达含义，颜色也是一个很好的隐喻。

统一的Facebook蓝

三、情境思考

情境一--输入状态

除了第三方登录，其余两个功能都需要使用键盘进行输入，或者至少提供键盘输入的形式，因此当呼出键盘后界面的布局就需要好好考虑，毕竟几乎一半的页面都被键盘遮住了。下面总结几点我认为需要考虑的因素。

1)简化元素

页面已经如此拥挤了，在呼出键盘的情况下除了必须的元素其余都可以适度隐藏，在需要时再出现。我认为必须的元素有：登录表单，辅助功能（整合成一个按钮）。因此页面的布局也要考虑到这一情况。

常用的方法：登录表单放置在页面最上方，键盘呼出时不动且不会被隐藏；登录表单会随着键盘出现动态上移。

2)可返回

既然点开键盘会让部分功能不可见，那么一定要让用户可以随时返回。通常的交互方式是点击任意空白区域隐藏键盘，因此空白区域就要留足，至少可以让用户放心大胆地点，而不是畏畏缩缩还总是点错，后者极易让用户产生不安全感和焦虑感。

3)简化输入过程

键盘的选择：iOS提供了非常多可供选择的键盘--参考链接，根据输入情境预先为用户选择最适宜最贴心的键盘。也可自定义

记住帐号：对于可能存在多次登入登出或者多个帐户的app，可以帮助用户记住已经登录过的帐号名方便下次登录，将输入变成选择。

自动补全：大多数app的账户名都会有邮箱这一格式，因此当检测到用户输入的可能是邮箱格式时系统可以帮助自动补全或者提供可能的结果供用户选择，也是将输入变成选择。

自动纠正：手机屏幕键盘面积小，用户很容易误触，比如我就经常会把com打成con（真的很像啊！），还经常找不到错误在哪（因为第一反应总是觉得密码试错了……）。之前在网上看到有的网站登录界面上会有自动纠正的控件，手机目前可能还做不到。但这里我要控诉一下，千万不要用苹果自带的有纠正功能的键盘在帐号输入框里。因为如果我输入的是qq.con，那么它只会在qq下面出现红色波浪线而不是con下面，这反而会让我忽略我的输入错误。毕竟人家是基于英文词汇纠正的，qq确实不是什么单词而con却偏偏很合理的样子……所以我觉得这个纠正功能在帐号输入框里最好还是不要出现……

4)明文密码？

关于是否使用明文密码在网上有不少十分专业的讨论。

附上知乎的一个相关讨论：移动应用中注册新用户及用户登录的时候，密码应不应该显示为明文？

我个人比较赞同提供一个按钮供用户自己选择显示或隐藏密码的方法。首先iOS自带的密码输入方式我觉得就很棒，但确实还是会给人一种不连贯感，尤其是对于输入速度较慢的用户，可能还是会输了前面忘了后面。我想对于已经习惯了密码遮盖的我们，为了防止出错而直接显示明文密码或多或少都会给人一种不安全感，可我们在被提示密码错误时纠结着到底是输错了还是记错了的心理过程也着实意味着糟糕的用户体验。因此，如果在已有的几个方案中选的话，我认为给用户提供一个可选的按钮是较为合适的方法。当然，其他更有创造性的解决方案则需要在思考与实践中产生。

情境二--加载状态

      用户执行登录或者注册任务时总需要一定时间来完成任务的提交，因此需要给予一定的反馈来告知用户自己当前处于什么状态，一般通过加载控件进行。加载控件一般会放置在以下两个位置：直接在屏幕中央显示，往往带有背景框以突出并与背景隔开，使用户意识到当前页面不可交互且正在执行任务；在登录按钮上显示，暗示登录中且登录按钮此时不可点。后者比前者在页面的美观性上要更胜一筹，但用户可能会误点页面中的其他功能。使用前者的话务必先让键盘退出，不然界面会看起来好拥挤的，而且还可能影响用户识别加载框里的文字。

情境三--特殊情境

1.用户没用输入帐号/密码便点击登录按钮

   对于此情境，较好的解决方法就是让登录按钮在帐号和密码框同时检测到内容时才可点击，两个框中任意一个框里没有输入内容的话登录按钮都不可点击，比直接显示提醒要好些。不可点击登录按钮有大致三种样式：整个登录按钮呈灰色、在有色的登录按钮上遮盖白色蒙板、只让登录按钮中的登录字样透明度降低。第一种样式很可能会让用户失去点击欲望，第二种则难以让用户识别出是否可点，因为该页面上往往缺少对比来判断，第三种样式在我看来能更好地暗示用户。

2.帐号/密码错误等各种错误

登录时使用的帐号不存在可提醒用户使用该帐号进行注册。

若密码输入错误一定次数以上（通常是3次）可提醒用户是否需要重置密码。

贴心的Facebook

---

第一次写交互设计相关的文章，费了好大力气写完了，但还有一种没有完成的感觉，因为感觉还有好多东西需要思考，而自己的思路也有些混乱。不管怎样，还是希望自己以后能坚持把自己学习的东西进行总结记录，希望自己可以在这条路走下去。

以上。