用户名和密码框的交互设计

用户名和密码，就两个输入框，但是要做到比较好的用户体验还真是不容易的一件事。因为这里涉及到安全、私密、快捷、方便、简单、清晰。我分别从几个方面来总结一下目前比较常用的几种用户名和密码框的交互设计

1、没有输入内容时文案的设计。用户名或密码输入格式的提示语

天猫的登录输入框 点点的登录窗口 拉勾的登录窗口

大家可以看到在用户名输入框里，都有提示用户名支持的格式，这样就不会造成困扰。尤其是在现在大多数网站都支持多种登录形式的情况下。

相反，像有些根本没有任何文字提示的网站就不太好。咱们的简书的登录窗口也不好用，文案的提示不够清晰。

2、输入内容后的交互文案设计。这里尤其要提一下淘宝的帐户注册时的交互文案设计，非常清晰。

光标定位时，对于输入内容格式的说明非常详细 输入正确时的提示 输入错误时的提示

淘宝这个交互设计有几个细节很好：1、用户名已被占用时，有非常清晰的指示如何进行下一步   2、用户名被占用时，推荐其它用户名   3、用户名的输入字符数实时提醒  4、输入正确后，提示用户名不能修改  5、错误时，给出下一步操作的提示

3、输入错误的用户名或密码时，如何删除？相信我们在使用的时候，经常碰到会输入密码错误的时候，这时候最常见的就是光标定位到密码框，然后一个字符一个字符的去删除。其实有更好的交互设计方式。

       3.1  直接清空用户名和密码

wordpress输入错误时，直接清空用户名和密码，并抖动页面和文字提示

       3.2   只清空密码框，像QQ邮箱的登录，如果密码错误，会只清空密码框。验证码填写时，如果长度不足，会选中错误的验证码，方便删除后再次输入。

QQ邮箱直接清空密码，PS：QQ号乱写的，请不要乱加好友。

       3.3  密码错误次数过多后的处理，iCloud的我认为是处理最好的，如果密码错误超过一定次数，会出现找回密码的提示框，非常人性化。

       3.4  删除时，按一下后退键清空所有输入字符(只对密码框有效)

在iOS系统下，登录时密码错误，删除时不是一个字符一个字符的删除，而是一下清空。这个我在网站上还没见过这样设计的。只对密码框清空。

总结一下：

用户输入前：页面尽量的简洁，但要给清晰的支持的用户名格式说明，尤其是支持的用户名字类型；

用户输入中：错误时，给出提示并说明如何进行下一步；正确时，给出正确提示；

用户输入后：错误时，用户名和密码框处理策略不一样，密码框可以清空；正确时，如果是某功能流程时的登录，则登录成功一定要继续登录前操作流程，否则就跳转回登录前的页面。