landing-page-design

落地页设计

概述

打造既能转化又能吸引人的落地页。此技能将聚焦转化的结构与独特的视觉设计相结合，创造出在 AI 饱和的世界中脱颖而出的页面。目标：制作价值 50-100 美元、你引以为豪并愿意出售的页面。

强制步骤：氛围探索（先做这个）

在编写任何代码之前，你必须运行氛围探索流程。 这不是查找表——而是一个创意提示，每次都会生成独特的审美方向。

目标：即使产品相似，也不应有两个落地页看起来雷同。

---

氛围探索流程

向用户提出这些问题，然后综合出一个独特方向。不要只是将答案映射到预设。

第 1 步：收集背景（提出这些问题）

Q1：这个品牌在现实世界中会是什么地方或物体？

不是“什么行业”——而是一个具体实际的东西。凌晨 2 点的东京便利店。祖母的厨房。粗野主义停车楼。珊瑚礁。波音 747 的驾驶舱。马拉喀什的跳蚤市场。1970 年代的录音室。

Q2：用户在前 3 秒内应该感受到的唯一情感是什么？

选择一种：平静。充满活力。好奇。信任。愉悦。印象深刻。叛逆。怀旧。受启发。有趣。精致。受欢迎。感兴趣。自信。

Q3：选择两种意外的影响进行碰撞：

示例：“医疗包装 + 滑板图形”、“电子表格 + 街头艺术”、“豪华酒店 + 朋克杂志”、“NASA 任务控制中心 + 幼儿园”、“日本便利店 + 维多利亚时代图书馆”

Q4：这个页面绝不能被误认为是什么？

列出 2-3 个要主动避免的具体事物。“一个加密项目”、“一个健康应用”、“银行做的东西”、“任何带紫色渐变的东西”

第 2 步：创造审美（不要查阅——去创造）

根据答案，通过决定以下内容来创造独特的氛围：

色彩创造（不要使用记忆中的调色板——从地方/物体推导）

• Q1 中那个现实世界的地方/物体中存在哪些颜色？
• 提取 3-4 种感觉真实于该参照的颜色
• 新创具体的十六进制色码——不要复用以前项目的色码
• 给你的调色板起一个富有感染力的名字（不是“蓝色和橙色”，而是“午夜杂货店”或“锈带清晨”）

字体排印创造（匹配碰撞的声音）

• 在那个地方，文字听起来会是什么样？
• 找一种体现 Q3 碰撞的展示字体
• 不要默认使用你常用的选择——用新鲜的眼光浏览 Google Fonts
• 考虑：字重、宽度、对比度、特点

布局创造（从物理空间推导）

• Q1 中那个地方的空间是如何组织的？
• 是拥挤还是开阔？网格状还是有机？垂直还是水平？
• 什么样的意外布局选择能体现 Q3 的碰撞？

动效创造（匹配情感）

• Q2 中的情感如何运动？
• 平静 = 几乎察觉不到。充满活力 = 动态。精致 = 缓慢而从容。
• 定义这个页面的一个标志性动效是什么？

第 3 步：写出你的氛围规格

在编码之前，明确写出：

VIBE NAME: [Invent a 2-3 word name]
REFERENCE: [The place/object from Q1]
EMOTION: [From Q2]
COLLISION: [From Q3]
ANTI-PATTERNS: [From Q4]

COLORS:
- Primary: [hex] - [why this color]
- Secondary: [hex] - [why]
- Background: [hex] - [why]
- Accent: [hex] - [why]
- Palette name: [evocative name]

TYPOGRAPHY:
- Display: [specific font name] - [why it fits]
- Body: [specific font name] - [why]
- Character: [describe the voice]

LAYOUT:
- Density: [sparse/balanced/dense]
- Shapes: [sharp/rounded/organic/mixed]
- Signature element: [one unusual layout choice]

MOTION:
- Level: [still/subtle/moderate/dynamic/chaotic]
- Signature animation: [one specific animation that defines this]

WILDCARD:
- One unexpected detail that doesn't "match" but makes it memorable

第 4 步：新鲜度检查

在继续之前，验证：

• 我没有复用最近 3 个项目中的十六进制色码
• 我没有默认使用我的“舒适”字体（检查：我在用 Inter 吗？Nunito？Space Grotesk？如果是，找别的）
• Q3 中的碰撞在我的选择中确实可见
• 别人无法把这个误认为我之前的落地页
• 我加入了一个连我自己都惊讶的 wildcard

