落地页（Landing Page）设计指南 v2

概述

本技能帮助创建独特的、高转化率落地页，结合了：

经验证的转化框架：DESIGNNAS 的 11 个高转化率核心要素
卓越的设计品质：大胆的美学选择，打造令人难忘的品牌体验
生产就绪代码：Next.js 14+ 配合 ShadCN UI、TypeScript 和性能优化

理念：落地页既要转化访客，又要让他们记住你的品牌。千篇一律的模板页面两者都做不到。本技能确保你的落地页在功能上有效，在视觉上卓越。

使用场景

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

创建落地页、营销页面或产品页面
基于 Next.js 或 React 的推广网站
需要转化访客为客户且视觉出众的页面
具有卓越设计品质的专业营销页面
避免千篇一律"模板"美学的落地页
兼顾转化优化和令人难忘的品牌体验

设计思维：编码之前

在实现任何落地页之前，确定一个与品牌和产品一致的大胆美学方向：

1. 理解上下文

目的：这个产品解决什么问题？目标受众是谁？
品牌个性：品牌是趣味的、专业的、奢华的、极简的、大胆的、还是技术风的？
行业：该行业期望的视觉语言是什么（或者我们该打破它）？
差异化：什么能让这个品牌令人难忘？访客会记住的那一件事是什么？

2. 选择美学方向

选择一个极端方向并全力投入。示例：

极简与精致

极致干净的布局，大量留白
精致的排版，大尺寸对比
单色或限定色板（最多2-3种颜色）
微妙的微交互，优雅的过渡
适用于：奢侈品、专业服务、高端 SaaS

大胆与极繁

丰富复杂的视觉层次
动态动画和滚动效果
渐变网格、纹理和重叠元素
鲜艳色板和高对比度
适用于：创意公司、娱乐、年轻品牌

复古未来

怀旧元素搭配现代执行
几何图案、霓虹强调色
故障效果、扫描线、颗粒纹理
等宽或展示字体
适用于：游戏、科技初创公司、创意工具

有机与自然

柔和流畅的形状和渐变
自然灵感色彩（大地色、柔和色调）
模仿自然运动的流畅动画
圆角、柔和阴影
适用于：健康、可持续、食品

社论与杂志风

强烈的排版层次
打破网格的不对称布局
大幅有冲击力的图片
大胆使用留白和负空间
适用于：内容平台、媒体、教育

粗野主义与原始风

非常规布局，有意为之的"粗糙"
系统字体或刻意基础的排版
高对比度，有限色彩
极少或无动画
适用于：艺术、时尚、反传统品牌

关键：选择一个清晰的方向。大胆的极繁主义和精致的极简主义都可以——关键在于有意为之，而不是力度大小。在所有 11 个要素中精准一致地执行你选择的方向。

3. 定义设计系统

编码前确定以下核心决策：

排版选择

展示字体：选择独特且令人难忘的字体（不要用 Inter、Roboto、Arial 或系统字体）
- 考虑：Space Grotesk、Clash Display、Cabinet Grotesk、Syne、DM Serif Display、Zodiak、Fraunces、Archivo Black、Unbounded、Outfit
- 或明智使用 Google Fonts：Playfair Display、Crimson Pro、Libre Baskerville、Epilogue、Plus Jakarta Sans
- 绝不在不同项目中趋同于常见选择——保持字体多样性
正文字体：精致、可读的选择，与展示字体互补
- 考虑：DM Sans、General Sans、Switzer、Geist、Manrope、Karla、Work Sans
比例：建立清晰的层次（如 H1: 4rem -> H2: 3rem -> H3: 2rem -> Body: 1rem）

色彩方案

主色：品牌主色（60% 使用率）
强调色：高对比度 CTA 色（10% 使用率）
中性色板：灰色或大地色调（30% 使用率）
背景策略：纯色、渐变、纹理还是图案？
定义为 CSS 变量以保持一致性

动效策略

页面加载：主视觉区域元素的错位渐现（animation-delay）
滚动交互：渐入、视差还是滚动触发动画？
悬停状态：微妙缩放、颜色变化还是戏剧性变换？
CTA 动画：如何吸引注意力又不显得烦人？

