张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
262 lines
12 KiB
Markdown
262 lines
12 KiB
Markdown
# 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、咨询专业风、水墨文化基因、服务编号+色条编码、动效四原则等术语定义
|