12-brief-landing-page

简版落地页

1 个页面 = 1 个目标 = 1 个 CTA。没有菜单，没有外部链接，没有干扰。

---

收集信息

最多询问用户 4 个问题：

1. 是什么产品／服务？ 简要描述 + 售价 + 目标受众。
2. 落地页的目标是什么？ 获取潜在客户（表单）、预约、购买还是注册？
3. 主要流量来源是什么？ Meta Ads、TikTok Ads、Google Ads、自然流量，还是多种来源结合？
4. 是否已有素材？ 产品图片／视频、用户评价、社交证明数据？

---

核心原则

1 个页面 — 1 个目标 — 1 个 CTA

原则	说明
只有 1 个目标	每个页面只服务于 1 个行动：填写表单、预约或购买
没有导航菜单	移除页眉菜单，避免用户离开页面
没有外部链接	所有链接都必须锚定滚动至 CTA，不能跳转到外部
移动端优先	越南 70% 以上的流量来自移动端——先设计移动端，再设计桌面端
加载速度 <3 秒	First Contentful Paint < 1.5s，Largest Contentful Paint < 3s
紧迫感元素	倒计时、限量、截止日期——至少要有 1 个

按设备分配页面长度

设备	页面总长度	平均阅读时间
移动端	6–8 屏滚动	90–120 秒
桌面端	4–5 屏滚动	60–90 秒

---

7 个版块的结构

Section 1 — Hero（首屏）

目的： 在 5 秒内吸引注意力 + 传达核心价值。

元素	要求	字数限制
Headline	清晰说明主要收益，不要泛泛而谈	60 个字符
Sub-headline	简要说明如何获得该收益	120 个字符
主 CTA	动词 + 收益，橙色（#ff6b00）	25 个字符
视觉素材	产品图片／视频或效果图	1 张主图
信任徽章	客户数量、评价、合作伙伴 logo	3–5 个徽章

文案模板：

Headline: [Ket qua mong muon] — [Thoi gian/Dieu kien]
  Vi du: "Da sang min trong 4 tuan — khong can xam lan"

Sub-headline: [Phuong phap/San pham] giup [doi tuong] [dat ket qua] ma [loai bo noi lo].
  Vi du: "Lieu trinh facial chuyen sau giup chi em van phong lay lai lan da khoe manh ma khong mat thoi gian nghi duong."

CTA: [Dong tu] + [Loi ich]
  Vi du: "Dat lich tu van mien phi"

---

Section 2 — 问题（痛点强化）

目的： 准确点出痛点，让用户觉得“没错，我正遇到这个问题”。

元素	要求
3–5 个痛点	列出具体问题，使用客户的语言
后果	如果不解决，会怎么样？
情绪	使用能引发共鸣的词语：疲惫、焦虑、沮丧、失去自信

模板：

"Ban co dang gap nhung van de nay?"

- [Pain point 1 — mo ta cu the, co tinh huong]
- [Pain point 2 — hau qua cua van de]
- [Pain point 3 — cam xuc di kem]
- [Pain point 4 — da thu cach khac nhung khong hieu qua]

"Neu ban dang gap it nhat 1 trong nhung dieu tren — [ten san pham/dich vu] la giai phap."

---

Section 3 — 解决方案（解决方案 + 工作原理）

目的： 介绍产品／服务，将其作为 Section 2 中问题的解决方案。

元素	要求
解决方案介绍	2–3 句简短说明，不要写得太长
3–4 个操作步骤	将流程可视化：步骤 1 → 步骤 2 → 步骤 3 → 结果
差异化优势	与竞争对手或旧方法相比的 3 个 USP
视觉素材	展示每个步骤的图片／图标

模板：

"[Ten giai phap] hoat dong nhu the nao?"

Buoc 1: [Hanh dong dau tien cua khach] → [Ket qua buoc nay]
Buoc 2: [Hanh dong tiep theo] → [Ket qua buoc nay]
Buoc 3: [Hanh dong cuoi] → [Ket qua cuoi cung]

Tai sao khac biet:
- [USP 1]: [Giai thich ngan]
- [USP 2]: [Giai thich ngan]
- [USP 3]: [Giai thich ngan]

---

Section 4 — 社会证明（Social Proof）

