术语图鉴/UI/UX 设计/首屏大图
←→切换Esc返回

首屏大图 Hero Section

你可能会说

首页顶部做一个大 Banner:标语、副标题、CTA 按钮。

页面打开后第一屏看到的大区域,通常包含核心标语、副标题、CTA 按钮和背景图/动画。

页面打开后第一屏看到的大区域,通常包含核心标语、副标题、CTA 按钮和背景图/动画。

也常被叫作Hero Section

生活类比

像电影的开场镜头——用最有冲击力的画面告诉你「这片子讲什么」。

🎮 动手试试

你的产品标题
一句话说清价值主张
立即开始
选择题选择一个你认为最合适的答案

关于「首屏大图」,以下哪个描述最准确?

你可以这样告诉 AI

帮我在首页顶部做首屏大图:渐变背景、居中大标题和副标题、两个 CTA 按钮,撑满整个屏幕高度。

容易混淆?这样区分

首屏大图 Hero Section≠
页头 Header

首屏大图是页面最顶部的视觉冲击区(大图加标语加 CTA),页头是所有页面共用的顶部品牌区(Logo 加导航)。

什么时候用

产品首页第一印象

在首页最上方需要一个抓眼球的区域来传达核心价值主张时,用 Hero 区放大标题加副标题加 CTA 按钮加背景视觉。

和 AI 协作时

想让 AI 做 Hero 区时,说「全宽渐变背景加居中大标题加副标题加'开始试用'和'了解更多'两个按钮」,AI 会生成首屏。

什么时候不用

后台管理类页面

后台系统用户目标是效率而非被吸引,首屏大图占满屏幕反而妨碍操作——用紧凑的数据面板和快捷入口替代。

与内容深页无关

文章内页、文档详情页用户是来读内容的,不需要每页都搞一个 Hero 区——会打断阅读且显得重复多余。

组成结构 · Anatomy

1
核心概念Core

页面打开后第一屏看到的大区域,通常包含核心标语、副标题、CTA 按钮和背景图/动画。

2
实际表现In Practice

像电影的开场镜头——用最有冲击力的画面告诉你「这片子讲什么」。

3
与 AI 的关联AI Context

和 AI 沟通时提到「做个 Hero 区域」,就是做首屏的大视觉区域。

典型使用场景

首屏视觉区
告诉 AI「Hero 区全屏高度,深蓝渐变背景,大标题'让设计更简单',两个按钮'免费试用'和'了解更多'」
想弄懂概念时
告诉 AI「用大白话给我解释什么是首屏大图,举个生活中的例子」

延伸阅读