landing-page-guide-v2

落地页指南 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 → 正文：1rem）

配色方案

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

动效策略

• 页面加载：为主视觉区域元素设置 animation-delay，依次显示
• 滚动交互：采用淡入上移、视差效果还是滚动触发动效？
• 悬停状态：轻微缩放、颜色变化还是明显变形？
• CTA 动效：如何让按钮吸引注意力，又不令人厌烦？

空间布局

• 布局风格：居中对称？非对称且富有动感？打破网格？
• 间距系统：紧凑密集？宽松通透？
• 区块流向：传统的垂直堆叠？对角布局？相互叠加？

11 项核心要素框架

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

每项要素都有两项要求：

1. 功能要求（促进转化）——必须包含
2. 设计卓越性（令人印象深刻）——必须独具特色且美观

逐项设计指南

1. 包含关键词的 URL

功能要求：符合 SEO 优化要求、结构清晰且具有描述性的 URL 设计要求：不适用（侧重 SEO）

2. 公司徽标（页眉）

功能要求：将品牌标识醒目地放置在页面上方左侧 设计卓越性：

• 考虑让徽标在页面加载时动态显示
• 使用粘性页眉，并在滚动时平滑过渡
• 根据不同的滚动状态使用不同版本的徽标图标
• 页眉背景：从透明过渡为带背景模糊效果的纯色
• 导航字体应与所选展示字体相匹配

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

功能要求：通过关键词清晰地传达价值主张 设计卓越性：

• 字体排版：让标题巨大且令人难忘（4rem-6rem 以上）
• 在此处使用独特的展示字体
• 考虑使用渐变文字、空心文字或文字阴影来增强视觉效果
• 为标题文字添加依次淡入效果（使用 animation-delay）
• 副标题字号应为标题的 50%，并使用不同的字重或字体
• 通过换行和间距营造视觉韵律

4. 主 CTA（主视觉区域）

功能要求：在主视觉区域放置主要行动号召按钮 设计卓越性：

• 让它绝对醒目：通过尺寸、颜色对比和位置吸引注意力
• 避免呆板的矩形：可考虑胶囊形状、独特边框或几何形状
• 添加微交互：悬停缩放、阴影扩展、颜色变化
• 考虑使用两个 CTA，并区分主要与次要层级
• 添加吸引视线的入场动效（在标题动效之后延迟显示）
• 添加视觉提示：箭头、图标或脉冲效果

5. 社会认同（主视觉区域）

功能要求：评论、评分、用户统计数据 设计卓越性：

• 数字应足够醒目，并在加载时通过递增动画显示
• 统计卡片采用渐变背景或精致边框
• 客户头像以重叠圆形排列
• 星级评分采用自定义样式（不要使用默认的黄色星星）
• “媒体报道”标志之间留出适当间距，并妥善处理透明度
• 考虑使用轮播评价或动态社会认同轮播组件

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

功能：直观展示产品／服务 卓越设计：

• 至关重要：绝不要使用占位图或通用图片
• 使用带设备样机（笔记本电脑／手机边框）的产品截图
• 增添纵深感：阴影、倒影、3D 倾斜效果
• 可考虑：悬浮截图、视差滚动效果、视频背景
• 滚动时触发图片显现动画（向上淡入、滑入）
• 对于视频：定制播放按钮设计、环境背景光晕
• 网格布局：非对称、重叠式或便当盒风格

7. 核心优势／功能

功能：展示 3–6 项关键优势并配有图标 卓越设计：

• 图标：定制设计或精心挑选（不要使用通用线条图标）
• 可考虑：渐变填充、悬停时图标动画、3D 风格插画
• 卡片设计变化：玻璃拟态、新拟态、渐变边框、柔和阴影
• 用户滚动到此区块时，依次播放动画
• 使用非对称布局，避免单调的三列网格
• 背景元素：柔和图案、渐变或装饰形状
• 排版：功能标题使用展示字体，醒目突出

8. 客户评价

功能：展示 4–6 条附有照片的真实评价 卓越设计：

• 照片处理：圆形头像，搭配渐变边框或独特形状
• 卡片背景：柔和渐变、磨砂玻璃或悬浮阴影
• 引号：放大、装饰性或定制样式
• 布局：瀑布流网格、轮播或错落纵向排列
• 评分星级：使用与品牌配色相符的自定义颜色
• 悬停效果：上浮、展开或发光
• 客户姓名和职务：采用精致的字体排版

9. 常见问题区块

功能：通过手风琴 UI 展示 5–10 个常见问题 卓越设计：

