去年帮朋友改一个后台管理系统，网站登录页面上来就是登录两个输入框加一个蓝色按钮，连“忘记密码”都没放。界面我问他用户忘了密码怎么办，模板他说“让他们找我”。网站这个回答让我意识到，登录很多开发者压根没把登录界面当回事——但它偏偏是界面用户接触产品的第一道门。

一个能用的模板登录界面，最少要包含三样东西：账号输入、网站密码输入、登录提交按钮。界面听起来像废话，模板但你去翻翻GitHub上那些开源项目，网站至少三成连这三样都没做利索。登录输入框没有label，界面placeholder写个“请输入”，用户点进去字就没了，回头根本不知道自己该填手机号还是邮箱。密码框更离谱，有的连type="password"都忘了加，明文在那儿摆着。

我习惯在输入框上方放固定label，而不是只靠placeholder。原因很简单：placeholder在输入时消失，用户填到一半接个电话回来，可能就懵了。label占不了多少视觉空间，但省心。密码框旁边加一个“显示密码”的小眼睛图标，这个功能成本极低，对用户体验的提升却很明显——尤其是在手机上输密码，打错一个字符就得全删重来。

表单验证的时机也有讲究。很多网站喜欢在用户刚输入完就立刻标红报错，比如邮箱格式不对。这种即时反馈在某些场景下有用，但登录页面不太适合。用户还没输完呢，你就告诉他错了，体验很烦。更好的做法是等输入框失去焦点（blur事件）再校验，或者干脆等提交时统一检查。错误提示要具体，别只说“输入有误”，得说“邮箱格式不正确”或者“密码至少8位”。

<form action="/login" method="post"> <div class="field"> <label for="account">邮箱或手机号</label> <input type="text" id="account" name="account" autocomplete="username" required> </div> <div class="field"> <label for="password">密码</label> <input type="password" id="password" name="password" autocomplete="current-password" required> <button type="button" class="toggle-pwd">显示</button> </div> <button type="submit">登录</button> <a href="/reset">忘记密码？</a> </form>

上面这段代码里有个细节值得说：autocomplete属性。很多人不写这个，浏览器就不知道该自动填充什么。加上autocomplete="username"和"current-password"，密码管理器才能正确识别，用户不用每次手动敲。这个属性不花一分钱，但能减少大量重复输入。

再说布局。登录表单的宽度控制在320到400像素之间比较合适，太宽了输入框拉得老长，视觉上不舒服；太窄了在桌面端显得小气。居中放置，垂直方向稍微偏上一点，别死板地绝对居中——人眼习惯看偏上的位置。背景色和前景色要有足够对比度，但别用纯黑纯白，刺眼。浅灰底配深灰字，或者深色底配浅色字，都行。

移动端适配是另一个重灾区。有的登录页面在手机上输入框被键盘挡住，用户得先收起键盘才能看到提交按钮。解决办法很简单：把表单放在页面顶部附近，或者用flex布局让内容在键盘弹出时自动上移。另外，input的font-size不要小于16px，否则iOS会自动放大页面，用户得手动缩回去，特别烦。

安全方面，前端能做的事情有限，但至少别拖后腿。密码框加autocomplete="off"这种老做法其实没必要，现代浏览器对密码管理器的支持已经很好。真正要注意的是：别在URL里传密码，别把密码写进localStorage，提交用POST。HTTPS是底线，没有这个，前面做得再漂亮都是白搭。

我见过一个登录页面，把“登录”按钮做成了渐变色加阴影加圆角，鼠标悬停还有放大动画。好看是好看，但按钮的点击区域只有文字那么大，padding给得太小，手指点上去经常点不中。视觉设计和交互设计是两回事，按钮的padding至少给到12px 24px，触摸目标不小于44x44像素，这是基本常识。

最后说一个容易被忽略的点：登录失败后的提示。别直接说“密码错误”，那等于告诉攻击者“这个账号存在”。统一提示“账号或密码不正确”，既保护了用户隐私，也不影响正常用户理解。错误提示的位置放在表单上方或按钮附近，别用alert弹窗，那玩意儿打断操作流，烦人。

登录界面不复杂，但细节多。把每个细节都照顾到，用户不会夸你，但至少不会骂你。而大多数产品，连“不被骂”这个标准都还没达到。