着陆页设计 是做什么的？
概述
构建既能转化又能吸引眼球的着陆页。本技能将转化导向的框架与独特的视觉设计相结合，以创建在AI充斥的世界中脱颖而出的页面。目标：打造价值50-100美元、你愿意为之自豪的页面。
强制：氛围发现（先执行此步骤）
在编写任何代码之前，你必须运行氛围发现流程。 这不是一个查找表——它是一个每次都能产生独特审美方向的创意提示。
目标：即使是类似产品的着陆页，也不能看起来相同。
氛围发现流程
向用户提出这些问题，然后综合出一个独特的方向。不要只是将答案映射到预设值。
第一步：收集背景信息（询问这些）
问题1：这个品牌在现实世界中会是哪个地方或物品？
不是“什么行业”——而是一个具体的实体。凌晨两点的东京便利店。祖母的厨房。野兽派停车场。珊瑚礁。波音747的驾驶舱。马拉喀什的跳蚤市场。1970年代的录音室。
问题2：用户在最初3秒内应该感受到哪一种情绪？
选择一种：平静。充满活力。好奇。被信任。愉悦。印象深刻。叛逆。怀旧。受启。愉悦。复杂。受欢迎。被吸引。自信。
问题3：选择两种意想不到的影响进行碰撞：
示例：“医疗包装 + 滑板图案”、“电子表格 + 街头艺术”、“豪华酒店 + 朋克杂志”、“NASA任务控制 + 幼儿园”、“日本便利店 + 维多利亚图书馆”
问题4：这个页面绝不应该被误认为是什么？
列出2-3个要主动避免的具体事物。“一个加密项目”、“一个健康应用”、“银行做的东西”、“任何带紫色渐变的东西”
第二步：创造美学（不要查找——创造）
基于答案，通过决定以下内容来创造一种独特的氛围：
色彩发明（不要使用记忆中的调色板——从地点/物品中推导）
- 问题1中那个现实世界的地点/物品中存在哪些颜色？
- 提取3-4种对该参考物真实的颜色
- 发明全新的具体十六进制代码——不要重复使用以前项目中的代码
- 给调色板起一个富有暗示性的名字（不是“蓝色和橙色”，而是“午夜小卖部”或“铁锈地带清晨”）
字体发明（让语音与碰撞相匹配）
- 在那个地方文字听起来会是什么样？
- 找一种体现问题3中碰撞的展示字体
- 不要默认使用你惯常的选择——带着全新的眼光浏览Google Fonts
- 考虑：字重、字宽、对比度、奇特性
布局发明（从物理空间中推导）
- 问题1中那个地方的布局是怎样的？
- 是紧凑还是开阔？网格状还是有机？垂直还是水平？
- 哪种意想不到的布局选择能体现问题3中的碰撞？
动效发明（匹配情绪）
- 问题2中的情绪如何移动？
- 平静 = 几乎难以察觉。活力 = 动感。复杂 = 缓慢而刻意。
- 定义这个页面的一个标志性动效是什么？
第三步：编写你的氛围规范
在编码之前，明确写出：
氛围名称：[发明一个2-3字的名称]
参考：[问题1中的地点/物品]
情绪：[来自问题2]
碰撞：[来自问题3]
反模式：[来自问题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年代合成器 | 外科器械 | 复古行李 | 赛车摩托车 | 古董指南针 | 工业织机 | 霓虹灯 | 打字机 | 科学玻璃器皿 | 皮面书 | 电路板 | 瓷器餐具
时代/运动： 苏联构成主义 | 孟菲斯设计 | 瑞士国际主义 | 新艺术运动 | 包豪斯 | 风格派 | Googie建筑 | 流线型现代风格 | 野兽派 | 日本新陈代谢派 | 斯堪的纳维亚现代主义 | 意大利未来主义
反趋同规则
- 无十六进制代码记忆 - 从参考中新鲜生成颜色，不要回忆“我惯用的蓝色”
- 强制轮换字体 - 不能在连续项目中使用相同的展示字体
- 碰撞必须可见 - 如果有人看不到问题3中的两种影响，继续施压
- 奇招必选 - 每种氛围都需要一个不“合适”但使其独特的元素
- 命名它 - 无名的氛围会变得泛泛。有名字的氛围才有身份。
快速背景问题（精简版）
如果用户只说“给我做个着陆页”而没有上下文，请问：
- “哪一个地点或物品能捕捉这个品牌的能量？”
- “哪种情绪应该占主导？”
- “这个页面绝不应该看起来像什么？”
然后从这三个答案中综合出一种氛围。
50%法则
将50%的时间花在英雄区上。 它是社交媒体的封面图、第一印象、钩子。其他一切都源于英雄区的正确。
部分构成（从上到下）
1. 英雄区（主要焦点）
成败关键。必须包含：
- 标题：尖锐、利益驱动的钩子（参考H1画廊获得灵感）
- 副标题：支持的上下文，最多1-2句话
- 行动号召按钮：主要行动 + 可选的次要行动
- 社交证明：Logo跑马灯、推荐语或信任徽章
- 视觉元素：产品图片、插图或动画背景
英雄区变体：
- 分割布局（文本在左，视觉在右）
- 居中布局，浮动元素
- 全出血背景，覆盖文本
- 非对称布局，带装饰元素
2. 功能/优势部分
展示产品的作用。选项：
- Bento网格：非对称布局中的卡片（苹果流行开来）
- 交替行：图像 + 文本，左右翻转
- 图标网格：简单图标，简短描述
- 交互式卡片：悬停状态、微动效
3. 社交证明部分
通过以下方式建立信任：
- Logo轮播（跑马灯动画）
- 带照片的推荐卡片
- 带动画计数器的统计数据/指标
- 案例研究摘要
4. 如何运作部分
分步解释：
- 编号步骤（01, 02, 03 模式增加复杂度感）
- 粘性滚动，逐步揭示
- 时间线或流程图可视化
5. 定价部分（如果适用）
- 2-3档比较
- 高亮“推荐”档
- 功能比较表
- 下方FAQ手风琴
6. 行动号召部分
最后转化推动：
- 重复价值主张
- 强力标题
- 单一聚焦行动
- 紧迫感元素（如果真实）
7. 页脚
- 导航链接
- 社交图标
- 法律链接
- 可选的新闻通讯注册
反AI同质化原则
图标：避免使用Lucide（过度使用）
替代使用：
- Iconify Solar：多种样式（轮廓、破碎、双色调）
- 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网格：卡片布局灵感
- CTA画廊：行动号召模式
字体
- Google Fonts：免费，AI可访问的字体
- Fontshare：免费质量字体
- H1 Gallery：标题灵感
图标和Logo
- Iconify：统一图标API（Solar, Heroicons等）
- Simple Icons：品牌Logo（SVG）
- Heroicons：Tailwind的图标集
实施工作流
阶段1：研究与收集
- 收集5-10个英雄区截图作为线框
- 确定需要的部分模式
- 选择图标集和字体配对
- 定义调色板
阶段2：英雄区开发
- 从最佳参考截图生成英雄区
- 迭代：更改颜色、字体、布局
- 添加动画（光束、淡入等）
- 添加装饰元素（面条、网格、数字）
- 完善直至独特
阶段3：部分构建
- 一次添加一个部分（不是全部同时）
- 每个部分参考特定组件/截图
- 保持英雄区的颜色/字体一致性
- 添加特定部分的动画
阶段4：打磨
- 修复响应式断点（移动端、平板、桌面）
- 用真实/高质量资产替换占位图像
- 优化动画性能
- 测试所有交互元素
阶段5：展示
- 使用无限画布布局创建封面截图
- 突出显示英雄区
- 包含移动端和桌面视图
- 添加微妙背景（模糊渐变、图案）
提示模式
英雄区生成
为[产品类型]创建一个英雄区。
更改文本、名称和数字以匹配[品牌]。
使用Iconify Solar图标（双色调样式）。
标题使用[字体]。
添加基于容器大小的垂直线。
添加01、02、03步骤指示器以增加复杂度感。
使用[颜色]作为主色，深色模式。
部分添加
适配一个新的[部分类型]部分。
匹配英雄区的配色方案和排版。
使用跑马灯动画显示Logo。
添加淡入模糊入场动画。
保持英雄区完全不变。
动画增强
为主按钮边框添加光束动画。
光束应为1px，连续在药丸形状周围移动。
为功能卡片添加微妙的悬停抬起效果。
负面提示（不要更改的内容）
不要更改英雄区。
保持导航栏完全不变。
不要修改现有动画。
质量检查表
视觉独特性
- 无通用紫色渐变
- 非默认图标集（非Lucide）
- 独特的字体配对
- 至少一个“难忘”元素
- 通过CSS变量保持一致的色彩系统