目的： 通过实际成果建立信任。

元素	要求	数量
用户评价	真实姓名、真实图片、具体成果	3–5 条
数据	客户总数、平均评分、从业年限	3–4 项
合作伙伴 logo	面向 B2B 或拥有知名品牌时使用	4–6 个 logo
使用前／后	对比成果的图片	2–3 组
视频评价	客户分享使用体验	1–2 个视频

用户评价模板：

"[Ket qua cu the voi so lieu]"
— [Ten], [Nghe nghiep/Vi tri], [Thanh pho]
[Hinh anh hoac avatar]

---

第 5 节 — 留资表单 / 主要 CTA

目的： 转化——这是最重要的版块。

组成部分	要求
表单标题	重申利益点 + 紧迫感
表单字段数	最少：姓名 + 电话号码（2 个字段）。最多：+ 邮箱 + 1 个可选字段
CTA 按钮	橙色（#ff6b00）、尺寸大、醒目
承诺	“信息保密”或“免费咨询，无需承诺”
紧迫感	倒计时器或“本月仅剩 [X] 个名额”

表单规则：

• 移动端：表单占满屏幕宽度
• 每个表单字段都要有清晰的标签 + 示例占位符
• CTA 按钮高度至少为 48px（方便在移动端点击）
• 提交后：显示感谢信息 + 重定向，或显示成功提示
• 如果目标是电话联系/发送消息，则无需填写邮箱

---

第 6 节 — FAQ（处理异议）

目的： 回答 5–7 个常见问题，消除购买顾虑。

问题类型	示例
价格	“费用是多少？会有额外费用吗？”
效果	“多久能看到效果？”
安全性	“有副作用吗？”
流程	“如何注册？”
竞品	“与 [竞品/其他方法] 有何不同？”
承诺	“提供保修/退款吗？”
时间	“需要多久？”

格式： 手风琴（展开/收起）——移动端默认收起，以节省空间。

---

第 7 节 — 最终 CTA（促成转化）

目的： 最后一次强力号召用户采取行动。

组成部分	要求
标题	用一句话概括全部价值
CTA 按钮	与第 5 节相同，橙色、大尺寸
紧迫感	重申截止日期/限制
直接联系	热线电话号码 + Zalo/Messenger 链接（适用于不想填写表单的人）

---

技术要求

性能阈值表（FCP、LCP、CLS、TTI、PageSpeed 移动端）、7 项必需集成（Meta Pixel、GA4、Google Sheets、Zalo、UTM、TikTok Pixel、GTM）、SEO meta tag 示例代码，以及 3 个响应式断点表：请参阅 references/ky-thuat-tracking-va-ab-test.md 中的“技术要求”。

---

Analytics Tracking Plan

需要跟踪的 11 个事件（PageView、ViewContent、4 个滚动深度节点、FormStart、Lead、ClickCTA、ClickPhone、ClickZalo），包括对应的触发条件和平台：请参阅 references/ky-thuat-tracking-va-ab-test.md 中的“Analytics Tracking Plan”。

---

A/B Test Plan

按优先级排序的 3 轮测试流程（第 1 轮：标题 + CTA 文案 · 第 2 轮：字段数 + 表单位置 · 第 3 轮：CTA 颜色 + 紧迫感元素），包括 A/B 变体和结论规则：请参阅 references/ky-thuat-tracking-va-ab-test.md 中的“A/B Test Plan”。

---

结果模板

可直接复制的完整 Markdown 框架：页眉 + 通用信息表 + 7 个版块的内容填写区域 + 技术要求检查清单 + 3 行 A/B 测试计划：请参阅 references/template-brief-landing-page.md。

---

BUILD 阶段 — 从 brief 到可运行的 HTML 页面

完成 brief 才走完一半。本阶段将 brief 转换为真正的 HTML 页面——适用于自行构建（Ladipage Custom HTML、静态 HTML 文件，或交由开发人员制作）。

思路：landing page 不是为了好看，而是为了转化。每个版块都必须有存在的理由。删掉后没人注意到，就彻底删掉。

步骤 1 — 编写第一行代码前先选择模式

	MVP	Production
