bear2u/my-skills

着陆页指南 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. 功能要求（为转化）——必须包含
2. 设计卓越（为记忆点）——必须独特且美观

逐要素设计指南

1. 包含关键词的 URL

功能：针对 SEO 优化的、描述性的 URL 结构 设计：不适用（专注 SEO）

2. 公司 Logo（页眉）

功能：品牌标识突出显示（左上角） 设计卓越：

• 考虑页面加载时动画 Logo
• 固定页眉，带有平滑的滚动过渡
• 不同滚动状态的标志变体
• 页眉背景：透明 → 实色加背景模糊
• 导航排版与展示字体选择匹配

3. 针对 SEO 优化的标题和副标题（首屏）

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

• 排版：使其巨大且令人难忘（4rem-6rem+）
• 在此使用你独特的展示字体
• 考虑渐变文字、轮廓文字或文字阴影以增强冲击力
• 使用错开淡入（animation-delay）对标题词语进行动画处理
• 副标题大小应为标题的 50%，不同字重或字体
• 使用换行和间距添加视觉节奏

4. 主要 CTA（首屏）

功能：首屏区域的主要行动号召按钮 设计卓越：

• 使其无法忽略：大小、颜色对比、位置
• 避免无聊的矩形：考虑药丸形状、独特边框或几何形状
• 添加微交互：悬停缩放、阴影扩展、颜色变化
• 考虑具有主要/次要层次的双 CTA
• 吸引眼球的入场动画（在标题之后延迟）
• 添加视觉提示：箭头、图标或脉动效果

5. 社交证明（首屏）

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

• 数字应巨大，并在加载时动画（计数效果）
• 带有渐变背景或柔和边框的统计卡片
• 客户头像以交叠圆圈形式显示
• 自定义样式的星级评分（不是默认的黄色星星）
• “曾亮相于”Logo，带有合适的间距和不透明度处理
• 考虑轮播式推荐或动画社交证明轮播

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

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

• 关键：永远不要使用占位符或通用图片
• 带有设备样机的产品截图（笔记本/手机框）
• 增加深度：阴影、反射、3D 倾斜效果
• 考虑：浮动截图、视差滚动效果、视频背景
• 滚动时图片呈现动画（淡入、滑入）
• 对于视频：自定义播放按钮设计、环境背景发光效果
• 网格布局：不对称、重叠或便当盒风格

7. 核心优势/功能

功能：3-6 个关键优势，带图标 设计卓越：

• 图标：自定义设计或精心挑选（不是通用线形图标）
• 考虑：填充渐变、悬停动画图标、3D 风格插图
• 卡片设计变体：玻璃拟态、新拟态、渐变边框、柔和阴影
• 用户滚动到此版块时错开动画
• 不对称布局，而非无聊的三列网格
• 背景元素：柔和图案、渐变或装饰形状
• 排版：功能标题使用展示字体，粗体且突出

8. 客户评价

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

• 照片处理：带有渐变边框或独特形状的圆形头像
• 卡片背景：柔和渐变、磨砂玻璃或抬高阴影
• 引号：超大、装饰性或自定义样式
• 布局：瀑布流、轮播或错开垂直排列
• 评分星星：与品牌调色板匹配的自定义颜色
• 悬停效果：抬起、展开或发光
• 客户姓名和头衔：精致排版

9. FAQ 版块

功能：5-10 个常见问题，使用手风琴 UI 设计卓越：

• 手风琴动画：平滑展开/折叠，带缓动效果
• 图标：自定义箭头或带旋转的加号/减号
• 问题上的悬停状态
• 排版：问题加粗或不同字重
• 考虑：桌面端两列布局，并排 Q&A 对
• 背景：与上一版块相比微妙的颜色变化
• 间距：手风琴项目内充足的 padding

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 元素的样式以匹配美学
• ✅ 添加背景纹理、渐变或图案
• ✅ 在不同版块中变化布局
• ✅ 使用产品截图、自定义插图或真实摄影

技术栈要求

当

…（原文已截断，翻译据此处理）