一句话解释：首屏（Above the Fold）是用户打开网页后、无需任何滚动就能看到的那一块区域，它是决定用户「留下还是离开」的第一战场。
生活化类比
想象你走进一家餐厅，服务员递上菜单。你第一眼看到的那一页——招牌菜、价格、图片——就是这家店的「首屏」。如果这一页全是密密麻麻的小字、找不到重点，你大概率会合上菜单走人。网页也是一样：用户平均只会给首屏 0.05 秒 来形成第一印象，比眨眼还快。
核心概念
首屏的本质是「注意力预算」的争夺。它由几个关键元素构成：
- 主标题（Headline）：一句话说清你是谁、卖什么
- 副标题/价值主张：补充说明「凭什么选你」
- 主视觉（Hero Image/Video）：情绪与场景的锚点
- CTA 按钮：告诉用户下一步做什么
- 信任信号：评分、Logo 墙、认证徽章
一个可参考的转化公式：
**首屏转化力 = 价值清晰度 × 视觉冲击力 × 行动指引明确度 ÷ 认知负荷**
分母越小（信息越简洁），分子越大（卖点越突出），转化越高。
与相关术语对比
| 术语 | 定义 | 与首屏的关系 |
|---|---|---|
| 首屏（Above the Fold） | 无需滚动即可见区域 | 本文主角 |
| 折叠线（The Fold） | 首屏与下方内容的分界线 | 首屏的下边界 |
| Hero Section | 首屏中最核心的视觉+文案区块 | 通常是首屏的主体 |
| 落地页（Landing Page） | 承接广告流量的独立页面 | 首屏是其成败关键 |
| 跳出率（Bounce Rate） | 只看一页就离开的比例 | 首屏差 → 跳出率高 |
| 滚动深度（Scroll Depth） | 用户向下滚动的比例 | 首屏好 → 滚动深度高 |
应用场景与数据
1. 独立站首页：某 DTC 家居品牌将首屏主图从「产品白底图」换成「客厅场景图」，并把 CTA 从「Learn More」改为「Shop the Look」，首屏点击率提升 34%。
2. 广告落地页：研究表明，57% 的页面浏览时间花在首屏（Chartbeat 数据）；如果首屏没有在 3 秒 内传达价值，53% 的移动用户会直接离开（Google 数据）。
3. 移动端优先：移动端首屏高度通常只有 600–800px，比桌面端少 40% 以上。某服饰独立站把首屏文案从 3 行压缩到 1 行、按钮放大 20%，移动端加购率提升 22%。
4. A/B 测试案例：某 SaaS 工具将首屏标题从功能描述改为结果承诺（"Save 10 hours a week"），注册转化率从 2.1% 提升到 3.4%，提升幅度 62%。
常见误区
- 误区一：首屏塞得越多越好。信息过载会稀释注意力，用户反而找不到重点。
- 误区二：只追求好看，忽略价值主张。视觉再美，用户不知道你卖什么也白搭。
- 误区三：把 CTA 放在折叠线以下。很多用户根本不会滚动，CTA 必须首屏可见。
- 误区四：忽略移动端。桌面端首屏设计直接搬到手机，往往文字被截断、按钮被遮挡。
- 误区五：首屏放轮播图。数据显示轮播图第一张之后的点击率通常不足 1%，多数用户看不到第二张。
相关术语
折叠线（The Fold）、Hero Section、价值主张（Value Proposition）、CTA（Call to Action）、跳出率（Bounce Rate）、滚动深度（Scroll Depth）、落地页（Landing Page）、转化率优化（CRO）、F 型阅读模式（F-Pattern）、视觉层次（Visual Hierarchy）。