跳到主要内容
Termlib

布局模式 · 特定页面

落地页

Landing Page

也叫：着陆页、营销页、推广页、产品官网首页

为推广某个产品或活动设计的长页面，从首屏大标题开始依次讲卖点、证明和价格，引导访客点击同一个行动按钮。

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

怎么跟 AI 说

改成你的业务内容再发

做一个产品落地页（Landing Page），从上到下依次是：吸顶导航（Logo、功能/价格/常见问题锚点、「免费试用」按钮）；首屏左侧大标题、副标题和主按钮，右侧产品截图；三列核心卖点；客户评价；三档价格方案，中间一档突出；常见问题折叠列表；底部再放一次行动按钮和页脚。区块背景白色与浅灰交替。

发给

01判断

你的内容是这样吗？

对照两列，确认落地页是不是你要找的。

符合这些情况，用落地页

  • 面向第一次来访的陌生用户，需要介绍并推销一个产品或活动时
  • 页面只有一个核心目标，比如注册、购买、预约时
  • 内容以说服为主，需要图文并茂地讲清卖点时

是这些情况，换成别的

  • 已登录用户日常使用、需要处理数据的工具页面

    改用侧边导航+内容

  • 需要展示大量同类记录供用户筛选比较时

    改用数据表卡片网格

  • 用户已经明确要做的事、只需要一个操作入口时，比如登录

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

02避坑

常见坏用法

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

  1. 01

    首屏标题空泛，比如「欢迎来到我们的平台」，看完不知道产品是干什么的

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

  2. 02

    页面上有好几个不同目标的按钮，访客不知道该点哪个

  3. 03

    每个区块都是一样的左文右图排版，没有节奏变化

  4. 04

    大图不压缩，首屏要加载好几秒

反例示意，对应第 01 条

03识别

怎么认出它

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

结构

纵向排列的一系列全宽区块：首屏横幅、核心卖点、案例或评价、价格方案、常见问题、结尾行动区和页脚，区块背景交替。

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

识别特征

  1. 1首屏是大字标题加醒目按钮，旁边或背景是产品图
  2. 2往下是多个全宽区块，背景色交替
  3. 3出现三列卖点、价格方案卡片等营销模块

04解释

详细解释

落地页是用户点击广告、搜索结果或分享链接后到达的页面，目标通常只有一个：让访客注册、购买、预约或下载。典型结构从上到下是：首屏横幅（一句大标题、一句副标题、一个醒目的行动按钮和产品图），三到六个核心卖点，使用截图或演示，客户评价和合作品牌，价格方案，常见问题，最后再放一次行动按钮和页脚。

每一屏都在回答访客的一个疑问：这是什么、对我有什么用、凭什么相信你、多少钱。所以区块之间要有节奏变化（背景色交替、图文左右交替），行动按钮反复出现但文案保持一致。

它和仪表盘、数据表这类工具页面不同：读者是第一次来的陌生人，页面重在说服，不需要复杂导航，顶部一般只保留 Logo、几个锚点和一个「免费试用」按钮。

开发者信息
术语 ID
layout-landing
DOM 选择器

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

  • main:has(> section + section + section):has(h1):not(:has(table, aside))
  • body > div:has(> section + section + section + section):has(h1):not(:has(table, aside))
类名关键词

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

  • landing
  • landing-page
  • homepage
  • home-page
  • marketing
  • marketing-page
  • home
组件名

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

  • Landing
  • LandingPage
  • HomePage
  • Home
  • Marketing
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30