落地页设计

概述

构建既能转化又能吸引眼球的落地页。该技能结合了以转化为核心的结构和独特的视觉设计，打造在AI饱和世界中脱颖而出的页面。目标：创造出价值50-100美元、你会自豪地出售的页面。

强制要求：氛围发现（请先执行此操作）

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

目标：即使是类似的产品，两个落地页看起来也应该截然不同。

氛围发现流程

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

第1步：收集背景信息（请询问这些问题）

Q1：这个品牌在现实世界中对应哪个场所或物品？

不是问“所属行业”——而是一个具体的、真实的东西。凌晨两点的东京便利店。奶奶的厨房。粗野主义风格的停车场。珊瑚礁。747的驾驶舱。马拉喀什的跳蚤市场。1970年代的录音室。

Q2：浏览者在最初3秒内应该感受到哪一种情绪？

选择其中一种：平静、充满活力、好奇、信任、愉悦、印象深刻、叛逆、怀旧、受启发、愉快、精致、受欢迎、着迷、自信。

Q3：选择两种意想不到的影响元素进行碰撞：

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

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

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

第2步：发明美学（不要查找——自己创造）

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

色彩发明（不要使用记忆中的调色板——从第1步的场所/物品中衍生）

那个现实世界的场所/物品中有什么颜色？
提取3-4种对该参考感觉真实的颜色
创造具体的新十六进制色码——不要重复使用以前项目中的色码
给你的调色板取一个富有感染力的名字（不是“蓝色和橙色”，而是“午夜小卖部”或“铁锈区清晨”）

字体发明（将声音与碰撞匹配）

在那个地方，文字听起来会是什么样子？
找到一种体现第3步碰撞效果的展示字体
不要默认使用你惯用的选择——用全新的眼光浏览Google Fonts
考虑：粗细、字宽、对比度、怪癖

布局发明（从物理空间中衍生）

第1步中的那个地方是如何组织空间的？
是拥挤还是开阔？网格状还是有机形态？垂直还是水平？
什么样的布局选择能出人意料地体现第3步的碰撞效果？

动态发明（与情绪匹配）

第2步中的情绪是如何运动的？
平静 = 几乎不可察觉。充满活力 = 动态十足。精致 = 缓慢而从容。
定义这个页面的关键动态效果是什么？

第3步：编写你的氛围规格说明

在编码之前，明确地写下这些内容：

氛围名称：[发明一个2-3个词的名字]
参考： [第1步的场所/物品]
情绪： [从第2步中选择]
碰撞： [从第3步中选择]
反模式： [从第4步中选择]

颜色：
- 主色： [hex] - [为什么用这个颜色]
- 辅色： [hex] - [为什么]
- 背景色： [hex] - [为什么]
- 强调色： [hex] - [为什么]
- 调色板名称： [富有感染力的名字]

字体：
- 展示字体： [具体字体名称] - [为什么适合]
- 正文字体： [具体字体名称] - [为什么]
- 特征： [描述其风格]

布局：
- 密度： [稀疏/均衡/密集]
- 形状： [锋利/圆润/有机/混合]
- 标志性元素： [一个不寻常的布局选择]

动态：
- 级别： [静态/微妙/中等/动态/混乱]
- 标志性动画： [一个定义此页面的具体动画]

通配符：
- 一个意料之外、不“匹配”但令人难忘的细节

第4步：新鲜度检查

在继续之前，请确认：

我没有使用前3个项目中的十六进制色码
我没有默认使用我的“舒适”字体（检查：我在用Inter吗？Nunito？Space Grotesk？如果是，找点别的）
第3步中的碰撞在我的选择中实际可见
任何人都不会把这个页面与我之前的落地页混淆
我包含了一个连我自己都感到意外的通配符

氛围发现示例

Q1 - 场所/物品： "高峰时段的日本火车站"

Q2 - 情绪： "自信"

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

Q4 - 绝不能被误认为： "冥想应用、任何异想天开的东西、科技创业公司"

生成的氛围规格：

氛围名称：新宿跑道
参考：高峰时段的日本火车站
情绪：自信
碰撞：交通标识 + 高级定制时装
反模式：没有柔和渐变，没有俏皮插图，没有圆润友好的形状

颜色：
- 主色： #1a1a1a - 列车门的黑色
- 辅色： #f5f5f0 - 月台混凝土地面，被磨得光滑
- 背景色： #fafaf8 - 荧光灯下的白色
- 强调色： #e60012 - JR线的红色，引人注目
- 调色板名称： "月台边缘"

字体：
- 展示字体： Darker Grotesque - 自信、略带紧凑、欧式格调
- 正文字体： Noto Sans JP - 干净实用、受交通启发的
- 特征： 权威但不冷酷。清晰。有方向感。

布局：
- 密度： 丰富但组织有序——像一张车站地图
- 形状： 锋利，但有意的圆形例外（像列车车窗）
- 标志性元素： 用强烈的水平色带划分各个区域，就像火车时刻表

动态：
- 级别： 微妙但精准
- 标志性动画： 元素像进站的火车一样从侧面滑入——水平方向、流畅、节奏精确

通配符：
- 一个元素使用了类似织物的纹理覆盖——高级定制时装的碰撞

灵感启动器（当Q1卡住时）

反趋同规则

不要记忆十六进制色码 - 根据参考物全新生成颜色，不要回忆“我常用的蓝色”
必须轮换字体 - 不能在连续的项目中使用相同的展示字体
必须展现碰撞 - 如果有人看不到Q3中的两种影响，则加强努力
通配符是强制性的 - 每个氛围都需要一个不“匹配”但使其独特的元素
为其命名 - 未命名的氛围会变得平庸。有名字的氛围才有身份。

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

