LESSON 01
用户决策路径：AIDA 模型的现代版本
营销页面的骨架不是设计师拍脑袋想出来的，而是用户决策路径的外化。尧图采用 AIDA 现代版本：注意（Attention）→ 兴趣（Interest）→ 渴望（Desire）→ 行动（Action），每一屏对应一个决策阶段，阶段之间用视觉锚点串联。
落地到页面结构：首屏负责 Attention，用大标题 + 痛点钩子；第二屏负责 Interest，用场景化案例展示；第三屏负责 Desire，用数据背书 + 客户证言；末屏负责 Action，用低门槛表单 + 强 CTA。下面是这套结构的 HTML 骨架。
<!-- AIDA 决策路径页面骨架 -->
<
main>
<
section class=
"screen-attention">
<!-- 首屏：痛点钩子 -->
<h1>建网站做推广，就上尧图网</h1>
<p>48 小时出方案，满意再付款</p>
<a class=
"btn-cta">免费咨询</a>
</section>
<
section class=
"screen-interest">
<!-- 二屏：场景案例 -->
<h2>1280+ 企业客户的共同选择</h2>
<div class=
"case-list">…</div>
</section>
<
section class=
"screen-desire">
<!-- 三屏：数据背书 -->
<h2>为什么选尧图</h2>
<div class=
"stats">续约率 96%</div>
</section>
<
section class=
"screen-action">
<!-- 末屏：表单转化 -->
<form>…</form>
</section>
</main>
关键原则：每一屏只能承担一个决策阶段，不要试图在首屏既抓注意力又卖货。尧图曾测试过首屏同时放案例和表单的版本，转化率比纯注意力版低了 42%。决策阶段必须串行，不能并行。
LESSON 02
首屏设计：3 秒抓住注意力的黄金法则
用户进入页面后平均 3 秒决定是否继续浏览，首屏必须在这 3 秒内完成三件事：告诉用户"你能给我什么"、"为什么相信你"、"下一步怎么做"。尧图首屏公式：痛点钩子 + 解决方案承诺 + 低门槛 CTA，三者缺一不可。
痛点钩子要具体而非抽象，"建网站做推广"比"数字化转型"更直接；解决方案承诺要量化，"48 小时出方案"比"快速响应"更可信；CTA 要低门槛，"免费咨询"比"立即购买"转化率高 3 倍。下面是首屏的视觉层级代码。
/* 首屏视觉层级：F 型阅读路径 */
.hero{
min-height:88vh;
display:grid;grid-template-rows:1fr auto;
padding:120px 0 60px;
}
.hero h1{
font-size:clamp(2rem,4.6vw,3.4rem); /* 最大视觉权重 */
line-height:1.2;
margin-bottom:16px;
}
.hero .hook{color:var(--wood-deep);font-style:italic} /* 痛点钩子高亮 */
.hero .cta-row{display:flex;gap:14px;margin-top:28px}
.hero .cta-primary{
background:var(--wood-deep);color:#fff;
padding:16px 36px;font-size:15px;font-weight:600;
border-radius:30px;
box-shadow:0 12px 28px -12px rgba(154,125,79,.55);
}
数据验证：尧图对 200+ 落地页首屏做过热力图分析，发现 H1 字号小于 32px 时首屏跳出率上升 28%。建议 H1 字号下限 clamp(2rem,4.6vw,3.4rem)，移动端不低于 28px，确保 3 秒内可读。
LESSON 03
信任构建：从权威背书到客户证言的递进
用户对你越信任，转化门槛越低。信任构建要分三层递进：第一层是权威背书（资质、奖项、媒体曝光），第二层是数据背书（客户数、续约率、案例数），第三层是客户证言（真实评价、客户 logo、合作时长）。三层必须都有，缺一层信任链就断。
客户证言最忌讳"假大空"，必须包含三个要素：客户全名 + 公司 + 职位、具体数据（如"3 个月订单增长 180%"）、可验证的合作痕迹（合同截图、上线链接）。下面是客户证言卡片的语义化结构。
<!-- 客户证言卡片：三要素齐全 -->
<figure class="testimonial">
<blockquote>
"尧图帮我们 3 个月把核心词做到首页，自然流量增长 210%，月均询盘从 40 条涨到 180 条。"
</blockquote>
<figcaption>
<img src="client-zhang.jpg" alt="张总"> <!-- 真实头像 -->
<div>
<strong>张明华</strong> <!-- 全名 -->
<span>某医疗机构 · 市场总监</span> <!-- 公司+职位 -->
</div>
</figcaption>
</figure>
合规提醒：客户证言使用前必须取得客户书面授权，尤其是带具体数据的版本。建议在合同里提前约定"可公开展示案例"条款，避免后期侵权纠纷。证言卡上的客户头像建议用真实照片而非占位图，可信度差异超过 3 倍。
LESSON 04
转化触点：在用户犹豫时伸手推一把
转化触点是用户决策过程中的"最后一公里"，包括悬浮 CTA、退出意图弹窗、滚动跟随表单、限时优惠提醒等。尧图原则是触点不超过 3 种，否则会被用户感知为骚扰；触点出现时机必须匹配用户行为，而不是固定时间。
悬浮 CTA 在用户滚动超过首屏后出现；退出意图弹窗在鼠标移向浏览器顶部时触发；滚动跟随表单在用户浏览到第三屏后固定在右侧。每种触点都要可关闭，且 24 小时内不重复触发同一用户。
/* 悬浮 CTA：滚动超过首屏后出现 */
.float-cta{
position:fixed;right:24px;bottom:80px;z-index:900;
padding:14px 24px;background:var(--wood-deep);color:#fff;
border-radius:30px;font-weight:600;
opacity:0;visibility:hidden;transform:translateY(12px);
transition:all .3s cubic-bezier(.22,.61,.36,1);
box-shadow:0 12px 28px -12px rgba(154,125,79,.55);
}
.float-cta.show{opacity:1;visibility:visible;transform:none}
// 触发逻辑：滚动超过首屏高度才出现
window.addEventListener('scroll',()=>{
const scrolled=window.scrollY > window.innerHeight*0.8;
document.querySelector('.float-cta').classList.toggle('show',scrolled);
});
体验底线：任何触点必须提供明显的关闭按钮，且关闭后 24 小时内（用 localStorage 记录时间戳）不再出现。尧图曾遇到客户反馈"弹窗关不掉"，导致跳出率从 35% 飙到 68%，触点过度反而毁掉转化。
LESSON 05
表单优化：每少一个字段，转化率提升 11%
表单是转化的最后一道门槛，字段越多转化率越低。尧图交付团队实测数据：3 字段表单转化率 38%，5 字段 22%，7 字段跌到 11%。营销落地页表单字段上限是 5 个，且必须按"必要性"排序，非必要字段坚决砍掉。
5 字段黄金组合：姓名、手机号、公司、需求类型、留言。前三项必填，后两项选填。表单视觉上要"轻"，用浮动标签代替传统 label，用 input 自带验证代替弹窗提示，提交按钮要大且醒目。
/* 浮动标签表单：视觉减负 */
.form-field{position:relative;margin-bottom:18px}
.form-field input{
width:100%;padding:18px 16px 8px;
font-size:15px;border:1px solid var(--line);
border-radius:8px;background:var(--cream);
transition:all .25s;
}
.form-field label{
position:absolute;left:16px;top:14px;
color:var(--ink-mute);font-size:14px;
pointer-events:none;transition:all .2s;
}
/* 聚焦或有值时，label 上浮缩小 */
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label{
top:6px;font-size:11px;color:var(--wood-deep);
}
.form-field input:focus{
border-color:var(--wood);background:var(--paper);
box-shadow:0 0 0 3px rgba(184,153,104,.12);
}
字段取舍：砍掉"邮箱"字段在 B2B 场景转化率提升 14%，因为国内企业用户更习惯电话沟通。但 B2C 场景必须保留邮箱，用于后续营销。字段取舍要看业务场景，不能一刀切。建议上线后跑两周数据再决定。
LESSON 06
A/B 测试：用数据代替直觉的优化闭环
A/B 测试是营销页面持续优化的核心方法。尧图标准流程：确定优化目标（如转化率）→ 提出假设（如"红色按钮比原木色转化高"）→ 设计变体 → 等流量分配 → 跑满样本量 → 统计显著性检验 → 决策上线。每一步都不能跳过。
样本量计算是关键，太小会误判，太大浪费流量。尧图经验值：转化率基线 5%，期望提升 10%，置信度 95%，需要每组 15000 UV。低于这个样本量，任何差异都可能是噪声。下面是 A/B 测试的 HTML 切换骨架。
<!-- A/B 测试：CTA 按钮变体 -->
<div class="cta-wrap" data-variant="A">
<a class="btn-cta variant-a">免费咨询方案</a>
</div>
/* 服务端按 cookie 分流，前端只渲染对应变体 */
.btn-cta.variant-a{
background:var(--wood-deep);color:#fff; /* 原木色（原版本）*/
padding:16px 36px;border-radius:30px;
}
.btn-cta.variant-b{
background:#C25A3B;color:#fff; /* 暖橙红（变体）*/
padding:16px 36px;border-radius:30px;
}
// 埋点上报：记录曝光与点击
function trackCta(variant,action){
analytics.track('cta_interaction',{
variant:variant, // 'A' or 'B'
action:action, // 'view' or 'click'
url:location.pathname
});
}
结业作业：选一个你的落地页，按本课方法设计一个 A/B 测试方案（含假设、变体、样本量、决策标准），跑满两周后提交数据报告。讲师会评估测试设计的严谨性，优秀作业可入选尧图案例库。
