关于 landing-pages
Landing Pages 是用于规划和优化营销落地页的技能,强调每页聚焦一个转化目标,并提供页面结构、行动号召、信任元素、移动端设计和测试方面的指导。
主要功能
- 01按目标选择页面类型
- 02规划首屏内容结构
- 03设计行动导向的 CTA
- 04安排社会认同并处理异议
- 05规划基于假设的 A/B 测试
适用场景
- 01创建潜在客户订阅页
- 02围绕单一转化目标设计销售页
- 03检查移动端落地页流程
- 04规划标题和 CTA 测试
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ flitzrrr/ frontend-design-skills --skill landing-pages安装后在 Claude Code 中输入/landing-pages确认已加载。
详细介绍
落地页
每个落地页都只追求一个主要转化目标。多个相互竞争的目标会降低转化率。一个目标,一个页面。
适用范围
在以下情况下使用此技能:
- 创建用于获客或销售的落地页
- 设计 CTA 按钮和转化元素
- 优化首屏区域
- 策略性地放置社会认同
- 为落地页规划 A/B 测试
- 根据目标选择合适的落地页类型
原则
1. 一个目标,一个页面
每个落地页都只追求一个主要转化目标。多个目标会降低转化率。
2. 落地页不是主页
主页提供广泛的信息。落地页用于销售或获客,目标明确且没有干扰。
3. 访客已通过初步筛选
访问落地页的人都已经看过广告或搜索过关键词。页面必须兑现所做出的承诺。
4. 先建立信任,再促成交易
没有用户会在缺乏信任的情况下转化。社会认同、透明度和专业设计必不可少。
5. 必须优先考虑移动端
超过一半的访客通过移动设备访问。无法在智能手机上正常使用的页面,会浪费一半的潜在机会。
6. 测试胜过主观意见
CTA 按钮应该用红色还是绿色,应由 A/B 测试数据决定,而不是设计师。
规则
应做:选择合适的落地页类型
| 类型 | 目标 | 长度 | 显著特点 |
|---|---|---|---|
| 订阅页 | 获取潜在客户 | 短至中等 | 提供免费内容或价值交换 |
| 销售页 | 销售产品/服务 | 长 | 回应所有异议 |
| 点击跳转页 | 推进至下一步转化漏斗 | 短 | 激发兴趣,不要推销 |
| 信息收集页 | 收集最少信息 | 最短 | 只有电子邮件字段和 CTA |
| 网络研讨会/活动页 | 获取报名 | 中等 | 日期、演讲者、倒计时 |
应做:在首屏传达核心信息
无需滚动即可看到的区域必须包含:
- 标题: 用一句话清晰说明收益。不要玩文字游戏,也不要故弄玄虚。
- 副标题: 进一步说明内容或回应异议。
- 主视觉: 通过图片或视频将收益形象化。
- CTA 按钮: 清晰可见、对比鲜明、以行动为导向。
- 信任元素: 至少包含一项社会认同元素。
应做:设计以行动为导向的 CTA 按钮
- 措辞应以行动和收益为核心:“开始免费试用”“申请报价”。
- 不要使用:“提交”“继续”“点击此处”。
- 在视觉上要从其他内容中脱颖而出(使用对比色)。
- 对于较长的页面,每个部分之后都要重复 CTA。
- 每个页面最多使用 1 种主要 CTA 类型。
应做:遵循转化结构(长篇页面)
- 指出问题——表明你理解痛点。
- 提出解决方案——说明你的产品或服务如何解决问题。
- 列出收益——用项目符号列出优势(而非功能)。
- 提供社会认同——客户评价、案例研究、评分。
- 回应异议——设置常见问题部分。
- 制造紧迫感——仅在确有依据时(如数量有限、倒计时)。
- 重复 CTA——在页面结尾醒目地发出行动号召。
应做:尽量精简表单
- 仅收集绝对必要的信息。每增加一个字段都会降低转化率。
- 订阅:最好只收集电子邮件。
- 销售:首次联系时只需姓名和电子邮件。
应做:移除或尽量简化导航
- 落地页不得包含完整的网站导航。
- 最多保留:链接到主站的 Logo,以及页脚中的法律声明/隐私政策。
不要做:违背广告承诺
- 如果广告承诺“免费咨询”,页面就必须确实提供免费咨询。
不要做:使用无关的图库照片
- 普通的商务图库照片无法建立信任。
- 使用真实照片或有意义的产品可视化内容。
不要做:提供多个同等重要的 CTA
- 一个页面只有一个目标。仅此而已。
不要做:未经测试就上线
- 没有 A/B 测试计划的落地页,就是基于侥幸心理的营销。
- 至少测试:不同标题、CTA 文案和主视觉图片。
模式
问题-激化-解决方案(PAS)
适用于销售和潜在客户开发:1. 直接点明问题;2. 激化问题(如果不解决会发生什么);3. 将你的产品或服务作为解决方案。详情请参阅 references/conversion-patterns.md。
社会认同夹心结构
在 3 个位置展示社会认同:1. 首屏区域(标志、客户数量);2. 优势介绍之后(附照片的推荐语);3. 最终 CTA 之前(评分、保障)。
视频落地页
适用于需要说明的产品:以禁止自动播放的视频(最长 90 秒)作为主视觉,随后在下方展示文字摘要和 CTA。
倒计时营造紧迫感
适用于限时优惠:在 CTA 上方显示倒计时。仅在确有截止日期时使用。虚假的倒计时会永久摧毁信任。
反模式
信息过载
文字太多、版块太多、视觉元素太多。**解决方案:**每个版块都必须在转化流程中发挥作用。
隐藏的 CTA
CTA 在视觉上不醒目、尺寸过小,或只有大量滚动页面后才会显示。**解决方案:**首屏区域及每个版块之后都要有 CTA。使用对比鲜明的颜色,并确保尺寸足够大。
泛泛的标题
“欢迎”或“我们提供解决方案”。没有用户会觉得这是在对自己说。**解决方案:**使用以收益为导向的标题:“30 天内增加 50% 的潜在客户。”
有问题的移动端转化流程
桌面端体验出色,移动端却无法使用。超过 50% 的流量无法转化。**解决方案:**采用移动端优先设计。确保 CTA 按钮可用拇指轻松点击。
没有假设的 A/B 测试
随机测试不同变体,得不出可执行的见解。**解决方案:**每项测试都要有一个假设:“如果我们更改 X,我们预计会得到 Y,因为 Z。”
检查清单
- 每个页面恰好定义一个转化目标
- 选择落地页类型(选择加入、销售、点击跳转等)
- 首屏区域包含标题、副标题、主视觉、CTA、信任要素
- CTA 按钮以行动为导向,且对比鲜明
- 移除导航,或将其精简为标志和法律信息
- 将表单字段精简至最低限度
- 至少在 3 个位置展示社会认同
- 设置 FAQ 版块,解答最常见的异议
- 单独检查并优化移动端版本
- 广告承诺与落地页内容保持一致
- 加载时间少于 3 秒
- 制定 A/B 测试计划,至少包含 1 个假设
- 配置跟踪和转化衡量
交叉引用
customer-journey— 落地页是一个核心触点design-process— 落地页的创建遵循相同流程ai-design-workflow— AI 可以生成标题、CTA 和文案变体website-audit— 现有落地页属于审计范围usability— 表单和转化优化ui-design— 转化元素的视觉设计