你打开任何一个网站，第一眼看到的那块横在页面顶部的宽幅图片，大概率就是 banner。它可能是一张促销海报，写着“双十一全场五折”；也可能是一张品牌形象图，模特穿着新款外套站在雪地里；甚至可能只是一个带按钮的纯色色块，上面写着“立即注册”。这东西不神秘，就是网页上最显眼的那个“广告牌”。

我最早注意到 banner 这个词，是在折腾个人博客的时候。当时用 WordPress，后台有个“页眉图片”设置，传上去一张 1200×300 像素的图，前台就横在标题上方。那时候我以为 banner 就是“网站顶部的图”。后来帮朋友看淘宝店铺装修，发现 banner 可以放在页面任何位置——顶部叫“店招”，中间叫“焦点图”，侧边叫“钻展图”。尺寸从 1920×500 到 300×250 都有。一个词覆盖了这么多位置，说明它本质上不是“顶部”，而是“用图片或图文组合来传达信息、引导点击的矩形区域”。

尺寸这件事值得单独说。我见过太多人做 banner 时随便裁一张图就传上去，结果在手机上显示出来，文字小得要用放大镜。PC 端常见的全宽 banner 是 1920 像素宽，但高度通常不超过 600 像素——太高了会把内容挤到屏幕外。移动端更窄，750 像素宽是常见基准。有个做外贸独立站的朋友，把 PC 端 banner 直接搬到手机端，结果按钮被裁掉一半，点击率掉了 40%。后来他学会做两套图，一套横版给电脑，一套竖版给手机，问题才解决。所以 banner 不是“一张图”，而是一套适配方案。

那 banner 到底用来干什么？我观察下来，无非三种目的。第一种是卖货，图上有产品、有价格、有“立即购买”按钮，点进去就是商品详情页。第二种是告知，比如“系统维护通知”“新版本上线”，不需要你点击，看到就行。第三种是品牌，图很漂亮，可能连文字都没有，就是让你记住这个调性。三种目的对应三种设计逻辑：卖货的要突出利益点，告知的要清晰醒目，品牌的可以玩氛围。混在一起做，往往哪个都做不好。

说到设计，有个细节容易被忽略：banner 上的文字必须能在三秒内读完。我见过一个教育培训机构的 banner，主标题写了二十多个字，副标题还有一行小字，背景是复杂的教室照片。结果用户扫一眼根本不知道它在说什么。后来改成“9.9 元试听两节课”，背景换成纯色，点击率翻了一倍。这不是审美问题，是信息层级问题。banner 的寿命很短，用户滚动页面时可能只给它 1 到 2 秒的注意力。你必须在那一瞬间把最重要的信息塞进他眼睛。

技术层面，banner 的实现方式也分好几种。最传统的是直接把图片切成 HTML 的 img 标签，简单但没法做响应式。进阶一点用 CSS 的 background-image 配合媒体查询，不同屏幕加载不同图。现在流行用 picture 标签或者 srcset 属性，让浏览器自己选最合适的图。还有用 SVG 做 banner 的，放大缩小都不糊，适合文字多的场景。我自己的博客用的是 CSS 渐变加文字叠加，连图片都省了，加载快，改起来也方便。没有哪种方式绝对好，看你的内容类型和用户设备分布。

最后说一个我踩过的坑。有次给一个活动页做 banner，设计稿上按钮是红色的，写着“马上报名”。上线后我发现点击率很低，用热图工具一看，用户都在点 banner 上的产品图，没人点按钮。原来产品图太抢眼，按钮反而被忽略了。后来把产品图缩小，按钮放大，点击率才上来。这件事让我明白，banner 上的每个元素都在争夺注意力，你得决定让用户先看什么、后看什么、最后点哪里。它不是一张画，而是一个引导路径。

所以 banner 是什么？是网页上那个矩形区域，是图片、文字、按钮的组合，是用户进入页面后的第一个视觉锚点。它可以是广告，可以是通知，可以是装饰。但归根结底，它是一个需要被“看懂”和“点击”的界面元素。做得好，用户顺着它走；做得不好，用户直接滚过去，连痕迹都不留。