落地页
Landing Page
别名:落地页卖东西的落地页产品主页官网首页营销首页产品介绍页转化页
这是什么
围绕单一转化目标纵向组织信息的营销页面：顶部导航与 Hero 主视觉先讲清楚"这是什么、好在哪"， 中段用功能区、信任区（客户 logo、评价、数据）逐层打消顾虑，末端以强视觉的行动按钮收口。 页面按说服顺序分区，每一屏都在回答用户下一步的疑问。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 推广单一产品或活动、追求注册/购买转化
- 来自广告或外链的访客需要快速理解价值
- 需要在无登录状态下完成首次转化
✕ 不适用场景
- 已登录用户的日常工作界面
- 信息层级复杂、需长期维护的内容站（用文档站更合适）
- 需要频繁检索的数据库型页面
常见形式
经典 Hero
Classic Hero
大标题 + 主图 + 单一 CTA，最通用
功能矩阵
Feature Grid
Hero 之后用卡片矩阵罗列功能点
长滚动叙事
Long-scroll Story
一屏一个论点，逐屏滚动说服
候补列表
Waitlist
只有 Hero + 邮箱收集，产品未上线时用
页面结构
- 01
导航
Logo + 锚点导航 + 主 CTA，首屏常透明悬浮。
- 02
主视觉
一句价值主张 + 主 CTA，首屏必须说清「是什么、给谁」。
- 03
功能区
3–6 个能力点，图文并排，支撑价值主张。
- 04
信任区
客户 logo 墙、用户评价或关键数据。
- 05
行动区
页尾前的最后一次转化催促，重复主 CTA。
- 06
页脚
站点地图、法律与社交链接，收束整页。
实现要点
flexgridscroll-behavior: smoothscroll-snap-type: y mandatory页面纵向由 section 串联：hero 通常 100vh 或近满屏，功能区用 grid 自适应卡片， 信任区一行 logo + 评价卡。CTA 按钮全局唯一强调色并重复出现（hero 与页脚前各一次）。 长滚动变体可用 scroll-snap 分屏；进场动画尊重 prefers-reduced-motion。
相关概念
固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件包含组件用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件包含组件元素滚动进入视口时才播放淡入、上浮或滑入动画，之前保持隐藏或占位。 把"一次性呈现全部内容"变成"随阅读节奏逐段揭示"，让长页面的信息 更有秩序感。通常由 IntersectionObserver 触发，只播一次。
动效搭配使用把标题或段落按行、按词逐个显现，而不是整块淡入。文字"被说出来"的节奏感让信息有先后与分量， 常用于落地页首屏大标题、章节开场与滚动叙事， 通常进入视口时触发一次。
动效搭配使用鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效搭配使用