如果用户只是说“给我做个落地页”而没有提供背景信息，请询问：

"捕捉这个品牌能量的一个场所或物品是什么？"
"应该突出哪种情绪？"
"这个页面绝对不应该看起来像什么？"

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

强制要求：文案策略（与氛围发现同时进行）

与氛围发现并行执行。 氛围发现提供外观。文案策略提供文字。两者必须在任何代码之前完成。

转换公式

每个文案决策都源于此：

购买率 = 渴望 - (付出 + 困惑)

增加渴望 → 清晰具体地传达价值
减少付出 → 简洁、易扫描的结构、明确的下一个操作
减少困惑 → 准确说明是什么，让按钮不容错过

如果你在文案决策上卡住了，问问自己：“这增加了渴望，还是减少了付出/困惑？”

第1步：异议发现

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

“是什么几乎阻止了你的客户购买？” “为什么非客户还没有购买？”

常见的异议类别：

“我没有这个技能/时间”
“这对我的特定情况不管用”
“它太贵了，不值”
“我还不够信任它”
“我不明白这到底是干什么的”

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

第2步：标题公式

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

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

如果浏览者只看到标题而看不到其他内容，他们会确切知道你在卖什么吗？

❌ “改进你的工作流程”（公司废话——改善什么的工作流程？） ❌ “生产力的未来”（什么都没说清楚） ✅ “1小时内送达的杂货”（具体、实在、清晰） ✅ “可视化设计网站——无需编码”（是做什么的 + 处理了关键异议）

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

类型A —— 大胆、具体的声明（引发好奇心）：

“将部署时间从4小时缩短到12分钟”
“上个月有10,000个团队加速交付”

类型B —— 解决异议（消除第一大购买障碍）：

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

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

第3步：副标题规则

副标题只做两件事：

解释产品是什么（如果标题侧重于好处）
解释大胆声明是如何实现的（如果标题做出了声明）

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

第4步：功能文案结构

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

元素	规则
功能标题	仅限简短的价值主张。要直截了当。❌“赋能你的团队” ✅“实时协作”
功能段落	简洁的描述 + 处理一个关键异议。如果需要可链接到详细信息——不要出现文字墙。
功能图片	展示产品在使用中。对于软件：GIF > 截图 > 抽象艺术。对于实体商品：用例 + 做工细节特写。

每个功能都应回扣到主要价值主张。功能不是随机的——它们是你在首屏内容上声明的证据。

第5步：行动号召文案

行动号召必须延续主标题的叙事，而不是泛泛而谈。

❌ “开始使用” / “请求演示” / “注册”（懒惰、脱离上下文） ✅ “查找附近美食”（延续了外卖的叙事） ✅ “开始设计”（延续了设计工具的叙事） ✅ “查看你的节省金额”（延续了财务管理的叙事）

行动号召按钮上的文字应该感觉像是阅读主标题后自然而然的下一个句子。

第6步：社会证明策略

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

在跑马灯中展示logo——制造错失恐惧症（“好像每个人都已经知道了这个产品”）
突出展示令人印象深刻的指标（客户数量、处理的收入等）

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

为3-5家有知名度的公司提供免费使用，然后展示它们的logo
使用带有真实姓名和照片的具体评价（即使来自beta测试用户）
展示汇总统计数据（“被500+团队使用”胜过空的logo栏）
可以考虑“媒体报道”区域，展示任何被报道、播客或新闻简报提及的信息

不要作假。一个空洞的社会证明部分比没有更糟。

第7步：多受众路由

如果你的产品服务于不同的用户角色（例如，个人 vs. 团队，开发者 vs. 设计师）：

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

切换标签：“面向开发者” / “面向设计师”
拆分主视觉：“我是[角色A]” / “我是[角色B]”
从主视觉链接到不同的细分落地页

如果他们有不同需求，不要强迫所有人通过同一个漏斗。

文案策略规格说明

紧邻你的氛围规格说明写下这些：

前3个异议：
1. [异议] → 在以下位置处理：[标题/功能/行动号召]
2. [异议] → 在以下位置处理：[标题/功能/行动号召]
3. [异议] → 在以下位置处理：[标题/功能/行动号召]

标题：
- 价值主张：[你卖什么，要具体]
- 钩子类型：[大胆的声明 / 解决异议]
- 完整标题：[实际文本]
- 试金石测试：有人仅凭这个能知道我们卖什么吗？[是/否]

副标题：[1-2句话——它是什么 + 它如何工作]

行动号召文本：[标题叙事的延续]

受众：[单一角色 / 多角色]
- 如果是多角色：[我们如何路由他们]

50%法则

将50%的时间花在首屏区域上。 它是社交媒体的封面图片、第一印象、钩子。其他一切都源于把首屏做好。

分区构成（从上到下）

1. 首屏区域（主要焦点）

成败在此一举。必须包含：

标题：来自你文案策略规格说明的价值主张 + 钩子。必须通过试金石测试——如果某人只看到这个，他们知道你在卖什么吗？
副标题：解释它是什么以及它的声明如何成立。最多1-2句话，保持轻松。
行动号召按钮：标题叙事的延续（不是“开始使用”——见上面的行动号召文案规则）。可选的辅助行动号召。
社会证明：Logo跑马灯、评价或信任徽章。如果是冷启动，请参见上面的社会证明策略。
视觉元素：产品照片、插图或动画背景

首屏变体:

分割布局（文字左、视觉右）
带有浮动元素的居中布局
带有叠加文字的通栏背景
带有装饰元素的不对称布局

2. 功能/好处区域

展示产品能做什么。每个功能需要三个元素：标题（简短的价值主张，不要用“赋能/颠覆”）

...

高转化率落地页设计