Back to Details

landing-page-optimization

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Landing Page Optimization

着陆页优化

Build, write, and optimize high-converting landing pages combining proven copy frameworks, the 11-essential-elements structure, and a clear creation workflow.
结合经过验证的文案框架、11个核心元素结构以及清晰的创建流程，构建、撰写并优化高转化着陆页。

1. Copy Framework

1. 文案框架

Gather Before Writing

撰写前准备

Collect these inputs before drafting any copy:
  • Product/service name and core value proposition
  • Target audience and their primary pain point
  • Key differentiator vs alternatives
  • Desired visitor action (CTA goal)
  • Available social proof (testimonials, stats, logos)
在起草任何文案前，收集以下信息：
  • 产品/服务名称及核心价值主张
  • 目标受众及其核心痛点
  • 与竞品的关键差异化优势
  • 期望访客执行的操作（CTA目标）
  • 可用的社交证明（客户评价、数据统计、合作品牌标识）

Choose a Framework

选择合适的框架

FrameworkWhen to Use
PAS (Problem → Agitate → Solution)Strong pain point, emotional product
AIDA (Attention → Interest → Desire → Action)General purpose, awareness campaigns
StoryBrand (Hero → Guide → Plan → CTA → Success)Brand narrative, relationship-driven sales
框架适用场景
PAS（问题→激化→解决方案）痛点明确、主打情感的产品
AIDA（吸引注意→激发兴趣→唤起欲望→促进行动）通用场景、品牌认知类推广活动
StoryBrand（用户为主角→品牌为向导→行动方案→CTA→成功结果）注重品牌叙事、关系驱动型销售的场景

Section Copy Guide

各区域文案指南

Hero — Value prop in ≤10 words; subheadline adds specificity; CTA + 1 trust signal above fold.
Headline formulas:
  • [Achieve outcome] without [pain point]
  • The [adjective] way to [desired result]
  • Stop [bad thing]. Start [good thing].
Problem — Name the pain in the audience's language; 2–3 specific scenarios; emotional, not clinical.
Solution — How the product solves it; 3–5 features written as benefits ("saves 2 hrs/day" not "automated scheduling").
How It Works — 3–4 steps, each with a clear action verb; close with CTA.
Social Proof — Testimonial template: 
"[Specific result]..." — Name, Title, Company
. Aim for 4–6 testimonials; include stats and logos if available.
Pricing — Highlight recommended plan; include guarantee copy; one CTA per plan card.
FAQ — 5–10 objection-handling questions; cover pricing, refunds, technical requirements, comparison to alternatives.
Final CTA — Repeat the primary CTA; add urgency or risk-reversal ("Cancel anytime", "30-day guarantee"); larger and more dramatic than hero CTA.
首屏区域 — 价值主张控制在10字以内；副标题补充细节；首屏需包含CTA + 1个信任信号。
标题公式：
  • [达成成果] 无需[痛点]
  • [形容词]式实现[期望结果]
  • 停止[糟糕现状]，开启[理想状态]
痛点区域 — 用受众的语言描述痛点；列举2-3个具体场景；侧重情感表达，避免生硬的专业术语。
解决方案区域 — 说明产品如何解决痛点；将3-5个功能转化为利益点（如用“每天节省2小时”而非“自动调度功能”）。
工作流程区域 — 3-4个步骤，每个步骤配清晰的动作动词；结尾处设置CTA。
社交证明区域 — 客户评价模板：
"[具体成果]..." — 姓名，职位，公司
。建议包含4-6条评价；如有数据统计或品牌标识可一并展示。
定价区域 — 突出推荐套餐；包含售后保障文案；每个套餐卡片配一个CTA。
FAQ区域 — 5-10个用于打消顾虑的问题；覆盖定价、退款、技术要求、竞品对比等方面。
最终CTA区域 — 重复核心CTA；加入紧迫感或风险逆转机制（如“随时取消”、“30天无理由退款”）；样式比首屏CTA更大、更醒目。

CTA Copy Rules