---

氛围探索示例

Q1 - 地方/物体： “高峰时段的日本火车站”

Q2 - 情感： “自信”

Q3 - 碰撞： “交通标识 + 高级定制时装”

Q4 - 绝不能被误认为： “一个冥想应用、任何异想天开的东西、创业兄弟科技”

生成的氛围规格：

VIBE NAME: Shinjuku Runway
REFERENCE: Japanese train station at rush hour
EMOTION: Confident
COLLISION: Transit signage + haute couture
ANTI-PATTERNS: No soft gradients, no playful illustrations, no rounded friendly shapes

COLORS:
- Primary: #1a1a1a - the black of train doors
- Secondary: #f5f5f0 - platform concrete, worn smooth
- Background: #fafaf8 - fluorescent-lit white
- Accent: #e60012 - JR line red, commanding attention
- Palette name: "Platform Edge"

TYPOGRAPHY:
- Display: Darker Grotesque - confident, slightly condensed, European edge
- Body: Noto Sans JP - clean utility, transit-inspired
- Character: Authoritative but not cold. Clear. Directional.

LAYOUT:
- Density: Rich but organized - like a station map
- Shapes: Sharp with intentional rounded exceptions (like train windows)
- Signature element: Strong horizontal bands that divide sections like train schedules

MOTION:
- Level: Subtle but precise
- Signature animation: Elements slide in from the side like arriving trains - horizontal, smooth, with exact timing

WILDCARD:
- One element uses a fabric-like texture overlay - the haute couture collision

---

灵感起点（当卡在 Q1 时）

空间： 曼谷夜市 | 闭馆时的空博物馆 | 凌晨 4 点的机场休息室 | 复古唱片店 | 医院候诊室 | 赌场大厅 | 冬季温室 | 地铁站台 | 天文台穹顶 | 废弃工厂 | 豪华游艇内部 | 24 小时自助洗衣店 | 图书馆珍本室 | 汽车车身修理厂 | 空间站舱段

物件： 1980 年代合成器 | 手术器械 | 复古行李箱 | 竞速摩托车 | 古董指南针 | 工业织机 | 霓虹灯牌 | 打字机 | 科学玻璃器皿 | 皮革装订书 | 电路板 | 瓷器餐具

时代/运动： 苏联构成主义 | 孟菲斯设计 | 瑞士国际主义 | 新艺术运动 | 包豪斯 | 风格派 | 古吉建筑 | 流线型现代主义 | 粗野主义 | 日本新陈代谢派 | 斯堪的纳维亚现代主义 | 意大利未来主义

---

反趋同规则

1. 不记忆十六进制色码 - 从参考中重新生成颜色，不要回想“我常用的蓝色”
2. 必须轮换字体 - 不能在连续项目中使用相同的展示字体
3. 碰撞必须可见 - 如果别人看不出 Q3 的两种影响，就再用力一些
4. 必须加入通配元素 - 每种氛围都需要一个“不搭”但让它独特的元素
5. 为它命名 - 未命名的氛围会变得泛泛。命名的氛围才有身份。

---

快速背景问题（最小版本）

如果用户只说“给我做一个落地页”而没有背景，就问：

1. “哪个地方或物件能捕捉这个品牌的能量？”
2. “哪种情绪应该占主导？”
3. “它绝对不该看起来像什么？”

然后根据这三个答案综合出一种氛围。

---

强制要求：文案策略（与氛围探索一起完成）

将此项与氛围探索并行执行。 氛围探索给你外观。文案策略给你文字。两者都必须在写任何代码之前完成。

转化方程式

每一个文案决策都源于此：

Purchase Rate = Desire - (Labor + Confusion)

• 增加欲望 → 清晰而具体地传达价值
• 减少阻力 → 简洁、可扫读的结构、明确的下一步行动
• 减少困惑 → 准确说明它是什么，让按钮不容错过

如果你卡在某个文案决策上，就问：“这会增加欲望，还是减少阻力/困惑？”

第 1 步：异议挖掘

在写任何一个标题之前，先找出购买异议。问用户：

“是什么几乎让你的客户没有购买？” “为什么非客户至今还没有购买？”

常见异议类别：

• “我没有这项技能/时间”
• “这不会适用于我的具体情况”
• “以我得到的东西来说，这太贵了”
• “我还没有足够信任它”
• “我不明白这实际上是做什么的”

