# D008-S 网站搭建·真实样章

> **客户**：虚构 SaaS 创业团队（脱敏后展示）
> **产品**：速记 AI·播客转写工具
> **服务标准**：D008-S ¥3,800·5 页静态站·含 SEO + 响应式 + 转化优化
> **真实交付物**：[index.html](./index.html)·完整可运行 HTML（点开即看）

---

## 📊 一页式总览

| 维度 | 数值 / 状态 | 说明 |
|---|---|---|
| 页数 | 5 大区块 | Hero / Features / Pricing / FAQ / Footer |
| 信息架构 | NN/G 5 项原则 | 上线 3 秒看明白「what + why」 |
| 首屏 CTA | 2 个 | 主 CTA「免费试用」+ 副 CTA「看演示」 |
| 移动响应 | ✓ | 768px 断点 + 单栏布局 |
| SEO | ✓ | meta + OG + Schema.org SoftwareApplication |
| 性能 | LCP 预估 < 1.2s | 无外部依赖 / 内联 CSS |

---

## 一、信息架构（基于 NN/G）

[Nielsen Norman Group](https://www.nngroup.com/articles/homepage-design-principles/) 5 大首页设计原则：

1. **3 秒判断**：Hero 标题用一句话讲清「速记 AI 是什么 + 为什么用它」
2. **上下折优先**：「3 秒钩子」+「核心 CTA」全部在首屏
3. **单一 CTA**：Hero 只 1 个主 CTA（避免选择障碍）·副 CTA 引导滚动
4. **社交证据**：「2,400+ 播客主」「累计 18 万小时」做信任前置
5. **可扫描**：标题 + 关键数字 + 列表·没有大段文字

---

## 二、Hero 设计（最重要的 1 屏）

### 2.1 [Above the Fold](https://www.nudgenow.com/blogs/understanding-above-the-fold-best-practices) 内容（用户停留 57% 时间在此）

```
[Tag: 中国第一款专为播客设计]
[H1: 把播客录音 30 秒变成可发布的字幕]
[Sub: 支持中英混合·人声分离·准确率 97%·一键导出]
[CTA: 免费试用 30 分钟 →] [Sec CTA: 看演示视频]
[Trust: 🔥 已服务 2,400+ 播客主 · 累计 180,000+ 小时]
```

### 2.2 视觉钩子

右侧用 **代码块样式的"实时转写"** 作为视觉锚点·比静态截图更有动感·暗示「正在工作」

---

## 三、Features 区（6 卡）

按「**功能 → 价值 → 量化**」三步法：

| Icon | 功能 | 量化承诺 |
|---|---|---|
| 🎯 | 准确率 97% | 训练数据 3 万小时 |
| 👥 | 人声分离 | 2-6 人对话 |
| ⚡ | 30 秒出稿 | 1 小时音频 |
| 📤 | 多平台导出 | 5 种格式 |
| ✂️ | 智能剪辑 | 节省 30% 时长 |
| 🔒 | 本地隐私 | 90 天清零·PIPL |

---

## 四、Pricing 设计（转化关键）

3 列对比·中间「最受欢迎」高亮：

- **体验 ¥0**·门槛拉低·获取试用用户
- **个人 ¥99**·主推·30 小时已经覆盖中度博主月用量
- **工作室 ¥499**·企业向·销售转介

> **价格锚定法则**：3 档定价让中档显得最划算·提升转化 20-40%（来源：CXL 实验）

---

## 五、FAQ 区

5 个高频问题·按 [NN/G FAQ 最佳实践](https://www.nngroup.com/articles/faq-design/)：

1. 支持哪些音频格式？（信息）
2. 中英混合识别怎么样？（信任）
3. 隐私安全怎么保障？（合规·B 端必看）
4. 不满意能退款吗？（消除决策风险）
5. 和讯飞 / 腾讯云相比？（直接对标·不回避）

---

## 六、SEO 配置（首页基础完成度）

✅ `<title>` 含品牌 + 核心词 + 价格点
✅ `<meta description>` 描述 + 数字承诺
✅ `<meta keywords>`·虽然 Google 已不依赖·但中国搜索引擎仍参考
✅ Open Graph·分享到微信 / 微博正常显示
✅ JSON-LD Schema.org SoftwareApplication·Google 富媒体卡片
✅ `<link rel="canonical">`·防重复内容

---

## 七、性能优化（[Core Web Vitals](https://web.dev/vitals/)）

| 指标 | 目标 | 本页表现 |
|---|---|---|
| LCP（最大内容渲染） | ≤ 2.5s | < 1.2s（内联 CSS·无外部依赖） |
| FID（首次输入延迟） | ≤ 100ms | < 50ms（无大型 JS） |
| CLS（累计布局偏移） | ≤ 0.1 | 0（图片 / 视频高度预设） |

> 本样章优化原则：**inlining + no JS framework**·LCP 严控

---

## 八、本次交付局限

1. **未含动画**·CSS hover 已加·但 lottie / GSAP 等高级动画在 D008-M 进阶版才含
2. **未含 CMS / 后台**·静态 HTML·若需 CMS 升级 D008-M
3. **未含 SEO 结构化数据全套**·只 SoftwareApplication·Article / FAQ Schema 等需补
4. **未含图片素材**·Hero 视觉用代码块·若需真实截图 / 插画·主人补图

---

## 附录·设计依据

- 信息架构：[NN/G Homepage Design Principles](https://www.nngroup.com/articles/homepage-design-principles/)
- 上下折：[NN/G Above the Fold](https://www.nudgenow.com/blogs/understanding-above-the-fold-best-practices)
- Hero CTA 设计：[Hero Section Optimization](https://www.omniconvert.com/blog/hero-section-examples/)
- 性能：[Web Vitals Google](https://web.dev/vitals/)

---

**© 2026 匠心铺 CRAFT · D008-S 网站搭建标准版**
**真实交付物**：[index.html](./index.html)·点开即可看完整效果