一个登录框，陆界两个输入框，陆界一个按钮。陆界就这么简单的陆界东西，我见过至少二十种不同的陆界做法，其中大半都让人想摔键盘。陆界

上个月帮朋友看他的陆界后台系统，登录页面上密码框旁边写着「忘记密码？陆界」，点击后跳转到一个空白页。陆界他理直气壮地说：「还没做呢，陆界先放个链接占位。陆界」这种占位思维在登录界面上特别常见，陆界因为开发者自己每天登录几十次，陆界早就麻木了，陆界根本感觉不到普通用户第一次面对这个页面时的陆界困惑。

输入框的细节

邮箱和手机号能不能放在同一个输入框里？技术上完全可以，判断一下有没有 @ 符号就行。但很多系统偏要分成两个 Tab，用户得先想「我当时注册用的是哪个」，然后手动切换。多这一步，转化率就往下掉一截。

密码框的「显示密码」按钮，位置也有讲究。放在眼睛图标里是主流，但有些设计把图标做得极小，颜色又浅，鼠标移上去才变色。我测试过，四十岁以上的用户基本不会去点它——他们压根没注意到那里有个按钮。密码输错了只能重新打一遍，边打边骂。

还有个老问题：输入框的 autocomplete 属性。该用 current-password 的地方用了 off，浏览器密码管理器直接罢工。用户明明存了密码，页面就是不自动填充。你说这是安全考虑？那倒是把 autocomplete="new-password" 用对地方啊，注册和登录混用同一个属性值，纯粹是复制粘贴没改。

验证码的暴力美学

图形验证码大概是登录界面上最招人烦的东西。扭曲的字母、横七竖八的干扰线、永远分不清的 0 和 O。有些系统更绝，点击图片刷新，但刷新出来的验证码和上一张几乎一样，只是歪的角度变了五度。

滑块验证稍微好一点，至少不用辨认字符。但那个滑块经常对不准，明明拼图严丝合缝了，还是提示「验证失败，请重试」。后来看前端代码才发现，判定阈值设成了 5 像素，而图片渲染本身就有 3 像素的误差。调成 10 像素，世界就安静了。

错误提示的写法

「用户名或密码错误」——这句话本身没问题，安全考虑不透露具体哪个错了。但有的系统在用户还没输入任何内容时就弹这句，输入框还是空的，红字已经挂在那里了。用户一脸懵：我什么都没打，你告诉我错了？

更隐蔽的问题是错误提示的位置。放在表单顶部，用户输完密码点登录，眼睛盯着按钮区域，根本注意不到顶部多了一行红字。放在输入框下方就好很多，视线自然下落就能看到。但如果是移动端，键盘弹起来遮住半屏，提示信息得保证在可视区域内，否则用户以为没反应，反复点登录按钮，触发多次请求。

按钮状态

登录按钮在请求发出后应该变成禁用状态，防止重复提交。但禁用之后的样子，很多开发者忘了改。按钮灰了，鼠标放上去还是手型光标，用户以为能点，拼命点，实际上什么都不会发生。加个 cursor: not-allowed 或者干脆显示一个加载动画，成本几乎为零，体验差别巨大。

还有一种情况：网络慢的时候，请求发出去三秒没反应，用户不确定到底提交了没有，刷新页面重新填一遍。如果按钮上有个转圈的小图标，这三秒的焦虑就能消解大半。

登录界面是产品的门面，但往往是最不被重视的页面。开发者觉得它太简单了，不值得花时间。可用户每次进来都得面对它，每一次糟糕的体验都在消耗耐心。把输入框的自动填充属性写对，把错误提示放在视线自然落下的位置，把按钮的加载状态加上——这些事加起来可能不到一小时，但能省掉用户无数次的皱眉和咒骂。