Zack Hero And Pricing

---
name: zack-hero-and-pricing
description: "首屏与价格页——决定官网转化的两屏。包含首屏形式选择、标题约束、CTA 层级、证据条、价格档位设计、锚定、对比表和价格数字排版。当新建落地页/官网/SaaS 营销页，或转化率低、访客不往下滚、价格页没人下单时使用。"
license: MIT
metadata:
  author: Zack
  homepage: https://github.com/yckonnnnn/zack-design-skills
  version: "1.0.0"
---

# 首屏与价格页

官网只有两屏真正决定转化：**首屏**（决定要不要往下滚）和**价格页**（决定要不要掏钱）。其余都是补充说明。

资源永远优先给这两屏。

---

## 一、首屏

### 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 屏。这一段的作用是**把怀疑逐条消掉**，不是堆卖点。

推荐顺序：

1. 证据条（真实客户 / 硬指标）
2. 产品实况（截图 + 一句它解决了什么）
3. 差异化（你有的、别人没有的，最多 3 条，用对比表而非卡片）
4. 使用场景（一个具体场景走完，带真实数据）
5. 社证（具体的人、具体的话）
6. → 价格页

**每一屏只解决一个怀疑。** 一屏解决多个 = 一个都没解决。