写下前 3 个异议。它们会驱动你的标题钩子、功能文案和 CTA 框架。

第 2 步：标题公式

每个主视觉标题都遵循：价值主张 + 钩子

价值主张必须通过这个试金石：

如果访客只看到标题、别的什么都看不到，他们会 exact 地知道你卖什么吗？

❌ “改进你的工作流”（企业空话——什么的工作流？） ❌ “生产力的未来”（没有说出任何具体内容） ✅ “杂货 1 小时送达”（具体、明确、清晰） ✅ “可视化设计网站——无需代码”（它做什么 + 关键异议已处理）

钩子是以下两种类型之一：

A 型——大胆、具体的断言（触发好奇）：

• “把部署时间从 4 小时缩短到 12 分钟”
• “上个月有 10,000 个团队更快发布”

B 型——处理异议（移除第 1 大购买障碍）：

• “无需信用卡”（处理信任异议）
• “可与你现有的工具配合使用”（处理切换成本异议）
• “5 分钟完成设置”（处理投入异议）

使用第 1 步中的首要异议来选择钩子类型。

第 3 步：副标题规则

副标题只做两件事：

1. 说明产品是什么（如果主标题侧重于利益）
2. 说明那个大胆主张如何成立（如果主标题提出了主张）

最多：1-2 句话。保持轻快。如果你需要三句话，说明你的主标题做得还不够。

第 4 步：功能文案结构

每个功能恰好包含三个要素：

要素	规则
功能标题	只写简短的价值主张。直截了当。❌“赋能你的团队” ✅“实时协作”
功能段落	简洁描述 + 回应一个关键异议。如有需要，链接到详情——不要大段文字。
功能图片	展示产品实际运作中的样子。对于软件：GIF > 截图 > 抽象艺术。对于实体商品：使用场景 + 做工细节特写。

每个功能都应回溯到主视觉区域的主导价值主张。功能不是随机的——它们是你首屏主张的证据。

第 5 步：CTA 文案

CTA 必须延续主视觉区域的叙事，而不是通用套话。

❌“开始使用”/“申请演示”/“注册”（偷懒、缺乏语境） ✅“查找附近的餐食”（延续外卖叙事） ✅“开始设计”（延续设计工具叙事） ✅“查看你的节省金额”（延续金融叙事）

CTA 按钮文案读起来应像主标题之后的自然下一句话。

第 6 步：社会证明策略

如果你有知名客户/媒体：

• 在跑马灯中展示 Logo——制造 FOMO（“所有人都已经知道这个了”）
• 突出亮眼数据（客户数量、处理营收等）

如果你还没有知名的社会证明（冷启动）：

• 向 3-5 家可识别的公司提供免费使用权，然后展示它们的 Logo
• 使用带有真实姓名和照片的具体证言（即使是来自 beta 用户）
• 展示汇总统计（“500+ 团队正在使用”胜过空荡荡的 Logo 栏）
• 考虑用“曾被报道于”列出任何媒体报道、播客或新闻简报

不要造假。空的社会证明区块比完全没有这个区块更糟。

第 7 步：多受众分流

如果你的产品服务于不同的人群（例如个人 vs 团队、开发者 vs 设计师）：

在页面靠近顶部的位置添加一个**“选择你自己的冒险”**元素，将访客引导到相关区块。示例：

• 切换标签：“面向开发者”/“面向设计师”
• 分屏主视觉：“我是 [角色 A]”/“我是 [角色 B]”
• 从主视觉区域链接出去的分段落地页

如果人们的需求不同，不要强迫所有人走同一个漏斗。

文案策略规格

与你的 Vibe Spec 一起写下这些：

TOP 3 OBJECTIONS:
1. [objection] → addressed in: [headline/feature/CTA]
2. [objection] → addressed in: [headline/feature/CTA]
3. [objection] → addressed in: [headline/feature/CTA]

HEADLINE:
- Value prop: [what you sell, concretely]
- Hook type: [bold claim / objection addressed]
- Full headline: [the actual text]
- Litmus test: Would someone know what we sell from this alone? [yes/no]

SUBHEADLINE: [1-2 sentences — what it is + how the claim works]

CTA TEXT: [narrative continuation of headline]

AUDIENCE: [single / multi-persona]
- If multi: [how we route them]

---

50% 法则

