web登录界面

上周帮一个朋友看他的录界后台系统，登录页面上赫然写着“请输入用户名和密码”，录界下面两个输入框，录界一个按钮。录界我问他，录界你这套系统给谁用。录界他说给公司内部三十多个人用。录界我说那还行，录界但如果你哪天想给外部客户开放，录界这个页面撑不过三天。录界

问题出在哪。录界用户名和密码这两个字段，录界看起来天经地义，录界其实藏着一堆麻烦。录界用户记不住密码，录界于是用“123456”或者“password”。你强制要求大小写加数字加符号，他们就把密码写在便利贴上贴在显示器边框。你搞个密码找回，邮箱验证码发出去，一半人收不到——因为注册时填的是QQ邮箱，早就不用了。

我见过一个做得挺聪明的登录界面。它把“用户名”改成了“手机号或邮箱”，输入框旁边有个小图标，点一下能切换。密码框右边有个眼睛图标，按住能看到明文。底下除了“登录”按钮，还有一行小字：“用验证码登录”。点进去，手机号加六位数字，完事。这套逻辑不新鲜，但细节到位。比如验证码倒计时是59秒而不是60秒，因为用户看到60会下意识觉得要等一分钟，59秒感觉快一点。这种小心思，数据上能差出百分之几的转化率。

再说一个反例。某银行的企业网银登录页，要求插入U盾，然后输入用户名、密码、验证码，再点三次下一步。每一步页面都刷新，每次刷新都清空前面填的内容。我试了四次才进去，第五次直接打电话给客服。后来他们改版了，把U盾检测放在后台异步做，页面只留一个密码框和一个“登录”按钮。用户感知到的步骤从七步变成两步。投诉量降了六成。

登录界面的核心矛盾不是安全，是信任。用户不信任你的系统，所以你要他证明他是他。但证明成本太高，他就不用了。所以好的登录界面在做减法。能用手机号加验证码的，不要密码。能用第三方授权的，不要手机号。能记住设备的，第二次登录直接放行。我自己的服务器后台，登录页就一个输入框，填API密钥，回车。因为只有我一个人用。给团队用的时候加了个下拉菜单选成员，密码统一是团队内部约定的短语。不安全，但够用。安全性和便利性从来不是二选一，是看场景配比。

视觉上也有讲究。输入框的高度别低于44像素，那是手指能准确点击的最小尺寸。按钮颜色要和背景有足够对比度，但别用纯红——用户会以为那是删除或者警告。错误提示别写“用户名或密码错误”，要写“密码不对，再试一次”或者“这个手机号没注册过”。前者让用户怀疑自己记错了，后者直接告诉他问题在哪。我见过最蠢的提示是“登录失败，错误代码0x80070057”，用户看完只会关掉页面。

还有键盘。移动端登录页，输入手机号时键盘要弹数字键盘，输入验证码时键盘要带“完成”按钮。别让用户从数字切到字母再切回来。PC端呢，回车键要能直接提交，Tab键要能在输入框和按钮之间跳转。这些不是加分项，是及格线。做不到的话，用户嘴上不说，手指会直接关掉标签页。

最后说一个细节。很多登录页在提交按钮上写“登录”，但用户填完最后一个字符时，按钮还是灰色的。他得用鼠标点一下空白处，按钮才亮。这个延迟哪怕只有0.3秒，也会让人烦躁。改成实时校验，输入框有内容按钮就亮，点下去再报错。用户宁愿看到错误提示，也不愿意对着一个灰按钮发呆。登录界面就这么大点地方，每个像素都在说话。你说什么，用户就信什么。你说不清楚，他就走了。