# ADR 0004: 设计 DNA 深化方案——Accenture 骨架 + Bain 血肉 + Porsche 点睛

## 状态

已接受

## 日期

2026-06-29

## 上下文

ADR-0003 确立了「咨询为骨，水墨为魂」的总体设计方向，但缺乏对三家参考公司（Accenture / Bain & Company / Porsche Consulting）的深度拆解，也没有明确具体的落地路径和设计令牌细节。

当前项目状态：
- 设计令牌系统有基础（颜色/排版/间距/阴影/动效），但缺乏系统化的三级结构
- 组件库有 91 个组件，但版本混乱（V1/V2/V3 并存）
- 品牌红贯穿规则已建立，但执行不统一
- 动效有基础，但缺乏统一语言和品质感
- 内容策略有四层叙事模型，但深度不足，缺乏「答案优先」的冲击力

核心问题：
1. 三家参考公司的设计精髓分别是什么？我们具体借鉴哪些？
2. 设计令牌系统如何从「有基础」升级到「工业化水准」？
3. 动效品质如何从「基础」升级到「体验级」，同时保持咨询业的稳重感？
4. 内容策略如何借鉴 Bain 的「答案优先」，首屏就抓住用户？

## 决策

### 1. 三维设计 DNA 整合模型

基于 design-dna 技能框架，确认三个维度的整合策略：

| 维度 | 主导参考 | 核心借鉴点 | 当前状态 → 目标 |
|------|---------|-----------|----------------|
| **Design System（设计系统）** | Accenture | 工业化令牌体系、模块化组件、服务网格、数据条 | 基础令牌 → 三级令牌体系（base/semantic/component） |
| **Design Style（设计风格）** | Bain | 品牌色极致运用、答案优先内容策略、极简留白 | 有规则执行不一 → Bain 级品牌清晰度 |
| **Visual Effects（视觉效果）** | Porsche Consulting | 滚动视差、数字滚动、错峰入场、Ken Burns、动效叙事 | 基础动效 → 体验级动效（克制但精致） |

### 2. 四个关键设计决策（已确认）

#### 决策一：颜色策略 —— 编号为主，色条为辅

**保持当前方案不变**，与 ADR-0003 一致：
- 服务线区分：大号数字编号（主要识别） + 卡片左侧 4px 细色条（辅助识别）
- 不整卡上色，保持专业感
- 服务色：蓝（软件）/青（数据）/琥珀（咨询）/紫（解决方案）
- 品牌红朱砂点睛原则不变（面积 ≤ 10%）

**理由**：
- 纯颜色编码在咨询场景下显得不够专业
- 纯编号又缺乏快速识别的视觉锚点
- 编号+色条平衡了专业感和识别效率

#### 决策二：内容策略 —— 强借鉴 Bain 「答案优先」

**首页首屏直接给出核心价值主张**：
- Hero 区域直接展示量化成果（如「服务 50+ 企业客户」「平均效率提升 30%」）
- 每个 Section 标题改为结论句（如「成本降低 40%」而非「我们的优势」）
- 案例研究采用 Bain 式三段式：挑战 → 方案 → 成果（成果量化展示）
- 关键数据超大字号展示，第一眼就抓住注意力

**理由**：
- To B 决策者时间宝贵，3 秒内看懂价值才会继续往下看
- Bain 的「答案优先」策略经过验证，专业感和说服力最强
- 与咨询公司的「用数据说话」定位高度契合

#### 决策三：动效强度 —— 体验级全场景动效叙事

**Porsche Consulting 水准，但克制不炫技**：

| 动效类型 | 是否启用 | 强度 | 使用场景 |
|---------|---------|------|---------|
| 滚动显现（Scroll Reveal） | ✅ | 中 | 全站通用 |
| 错峰入场（Staggered Reveal） | ✅ | 中 | 卡片列表、服务网格 |
| 视差滚动（Parallax） | ✅ | 弱（5-15% 偏移） | Hero 背景、数据条图标 |
| 数字滚动（Number Ticker） | ✅ | 中 | Stats Bar、案例成果、Hero 指标 |
| Ken Burns 效果 | ✅ | 极弱（scale 1.0→1.1，10-15s） | Hero 背景图、案例封面 |
| 粒子效果 | ❌ | - | 不使用（避免视觉噪音） |
| 光标跟随 | ❌ | - | 不使用（咨询网站不适合） |
| WebGL/3D | ❌ | - | 现阶段不引入（保持性能和可维护性） |