把 50% 的时间花在主视觉区域上。 它是社交媒体的封面图、第一印象、钩子。其他一切能否做好，都取决于主视觉区域是否做对。

区块构成（从上到下）

1. 主视觉区域（主要重点）

成败攸关的元素。必须包含：

• 主标题：来自你的文案策略规格中的价值主张 + 钩子（见上文）。必须通过试金石——如果有人只看这一句，他们知道你在卖什么吗？
• 副标题：说明它是什么 + 这个主张如何成立。最多 1-2 句话，保持轻快。
• CTA 按钮：主标题的叙事延续（不是“开始使用”——见上文 CTA 文案规则）。可选次要 CTA。
• 社会证明：Logo 跑马灯、证言或信任徽章。如果是冷启动，见上文社会证明策略。
• 视觉元素：产品图、插画或动态背景

主视觉区域变体：

• 分屏布局（左侧文字，右侧视觉）
• 居中并带浮动元素
• 全出血背景加叠加文字
• 非对称并带装饰元素

2. 功能/优势部分

展示产品能做什么。每个功能需要三个要素：标题（简短的价值主张，不要用“赋能/革新”）、段落（简洁 + 回应一个反对意见）、图片（展示产品实际使用场景，而非抽象艺术）。每个功能都应呼应主视觉的主导价值主张。

布局选项：

• Bento 网格：非对称布局的卡片（由 Apple 推广）
• 交替行：图片 + 文字，左右交替
• 图标网格：简单图标配简短描述
• 交互式卡片：悬停状态、微动画

3. 社会证明部分

通过以下方式建立信任：

• Logo 轮播（跑马灯动画）
• 带照片的用户评价卡片
• 带动态计数器的统计数据/指标
• 案例研究片段

4. 工作原理部分

分步说明：

• 编号步骤（01、02、03 模式增添精致感）
• 粘性滚动配合渐进式揭示
• 时间线或流程图可视化

5. 定价部分（如适用）

• 2-3 档对比
• 高亮“推荐”档位
• 功能对比表
• 下方 FAQ 手风琴

6. CTA 部分

最后的转化推动：

• 重复价值主张（呼应主视觉标题）
• 强有力的标题，重新框定原始钩子
• 单一聚焦行动 —— 与主视觉相同的叙事 CTA，而非不同的
• 紧迫感元素（如果真实 —— 绝不捏造）

7. 页脚

• 导航链接
• 社交图标
• 法律链接
• 可选的新闻通讯订阅

反 AI 垃圾原则

图标：避免 Lucide（过度使用）

改用：

• Iconify Solar：多种风格（outline、broken、duotone）
• Heroicons：当你需要 Apple 式简洁时
• Phosphor：灵活的粗细系统
• 自定义 SVG：用于品牌差异化

字体：消灭 Inter/Roboto

独特的替代方案：

• 展示字体：Newsreader、Playfair Display、Space Grotesk、Clash Display
• 正文字体：Outfit、Plus Jakarta Sans、Manrope、Satoshi
• 等宽字体：JetBrains Mono、IBM Plex Mono、Fira Code

颜色：不要紫色渐变

大胆的替代方案：

• 深海军蓝 + 电光强调色
• 暖中性色 + 单一跳跃色
• 单色系配色调深度
• 深色模式配霓虹强调色
• 大地色/有机色板

布局：打破网格

• 重叠元素
• 对角线部分
• 非对称间距
• 突破容器的主视觉元素
• 负空间作为设计元素

动画词汇表

入场动画

• fade-in：简单的透明度过渡
• blur-in：从模糊开始，逐渐清晰
• slide-in：基于方向的入场
• scale-in：从小尺寸增长到完整尺寸
• stagger：子元素的顺序揭示

连续动画

• marquee：无限水平滚动（Logo、用户评价）
• beam：光线沿路径/边框移动
• pulse：微妙的缩放/透明度呼吸
• float：轻柔的上下移动
• rotate：持续旋转（图标、装饰）

交互动画

• hover-lift：微妙的 Y 轴位移 + 阴影
• hover-glow：边框/阴影颜色变化
• hover-reveal：隐藏元素出现
• click-ripple：Material 风格反馈

装饰元素

• 垂直线格线（基于容器尺寸）
• 元素之间的面条/曲线连接线
• 背景中的渐变球体/斑点
• 颗粒/噪点纹理叠加
• 几何形状（圆形、圆角矩形）

