# 第二阶段设计规格：深度 Bain 化升级（方案 C）— 极简主义旗舰版

## 概述

基于方案 B（中度 Bain 化）的效果评估，用户明确表示"跟 Bain 没啥关系"，决定升级到方案 C：深度 Bain 化。

方案 C 的核心是**从骨架层面换血**——不是在 Accenture 骨架上套 Bain 文案，而是彻底换成 Bain 的极简骨架。

**设计哲学：删到不能再删，才刚好够。**

---

## 设计目标

1. **首屏记忆点**：用户看一眼首页，只记住一句话
2. **极简视觉**：删除所有装饰性元素，纯排版驱动
3. **模块精简**：从 8 个 Section 压缩到 5 个
4. **字体对比**：标题/正文比从 3:1 拉到 5:1
5. **品牌红 ≤ 3 处强记忆点**：比方案 B 更克制

---

## 任务清单

### 任务 1：Hero 极致 Bain 化

**文件：**
- `src/app/(marketing)/home-content-v13.tsx`（从 v12 复制）

**改动点：**

#### 1.1 布局：从左侧聚焦改为"左对齐 + 大留白"
- 内容占左侧 50-55%，右侧 45-50% 纯留白
- 完全左对齐，不居中
- 垂直居中（视觉中心偏上一点）

#### 1.2 信息层级：从 5 层压缩到 3 层
- **删除**：快速信任锚点行（500+企业验证 · 2.8x平均ROI · 40%交付周期缩短）
- **删除**：底部数据条（12年/500+/98%/6款）
- **删除**："了解我们的服务"次要按钮
- **保留**：标题 + 战略性问句 + 单个主按钮

#### 1.3 标题：字号加大，字重更粗
- 字号：从 7xl 提升到 **8xl-9xl**（lg 断点下）
- 字重：从 font-extrabold 改为 **font-black**
- 字距：从 tracking-tighter 改为 **tracking-tightest**
- 行高：从 leading-[0.92] 改为 **leading-[0.88]**

#### 1.4 背景：纯墨黑 + 极微弱噪点
- **删除**：FloatingInkParticles（浮动粒子）
- **删除**：DiagonalLines（对角线装饰）
- **删除**：GridLines（网格线背景）
- **删除**：所有彩色光晕（blur-3xl 圆形渐变色块）
- **删除**：斜切渐变背景（clipPath 的彩色渐变）
- **保留**：GrainOverlay，opacity 从现有值降到 **0.015-0.02**（几乎看不见）
- **保留**：底部渐变遮罩（从纯黑过渡到透明，极微弱）

#### 1.5 滚动提示
- 保持 Scroll to explore，但更弱化
- 移到左下角（Bain 风格），而不是底部居中

---

### 任务 2：模块精简——从 8 个压缩到 5 个

**首页最终信息架构（5 个模块）：**

```
1. Hero（极致聚焦，一句话价值主张）
   ↓
2. Services + Industries（服务 + 行业合并）
   ↓
3. Cases（案例研究，成果前置）
   ↓
4. ApproachStrip（方法论数据条，极简）
   ↓
5. CTA（最终转化，首尾呼应）
```

#### 2.1 模块 1：Hero（任务 1 已完成）

#### 2.2 模块 2：Services + Industries 合并

**上半部分：四大服务（更极简）**
- 保持 4 卡片网格布局
- **删除**：卡片内的 metrics（200+战略项目 / 95%落地成功率等）
- **删除**：卡片 hover 光晕
- **删除**：卡片左侧竖条色条
- **简化**：hover 效果只有边框变亮 + 标题文字变色
- 保留：编号 + 标题 + 英文副标题 + 描述 + 亮点列表 + "了解详情"链接

**下半部分：行业覆盖（降为子模块）**
- 不再有独立的 Section 标题和 eyebrow
- 用小标题"覆盖 6 大核心行业"（弱化处理，font-medium，text-dark-text-secondary）
- 6 个行业卡片更紧凑：小图标 + 名称 + 一句话描述
- 2 行 × 3 列的网格布局
- 视觉权重约为服务模块的 1/3

#### 2.3 模块 3：Cases（保留，成果前置已完成）
- 保持方案 B 的成果前置布局
- **删除**：卡片 hover 光晕
- 保留 2 个精选案例
- "查看全部案例"链接保留

