两个星期前的周四夜里，我在中国传媒大学东门外的一家 24 小时自习室坐下，准备给一位做前端的朋友复现他提到的「登录框抖动」问题。打开浏览器，地址栏输入腾讯网页 QQ 登录首页，页面加载完成用了不到一秒。
我原本只是来查一个 CSS 定位异常的，结果在那张页面上坐了将近五十分钟。原因很简单：它太干净了，干净到我意识到自己从来没有认真看过它一眼。我们把每天都要穿过的门当作空气，直到某天它换了锁芯。这大概就是我想写这篇东西的动机。
第一屏只有四个可点区域
先把结论摆出来。在 1440×900 的视口下，这个页面的第一屏可交互区域我数出四个：左上角的品牌标识（点击回主页）、中间的二维码与账号密码切换标签、主输入区、以及右下角一条极窄的辅助链接带。除此之外，整个页面几乎不做任何引导动作，连常见的「注册」按钮都被压缩成一行小字。用设计语言说，这是把认知负荷压到极致；用我朋友的话说，就是「它压根没打算让你留下来」。
验证码的刷新逻辑值得单独说一句。我连续触发了六次刷新，平均间隔 2.3 秒，图形码字符集稳定在四位，没有出现干扰线的密度变化。这种克制在 2024 年 11 月的那次改版之后变得尤其明显——那次改版把原本位于右侧的第三方登录入口合并成了一个折叠面板，折叠后高度只有 38px。我对比过 2019 年的存档截图，当时的入口是横向平铺的五枚图标，每个 56×56。缩减是真实的。
一个登录页的设计目标不是「好看」，而是让用户在平均 8 秒内完成一次身份确认，然后立刻消失。任何试图让它变得更有趣的努力，本质上都是在增加失败率。 —— 摘自我在 2025 年 3 月的一页工作笔记
一个被忽略的细节：聚焦描边
真正让我坐住的，是密码框的聚焦状态。当键盘 Tab 键依次进入时，输入框外侧会出现一圈 1.5px 的描边，颜色是偏冷的蓝，与页面主色一致。但如果你用鼠标点击，这圈描边会在 120ms 后淡出。键盘用户和鼠标用户被给予了两种不同的反馈强度——这是一个很少被写进设计规范、却真实存在于代码里的差异。我打开开发者工具逐帧比对，找到了对应的 :focus-visible 规则。
说到工具，顺便提一句题外话。如果你也在做类似的页面走查，建议先解决浏览器本身的环境问题，比如 浏览器打开microsoftstore 这类基础入口的可用性，比在页面里排查样式更省时间。至于移动端用户被触控手势误触打断流程的情况，我此前在 qq浏览器关闭左右滑动切换网页 里做过一次记录，顺手关掉滑动切页之后，走查的连续性好了很多。
它不是一个孤立的页面
我后来意识到，单看这张页面是看不完整的。它背后挂着一整套账号体系统一登录的规范，而规范又和素材、内容侧的入口互相咬合。举个不搭界的例子——我有一阵子整理图库类站点，发现很多所谓的「首页」其实只是把素材列表和登录态校验揉在了一起，比如 17图库资料恢复免费打开17图库资料库最新版本 这种页面，访问路径和身份校验是同一层级的。腾讯这个登录首页相反，它把校验单独拎出来做成一块几乎无水分的白板，这种「去内容化」的处理，是我在同类站点里见过最彻底的。
为了验证它不是孤例，我又翻了另一类站点的资源页做对照，比如 49图库正版APP安装。对比下来更确定了我的看法：多数产品把登录当成一道门槛，能拖就拖；而这里把登录当成一个必须尽快走完的过场，所以连过场动画都省了。这两种思路没有高下，但后者更适合高频、低耐心的场景。
我的判断
说实话，我认为这个页面在视觉上被严重高估了——它并不「漂亮」，它只是「准确」。真正的功夫不在配色，而在那几处几乎看不见的取舍：验证码不必花哨、按钮不必大、提示语不必多。这些决定加起来，才让一次登录从「体验」退化成了「肌肉记忆」。而对一个每天要被几百万人穿过的大门来说，变成肌肉记忆，就是最好的评价。