空间方式

布局风格：居中对称？不对称动态？打破网格？
间距系统：紧凑密集？宽松通透？
区块流动：传统堆叠？对角线？重叠？

11 个核心要素框架

每个高效落地页必须包含这 11 个核心要素。基于 DESIGNNAS 经验证的高转化率落地页框架。

每个要素有两个要求：

功能要求（转化目标）- 必须包含
设计卓越性（记忆度）- 必须独特且精美

各要素设计指南

1. 含关键词的 URL

功能：SEO 优化的描述性 URL 结构设计：不适用（SEO 导向）

2. 公司 Logo（页头）

功能：品牌标识醒目放置（左上方） 设计卓越性：

考虑页面加载时的 Logo 动画
带平滑滚动过渡的固定页头
不同滚动状态的 Logo 变体
页头背景：透明 -> 带毛玻璃效果的实色
导航排版匹配展示字体

3. SEO 优化的标题和副标题（主视觉区）

功能：包含关键词的清晰价值主张 设计卓越性：

排版：做到巨大且令人难忘（4rem-6rem+）
在此使用独特展示字体
考虑渐变文字、描边文字或文字阴影增强冲击力
标题词语错位渐入动画（animation-delay）
副标题为标题的 50% 大小，不同字重或字体
通过换行和间距增添视觉节奏

4. 主 CTA（主视觉区）

功能：主视觉区域的核心行动号召按钮 设计卓越性：

让它不可能被忽视：尺寸、颜色对比、位置
避免无聊的矩形：考虑药丸形状、独特边框或几何形状
添加微交互：悬停缩放、阴影扩展、颜色变化
考虑主/次双 CTA 层次
在标题之后延迟出现的入场动画
添加视觉引导：箭头、图标或脉冲效果

5. 社会证明（Social Proof）（主视觉区）

功能：评价、评分、用户统计 设计卓越性：

数字应该巨大并在加载时带计数动画
统计卡片搭配渐变背景或精妙边框
客户头像以重叠圆形展示
星级评分使用自定义样式（非默认黄色星星）
"媒体报道"Logo 保持适当间距和透明度处理
考虑轮播证言或动态社会证明轮播

6. 图片或视频（媒体区域）

功能：产品/服务的视觉展示 设计卓越性：

关键：绝不使用占位符或通用图片
产品截图搭配设备模型（笔记本/手机框架）
增加深度：阴影、反射、3D 倾斜效果
考虑：浮动截图、视差滚动效果、视频背景
滚动时的图片揭示动画（渐入、滑入）
视频：自定义播放按钮设计，环境背景光晕
网格布局：不对称、重叠或 Bento Box 风格

7. 核心优势/功能

功能：3-6 个核心优势搭配图标 设计卓越性：

图标：定制设计或精心挑选（非通用线条图标）
考虑：渐变填充、悬停动画图标、3D 风格插画
卡片设计变体：毛玻璃态、新拟态、渐变边框、精妙阴影
用户滚动到此区域时的错位动画
不对称布局替代无聊的三栏网格
背景元素：微妙图案、渐变或装饰形状
排版：功能标题使用展示字体，粗体醒目

8. 客户评价

功能：4-6 条带照片的真实评价 设计卓越性：

照片处理：圆形头像搭配渐变边框或独特形状
卡片背景：微妙渐变、毛玻璃或提升阴影
引号标记：超大、装饰性或自定义样式
布局：瀑布流、轮播或错位垂直排列
评分星星：匹配品牌色板的自定义颜色
悬停效果：上浮、展开或发光
客户姓名和职位：精致排版

9. 常见问题区域

功能：5-10 个常见问题搭配手风琴 UI 设计卓越性：

手风琴动画：流畅的展开/折叠和缓动效果
图标：自定义箭头或加减号带旋转动画
问题的悬停状态
排版：问题使用粗体或不同字重
考虑：桌面端双栏布局，并排问答
背景：与上一区域微妙的色彩变化
间距：手风琴项内部大方的内边距

10. 最终 CTA

功能：底部的行动号召（二次转化机会） 设计卓越性：