#### 2.4 模块 4：ApproachStrip（方法论极简数据条）
**从完整 Section 压缩为"一行数据带"：**
- 3 个核心指标横向排列，用细竖线分隔
- 指标：500+项目验证 / 98%准时交付 / 97%客户续约
- 数字 + 标签，极简排版
- 背景：墨灰色（bg-ink-light），与上下有区分
- 高度精简（py-16 左右）
- **删除**：四步法的完整卡片、步骤描述、图标等

#### 2.5 模块 5：CTA（极致化）
- 大留白，一句话 + 一个按钮
- 类似 Hero 的排版风格，形成首尾呼应
- 标题："让数字化投入真正转化为业务增长"
- 按钮："预约咨询"
- **删除**：次要按钮
- **删除**：额外说明文字（"首次咨询完全免费"等）

#### 2.6 被删除的模块

| 被删除模块 | 去向 |
|-----------|------|
| Stats（独立 Section） | 核心数据已融入 Hero 第一记忆点 + ApproachStrip |
| Industries（独立 Section） | 降为服务模块的子模块 |
| Approach（独立 Section） | 压缩为"方法论数据条" |
| Insights（独立 Section） | 首页删除，完全移到内页 |

---

### 任务 3：极简视觉——删除所有装饰性元素

#### 3.1 全站删除清单

| 装饰元素 | 使用场景 | 处理 |
|---------|---------|------|
| FloatingInkParticles | Hero 背景 | ❌ 全部删除 |
| DiagonalLines | Hero、各 Section 角落 | ❌ 全部删除 |
| GridLines | Hero 背景 | ❌ 全部删除 |
| 彩色光晕（blur-3xl 圆形） | Hero、服务区、案例区等 | ❌ 全部删除 |
| 斜切渐变背景（clipPath） | Hero | ❌ 删除 |
| 服务卡片 hover 光晕 | 服务卡片右下角 | ❌ 删除 |
| 案例卡片 hover 光晕 | 案例卡片右下角 | ❌ 删除 |
| 行业卡片渐变背景 | 行业卡片 hover | ❌ 删除，改为简单边框变化 |

#### 3.2 保留的视觉元素（极简）

| 元素 | 作用 | 强度 |
|------|------|------|
| GrainOverlay（噪点纹理） | 品质感，避免纯黑太"平" | opacity 0.015-0.02（几乎看不见） |
| 1px 细线分隔 | Section 之间的节奏锚点 | 浅灰色，opacity 0.1 |
| 品牌红下划线/色条 | 视觉锚点，品牌记忆 | 极细（2-3px），只在关键位置出现 |
| 纯墨黑 / 墨灰背景 | 两个层次足矣 | bg-ink / bg-ink-light |

#### 3.3 Bain 心法
> 每删掉一个装饰元素，剩下的内容就重一分。删到不能再删了，才刚好够。

---

### 任务 4：字体对比强化——从 3:1 拉到 5:1

#### 4.1 字号对比调整（lg 断点）

| 层级 | 方案 B | 方案 C | 变化 |
|------|--------|--------|------|
| Hero 标题 | 7xl (4.5rem) | **8xl-9xl (6-8rem)** | +50-75% |
| Section 标题 | 5xl (3rem) | **6xl (3.75rem)** | +25% |
| 卡片标题 | 2xl-3xl | **xl-2xl** | -15% |
| 正文 | base (1rem) | **base (1rem)** | 不变 |
| 辅助文字 | sm (0.875rem) | **xs (0.75rem)** | -15% |
| Eyebrow/标签 | 11px-12px | **10px-11px** | 更精致 |

#### 4.2 字重与字距调整

| 属性 | 方案 B | 方案 C |
|------|--------|--------|
| Hero 标题字重 | font-extrabold (800) | **font-black (900)** |
| Section 标题字重 | font-bold (700) | **font-extrabold (800)** |
| Hero 标题字距 | tracking-tighter | **tracking-tightest** |
| 标题行高 | leading-tight (1.2) | **leading-none / 0.88-0.9** |

#### 4.3 字体层级精简
从 6-7 个层级精简到 4 个层级：
1. **Hero 标题**（最大，最粗，最紧）
2. **Section 标题**（大，粗）
3. **正文**（标准）
4. **辅助/标签**（小，弱化）