设计资源

主视觉灵感

• Superhero（superhero.design）：精选主视觉部分
• Dribbble：搜索“hero section”、“landing page”
• Awwwards：获奖设计

部分模式

• Mobin：真实网站的部分拆解
• Bento Grids：卡片布局灵感
• CTA Gallery：行动号召模式

排版

• Google Fonts：免费、AI 可访问的字体
• Fontshare：免费优质字体
• H1 Gallery：标题灵感

图标与 Logo

• Iconify：统一的图标 API（Solar、Heroicons 等）
• Simple Icons：品牌 Logo（SVG）
• Heroicons：Tailwind 的图标集

实施工作流

阶段 1：探索与策略

1. 并行运行 Vibe Discovery（美学方向）和 Copy Strategy（文字/转化）
2. 在动代码之前先写好这两份规格
3. 收集 5-10 张主视觉截图作为线框图
4. 确定所需的区块模式
5. 选择图标集和字体搭配

阶段 2：主视觉开发

1. 从最佳参考截图生成主视觉
2. 迭代：更改颜色、字体、布局
3. 添加动画（光束、淡入等）
4. 添加装饰元素（面条、网格、数字）
5. 不断打磨直到独具特色

阶段 3：区块搭建

1. 一次添加一个区块（不要一次性全部添加）
2. 每个区块引用具体的组件/截图
3. 保持与主视觉一致的颜色/字体
4. 添加区块专属动画

阶段 4：打磨

1. 修复响应式断点（移动端、平板、桌面端）
2. 用真实/高质量素材替换占位图
3. 优化动画性能
4. 测试所有交互元素

阶段 5：展示

1. 用无限画布布局创建封面截图
2. 突出展示主视觉
3. 包含移动端和桌面端视图
4. 添加微妙的背景（模糊渐变、图案）

提示词模式

主视觉生成

Create a hero section for [PRODUCT TYPE].
Change text, names, and numbers to fit [BRAND].
Use Iconify Solar icons (duotone style).
Use [FONT] for headlines.
Add vertical container-size grid lines.
Add 01, 02, 03 step indicators for sophistication.
Use [COLOR] as primary, dark mode.

区块添加

Adapt a new [SECTION TYPE] section.
Match the hero's color scheme and typography.
Use marquee animation for logos.
Add fade-in blur-in entrance animation.
Keep the hero exactly as is.

动画增强

Add beam animation to the primary button border.
The beam should be 1px, continuously traveling around the pill shape.
Add a subtle hover-lift effect to feature cards.

负面提示词（不要更改的内容）

Don't change the hero section.
Keep the navbar exactly as is.
Don't modify the existing animations.

质量检查清单

视觉区分度

• 没有通用的紫色渐变
• 非默认图标集（不是 Lucide）
• 独具特色的字体搭配
• 至少有一个“令人难忘”的元素
• 通过 CSS 变量保持一致的颜色系统

技术质量

• 移动端响应式（无横向滚动）
• 所有图片正常加载（没有损坏的占位图）
• 动画性能良好（无卡顿）
• 无障碍的颜色对比度
• 快速的首次加载

转化优化

• 首屏有清晰的价值主张
• 标题通过试金石测试（仅凭标题，别人能知道你在卖什么吗？）
• 单一主 CTA 可见——使用叙事延续，而不是“Get Started”
• 页面某处回应了前 3 个异议（标题、功能或 CTA 中）
• 有社会证明（或有意省略——绝不伪造）
• 逻辑清晰的信息层级
• 主操作没有阻力
• 功能文案与主视觉的价值主张相呼应（不是随意的功能堆砌）

用户测试框架（构建后）

在发布之前，从两类评审者那里获取反馈：

A 类——非市场相关人士（测试理解度）：

• 他们能在 5 秒后解释你在卖什么吗？
• 还有哪些问题没有答案？

B 类——了解市场的人士（测试差异化）：

• 这与他们知道的竞品相比如何？
• 什么会让他们转而使用？

问这 6 个问题：

1. 转化：你现在会注册吗？是什么阻碍了你？
2. 兴趣：评分 1-10。你会重写什么？
3. 清晰度：什么令人困惑？你还有什么问题？
4. 扩展：什么值得更多细节？
5. 简洁：如果你必须删掉 50%，你会删什么？
6. 质疑：什么引发了怀疑？