首屏与价格页
官网只有两屏真正决定转化：首屏（决定要不要往下滚）和价格页（决定要不要掏钱）。其余都是补充说明。
资源永远优先给这两屏。
一、首屏
1.1 先选形式，别选样式
绝大多数 AI 生成的首屏长同一个样：大标题居中 + 副标题 + 两个按钮 + 一个抽象插画，或「巨型数字 + 小标签 + 渐变强调」。
在写样式之前，先从这个表里挑一种形式，并写下选它的理由。
| 形式 | 什么时候用 | 长什么样 |
|---|---|---|
| 产品实拍 | 产品本身就是界面（SaaS、App、工具） | 首屏一半是真实可用的产品界面，不是插画 |
| 强观点标题 | 目标是让人记住一句话 | 超大左对齐标题（占 2 行），视觉退到背景 |
| 对比冲击 | 你要证明「改前 vs 改后」 | 左右分屏同时展示两个状态 |
| 数据开场 | 产品有硬指标 | 一个真实的关键数字 + 一句解释来源。只能有一个数字 |
| 现场演示 | 产品可交互 | 首屏内嵌可点可输入的真组件 |
| 人物/案例 | 服务型、B2B 高客单 | 客户原话 + 真实身份 + 前后结果 |
| 编辑式排版 | 品牌/文化/内容型 | 用排版本体做视觉，字号极端对比，几乎无图 |
禁止：不做选择直接套默认解。选不出理由 = 没做设计。
1.2 首屏解剖
按重要性排序，每一层都必须存在：
| 层 | 内容 | 硬约束 |
|---|---|---|
| 1 | 一句话说明「你是谁、给谁、解决什么」 | 桌面端 ≤ 2 行；换行是容器问题不是字号问题 |
| 2 | 具体化的一到两句补充 | max-width: 62ch，含至少一个数字 |
| 3 | 主 CTA（一个） | 文案写「点下去会发生什么」 |
| 4 | 次 CTA（可选，最多一个） | 视觉权重必须明显低于主 CTA |
| 5 | 视觉主体 | 真实界面 / 真图 / 真数据。不要抽象插画 |
| 6 | 证据条 | 真实客户名或硬指标。没有就删掉这一层，不要占位 |
1.3 硬性数值
标题 clamp(2.5rem, 5.5vw, 4.75rem) 行高 1.0–1.08 字距 -0.03em 补充文案 17–19px 行高 1.6 max-width 62ch 主 CTA 高 48–52px 水平内边距 24–28px 字号 16px 字重 500 首屏高度 桌面 min-height ≤ 88svh（让下一屏露出一角） 移动 min-height 不限 标题容器 桌面 max-width ≈ 18–22ch 的字符宽度
「让下一屏露出一角」很关键。 首屏占满 100vh 时，访客不知道下面还有内容，滚动意愿下降。
1.4 常见错误
| 错误 | 为什么错 | 改成 |
|---|---|---|
| 标题占 4 行 | 说明容器太窄或字号没设计 | 收窄到 2 行，靠容器宽度而不是缩字号 |
| 两个同权重按钮 | 等于没有 CTA | 一个实心一个文字链 |
| 「了解更多」 | 不知道点了会怎样 | 「看价格」「复制这段 curl」 |
| 抽象插画 | 证明不了任何事 | 换成真实产品界面 |
| 首屏就放 5 个卖点 | 注意力摊薄 | 只留一个主张 |
| 居中一切 | 读起来像模板 | 左对齐，视觉放右侧 |
| 首屏 100vh 占满 | 看不出有下文 | 88svh + 露一角 |
二、价格页
2.1 先解决「不敢报价」
价格页最贵的错误不是定错价，是不报价：全部写「—」或「联系我们」。 访客到这一步已经有意向，看到占位符就流失了，而且会认为你在看人下菜。
能报就报。 需要定制就在最高档写「起价 + 定制范围」，不要写「联系我们」。
2.2 三档结构
| 档位 | 作用 | 写法 |
|---|---|---|
| 入门 | 降低门槛、承接小需求 | 真实低价 + 明确边界（「限 1 个项目」） |
| 推荐（中间） | 你要卖的那个 | 视觉最重：边框、色块、标签「最常选」 |
| 高阶 | 锚定，让推荐档显得合理 | 价格明显高，并写明多了什么 |
- 三档优于两档，也优于四档以上。四档以上会让选择瘫痪。
- 推荐档必须视觉上最突出，且不要三档等宽等高什么都不标。
- 每档必须写清「不包含什么」。只写包含项会让低价档的人产生错误预期，变成售后成本。
2.3 价格数字排版
css.price { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .price .currency { font-size: 0.45em; vertical-align: super; } /* 符号弱化 */ .price .period { font-size: 0.3em; opacity: 0.6; } /* 周期弱化 */
- 数字是这一屏的主角，字号要比档位名大 2 倍以上。
- 货币符号和计费周期必须弱化，否则读起来是一串噪声。
- 全对齐：三档的价格必须能纵向对齐成一条线。
2.4 对比表
档位卡下面放一张真实的功能对比表：
- 行 = 功能，列 = 档位。能用 ✓ / ✗ 或具体数值，不用「支持」「不支持」文字。
- 有数值的用数值（「10 万次/月」而不是「充足额度」）。
- 默认显示全部行；超过 12 行时折叠，但保留「展开对比」按钮。
- 行高 ≥ 44px，悬浮整行高亮。
- 数字列右对齐 +
tabular-nums。
2.5 价格页 FAQ
放 4–6 条真实会被问到的问题，每条答案 ≤ 3 句：
- 能退款吗 / 怎么退
- 超量了怎么算
- 可以随时降级吗
- 发票怎么开
- 数据在哪、能不能导出
- 和企业版差在哪
答案必须回答问题本身。 「我们致力于提供卓越服务」这类答案比没有 FAQ 更伤信任。
2.6 价格页自检
- 每一档都有真实数字，没有「—」和「联系我们」
- 推荐档视觉上明显重于其他两档
- 每档都写了「不包含什么」
- 三个价格纵向能对齐，数字用
tabular-nums - 对比表里有具体数值，不只有 ✓/✗
- FAQ 至少 4 条，每条答案 ≤ 3 句且真的回答了问题
- 价格页有独立的转化入口（不用滚回顶部）
三、两屏之间的衔接
首屏和价格页之间通常有 3–5 屏。这一段的作用是把怀疑逐条消掉，不是堆卖点。
推荐顺序：
- 证据条（真实客户 / 硬指标）
- 产品实况（截图 + 一句它解决了什么）
- 差异化（你有的、别人没有的，最多 3 条，用对比表而非卡片）
- 使用场景（一个具体场景走完，带真实数据）
- 社证（具体的人、具体的话）
- → 价格页
每一屏只解决一个怀疑。 一屏解决多个 = 一个都没解决。