---

### 任务 5：品牌红再克制——从 5 处降到 3 处

#### 5.1 方案 C 品牌红清单（3 处强记忆点）

| # | 使用场景 | 作用 | 强度 |
|---|---------|------|------|
| 1 | **Hero 主标题关键词** | 第一记忆点 | ★★★★★ |
| 2 | **案例首个成果数字** | 数据冲击 | ★★★★☆ |
| 3 | **CTA 主按钮** | 最终转化 | ★★★★★ |

#### 5.2 进一步减少的品牌红

- ❌ Section Eyebrow 下划线品牌红 → 改为白色/浅灰色
- ❌ Hero CTA 按钮（已包含在 CTA 主按钮里，Hero 和 CTA 各算一个但同类型）
- ❌ Stats 后缀品牌红 → Stats 已删除
- ❌ 所有 hover 态的品牌红文字 → hover 仍可用品牌红（交互反馈，不算常驻）

#### 5.3 原则
- 常驻品牌红 ≤ 3 处
- hover 态品牌红不计算在内（交互反馈）
- 每一处品牌红都必须是关键转化点

---

## 验收标准

### 功能验收
- [ ] Hero 首屏只有 3 层信息（标题/问句/按钮）
- [ ] 首页模块数量 = 5 个（Hero / 服务+行业 / 案例 / 方法论条 / CTA）
- [ ] 所有装饰性元素已删除（粒子/网格/对角线/光晕/渐变背景）
- [ ] 字体对比强烈（Hero 标题/正文 ≥ 5:1）
- [ ] 常驻品牌红 ≤ 3 处

### 技术验收
- [ ] TypeScript 类型检查通过（0 errors）
- [ ] ESLint 检查通过（0 errors）
- [ ] Next.js 生产构建成功，无报错
- [ ] 响应式布局正常（sm/md/lg/xl 四断点）
- [ ] 性能不下降（Lighthouse Performance ≥ 90）

### 设计验收
- [ ] 整体 Bain 气质明显——极简、精英、答案优先
- [ ] 信息层级清晰，对比强烈
- [ ] 留白充足，不拥挤
- [ ] 品牌红珍贵、精准
- [ ] 纯排版驱动，无多余装饰

---

## 风险与注意事项

1. **信息承载量下降风险**
   - 模块从 8 个减到 5 个，有些信息被删除或移到内页
   - 缓解：确保核心价值主张清晰，引导用户通过导航探索更多

2. **"公司规模感"下降风险**
   - Accenture 式的信息密度让人觉得"这是家大公司"
   - Bain 式的极简可能让人觉得"这公司有点小/神秘"
   - 缓解：用数据（500+、98%）和案例来建立可信度

3. **中国市场适应性风险**
   - 国内客户可能更喜欢"信息丰富、看起来很厉害"的网站
   - 缓解：Bain 本身就是高端咨询的代表，极简 = 高端 = 自信

4. **回滚方案**
   - v12（方案 B）和 v13（方案 C）并存
   - 如方案 C 效果不好，可快速切回 v12

---

## 迭代路径

- **方案 B（已完成）**：中度 Bain 化，60% 工作量 / 85% 效果
- **方案 C（本次）**：深度 Bain 化，骨架级换血，极简主义旗舰版
- **方案 D（未来可选）**：Bain + Porsche 融合——极简骨架 + Porsche 动效品质感

---

## 与 ADR-0004 的对应关系

- ✅ 第一阶段（Accenture 骨架）：已完成
- ✅ 第二阶段 B（Bain 血肉·中度）：已完成
- 🚧 **第二阶段 C（Bain 血肉·深度）**：本次执行，从骨架层面换血
- ⏳ 第三阶段（Porsche 点睛）：待定

---

## 相关文档

- ADR-0004: 设计 DNA 深化方案
- [2026-06-29-phase2-bain-brand-clarity-design.md](file:///Users/zhangxiang/Codes/Novalon/novalon-website/docs/superpowers/specs/2026-06-29-phase2-bain-brand-clarity-design.md)（方案 B 规格）
- CONTEXT.md: 朱砂点睛、答案优先等术语定义