打造成一个英雄时刻：这是最后的机会
全宽区域搭配戏剧性背景（渐变、图案或色彩）
CTA 按钮比主视觉区的 CTA 更大
增加紧迫感：倒计时、限量名额、稀缺性指标
周围搭配有说服力的文案和微收益点
动画：视差背景、浮动元素或滚动触发效果
考虑：邮箱输入 + 按钮组合（适用于邮件列表/候补名单）

11. 联系信息/法律页面（页脚）

功能：包含完整信息和法律链接的页脚 设计卓越性：

多栏布局搭配清晰的信息层次
社交图标：悬停效果（颜色变化、缩放或旋转）
邮件订阅：带内联按钮的样式化输入框
排版：较小但仍可读（14-16px）
背景：比正文更深或独特颜色
内容分隔：微妙的渐变线或装饰性分隔符
底部栏：版权和法律链接保持适当间距

关键：每个落地页必须包含全部 11 个要素，无例外。

详细说明请参见 references/11-essential-elements.md。

设计美学准则

排版卓越性

绝不使用通用字体：Inter、Roboto、Arial、Helvetica、system-ui
展示字体应独特且令人难忘
巧妙搭配：展示字体用于标题 + 精致正文字体用于文本
戏剧性比例：用明显的尺寸跳跃创建清晰层次（非微妙差异）
字间距：为展示字体调整（通常需要更紧的字距）
行高：展示 = 1.1-1.2，正文 = 1.6-1.8

色彩与视觉统一性

为所有颜色定义 CSS 变量（保持一致性）
主色应贯穿始终（不仅仅在 CTA 上）
强调色必须有足够的对比度满足无障碍要求（WCAG AA 最低标准）
避免：白底紫色渐变（被过度使用的 AI 美学）
背景：用渐变、网格、图案或纹理营造氛围
- 渐变网格：多色平滑渐变
- 噪点纹理：增加深度的微妙颗粒
- 几何图案：低透明度的点、线或形状
- 层叠透明度：重叠的彩色区域

动效与动画

页面加载：一次精心编排的入场动画配合错位渐现
- 主标题词语依次渐入（animation-delay: 0ms, 100ms, 200ms）
- 副标题跟随（delay: 300ms）
- CTA 最后出现（delay: 500ms）并带强调效果
滚动动画：区域进入视口时渐入
- 使用 Intersection Observer API 或 Framer Motion 的滚动触发
- 卡片错位进入（每个带递增延迟）
悬停状态：惊喜与愉悦
- 按钮：放大、阴影扩展、颜色变化
- 卡片：上浮效果带阴影
- 图片：微妙缩放或视差
性能：优先使用 CSS 动画而非 JavaScript
- 使用 transform 和 opacity（GPU 加速）
- 避免动画 width、height、top、left

空间构图与布局

打破网格：不要默认使用居中对称布局
不对称：一侧大文字，另一侧视觉元素
重叠元素：层叠区域增加深度
对角线流动：区域间的倾斜分隔线
大量留白或受控密集（选一种并坚持）
Z 轴思维：使用阴影、模糊和层叠营造深度

避免通用 AI 美学

这些模式会让落地页看起来"AI 生成"且令人遗忘：

不要：

Inter/Roboto/Arial 字体
白底紫色渐变
每次都完美居中对称的布局
通用线条图标
默认黄色星级评分
毫无个性的无聊矩形按钮
无视觉趣味的白色背景
千篇一律的三栏功能网格
人指着笔记本电脑的库存照片

要：

选择匹配品牌个性的独特字体
确定独特的色彩方案（不要总是紫色！）
创建不对称的意外布局
设计或选择有个性的图标
自定义所有 UI 元素以匹配美学
添加背景纹理、渐变或图案
各区域间变化布局
使用产品截图、定制插画或真实摄影

技术栈要求

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

必需技术

Next.js 14+ 搭配 App Router
TypeScript 保障类型安全
Tailwind CSS 用于样式
ShadCN UI 用于所有 UI 组件（必须大幅自定义！）
Framer Motion（可选）用于高级动画

需安装的 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 组件是起点，不是最终设计。必须大幅自定义：

