张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
285 lines
10 KiB
Markdown
285 lines
10 KiB
Markdown
# 第二阶段设计规格：深度 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: 朱砂点睛、答案优先等术语定义
|