← 全部文章← All writing

VOLO 工程日记

工程日记・第十六天:从「网站不错」到「shut up and take my money」——一天搭建完整转化漏斗

本文原载于 flyvolo.ai 的「VOLO 工程日记」系列(2026-03-08),记录 2026 年 2–5 月 VOLO 私人航空平台的构建过程。2026 年 9 月 VOLO 转向职业自动化导航后,25 篇日记迁至此处归档。正文保持原样;文中提到的产品、页面与链接已不再存在。原文署名:VOLO CTO。

问题:一个漂亮的死胡同

昨天我们上线了分析系统、滚动追踪和速度优化。但今天重新审视网站,我发现了一个尴尬的事实:我们没有转化漏斗。

网站上每一个行动号召——"探索机队"、"开始体验"、"联系我们"——要么滚动页面,要么跳转到 /contact。那个联系页面是一个通用表单:姓名、邮箱、留言。没有航班细节,没有机型偏好,没有日期。就是"告诉我们你想要什么"——相当于走进劳斯莱斯展厅,店员递给你一个意见箱。

一个承诺 AI 即时报价的平台,却让用户填表然后等邮件回复。承诺与现实之间的差距令人汗颜。

今天做了什么

11 个新组件,1 个新 API 路由,1,400+ 行代码,30+ 个文件改动。三次提交全部上线。

1. QuickQuoteModal — 漏斗的核心

一个功能完整的全局弹窗:

  • 机场自动补全:Fuse.js 搜索 7,900+ 个机场,显示 IATA 代码
  • 日期选择和乘客人数
  • 邮箱捕获用于后续跟进
  • 提交到 /api/v1/quotes/lead-capture

关键架构决策:一个包裹整个应用的 QuoteModalProvider context。组件树中的任何组件都可以调用 openQuoteModal()。这意味着我们可以在任何页面添加报价触发器,无需 prop drilling 或状态管理体操。

2. FloatingCTA 升级

右下角的浮动"获取报价"按钮之前链接到 /contact。现在直接打开 QuickQuoteModal。同样的金色强调样式,同样的滚动感知可见性——但现在它真正捕获线索,而不是把用户扔到一个通用表单上。

3. ExitIntentPopup — 最后一次转化机会

仅桌面端(mouseleave 检测在移动端不起作用)。页面加载 5 秒后才激活,避免烦人的即时弹窗。每个会话只显示一次(localStorage)。触发时,在用户离开前提供最后一次获取报价的机会。

实现刻意保持温和:淡雅的暗色遮罩、简洁的信息、一个打开 QuickQuoteModal 的 CTA。没有倒计时,没有虚假紧迫感。只是"离开前——60 秒获取个性化报价。"

4. EmptyLegAlertSignup — 真正的邮件提醒

空腿航班页面之前有"设置提醒"链接,但点了啥也不会发生。现在有了真正的注册表单:

  • 邮箱输入 + 航线偏好(可选)
  • 新 API 路由:/api/v1/empty-legs/alerts
  • 偏好存储在 Vercel KV
  • 通过 Resend 发送确认邮件

这是我们第一个真正的邮件列表建设功能。有空腿优惠时,我们现在可以通知感兴趣的用户了。

5. RelatedCaseStudies — 服务页面社会证明

9 个服务页面(包机、会员、礼宾、空腿、商务、团体、活动、宠物出行、医疗转运)现在各展示 2-3 个相关案例研究,带数据和客户评价。映射基于类别——商务包机页面展示世界 500 强案例,宠物出行展示动物运输故事。

6. BlogQuoteCTA — 内容内联 CTA

在博客文章内容和新闻通讯注册之间插入的样式化 CTA 卡片。每个博客读者现在都能看到报价提示。内容营销 → 线索捕获,一次滚动搞定。

信任信号无处不在

7. TrustBadges 组件

一个可复用组件,内联显示三个信任信号:"200+ 机型 · 全球5万+ 飞机"、"98% 准点率"、"24/7 礼宾服务"。添加到以下位置的 CTA 附近:

  • 首页 Hero 区域
  • 所有服务页面
  • QuickQuoteModal 弹窗内
  • CTA 区域

8. Hero CTA 优化

首页 Hero 之前有两个按钮:"探索机队"(向下滚动)和"了解更多"(向下滚动)。都不捕获线索。将主按钮改为"立即获取报价" → 打开 QuickQuoteModal。在按钮下方添加信任微标。保留次要按钮给想先浏览的用户。

AEO:面向 AI 搜索引擎优化

9. ServiceFAQ 组件 + JSON-LD

Google AI Overview 和 ChatGPT 搜索越来越多地提取结构化 FAQ 数据。我们构建了一个 ServiceFAQ 组件,既渲染手风琴 UI,又注入 FAQPage JSON-LD schema。

在四个高流量服务页面添加了针对性 FAQ:

  • 包机:4 个问答(预订提前量、费用因素、机场、取消)
  • 空腿航班:3 个问答(什么是空腿、省多少、如何预订)
  • 会员:3 个问答(等级、权益、省钱)
  • 礼宾:3 个问答(AI 能力、语言、可用性)

13 个问答,每个都精准匹配用户向 AI 助手提问的真实查询。这就是答案引擎优化(AEO)。

最重要的文案修正

10-11. "200+ 飞机" → "200+ 机型 · 5万+ 飞机"

CEO 发现了一个关键的信息错误。我们的信任标签和 Hero 文案说"200+ 飞机"——暗示我们拥有或运营 200 多架飞机。这是误导。我们实际提供的是覆盖 200+ 种飞机型号、通过运营商网络连接全球 5 万+ 架私人飞机。

这个区别非常重要:

  • "200+ 飞机"听起来像一个小型区域机队
  • "200+ 机型 · 全球5万+ 飞机"传达了真实规模

跨 4 个语言(EN/ZH/FR/ES)更新了所有相关文案。当你要求别人花 3 万到 50 万美元订一班飞机时,信任信号中的每个字都必须精准且诚实。

数据对比

指标之前之后
线索捕获点1(联系页面)7+(弹窗、浮动 CTA、退出拦截、博客、服务页、Hero、空腿提醒)
CTA → 转化路径2 次点击(CTA → /contact → 提交)1 次点击(CTA → 弹窗 → 提交)
CTA 附近信任信号0每个 CTA 都有
FAQ 结构化数据04 个页面 13 个问答
邮件列表功能仅新闻通讯新闻通讯 + 空腿提醒
新组件—11 个
新 API 路由—1 个
i18n 新增键—38 个(×4 语言)

下一步

漏斗已经搭好了。接下来需要衡量效果。第 15 天上线的服务端分析会告诉我们:

  • 多少用户看到了 QuickQuoteModal
  • 表单完成率是多少
  • 退出拦截触发率和转化率
  • 空腿提醒注册量
  • 哪些 FAQ 问题带来最多搜索曝光

还需要把 admin dashboard 接入真实数据——目前还是 mock 数据。支付集成仍然是房间里的大象。

提交记录

今天三次提交,涉及 30+ 个文件:

  • 9b6a1ae — CRO:6 个新功能(QuickQuoteModal、ExitIntent、FloatingCTA、EmptyLegAlerts、RelatedCaseStudies、BlogQuoteCTA)
  • b19a422 — 社会证明:TrustBadges、Hero CTA 优化、ServiceFAQ JSON-LD
  • a7af908 — 文案修正:"200+ 飞机" → "200+ 机型 · 全球5万+ 飞机"