landing-page-guide

落地页指南

概述

此技能可帮助你按照 DESIGNNAS 的 11 项核心要素框架，创建专业且转化率高的落地页。它提供了适用于 Next.js 14+ 和 React 的完整实现模式，并集成 ShadCN UI，确保每个落地页都具备适当的 SEO 优化、无障碍标准和以转化为导向的设计。

何时使用此技能

当用户请求以下内容时，请使用此技能：

• 创建落地页、营销页面或产品页面
• 基于 Next.js 或 React 的推广网站
• 需要将访客转化为客户的页面
• 经过 SEO 优化的专业营销页面
• 遵循行业最佳实践的落地页

11 项核心要素框架

每个有效的落地页都必须包含以下 11 项核心要素。这些要素基于 DESIGNNAS 久经验证的高转化率落地页框架：

1. 包含关键词的 URL - 经过 SEO 优化且描述清晰的 URL 结构
2. 公司徽标 - 显眼展示品牌标识（左上角）
3. 经过 SEO 优化的标题和副标题 - 清晰传达价值主张并包含关键词
4. 主要 CTA - 首屏区域的主要行动号召按钮
5. 社会认同 - 评价、评分、用户统计数据
6. 图片或视频 - 直观展示产品或服务
7. 核心优势/功能 - 配有图标的 3-6 项主要优势
8. 客户评价 - 4-6 条附带照片的真实评价
9. 常见问题部分 - 包含 5-10 个常见问题的手风琴界面
10. 最终 CTA - 页面底部的行动号召，为转化提供第二次机会
11. 联系信息/法律页面 - 包含完整信息的页脚

重要： 每个落地页都必须包含全部 11 项要素，不得例外。

如需详细了解每项要素，请参阅 references/11-essential-elements.md。

技术栈要求

创建落地页时，始终使用：

必需技术

• Next.js 14+，搭配 App Router
• TypeScript，确保类型安全
• Tailwind CSS，用于样式设计
• ShadCN UI，用于所有 UI 组件

需要安装的 ShadCN UI 组件

创建任何落地页之前，请确保已安装这些组件：

npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add accordion
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add avatar
npx shadcn-ui@latest add separator
npx shadcn-ui@latest add input

为什么选择 ShadCN UI？

• 无障碍性：符合 WCAG 标准的组件
• 可定制：可使用 Tailwind CSS 完全定制
• 类型安全：使用 TypeScript 编写
• 性能：只复制所需内容，尽可能减小打包体积
• 一致性：内置设计系统

项目结构

按以下结构创建落地页：

landing-page/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Main landing page
│   └── globals.css         # Global styles
├── components/
│   ├── Header.tsx          # Logo & Navigation (Element 2)
│   ├── Hero.tsx            # Title, CTA, Social Proof (Elements 3-5)
│   ├── MediaSection.tsx    # Images/Videos (Element 6)
│   ├── Benefits.tsx        # Core Benefits (Element 7)
│   ├── Testimonials.tsx    # Customer Reviews (Element 8)
│   ├── FAQ.tsx             # FAQ Accordion (Element 9)
│   ├── FinalCTA.tsx        # Bottom CTA (Element 10)
│   └── Footer.tsx          # Contact & Legal (Element 11)
├── public/
│   └── images/             # Optimized images
└── package.json

实现工作流

步骤 1：设置元数据（SEO）

始终先在 layout.tsx 或 page.tsx 中设置适当的 SEO 元数据：

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'SEO Optimized Title with Keywords | Brand Name',
  description: 'Compelling description with main keywords',
  keywords: ['keyword1', 'keyword2', 'keyword3'],
  openGraph: {
    title: 'OG Title',
    description: 'OG Description',
    images: ['/og-image.jpg'],
  },
}

步骤 2：创建组件结构

按以下顺序构建组件，确保流程合理：

1. Header，包含徽标（要素 2）
2. Hero 区域，包含标题、副标题、主要 CTA 和社会认同（要素 3-5）
3. MediaSection，包含产品图片/视频（要素 6）
4. Benefits 区域，包含 3-6 个功能卡片（要素 7）
5. Testimonials，包含客户评价（要素 8）
6. FAQ，包含手风琴组件（要素 9）
7. FinalCTA，位于页面底部（要素 10）
8. Footer，包含联系信息和法律链接（要素 11）

步骤 3：使用 ShadCN UI 组件

将各个部分对应到合适的 ShadCN 组件：

