docs(test): 添加设计文档、测试规范与 E2E 测试套件

- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
2026-07-07 06:54:25 +08:00
parent 8def296301
commit 636bc4ecde
31 changed files with 9262 additions and 41 deletions
@@ -0,0 +1,284 @@
+# 第二阶段设计规格：深度 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: 朱砂点睛、答案优先等术语定义