CTA文案规则

  • Start with an action verb
  • Be specific: "Start My Free Trial" > "Submit"
  • First-person phrasing often converts better ("Get My Guide")
  • Avoid: "Click Here", "Learn More", "Submit"
  • 以动作动词开头
  • 表述具体：“开启免费试用”优于“提交”
  • 第一人称表述通常转化率更高（如“获取我的指南”）
  • 避免使用：“点击这里”、“了解更多”、“提交”

Copy Best Practices

文案最佳实践

  • Active voice, present tense; benefits before features
  • Specific numbers over vague claims ("saves 2 hours" not "saves time")
  • Short sentences; scannable with headers and bullets
  • Address objections before the reader voices them
  • Multiple CTAs (same action) throughout — not multiple competing actions
  • 使用主动语态、现在时态；先讲利益点再讲功能
  • 用具体数字替代模糊表述（如“节省2小时”而非“节省时间”）
  • 短句为主；通过标题和项目符号提升可读性
  • 在访客提出顾虑前主动解决
  • 页面中可多次设置相同动作的CTA，但避免设置多个相互竞争的动作

2. Design Principles (11 Essential Elements)

2. 设计原则（11个核心元素）

Every landing page needs all 11 elements. See 
references/11-essential-elements.md
for full detail on each.
#ElementConversion PurposeDesign Note
1URLSEO slug with keywords—
2Header/LogoBrand trust, navigationSticky with blur-on-scroll
3Hero Title + SubtitleClear value prop, H1 with keywordsDistinctive display font, 4–6rem
4Primary CTAHero conversionContrasting color, micro-interaction on hover
5Social ProofCredibility, reduce hesitationAnimated counts, overlapping avatars
6Images/VideosProduct demonstrationDevice mockups or demo video; no stock photos
7Benefits/FeaturesJustify the purchase3–6 items with icons; benefits-first copy
8TestimonialsPeer validation4–6 with photo + name + role; specific results
9FAQObjection removalAccordion; 5–10 questions
10Final CTASecond conversion chanceFull-width section; urgency elements
11FooterTrust + legalContact info, privacy policy, social links
所有着陆页都需包含这11个元素。详见
references/11-essential-elements.md
获取每个元素的详细说明。
序号元素转化目的设计注意事项
1URL含关键词的SEO友好链接—
2头部导航/品牌标识建立品牌信任、提供导航滚动时固定并添加模糊效果
3首屏标题 + 副标题清晰传递价值主张，H1含关键词使用独特的展示字体，字号4-6rem
4核心CTA首屏转化入口对比色， hover时添加微交互
5社交证明提升可信度、减少决策犹豫带动画效果的数字统计、重叠头像
6图片/视频产品演示使用设备样机或演示视频；避免使用库存图片
7利益点/功能证明购买合理性3-6个带图标的条目；先讲利益点再讲功能
8客户评价同行验证4-6条评价，配照片+姓名+职位；突出具体成果
9FAQ打消顾虑手风琴式展开；5-10个问题
10最终CTA提供二次转化机会通栏区域；加入紧迫感元素
11页脚增强信任 + 合规性包含联系信息、隐私政策、社交链接

Aesthetic Direction

风格方向

Pick ONE direction and execute it consistently:
DirectionFeelSuits
MinimalistClean whitespace, monochromaticPremium SaaS, professional services
Bold/MaximalistRich layers, vivid colorsCreative agencies, consumer brands
Retro-FuturisticGeometric, neon, monospaceDev tools, gaming, tech startups
OrganicSoft shapes, earth tonesWellness, food, sustainability
EditorialStrong type hierarchy, asymmetric gridsMedia, content platforms
Avoid: purple gradients on white (overused AI aesthetic), perfectly symmetric layouts on every section, stock photos of people pointing at laptops, default yellow stars.
选择一种风格并保持一致性：
风格质感适用场景
极简风留白充足、单色为主高端SaaS、专业服务
大胆/极繁风层次丰富、色彩鲜艳创意机构、消费品牌
复古未来风几何元素、霓虹色调等宽字体开发工具、游戏、科技初创公司
自然风柔和形状、大地色系健康养生、食品、可持续发展类品牌
编辑风清晰的字体层级、不对称网格媒体、内容平台
需避免：白色背景配紫色渐变（AI生成内容过度使用的风格）、每个区域都采用完全对称布局、指向笔记本电脑的人物库存图片、默认黄色星星评分。