**动效四原则**（保持 ADR-0003 定义）：
1. Purposeful（有目的）：每个动效服务于内容传达
2. Fast（快节奏）：入场 200-300ms，hover 150ms，反馈 100ms
3. Natural（自然）：统一 `ease-ink` [0.22, 1, 0.36, 1] 缓动曲线
4. Layered（分层）：子元素 stagger 30-60ms，Section 间 100-150ms

**理由**：
- 用户明确选择「体验级」，希望用动效提升品质感
- Porsche Consulting 用动效讲述「变革」故事，与「技术驱动变革」的品牌理念契合
- 所有动效都支持 `prefers-reduced-motion` 降级，无障碍友好

#### 决策四：排版方向 —— 三家融合方案

**Accenture 信息密度 + Bain 标题对比 + Porsche 图文节奏**：

- **主体排版**：Accenture 式高信息密度、数据驱动、强对比
  - 12 级字号尺度，从 0.6875rem 到 8rem
  - 字重从 400 到 900 的完整谱系
  - 数据可视化驱动内容呈现

- **标题和关键数据**：Bain 式超大字号 + 强对比
  - Hero 标题：clamp(2.5rem, 5vw, 4.5rem)，字重 800
  - 关键数字：超大字号 + 品牌色 + tabular-nums
  - 标题/正文比例 ≥ 3:1，制造视觉张力

- **图文组合和节奏**：Porsche 式电影感
  - 分屏布局（左图右文 / 左文右图交替）
  - 大图占比高（50-60% 视口宽度）
  - 滚动节奏：信息密度 → 大留白 → 再信息密度，形成呼吸感

**理由**：
- 纯 Accenture 太「工业化」，缺乏品牌温度
- 纯 Bain 太「极简」，承载不了技术咨询的信息密度
- 纯 Porsche 太「设计感」，可能显得不够专业稳重
- 三者融合：信息效率 + 品牌清晰度 + 品质感

### 3. 三阶段落地路径

| 阶段 | 名称 | 核心借鉴 | 预计工作量 | 完成度目标 |
|------|------|---------|-----------|-----------|
| **第一阶段** | 打好地基（Accenture 骨架） | 工业化令牌体系、模块化组件、服务网格、数据条 | 2-3 周 | 65/100 |
| **第二阶段** | 确立品牌（Bain 血肉） | 答案优先内容、品牌红贯穿、案例三段式、极简留白 | 2-3 周 | 80/100 |
| **第三阶段** | 塑造个性（Porsche 点睛） | 滚动视差、数字滚动、错峰入场、Ken Burns、动效叙事 | 3-4 周 | 95/100 |

#### 第一阶段：打好地基（Accenture 骨架）

核心任务：
1. **设计令牌体系完善**：三级令牌命名规范（base → semantic → component），补充组件令牌
2. **组件库系统化**：清理 V1/V2/V3 版本混乱，统一组件命名和分类
3. **服务网格模块**：Accenture 式模块化服务卡片 + 编号 + 4px 色条
4. **数据条组件**：Hero 下方 Stats Bar，数字滚动动画（基础版）
5. **页面布局规范**：12 列网格系统落地，Section 间距统一

验收标准：
- 所有页面使用统一的设计令牌
- 组件库版本统一，无重复组件
- 服务网格和数据条组件可复用
- TypeScript 类型检查通过，构建无错误

#### 第二阶段：确立品牌（Bain 血肉）

核心任务：
1. **首页 Hero 重构**：答案优先——首屏直接给出核心价值主张 + 量化成果
2. **品牌红贯穿优化**：每页 ≥ 3 处品牌红触达点，确保识别一致性
3. **案例卡片重构**：Bain 式「挑战→方案→成果」三段式，超大数字展示成果
4. **内容策略优化**：Section 标题改为结论句，答案优先的文案结构
5. **极简留白优化**：关键区域（Hero、CTA、案例详情）增加留白，内容中心化聚焦

验收标准：
- 首页首屏 3 秒内看懂核心价值
- 每页品牌红触达点 ≥ 3 个且 ≤ 10% 面积
- 案例卡片采用 Bain 式三段式结构
- 关键页面留白比例符合 Bain 式极简美学

#### 第三阶段：塑造个性（Porsche 点睛）

核心任务：
1. **滚动显现系统**：全站统一 scroll reveal，错峰入场
2. **视差滚动效果**：Hero 背景微视差，装饰元素错峰位移
3. **数字滚动动画**：数字进入视口时计数动画，支持多种格式
4. **Ken Burns 效果**：大图缓慢缩放，增加质感
5. **动效语言统一**：全站缓动曲线统一为 ease-ink，时长规范落地
6. **交互动效品质**：卡片 hover 精致化，按钮按压回弹，链接下划线展开