目标	让决策者查看并在 15 分钟内确定方向	用于投放广告的正式页面
时间	30 分钟——超时就属于过度工程	1–2 天
字体	系统字体（Arial / system-ui）	正式品牌字体
文案	占位内容，长度与实际文案相同	已审核的正式文案
图片	标注尺寸的灰色占位块	已压缩的正式图片
Pixel / tracking	无	完整配置
响应式	仅检查布局不会错乱	完整适配 375px / 768px / 1440px

规则： 绝不要直接跳到 Production。先做 MVP → 审核方向 → 再正式构建。在 MVP 阶段修改布局只需 5 分钟，在 Production 阶段修改则要花半天。

步骤 2 — 根据目标映射版块（不一定总是 7 个版块）

目标 / 流量类型	版块顺序
潜客获取 — 冷流量	主视觉 → 问题 → 解决方案 → 证明 → 表单 → FAQ → 最终 CTA
温流量（再营销，已了解品牌）	优惠 → 紧迫感 → 证明 → 表单
课程 / 活动	主视觉 → 介绍 → 课程内容 → 讲师 → 用户评价 → 定价 → FAQ → 表单
本地服务预约	主视觉 → 证明 → 流程 → 定价 → 预约表单 → FAQ

流量越热，页面越短。让已经了解品牌的人重新阅读“问题”部分，是他们离开的原因。

步骤 3 — 各模块的构建顺序

严格按照以下顺序构建，完成一个模块后再开始下一个：

#	模块	必须	最少内容
1	主视觉	是	前置标题（小标签）· 以利益为导向的标题（而非功能）· 1-2 句副标题 · 主 CTA · 简短的社会认同（“X 人已参与” / 星级评分）· 真实图片（不要使用泛泛的图库图片）
2	问题	是	3 个痛点：图标 + 标题 + 1 句描述 · 过渡句：“如果你对以上至少 1 点表示认同……”
3	解决方案	是	标题“这就是 [brand] 如何解决……” · 3-5 条带勾选标记的要点 · 插图或真实演示
4	社会认同	是	2-3 张用户评价卡片：真实头像 + 姓名 + 职位 + 真实引述 · 附上数据（“200+ 名学员”、“ROAS 4.2x”）
5	优惠 / 定价	可选	套餐名称 + “最受欢迎”标签 · 划掉原价 + 当前价格 · 包含内容列表 · 奖励 · 紧迫感（“仅剩 X 个名额” / “优惠截止至 [日期]”）· 大号 CTA · 承诺（“X 天内退款”）
6	FAQ	建议添加	5-7 个解决最后疑虑的问题，采用手风琴样式
7	最终 CTA	是	重申紧迫感 · 表单或 CTA 按钮 · 信任信号（Logo、承诺、热线电话）

背景颜色和排版： 从品牌中心读取 — [主色]、[次色]、[标题字体]、[正文字体]。如果还没有，请先运行 46-brand-guideline。不要自行编造配色。

步骤 4 — 表单和追踪

<form action="[WEBHOOK_URL]" method="POST">
  <input type="hidden" name="source"     value="landing-[ten-chien-dich]">
  <input type="hidden" name="utm_source" value="">
  <input type="hidden" name="utm_medium" value="">
  <input type="hidden" name="utm_campaign" value="">
  <input type="text"  name="name"  placeholder="Ho va ten *" required>
  <input type="tel"   name="phone" placeholder="So dien thoai *" required>
  <input type="email" name="email" placeholder="Email">
  <button type="submit">Dang ky ngay</button>
</form>

• URL 中的 UTM 必须自动填入隐藏字段——缺少这一步，就无法知道潜客来自哪个广告系列。
• 仅在成功提交时触发 Meta Pixel 的 Lead 事件和对应的 GA4 事件，而不是点击按钮时。
• 表单每增加一个字段，转化率就会降低。必填字段最多 3 个。

Pixel/CAPI/UTM 配置详情 → 53-tracking-setup。

步骤 5 — 技术转化检查清单（上线前）