Tech Stack (when building)

技术栈（构建时使用）

Next.js 14+ · TypeScript · Tailwind CSS · ShadCN UI
Build order: Design system → SEO metadata → Header → Hero (with animations) → Media → Benefits → Testimonials → FAQ → Final CTA → Footer.
See 
references/component-examples.md
for production-ready ShadCN component implementations.
Next.js 14+ · TypeScript · Tailwind CSS · ShadCN UI
构建顺序：设计系统 → SEO元数据 → 头部导航 → 首屏区域（含动画） → 媒体内容 → 优势展示 → 客户见证 → 常见问题 → 最终CTA → 页脚。
详见
references/component-examples.md
获取可直接用于生产环境的ShadCN组件实现方案。

3. Creation Workflow

3. 创建流程

Follow this sequence for any landing page project:
Step 1 — Define the Goal
  • Single conversion action (one CTA target)
  • Audience segment this page serves
  • Traffic source (ad, email, organic) — shapes tone and assumed context
Step 2 — Structure First Use the full 11-element structure. Resist shortcutting: pages missing Social Proof or FAQ consistently underperform.
Step 3 — Write Copy Apply the Copy Framework (§1). Write hero copy first — if the value prop isn't clear in 10 words, clarify the offer before continuing.
Step 4 — Design Choose aesthetic direction, define design system (fonts, colors, motion), then build section by section.
Step 5 — Optimize
  • Above the fold: value prop + CTA + one trust signal visible without scrolling
  • Multiple CTAs with identical action (not competing goals)
  • Minimal form fields; reduce every friction point
  • Mobile-first; test on real devices
  • Performance: LCP <2.5s, CLS <0.1, no layout shifts
Step 6 — Launch Checklist
  • Headline is benefit-focused, specific, ≤10 words
  • Single primary CTA throughout
  • Social proof present and specific
  • Mobile responsive
  • Page loads <3s
  • Trust signals visible above fold
  • FAQ covers top 5 objections
  • Analytics tracking configured
任何着陆页项目都需遵循以下步骤：
步骤1 — 明确目标
  • 单一转化动作（一个CTA目标）
  • 页面服务的受众群体
  • 流量来源（广告、邮件、自然搜索）—— 决定文案语气和预设上下文
步骤2 — 先搭结构 使用完整的11元素结构。不要偷懒：缺少社交证明或FAQ的页面转化率通常较低。
步骤3 — 撰写文案 应用第1节的文案框架。先撰写首屏文案——如果价值主张无法在10字内讲清楚，先明确产品定位再继续。
步骤4 — 设计页面 选择风格方向，定义设计系统（字体、颜色、动效），然后逐个区域构建。
步骤5 — 优化页面
  • 首屏：无需滚动即可看到价值主张 + CTA + 1个信任信号
  • 多个相同动作的CTA（避免相互竞争的目标）
  • 表单字段尽可能少；减少所有可能的摩擦点
  • 移动端优先；在真实设备上测试
  • 性能指标：LCP <2.5秒，CLS <0.1，无布局偏移
步骤6 — 上线检查清单
  • 标题以利益点为主、表述具体、≤10字
  • 全程使用单一核心CTA
  • 包含具体的社交证明
  • 适配移动端
  • 页面加载时间<3秒
  • 首屏可见信任信号
  • FAQ覆盖前5个常见顾虑
  • 已配置分析跟踪

References

参考资料

  • references/11-essential-elements.md
    — Detailed breakdown of each element with implementation guidance and good/bad examples
  • references/component-examples.md
    — Production-ready ShadCN UI components for Hero, Benefits, Testimonials, FAQ, Final CTA, and Footer sections
  • references/11-essential-elements.md
    — 每个元素的详细拆解，含实现指南和正反案例
  • references/component-examples.md
    — 可直接用于生产环境的ShadCN UI组件，覆盖首屏区域、优势展示、客户见证、FAQ、最终CTA和页脚等模块