修改组件文件中的默认样式
在 Tailwind 配置中添加自定义变体
通过 className 属性覆盖
创建品牌专属样式的包装组件

为什么选择 ShadCN UI？

无障碍：符合 WCAG 标准的组件（保持这一点！）
可定制：完全可用 Tailwind CSS 自定义（充分利用这一点！）
类型安全：使用 TypeScript 编写
性能：只复制需要的部分，最小化包体积
所有权：你拥有代码，可自由修改

项目结构

使用以下结构创建落地页：

landing-page/
├── app/
│   ├── layout.tsx          # 根布局（含元数据）
│   ├── page.tsx            # 主落地页
│   └── globals.css         # 全局样式
├── components/
│   ├── Header.tsx          # Logo 与导航（要素 2）
│   ├── Hero.tsx            # 标题、CTA、社会证明（要素 3-5）
│   ├── MediaSection.tsx    # 图片/视频（要素 6）
│   ├── Benefits.tsx        # 核心优势（要素 7）
│   ├── Testimonials.tsx    # 客户评价（要素 8）
│   ├── FAQ.tsx             # 常见问题手风琴（要素 9）
│   ├── FinalCTA.tsx        # 底部 CTA（要素 10）
│   └── Footer.tsx          # 联系与法律（要素 11）
├── public/
│   └── images/             # 优化后的图片
└── package.json

实施工作流程

步骤 1：先设计（关键）

在编写任何代码之前，完成设计思维部分：

理解品牌、受众和目的
选择美学方向（极简、极繁、复古等）
定义设计系统：
- 展示字体 + 正文字体
- 色彩方案（主色、强调色、中性色）
- 动效策略（页面加载、滚动、悬停）
- 空间方式（布局风格、间距）

在主组件文件顶部以注释形式记录这些决策。

步骤 2：建立设计系统（CSS 变量）

创建 globals.css 或 app.css：

@import url('https://fonts.googleapis.com/css2?family=Your+Display+Font&family=Your+Body+Font&display=swap');

:root {
  /* 排版 */
  --font-display: 'Your Display Font', sans-serif;
  --font-body: 'Your Body Font', sans-serif;

  /* 颜色 */
  --color-primary: #your-dominant-color;
  --color-accent: #your-accent-color;
  --color-neutral: #your-neutral-color;
  --color-background: #your-bg-color;

  /* 间距 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* 动画计时 */
  --duration-fast: 150ms;
  --duration-medium: 300ms;
  --duration-slow: 500ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 应用字体 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

body {
  font-family: var(--font-body);
}

更新 tailwind.config.ts 以使用设计系统：

export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['var(--font-display)'],
        body: ['var(--font-body)'],
      },
      colors: {
        primary: 'var(--color-primary)',
        accent: 'var(--color-accent)',
        // ... 等
      },
    },
  },
}

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

在 layout.tsx 或 page.tsx 中配置 SEO 元数据：

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'SEO 优化标题含关键词 | 品牌名',
  description: '包含主要关键词的引人注目的描述',
  keywords: ['关键词1', '关键词2', '关键词3'],
  openGraph: {
    title: 'OG 标题',
    description: 'OG 描述',
    images: ['/og-image.jpg'],
  },
}

步骤 4-9：组件构建、自定义、动画、响应式、性能和无障碍

按以下顺序构建组件，在每个组件上应用你的美学方向：

Header - 带平滑过渡的固定导航
Hero - 巨大排版、错位动画、醒目 CTA
MediaSection - 带深度展示（阴影、3D 效果）
Benefits - 不对称布局、自定义图标、滚动动画
Testimonials - 独特卡片设计、自定义头像
FAQ - 流畅手风琴带自定义样式
FinalCTA - 戏剧性全宽区域
Footer - 多栏搭配精致排版

确保移动优先响应式设计、性能优化和无障碍标准（WCAG AA）。

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

验证清单

完成落地页前，验证所有项目：

设计质量

已选择并一致执行美学方向
排版：独特展示字体（非 Inter/Roboto/Arial）
排版：戏剧性比例差异的清晰层次
色彩方案：已定义 CSS 变量，全局统一
背景：非纯白——有纹理/渐变/图案
动画：错位页面加载、滚动触发渐现
布局：非通用居中网格——有独特构图
ShadCN 定制：组件已大幅自定义，非默认
无通用 AI 美学：通过"这看起来像 AI 生成的吗？"测试