• 手风琴动画：使用缓动效果，平滑展开／收起
• 图标：自定义箭头或加号／减号，并添加旋转效果
• 问题添加悬停状态
• 排版：问题使用粗体或不同字重
• 可考虑：桌面端采用双列布局，或并排展示问答
• 背景：与前一区块相比，色调略有变化
• 间距：手风琴条目内部留足内边距

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 风格泛滥）
• 背景：使用渐变、网格、图案或纹理营造氛围
  • 渐变网格：平滑融合的多色渐变
  • 噪点纹理：以细微颗粒增加层次感
  • 几何图案：使用低不透明度的点、线或形状
  • 分层透明效果：叠加不同颜色的区块

动效与动画

• 页面加载：编排一次流畅的入场动画，并依次展现元素
  • Hero 标题的单词依次淡入（animation-delay: 0ms、100ms、200ms）
  • 随后显示副标题（延迟：300ms）
  • 最后突出显示 CTA（延迟：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          # 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：先设计（至关重要）

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

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

在主组件文件顶部的注释中记录这些决定。

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

使用设计系统创建 globals.css 或 app.css：

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

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

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

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

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

/* Apply fonts */
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)',
        // ... etc
      },
    },
  },
}

步骤 3：设置元数据（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'],
  },
}

步骤 4：构建组件结构并进行设计

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

1. Header - 粘性导航，带平滑过渡效果
2. Hero - 超大字号排版、交错动画、醒目的 CTA
3. MediaSection - 具有纵深感的展示（阴影、3D 效果）
4. Benefits - 非对称布局、自定义图标、滚动时播放动画
5. Testimonials - 独特的卡片设计、自定义头像
6. FAQ - 带自定义样式的平滑折叠面板
7. FinalCTA - 戏剧性的全宽版块
8. Footer - 多列布局，搭配精致的字体排版

步骤 5：自定义 ShadCN 组件

将各版块映射到 ShadCN 组件，并进行大幅自定义：

Hero CTA 示例：

<Button
  size="lg"
  className="bg-accent hover:bg-accent/90 text-white px-12 py-6 text-xl font-display rounded-full shadow-2xl hover:shadow-accent/50 hover:scale-105 transition-all duration-300"
>
  Get Started →
</Button>

Benefits 卡片示例：

<Card className="border-2 border-primary/10 hover:border-primary/30 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 bg-gradient-to-br from-white to-primary/5">
  {/* Custom content */}
</Card>

步骤 6：实现动画

添加入场动画和滚动效果：

// Hero title with staggered animation
<h1 className="text-6xl font-display font-bold">
  <span className="inline-block animate-fade-in" style={{ animationDelay: '0ms' }}>
    Beautiful
  </span>{' '}
  <span className="inline-block animate-fade-in" style={{ animationDelay: '100ms' }}>
    Landing
  </span>{' '}
  <span className="inline-block animate-fade-in" style={{ animationDelay: '200ms' }}>
    Pages
  </span>
</h1>

// Add to globals.css
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in var(--duration-slow) var(--easing) both;
}

对于滚动动画，请使用 Intersection Observer 或 Framer Motion。

步骤 7：实现响应式设计

确保采用移动优先的响应式设计，并保持品牌一致性：

• 使用 Tailwind 响应式前缀：sm:、md:、lg:、xl:
• 测试所有断点：640px（sm）、768px（md）、1024px（lg）、1280px（xl）
• 最小触控目标尺寸：按钮为 44x44px
• 基础字号：移动端至少为 16px
• 在所有断点保持设计系统一致（颜色、字体保持一致）
• 调整布局：移动端堆叠排列，桌面端并排排列

步骤 8：优化性能

• 所有图片均使用 Next.js Image 组件
• 为首屏图片（hero 版块）添加 priority 属性
• 为首屏以下的内容实现延迟加载
• 优化字体：网页字体使用 font-display: swap
• 尽可能使用 CSS 动画，而非 JavaScript
• 尽量减小打包体积：对未使用的 ShadCN 组件进行 Tree-shaking

步骤 9：确保无障碍性

• 使用语义化 HTML5 元素（<header>、<main>、<section>、<footer>）
• 为仅含图标的按钮添加 ARIA 标签
• 确保键盘导航有效（使用 Tab 键测试）
• 为所有图片提供描述性替代文本
• 确保颜色对比度充足（WCAG AA 最低标准：文本为 4.5:1）
• 为偏好减少动态效果的用户测试动画：

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

组件示例

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

此参考文件包含：