• 首屏加载时间 < 2 秒（在 4G 网络下测量，不要在 Wi-Fi 下测量）
• 图片设置了 loading="lazy" — 主视觉图片除外
• 主视觉图片 < 200KB，已压缩，并使用最佳格式
• 在 375px 宽度下检查——没有横向滚动条
• 标题 + CTA 无需滚动即可看到，包括在移动设备上
• 实际测试表单提交——数据发送到正确的接收位置（Sheets / CRM / webhook）
• 所有 CTA 按钮和锚点滚动都能正常工作
• Meta Pixel 在提交时触发正确的 Lead 事件（通过 Events Manager 检查）
• 已填写页面标题 + meta description + 1200x630 的 OG 图片
• 没有导航菜单，也没有指向页面外部的链接

步骤 6 — 活动标准时间线

时间点	事项	负责人	Gate
T-14	阅读活动 brief，确认落地页是否在资产清单中	Designer / Dev	41-campaign-asset-list
T-7	在 30 分钟内搭建 MVP → 提交审核	Designer / Dev	15 分钟内审核方向（47-design-review）
T-6	根据 MVP 反馈修改（1 轮）	Designer / Dev
T-5	构建完整的 Production 版本（落地页是复杂资产——尽早开始）	Designer / Dev
T-3	添加追踪、测试表单、测试速度	Performance	53-tracking-setup
T-1	按照转化检查清单进行最终检查	Performance + Lead	上线前检查
T-0	在投放广告前上线		落地页完成测试前不得投放广告

规则： 落地页始终是活动中最早制作的资产，因为其他所有内容（广告、邮件、Zalo）都会指向这里。落地页延期 = 整个活动延期。

---

技能关联

• 09-insight-khach-hang — 为 Section 2 获取痛点和客户用语
• 05-copy-quang-cao — 撰写引导流量到落地页的广告文案
• 10-tinh-kpi-nguoc — 计算目标转化率和相应的广告预算
• 02-brief-chien-dich — 落地页包含在整体活动 brief 中
• 13-phan-tich-du-lieu — 投放后分析落地页效果
• 41-campaign-asset-list — 落地页是活动资产清单中的一项
• 46-brand-guideline — 获取颜色、字体和样式 token，而不是自行编造配色
• 47-design-review — T-7 审核 MVP 的 Gate，以及 Production 版本审核
• 49-html-email-template — 邮件使用相同的 token 和 HTML 用法
• 53-tracking-setup — 为落地页添加 pixel、CAPI、UTM
• 21-audit-ads-performance — CTR 表现好但 CPL 偏高时，问题通常出在落地页

---

质量检查清单

内容

• Hero 标题在 60 个字符内传达利益点
• 每个 section 都有明确且不重复的目的
• 痛点采用客户的用语（不使用内部术语）
• 至少有 3 条 testimonial，包含真实姓名和具体成果
• 每个 CTA 都使用动词 + 利益点，不使用“Click here”或“了解更多”
• 包含紧迫性元素（倒计时、限量、截止日期）
• FAQ 解决所有主要异议

设计

• 没有导航菜单
• 没有指向站外的链接
• 移动端布局为单列，字体 >= 16px
• CTA 按钮为橙色，在移动端占满宽度
• 图片包含 alt text
• 表单最多 3 个字段

技术

• 在 4G 网络下加载时间 < 3 秒
• 已安装 Meta Pixel + GA4
• 表单将数据发送到 Google Sheets
• 有新 lead 时通过 Zalo 通知
• UTM 参数已保存到表单数据中
• 已准备 OG image 1200x630
• noindex, nofollow（落地页不需要 SEO）

上线前

• 在移动端测试表单（iOS + Android）
• 在 PageSpeed Insights 上测试速度
• 检查分享链接时 OG 的显示效果
• 使用 Events Manager 测试 Meta Pixel
• CTA 链接和锚点滚动均正常工作

自行构建 HTML 时

• 构建前已选择模式（MVP 或 Production）——不要直接跳到 Production
• MVP 在 30 分钟内完成，并在正式构建前通过方向审核
• 根据目标和流量温度选择 section 顺序——不要默认使用 7 个 section
• 颜色和字体取自品牌中心（[mau primary]、[font heading]）——不要自行编造
• 表单包含隐藏字段，可自动从 URL 获取 UTM
• Lead 事件在成功提交时触发，而不是在点击按钮时触发
• Hero 图片 < 200KB；其余图片使用 loading="lazy"
• 检查 375px 宽度下没有横向滚动
• 投放广告前完成落地页——不要将广告投向未经测试的页面