跳到主要内容
Termlib

UI 组件 · 营销

首屏横幅

Hero Section

也叫：Hero 区、主视觉、头图、Banner、首屏大图

落地页或官网最上面的一大块区域，用大标题、一句说明和主按钮，第一眼讲清产品是什么。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

落地页顶部做一个首屏横幅，高度约一屏：左侧是 48px 大标题「10 分钟搭好你的在线商店」、一行灰色副标题和两个按钮（实心「免费试用」、描边「观看演示」），右侧放产品截图；手机上改为上下排列，标题缩小到 32px。

发给

01判断

你的内容是这样吗？

对照两列，确认首屏横幅是不是你要找的。

符合这些情况，用首屏横幅

  • 官网、产品落地页或活动页的第一屏，需要一句话说清价值
  • 希望引导访客完成一个主要行动，比如注册或试用
  • 有一张能代表产品的截图或视觉图需要重点展示

是这些情况，换成别的

  • 后台管理系统、工具类页面，用户是来干活的，不需要大横幅

    改用侧边导航+内容

  • 需要轮流推广多个同等重要的活动

    改用轮播图

  • 文章详情页、搜索结果页这类内容本身就是重点的页面

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    标题写成「开启未来」「赋能增长」这类空话，看完不知道产品做什么

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    放了四五个按钮，没有一个主次分明的行动入口

  3. 03

    文字直接压在花哨的背景图上，对比度不够看不清

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由主标题、副标题、一到两个行动按钮和配图（截图、插画或背景图）组成，通常占满首屏宽度。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1页面顶部一大块区域，中间或左侧是特别大的标题
  2. 2标题下方有一行较小的说明文字和一到两个按钮
  3. 3旁边或背后是大幅截图、插画或渐变背景

04解释

详细解释

首屏横幅（Hero）是用户打开官网时看到的第一屏：一个很大的主标题说清「这是什么、能帮你做什么」，下面一两行副标题补充说明，再放一到两个按钮（「免费试用」「查看演示」），旁边或背景是产品截图、插图或视频。它通常占满屏幕宽度，高度接近一屏。

它和 轮播图 的区别：首屏横幅只讲一件最重要的事，内容固定；轮播图轮流展示多个活动。和 落地页 的关系：落地页是整个页面，首屏横幅只是落地页的第一个区块，后面还有功能介绍、客户评价、价格、页脚等。AI 生成的首屏常见问题是标题空泛（「开启未来」）、按钮太多、背景图压得文字看不清。

开发者信息
术语 ID
component-hero
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .hero
  • .jumbotron
  • section[class*="hero" i]
  • [class*="hero" i]:has(h1)
  • :is(section, header, div):has(h1:is(.text-4xl, .text-5xl, .text-6xl, .text-7xl, .text-8xl)):has(a[href], button, img, video):not(:has(table, form, h2, h3))
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • hero
  • hero-section
  • hero-banner
  • jumbotron
  • masthead
  • splash
  • landing-hero
  • hero-area
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Hero
  • HeroSection
  • Jumbotron
  • HeroBanner
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 标题开头
  • 图片开头
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30