• 带 Button、Badge 和 Image 优化的 Hero 版块
• 使用 Card 组件的 Benefits 版块
• 使用 Avatar 和 Card 的 Testimonials 版块
• 使用 Accordion 的 FAQ 版块
• 使用 Card 和 Button 的 Final CTA
• 带 Separator 和链接的 Footer

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

验证清单

完成任何落地页之前，请确认以下所有项目：

设计品质 ⭐

• 选定美学方向，并保持一致
• 排版：采用有特色的展示字体（不要使用 Inter/Roboto/Arial）
• 排版：层级清晰，字号差异鲜明
• 配色方案：定义 CSS 变量，整体协调一致
• 背景：不要使用纯白背景，应加入纹理、渐变或图案
• 动画：页面加载时依次呈现，滚动时触发内容显示
• 布局：避免使用常见的居中网格，采用独特的构图
• ShadCN 定制：深度定制组件，不使用默认样式
• 避免千篇一律的 AI 美学：通过“看起来像 AI 生成的吗？”测试

11 个关键要素（转化）✅

• 1. 包含关键词的 URL
• 2. 公司徽标（左上角，带动画）
• 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 组件
• 配置 SEO 元数据（标题、描述、OG 标签）
• 使用 Next.js Image 组件优化图片
• 实现响应式设计（移动优先）
• 符合无障碍标准（WCAG AA）
• 优化性能（延迟加载、字体优化）
• 支持动画的减少动态效果设置

最终润色 💎

• 所有字体均已正确加载（在浏览器 DevTools 中检查）
• 已测试颜色对比度（使用浏览器 DevTools）
• 已在手机、平板和桌面设备上测试
• 键盘导航正常工作
• 悬停状态体验出色
• 不含 Lorem Ipsum 或占位内容
• 品牌独特且令人印象深刻

最佳实践

设计优先的方法

• 编码前始终先进行设计思考
• 在注释中记录美学方向
• 实施前先创建情绪板或准备参考图片
• 不要默认选择“稳妥”的方案——大胆突破创意边界
• 请记住：转化源于信任，而信任源于专业性与独特性

内容指南

• 撰写清晰、突出利益点且符合品牌调性的文案
• 在 CTA 中使用行动导向的语言（动词 + 利益点）
• 采用恰当的标题，让各板块内容一目了然
• 加入具体数字和统计数据（增强可信度）
• 使用真实姓名和照片，呈现真实的客户评价
• 语气与美学相匹配：活泼的设计 → 活泼的文案，专业的设计 → 权威的文案

排版最佳实践

• 绝不在排版上妥协——它占设计的 80%
• 使用大字号（4rem+）展示字体，发挥其优势
• 保持各板块的行高一致
• 策略性地使用不同字重（纤细体现优雅，粗体增强冲击力）
• 在真实设备上测试可读性，而不只是使用开发工具
• 高效加载字体：只加载实际使用的字重

色彩与视觉一致性

• 预先将所有颜色定义为 CSS 变量
• 至少在 3-4 处使用主色（不只是徽标）
• 强调色应具有高对比度，并谨慎使用
• 使用浏览器 DevTools 或在线工具检查颜色对比度
• 浅色背景上的深色文字应接近黑色（#1a1a1a），而非纯黑
• 考虑色彩心理学：蓝色 = 信任，绿色 = 成长，红色 = 紧迫感，紫色 = 创意

动画与动效指南

• 少即是多：一个出色的页面入场动画 > 零散的微动画
• 使用 animation-delay 营造节奏感和流畅感
• 始终尊重 prefers-reduced-motion
• 在实际设备上测试——动画在 60Hz 和 120Hz 屏幕上的观感不同
• 避免使用会分散用户对 CTA 注意力的动画
• 使用缓动函数：cubic-bezier(0.4, 0, 0.2, 1) 平滑且专业

SEO 优化

• 在 H1、H2 和首段中自然地包含关键词
• 使用规范的标题标签结构（H1 → H2 → H3），且只使用一个 H1
• 为所有图片添加描述性替代文本（兼顾 SEO 和无障碍访问）
• 优化页面加载速度（Core Web Vitals 至关重要）
• 编写能吸引用户点击的优质元标签
• 使用 Schema 标记业务／产品信息

转化优化

• 主要 CTA：放在首屏上方，确保醒目突出
• 最终 CTA：抓住最后的转化机会，营造强烈效果
• 降低阻力：尽量减少表单字段，清晰传达价值主张
• 突出信任信号：评价、推荐语、“媒体报道”徽标
• CTA 使用对比鲜明的颜色（应当醒目）
• 测试不同的 CTA 文案：“开始免费试用”与“免费试用 14 天”
• 适当营造紧迫感：名额有限、限时优惠
• 展示真人面孔：配有真实照片的推荐语转化效果更好