验收标准：
- 滚动体验流畅，60fps
- 动效有目的性，不炫技
- 支持 prefers-reduced-motion 降级
- Lighthouse 性能分数 ≥ 90

## 备选方案

### 方案 A：克制动效级（放弃 Porsche 体验级）

- **内容**：只保留滚动显现和 hover 微动效，不做视差和数字滚动
- **优点**：开发成本低，性能好，风险小
- **缺点**：缺乏差异化，与普通咨询网站拉不开差距
- **否决原因**：用户明确选择「体验级」，希望打造 Porsche 级别的品质感

### 方案 B：纯 Bain 极简路线（放弃 Accenture 信息密度）

- **内容**：全站大留白、少文字、单栏聚焦
- **优点**：高级感强，品牌记忆点清晰
- **缺点**：承载不了技术咨询的大量内容，信息效率低
- **否决原因**：技术咨询公司需要展示方法论、案例、技术栈等大量信息，纯极简不够用

### 方案 C：全 Porsche 设计感路线（放弃咨询稳重感）

- **内容**：大图分屏、电影感、强动效，走设计公司路线
- **优点**：视觉冲击力强，差异化极度明显
- **缺点**：可能显得不够专业稳重，To B 客户信任度可能下降
- **否决原因**：技术咨询的核心是专业可信赖，设计感是加分项不是核心

## 理由

### 1. 与业务定位高度匹配

- **Accenture 骨架**：确保工业化、可扩展、专业感底线
- **Bain 血肉**：确保品牌清晰度、说服力、答案优先的内容策略
- **Porsche 点睛**：提供差异化品质感，用动效讲述「技术驱动变革」

三者形成互补：系统 + 清晰 + 个性，覆盖了技术咨询公司的核心需求。

### 2. 实施路径务实可控

- 从地基到点睛，每一步都建立在前一步的基础上
- 每阶段都有明确的验收标准和可量化成果
- 风险层层递进：第一阶段风险最低（工程性工作），第三阶段风险最高（设计品质要求）
- 可以在任意阶段暂停，都能获得一个「可用且专业」的网站

### 3. 资源投入合理

- 第一阶段 2-3 周：解决技术债务，建立基础
- 第二阶段 2-3 周：品牌升级，内容优化
- 第三阶段 3-4 周：体验打磨，品质提升

总周期 7-10 周，对于一个企业官网的设计升级来说是合理的。

### 4. 性能与体验的平衡

- 所有动效优先使用 CSS transform + opacity，GPU 加速
- 支持 `prefers-reduced-motion` 无障碍降级
- 不引入 WebGL/粒子等重效果，保持页面轻量
- 目标 Lighthouse 性能分数 ≥ 90

## 后果

### 正面

1. **专业度大幅提升**：从「有基础」升级到「工业化水准」的设计系统
2. **品牌清晰度增强**：Bain 式的品牌色运用和答案优先策略，提升品牌记忆点
3. **体验品质升级**：Porsche 级动效提供差异化竞争优势
4. **可扩展性增强**：Accenture 式模块化系统支持未来业务扩张
5. **内容说服力提升**：答案优先 + 数据驱动，提升转化率

### 负面

1. **开发周期较长**：7-10 周的三阶段路径，需要耐心
2. **设计品质要求高**：Porsche 级动效对细节要求极高，做不好反而减分
3. **内容重构工作量大**：Bain 式答案优先需要重新组织所有文案
4. **性能维护成本**：动效越多，性能调优工作量越大

### 风险

1. **动效过度风险**：动效做太多太炫，显得不专业
   - 缓解措施：动效四原则严格执行，每个动效都要有明确的目的性
2. **内容质量风险**：答案优先需要高质量的量化数据，初创公司可能数据不足
   - 缓解措施：用「方法论 + 框架」替代部分量化数据，真实案例优先
3. **性能退化风险**：动效增加导致页面卡顿
   - 缓解措施：优先 CSS 动画，IntersectionObserver 懒触发，性能基准测试
4. **风格融合风险**：三家风格融合不好，显得不伦不类
   - 缓解措施：设计评审机制，每个新组件都对照设计 DNA 检查

## 相关决策

- ADR-0001: 重构路径选择——混合方案而非全站 web-design-engineer 替换
- ADR-0002: 信息架构与叙事模型——HSI 混合架构 + 四层叙事模型
- ADR-0003: 设计 DNA 整合方案——咨询为骨，水墨为魂
- CONTEXT.md: 设计 DNA、咨询专业风、水墨文化基因、服务编号+色条编码、动效四原则等术语定义