登录页面背景图

去年冬天我把一个后台管理系统的登录登录页背景图换成了纯色，当天下午就收到三条用户反馈，页面说"感觉网站坏了"。背景那张图原本是登录张雪山湖泊的风景照，用了两年多，页面没人夸过它好看，背景但换掉之后立刻有人察觉。登录登录页背景图这东西，页面存在感就是背景这么微妙——它不负责让人惊艳，只负责让页面看起来"活着"。登录

大多数产品团队在讨论登录页时，页面注意力全在表单验证、背景第三方登录按钮、登录忘记密码的页面跳转逻辑上。背景图通常是背景设计师丢过来一张图，前端调一下background-size: cover就完事。但用户打开App或网站，第一眼看到的就是这块区域。它比Logo大，比输入框显眼，却拿着最低的讨论优先级。

我翻过一些产品的登录页迭代记录。有个工具类App早期用的是一张办公室实拍图，后来换成插画风格的城市夜景，再后来干脆改成品牌色渐变。每次改动都没有A/B测试，没有数据支撑，纯粹是"看腻了"。这其实暴露了一个事实：背景图的决策链条极短，往往就是设计负责人或老板一句话的事。

那什么样的背景图算合格？我的判断标准很粗暴——遮住表单区域之后，剩下的部分能不能让人认出这是谁家的产品。很多登录页的背景图换成任意一张图都成立，这就说明它没起作用。好的例子是网易云音乐的登录页，早期版本用了一张黑胶唱片特写，模糊处理之后作为底图，配合红色主色调，不用看Logo就知道是哪。后来改版换成纯色加纹理，识别度反而降了。

技术实现上也有不少坑。有人喜欢用大尺寸高清图，文件动辄两三兆，登录页加载半天，用户还没看到输入框就先等图片。移动端更明显，4G网络下多等一秒都是流失。我自己的做法是：背景图压缩到200KB以内，用WebP格式，配一张低质量占位图先撑住布局。CSS里写background-attachment: fixed要谨慎，iOS上滚动穿透的问题能让人抓狂。

还有一种偷懒方案是直接用CSS渐变。代码少、加载快、适配任何屏幕，但容易显得廉价。渐变色的搭配很考验审美，弄不好就像十年前的企业官网。我见过一个做得好的，用深蓝到紫黑的径向渐变，中间叠了一层极淡的噪点纹理，整个页面质感就上来了。噪点图可以用base64内联，不增加请求。

视频背景图这两年也多了起来。短循环、低码率、无音轨的mp4，确实比静态图抓眼球。但自动播放策略在各浏览器上不一致，有的需要muted属性，有的需要用户交互后才能播。而且视频解码吃CPU，低端机上登录页都能卡。我试过一次，安卓千元机打开登录页直接白屏三秒，果断换回静态图。

说到底，登录页背景图是个"不求有功但求无过"的部件。它不需要讲故事，不需要传递复杂信息，只需要在用户输入账号密码的那几秒里，让页面不显得寒酸。但恰恰因为标准低，很多团队连这个底线都没守住。下次改版的时候，不妨把背景图从"随便找一张"改成"认真挑一张"，成本不高，效果立竿见影。

很赞哦!（36）