11 个核心要素（转化）

1. 含关键词的 URL
2. 公司 Logo（左上方，带动画）
3. SEO 优化标题和副标题（巨大排版）
4. 主视觉区主 CTA（独特设计，微交互）
5. 社会证明（评价、统计、带动画）
6. 图片或视频（带深度效果，非占位符）
7. 优势/功能区域（3-6 项，自定义图标，独特布局）
8. 客户评价（4-6 条，样式化卡片）
9. 常见问题区域（5-10 个问题，流畅手风琴）
10. 底部最终 CTA（戏剧性，全宽）
11. 页脚含联系和法律链接（多栏，精致）

技术要求

Next.js 14+ 搭配 App Router
TypeScript 类型已定义
Tailwind CSS 样式
ShadCN UI 组件已安装并自定义
元数据已配置（title, description, OG tags）
图片已使用 Next.js Image 组件优化
响应式设计已实现（移动优先）
无障碍标准已满足（WCAG AA）
性能已优化（懒加载、字体优化）
动画支持减少动效偏好

常见模式与美学建议

SaaS 产品落地页

转化重点：免费试用 CTA、功能对比、定价清晰、安全徽章 美学建议：极简专业、科技感前卫、或大胆自信

电商产品落地页

转化重点：产品图片、定价、配送信息、退货政策、紧迫感 美学建议：奢华/高端、活力/年轻、或自然/可持续

服务/代理机构落地页

转化重点：作品集/案例、流程说明、团队资质、联系表单 美学建议：创意/大胆、社论风格、或极简/作品集

活动/网络研讨会落地页

转化重点：日期/时间突出、演讲者简介、议程、注册表单、倒计时 美学建议：激动/动态、专业/会议、或社区/友好

移动应用落地页

转化重点：应用商店徽章、设备框架截图、功能亮点、演示视频 美学建议：现代/流畅、趣味/有趣、或截图导向

备注与理念

核心原则

转化 + 记忆度：落地页必须既能转化又令人难忘
有意为之的设计：每个美学选择都应是刻意的，而非默认的
杜绝通用 AI 美学：避免让品牌变得平庸的"AI 生成"外观
设计系统先行：编码前定义字体、颜色、动效
全面自定义：ShadCN 只是起点，不是最终设计

框架来源

11 个核心要素基于 DESIGNNAS 经验证的转化框架
设计卓越性原则改编自高品质前端设计实践
二者结合创建在功能上有效且视觉上卓越的落地页

最好的落地页既能转化，也能激励。

落地页（Landing Page）设计指南 v2

落地页（Landing Page）设计指南 v2

概述

使用场景

设计思维：编码之前

1. 理解上下文

2. 选择美学方向

3. 定义设计系统

11 个核心要素框架

各要素设计指南

1. 含关键词的 URL

2. 公司 Logo（页头）

3. SEO 优化的标题和副标题（主视觉区）

4. 主 CTA（主视觉区）

5. 社会证明（Social Proof）（主视觉区）

6. 图片或视频（媒体区域）

7. 核心优势/功能

8. 客户评价

9. 常见问题区域

10. 最终 CTA

11. 联系信息/法律页面（页脚）

设计美学准则

排版卓越性

色彩与视觉统一性

动效与动画

空间构图与布局

避免通用 AI 美学

技术栈要求

必需技术

需安装的 ShadCN UI 组件

为什么选择 ShadCN UI？

项目结构

实施工作流程

步骤 1：先设计（关键）

步骤 2：建立设计系统（CSS 变量）

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

步骤 4-9：组件构建、自定义、动画、响应式、性能和无障碍

验证清单

设计质量

11 个核心要素（转化）

技术要求

常见模式与美学建议

SaaS 产品落地页

电商产品落地页

服务/代理机构落地页

活动/网络研讨会落地页

移动应用落地页

备注与理念

核心原则

框架来源

相关技能 Related Skills

UI 样式技能

前端设计技能（Frontend Design）

前端设计