• Hero CTA：使用尺寸为 "lg" 的 Button 组件
• Benefits：使用 Card、CardHeader、CardTitle、CardContent
• Testimonials：使用 Card、Avatar、Badge
• FAQ：使用 Accordion、AccordionItem、AccordionTrigger、AccordionContent
• Final CTA：使用 Button 和 Card
• Footer：使用 Separator 和 Input，用于电子报订阅

步骤 4：实现响应式设计

确保采用移动端优先的响应式设计：

• 使用 Tailwind 响应式前缀：sm:、md:、lg:、xl:
• 测试所有断点：640px（sm）、768px（md）、1024px（lg）、1280px（xl）
• 触控目标最小尺寸：按钮为 44x44px
• 基础字号：移动端至少为 16px

步骤 5：优化性能

• 所有图片都使用 Next.js Image 组件
• 为首屏可见图片添加 priority 属性
• 为首屏以下的内容实现延迟加载
• 如有需要，使用动态导入加载较重的组件

步骤 6：确保无障碍访问

• 使用语义化 HTML5 元素（<header>、<main>、<section>、<footer>）
• 在需要的地方添加 ARIA 标签
• 确保键盘导航正常工作
• 为所有图片提供替代文本
• 保持足够的颜色对比度（最低符合 WCAG AA）

组件示例

如需完整、可用于生产环境的 ShadCN UI 组件实现，请参阅 references/component-examples.md。

此参考文件包含：

• 带有 Button、Badge 和图片优化的主视觉区域
• 带有 Card 组件的优势区域
• 带有 Avatar 和 Card 的客户评价
• 带有 Accordion 的常见问题
• 带有 Card 和 Button 的最终行动号召
• 带有 Separator 和链接的页脚

实现组件时加载此参考文件，以遵循最佳实践。

验证清单

完成任何落地页之前，请确认：

11 个必备元素：

• 1. 包含关键词的 URL
• 2. 公司 Logo（左上角）
• 3. 针对 SEO 优化的标题和副标题
• 4. 主视觉区域中的主要行动号召
• 5. 社会认同（评价、统计数据）
• 6. 图片或视频
• 7. 优势/功能区域（3-6 项）
• 8. 客户评价（4-6 条）
• 9. 常见问题区域（5-10 个问题）
• 10. 底部的最终行动号召
• 11. 包含联系和法律链接的页脚

技术要求：

• 使用 Next.js 14+ 和 App Router
• 定义 TypeScript 类型
• 使用 Tailwind CSS 设置样式
• 使用 ShadCN UI 组件
• 配置 SEO 元数据
• 使用 Next.js Image 优化图片
• 实现响应式设计
• 符合无障碍访问标准
• 优化性能

最佳实践

内容指南

• 撰写清晰且突出优势的文案
• 在行动号召中使用行动导向的语言
• 使用恰当的标题，让各个区域易于浏览
• 加入具体数字和统计数据
• 使用真实姓名和真实可信的客户评价

设计指南

• 始终保持清晰的视觉层级
• 使用一致的配色方案
• 确保留白充足
• 选择易读的字体（基础字号为 16px 或更大）
• 采用移动优先设计

SEO 优化

• 在内容中自然地加入关键词
• 使用正确的标题标签结构（H1 → H2 → H3）
• 为所有图片添加替代文本
• 优化页面加载速度
• 创建描述性元标签

转化优化

• 在适当位置放置行动号召（至少位于主视觉区域和页面底部）
• 减少用户旅程中的阻碍
• 显著突出信任信号
• 为行动号召使用对比鲜明的颜色
• 测试不同的行动号召文案版本

常见模式

SaaS 产品落地页

重点：免费试用行动号召、功能对比、清晰的定价、安全徽章

电商产品落地页

重点：产品图片、定价、配送信息、退货政策、紧迫感

服务/代理机构落地页

重点：作品集/案例研究、流程说明、团队资历、联系表单

活动/网络研讨会落地页

重点：醒目的日期/时间、演讲者简介、议程、报名表单、倒计时器

资源

references/

此技能包含详细的参考文档：

• 11-essential-elements.md - 深入讲解 11 个必备元素，包含原则、实现技巧和示例
• component-examples.md - 使用 ShadCN UI 为所有主要区域提供完整、可用于生产环境的组件代码

根据需要加载这些参考资料，以实现特定区域，或获取有关任何元素的详细指导。

注意事项

• 此框架基于 DESIGNNAS 的《11 Essential Landing Page Elements》
• 根据需要适配品牌指南和目标受众
• 使用 A/B 测试持续提升转化率
• 所有实现都应优先考虑用户体验和转化优化