着陆页设计
概述
构建既能转化又能吸引人的着陆页。这项技能将聚焦转化的结构与独特的视觉设计相结合，创造出在人工智能泛滥的世界中脱颖而出的页面。目标是：打造价值50-100美元、你会引以为豪并能出售的页面。
强制步骤：氛围发现（请先执行此步骤）
在编写任何代码之前，你必须运行氛围发现流程。 这不是一个查找表——它是一个创意提示，每次都会生成独特的审美方向。
目标是：没有两个着陆页看起来应该一样，即使是类似的产品也不行。
氛围发现流程
向用户提出这些问题，然后综合出一个独特的方向。不要只是将答案映射到预设值。
第1步：收集背景（询问这些问题）
问题1：这个品牌会对应哪个真实世界的地点或物品？
不是“什么行业”——而是一个真正具体的事物。凌晨2点的东京便利店。祖母的厨房。粗野主义停车场。珊瑚礁。747的驾驶舱。马拉喀什的跳蚤市场。1970年代的录音室。
问题2：在最初的3秒内，某人应该感受到的一种情绪是什么？
选择一个： 平静。充满活力。好奇。被信任。愉悦。印象深刻。叛逆。怀旧。灵感。愉悦。老练。受欢迎。好奇。自信。
问题3：选择两种意想不到的影响进行碰撞：
示例：“医疗包装 + 滑板图形”，“电子表格 + 街头艺术”，“豪华酒店 + 朋克杂志”，“NASA任务控制中心 + 幼儿园”，“日本便利店 + 维多利亚图书馆”
问题4：这个页面绝不 应该被误认为是什么？
列举2-3个要主动避免的具体事物。“一个加密项目”，“一个健康应用”，“银行做的东西”，“任何带有紫色渐变的东西”
第2步：创造美学（不要查找——创造）
基于答案，通过决定以下内容来创造一个独特的氛围：
色彩发明（不要使用记忆中的调色板——从地点/物品中推导）
- 问题1中那个真实世界的地点/物品中存在哪些颜色？
- 提取3-4种对该参考感觉真实可信的颜色
- 创造全新的十六进制代码——不要重复使用之前项目中的代码
- 给你的调色板起一个能唤起情感的名字（不是“蓝色和橙色”，而是“午夜小卖部”或“锈带之晨”）
字体发明（将声音与碰撞相匹配）
- 在那个地方，文字听起来会是什么感觉？
- 找到一种体现问题3碰撞的展示字体
- 不要默认使用你常用的选择——用全新的眼光浏览Google Fonts
- 考虑：字重、字宽、对比度、怪异感
布局发明（从物理空间中推导）
- 问题1中那个地方的空間是如何组织的？
- 是拥挤还是开阔？网格状还是有机？垂直还是水平？
- 什么样的意外布局选择能体现问题3的碰撞？
动效发明（匹配情绪）
- 问题2中的情绪是如何移动的？
- 平静 = 几乎察觉不到。充满活力 = 充满动感。老练 = 缓慢而刻意。
- 定义这个页面的一个标志性动效是什么？
第3步：编写你的氛围规格
在编码之前，明确地写出来：
氛围名称：[创造一个2-3个字的名称]
参考：[来自问题1的地点/物品]
情绪：[来自问题2]
碰撞：[来自问题3]
反模式：[来自问题4]
颜色：
- 主色：[十六进制] - [为什么是这种颜色]
- 辅色：[十六进制] - [为什么]
- 背景色：[十六进制] - [为什么]
- 强调色：[十六进制] - [为什么]
- 调色板名称：[能唤起情感的名称]
字体：
- 展示字体：[特定字体名称] - [为什么适合]
- 正文字体：[特定字体名称] - [为什么]
- 特征：[描述声音]
布局：
- 密度：[稀疏/平衡/密集]
- 形状：[锐利/圆润/有机/混合]
- 标志性元素：[一种不同寻常的布局选择]
动效：
- 程度：[静止/微妙/中等/动态/混乱]
- 标志性动画：[定义此页面的一个特定动画]
通配符：
- 一个不“匹配”但让人难忘的不起眼的细节
第4步：新颖性检查
在继续之前，验证：
- 我没有重复使用最近3个项目中的十六进制代码
- 我没有默认使用我的“舒适”字体（检查：我是否在使用Inter？Nunito？Space Grotesk？如果是，找别的）
- 问题3的碰撞实际上在我的选择中可见
- 没有人会将此页面与我的以往着陆页混淆
- 我包含了一个连我自己都感到惊讶的通配符
氛围发现示例
问题1 - 地点/物品：“高峰时段的日本火车站”
问题2 - 情绪：“自信”
问题3 - 碰撞：“交通标识 + 高级定制时装”
问题4 - 绝不误认为：“冥想应用，任何异想天开的东西，创业兄弟科技”
生成氛围规格：
氛围名称：新宿跑道
参考：高峰时段的日本火车站
情绪：自信
碰撞：交通标识 + 高级定制时装
反模式：没有柔和渐变，没有俏皮插画，没有圆润友好的形状
颜色：
- 主色：#1a1a1a - 列车门的黑色
- 辅色：#f5f5f0 - 站台混凝土，磨损光滑
- 背景色：#fafaf8 - 荧光灯下的白色
- 强调色：#e60012 - JR线红色，引人注目
- 调色板名称：“站台边缘”
字体：
- 展示字体：Darker Grotesque - 自信，略微紧凑，欧式边缘
- 正文字体：Noto Sans JP - 简洁实用，受交通提示启发
- 特征：权威但不冷漠。清晰。指示性强。
布局：
- 密度：丰富但有序 - 像车站地图
- 形状：锐利，带有有意的圆形例外（像列车车窗）
- 标志性元素：像列车时刻表一样分隔部分的强烈水平条带
动效：
- 程度：微妙但精确
- 标志性动画：元素从侧面滑入，像到站的列车 - 水平、平滑、带有精确的时间控制
通配符：
- 一个元素使用织物般的纹理叠加 - 高级定制时装的碰撞
灵感起点（当对问题1毫无头绪时）
空间： 曼谷夜市 | 闭馆时的空旷博物馆 | 凌晨4点的机场休息室 | 复古唱片店 | 医院候诊室 | 赌场大堂 | 冬日的温室 | 地铁站台 | 天文台穹顶 | 废弃工厂 | 豪华游艇内部 | 24小时自助洗衣店 | 图书馆珍本室 | 汽车修理厂 | 空间站舱段
物品： 1980年代合成器 | 手术器械 | 复古行李箱 | 赛车摩托车 | 古董指南针 | 工业织布机 | 霓虹灯招牌 | 打字机 | 科学玻璃器皿 | 皮面书籍 | 电路板 | 瓷盘
时代/运动： 苏联构成主义 | 孟菲斯设计 | 瑞士国际主义 | 新艺术运动 | 包豪斯 | 风格派 | 古奇建筑 | 流线型现代主义 | 粗野主义 | 日本新陈代谢派 | 斯堪的纳维亚现代主义 | 意大利未来主义
反趋同规则
- 没有记忆中的十六进制代码 - 从参考中新鲜生成颜色，不要回忆“我常用的蓝色”
- 字体轮换要求 - 不能在连续项目中重复使用相同的展示字体
- 碰撞必须可见 - 如果某人看不到问题3中的两个影响，就需要更加努力
- 通配符是强制性的 - 每个氛围都需要一个不“匹配”但使其独特的东西
- 命名 - 未命名的氛围会变得普通。命名的氛围有身份。
快速背景问题（最简版本）
如果用户只说“给我做个着陆页”而没有提供背景，就问：
- “什么地点或物品最能捕捉这个品牌的能量？”
- “哪种情绪应该主导？”
- “这应该永远不看起来像什么？”
然后根据这三个答案综合出一个氛围。
强制步骤：文案策略（与氛围发现同时执行）
与氛围发现并行执行。 氛围发现提供外观。文案策略提供文字。两者都必须在任何代码之前完成。
转化方程式
每个文案决策都源于此：
购买率 = 欲望 -（劳动 + 困惑）
- 增加欲望 → 清晰且具体地传达价值
- 减少劳动 → 简洁、可扫描的结构、明确的下一个行动
- 减少困惑 → 准确说明是什么，让按钮无法忽略
如果你在文案决策上卡住了，就问：“这是增加了欲望还是减少了劳动/困惑？”
第1步：异议发现
在撰写任何标题之前，先识别购买异议。询问用户：
“是什么几乎阻止了你的客户购买？” “为什么非客户还没购买？”
常见的异议类别：
- “我缺乏这方面的技能/时间”
- “这在我的特定情况下行不通”
- “它太贵了，物不所值”
- “我对此还不够信任”
- “我不明白这到底是做什么的”
写下前3个异议。它们驱动你的标题钩子、功能文案和行为召唤（CTA）框架。
第2步：标题公式
每个主标题都遵循：价值主张 + 钩子
价值主张必须通过这个试金石测试：
如果访客只看到标题而其他什么都没看到，他们能准确知道你卖的是什么吗？
❌ “改善你的工作流程”（企业废话——什么的工作流程？） ❌ “生产力的未来”（没有说明具体内容） ✅ “一小时内送达的杂货”（具体、具体、清晰） ✅ “可视化设计网站——无需代码”（它做什么 + 处理了关键异议）
钩子是以下两种类型之一：
类型A——大胆、具体的声明（引发好奇心）：
- “将部署时间从4小时缩短到12分钟”
- “上个月1万个团队加速出货”
类型B——处理异议（消除#1购买障碍）：
- “无需信用卡”（处理信任异议）
- “与你现有的工具配合使用”（处理转换成本异议）
- “5分钟内完成设置”（处理努力异议）
使用第1步中的首要异议来选择钩子类型。
第3步：副标题规则
副标题只做两件事：
- 解释产品是什么（如果标题侧重于利益）
- 解释大胆的声明是如何可能的（如果标题做出了声明）
最多：1-2句话。保持轻松。如果你需要三句话，说明你的标题做得不够。
第4步：功能文案结构
每个功能正好有三个元素：
| 元素 | 规则 |
|---|---|
| 功能标题 | 仅简明价值主张。要直截了当。❌ “赋能你的团队” ✅ “实时协作” |
| 功能段落 | 简要描述 + 处理一个关键异议。如果需要，链接到详细信息——不要长篇大论。 |
| 功能图片 | 展示产品的实际使用。对于软件：GIF > 截图 > 抽象艺术。对于实体商品：使用场景 + 制造质量特写。 |
每个功能都应该回扣到主标题的主导价值主张。功能不是随机的——它们是你在首屏之上所声称的证据。
第5步：CTA文案
CTA必须延续主标题的叙述，而不是通用。
❌ “开始” / “请求演示” / “注册”（懒惰、脱离上下文） ✅ “查找附近的美食”（延续配送的叙述） ✅ “开始设计”（延续设计工具的叙述） ✅ “查看你的节省”（延续财务的叙述）
CTA按钮文本应该感觉像是阅读标题后自然而然的下一句话。
第6步：社交证明策略
如果你有知名客户/媒体报道：
- 在跑马灯中展示标志——制造错失恐惧症（FOMO）（“每个人都已经知道这个”）
- 突出令人印象深刻的指标（客户数量、处理的收入等）
如果你还没有知名的社交证明（冷启动）：
- 向3-5家知名公司提供免费访问权限，然后展示他们的标志
- 使用带有真实姓名和照片的特定推荐（即使是来自测试版用户）
- 展示汇总统计数据（“被500+团队使用”胜过空的标志栏）
- 考虑使用“媒体报道”栏目，包含任何新闻报道、播客或新闻通讯
不要造假。空的社交证明部分比根本没有更糟糕。
第7步：多受众路由
如果你的产品服务于不同的人物画像（例如，个人 vs. 团队，开发者 vs. 设计师）：
在页面顶部附近添加一个**“选择你自己的冒险”**元素，将访客路由到相关部分。示例：
- 切换标签：“面向开发者” / “面向设计师”
- 拆分主视觉：“我是[角色A]” / “我是[角色B]”
- 从主视觉链接的分段着陆页
如果不同受众有不同需求，不要强迫所有人通过相同的转化路径。
文案策略规格
在你的氛围规格旁边写出这个：
前3个异议：
1. [异议] → 在以下位置处理：[标题/功能/CTA]
2. [异议] → 在以下位置处理：[标题/功能/CTA]
3. [异议] → 在以下位置处理：[标题/功能/CTA]
标题：
- 价值主张：[你具体卖的是什么]
- 钩子类型：[大胆声明 / 处理异议]
- 完整标题：[实际文本]
- 试金石测试：仅凭此人们能知道我们卖的是什么吗？[是/否]
副标题：[1-2句话——它是什么 + 声明如何运作]
CTA文本：[标题的叙述延续]
受众：[单一 / 多画像]
- 如果多：[我们如何路由他们]
50%规则
将50%的时间花在主视觉部分。 它是社交媒体的封面图片、第一印象、钩子。其他一切都源于把主视觉做对。
部分构成（从顶到底）
1. 主视觉部分（首要焦点）
成败的关键。必须包含：
- 标题：来自你的文案策略规格的价值主张 + 钩子（见上文）。必须通过试金石测试——如果某人只看到这个，他们知道你卖的是什么吗？
- 副标题：解释它是什么 + 声明如何运作。最多1-2句话，保持轻松。
- CTA按钮：标题的叙述延续（不是“开始”——见上文CTA文案规则）。可选的次要CTA。
- 社交证明：标志跑马灯、推荐或信任徽章。如果是冷启动，见上文社交证明策略。
- 视觉元素：产品照片、插画或动画背景
主视觉变体：
- 分割布局（文字左，视觉右）
- 居中，带有浮动元素
- 全出血背景，叠加文字
- 不对称，带有装饰元素
2. 功能/好处部分
展示产品能做什么。每个功能需要三个元素：标题（简明价值主张，没有“赋能/革命性”这样的词汇）
……[为翻译截断]