性能最佳实践

• 优化图片：使用 WebP 格式、设置合适尺寸、启用延迟加载
• 字体加载策略：使用 font-display: swap 避免 FOIT（文本不可见闪烁）
• 尽量减少 JavaScript：尽可能使用 CSS 动画
• 代码拆分：对大型组件使用动态导入
• 预获取关键资源
• 目标：LCP < 2.5s，FID < 100ms，CLS < 0.1

常见模式与美学建议

不同类型的落地页有不同的转化目标，也能展现独特的美学风格：

SaaS 产品落地页

转化重点：免费试用 CTA、功能对比、清晰的定价、安全徽章 美学建议：

• 极简且专业：整洁的布局、充足的留白、精致的字体排印
• 科技感：渐变背景、细腻的动画、现代无衬线字体
• 大胆且自信：大字号排版、高对比度 CTA、动态悬停状态 避免：千篇一律的蓝色渐变、咖啡馆里笔记本电脑的图库照片

电商产品落地页

转化重点：产品图片、定价、配送信息、退货政策、紧迫感 美学建议：

• 奢华／高端：优雅的衬线字体、单色调色板、宽裕的留白
• 活力／年轻：大胆的色彩、活泼的字体、动态布局、鲜艳的 CTA
• 自然／可持续：大地色调、有机形状、柔和阴影、圆角 避免：杂乱的布局、过多相互竞争的视觉元素

服务／代理机构落地页

转化重点：作品集／案例研究、流程说明、团队资历、联系表单 美学建议：

• 创意／大胆：非对称布局、独特的字体排印、以作品集作为主视觉
• 编辑风格：杂志式布局、大幅图片、鲜明的字体层级
• 极简／作品集：作品网格、精简文本，让作品本身说话 避免：千篇一律的“专业”模板、图库照片

活动／网络研讨会落地页

转化重点：醒目的日期／时间、演讲者简介、议程、报名表单、倒计时器 美学建议：

• 令人振奋／动感十足：动态倒计时、渐变背景、充满活力的色彩
• 专业／会议风格：整洁的布局、带边框的演讲者头像、议程时间线
• 社群／友好：温暖的色彩、圆形头像、强调社会认同 避免：乏味的项目符号议程、千篇一律的会议风格

移动应用落地页

转化重点：App Store 徽章、设备边框中的截图、功能亮点、演示视频 美学建议：

• 现代／简洁：带 3D 倾斜效果的设备模型、悬浮截图、流畅动画
• 活泼／有趣：鲜艳的色彩、插画风格图标、角色吉祥物
• 以截图为主：将大型手机模型作为首屏主视觉，尽量减少文字，通过视觉讲述故事 避免：过小的截图、千篇一律的应用图标

资源

references/

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

• 11-essential-elements.md - 对 11 个必要元素的深入说明，涵盖原则、实施技巧和示例
• component-examples.md - 使用 ShadCN UI 编写的完整生产就绪组件代码，涵盖所有主要版块

在实现特定版块或需要了解某个元素的详细指南时，按需加载这些参考资料。

备注与理念

核心原则

1. 转化 + 令人难忘：落地页必须既能促成转化，又令人难忘
2. 有意为之的设计：每项美学选择都应经过深思熟虑，而不是沿用默认设置
3. 拒绝千篇一律的 AI 美学：避免采用让品牌变得平庸、令人过目即忘的“AI 生成”风格
4. 设计系统优先：编码前先定义字体、颜色和动效
5. 全面定制：ShadCN 是起点，而非最终设计

框架来源

• 11 个必要元素：基于 DESIGNNAS 经验证的转化框架
• 卓越设计：借鉴高品质前端设计实践中的原则
• 将两者结合，打造功能有效且视觉效果出众的落地页

适配指南

• 根据具体品牌规范和目标受众进行调整
• 通过 A/B 测试持续提升转化率
• 平衡转化优化与创意表达
• 如有疑问，大胆尝试——千篇一律的页面既不能促成转化，也无法打动人心

成功指标

转化指标：

• CTA 的点击率
• 表单提交率
• 滚动深度（用户是否浏览到了全部 11 个元素？）
• 跳出率和页面停留时间

品牌指标：

• 用户对设计质量的反馈
• 落地页在社交媒体上的分享情况
• 用户调查中的品牌记忆度
• 与竞争对手的差异化程度

请记住

每个落地页都是留下难忘第一印象的机会。11 个必要元素有助于促成转化，出色的设计则能让用户记住你的品牌。两者不可偏废。

最好的落地页既能促成转化，也能激发灵感。