张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
243 lines
6.8 KiB
Markdown
243 lines
6.8 KiB
Markdown
# 第二阶段实现计划：确立品牌（Bain 血肉）
|
||
|
||
> 基于设计规格：`docs/superpowers/specs/2026-06-29-phase2-bain-brand-clarity-design.md`
|
||
> 前置条件：第一阶段（Accenture 骨架）已完成
|
||
|
||
## 总览
|
||
|
||
**目标：** 借鉴 Bain & Company 的品牌清晰度，让网站从"有骨架"升级到"有血肉"
|
||
**预计任务数：** 5 个核心任务
|
||
**预计修改文件：** ~10 个
|
||
**验收标准：** TypeScript 0 errors + ESLint 0 errors + 视觉验证通过
|
||
|
||
---
|
||
|
||
## 任务 1：首页 Hero 重构（答案优先）
|
||
|
||
**优先级：** 高
|
||
**依赖：** 无
|
||
|
||
### 改动文件
|
||
- `src/app/(marketing)/home-content.tsx`（HeroSection 部分）
|
||
|
||
### 具体改动
|
||
|
||
1. **标题改为结论型**
|
||
- 当前："让每一次数字化转型掷地有声"
|
||
- 改为："数字化转型成功率提升 3 倍"
|
||
- "3 倍"用品牌红高亮
|
||
|
||
2. **副标题强化量化成果**
|
||
- 当前："12 年深耕，为 500+ 中国企业提供从战略到落地的全链路数字化服务"
|
||
- 改为："500+ 企业验证 · 平均 ROI 提升 2.8 倍 · 项目交付周期缩短 40%"
|
||
|
||
3. **Hero 指标行优化**
|
||
- 从 4 个精简到 3 个最核心 KPI
|
||
- 数字字号放大，增加视觉冲击力
|
||
- 单位用品牌红
|
||
|
||
4. **战略问句优化**
|
||
- 位置：Hero 底部，指标行下方
|
||
- 内容："您的企业，准备好迎接下一阶段的增长了吗？"
|
||
- 样式：斜体 + 低对比度 + 适当留白
|
||
|
||
### 验收标准
|
||
- [ ] Hero 首屏 3 秒内能看懂核心价值
|
||
- [ ] 标题含品牌红关键词，占比 ≤ 30%
|
||
- [ ] 3 个核心 KPI 清晰展示
|
||
- [ ] 战略问句引导往下探索
|
||
|
||
---
|
||
|
||
## 任务 2：品牌红贯穿优化
|
||
|
||
**优先级：** 高
|
||
**依赖：** 无
|
||
|
||
### 改动文件
|
||
- `src/components/sections/section-header.tsx`
|
||
- `src/app/(marketing)/home-content.tsx`（抽查）
|
||
- `src/app/(marketing)/services/services-content-v2.tsx`（抽查）
|
||
- `src/app/(marketing)/about/about-content-v2.tsx`（抽查）
|
||
|
||
### 具体改动
|
||
|
||
1. **SectionHeader 增加品牌红装饰**
|
||
- 在 Eyebrow 标签左侧增加 4px 品牌红竖线
|
||
- 与 Eyebrow 文字垂直对齐，高度等于文字高度
|
||
|
||
2. **每页品牌红触达点检查**
|
||
- 首页：Hero 关键词 + CTA 按钮 + Section 标签 + 数据高亮 → ✅ 满足
|
||
- 服务页：服务卡片色条 + CTA 按钮 + Section 标签 → ✅ 满足
|
||
- 关于页：数据高亮 + CTA 按钮 + Section 标签 → ✅ 满足
|
||
|
||
3. **品牌红面积检查**
|
||
- 确保每页品牌红面积 ≤ 10%
|
||
- 禁止大面积背景色使用品牌红
|
||
|
||
4. **统一链接 hover 态**
|
||
- 所有文本链接 hover 时变为品牌红
|
||
- 过渡动画 200ms ease-out
|
||
|
||
### 验收标准
|
||
- [ ] SectionHeader 有品牌红装饰线
|
||
- [ ] 每页品牌红触达点 ≥ 3 个
|
||
- [ ] 品牌红面积 ≤ 10%
|
||
- [ ] 链接 hover 态统一为品牌红
|
||
|
||
---
|
||
|
||
## 任务 3：案例卡片重构（Bain 三段式）
|
||
|
||
**优先级：** 高
|
||
**依赖：** 无
|
||
|
||
### 改动文件
|
||
- `src/components/sections/case-card.tsx`
|
||
|
||
### 具体改动
|
||
|
||
1. **接口改造**
|
||
```typescript
|
||
interface CaseCardProps {
|
||
industry: string;
|
||
title: string;
|
||
challenge: string; // 新增
|
||
solution: string; // 新增
|
||
impact: {
|
||
value: string;
|
||
label: string;
|
||
}[];
|
||
href: string;
|
||
className?: string;
|
||
}
|
||
```
|
||
|
||
2. **三段式布局**
|
||
- 顶部：行业标签 + 标题
|
||
- 中部：挑战 + 方案（文字较小，信息密度高）
|
||
- 底部：成果数字（超大字号，视觉权重 ≥ 50%）
|
||
|
||
3. **成果区域视觉强化**
|
||
- 数字超大字号 + tabular-nums
|
||
- 数字品牌红，单位灰色
|
||
- hover 时数字微放大（scale 1.02）
|
||
- 数字与数字之间用细线分隔
|
||
|
||
4. **保留现有功能**
|
||
- 背景图片 + 渐变遮罩
|
||
- hover 顶部渐变装饰线
|
||
- 滚动入场动画
|
||
|
||
### 验收标准
|
||
- [ ] 案例卡片采用三段式结构
|
||
- [ ] 成果数字视觉权重 ≥ 50%
|
||
- [ ] hover 时数字微放大
|
||
- [ ] TypeScript 类型检查通过
|
||
|
||
---
|
||
|
||
## 任务 4：内容策略优化
|
||
|
||
**优先级：** 中
|
||
**依赖：** 无
|
||
|
||
### 改动文件
|
||
- `src/app/(marketing)/home-content.tsx`（Section 标题）
|
||
|
||
### 具体改动
|
||
|
||
1. **首页各 Section 标题改为结论型**
|
||
|
||
| 当前标题 | 改为结论型 |
|
||
|---------|-----------|
|
||
| 我们的服务 | 覆盖数字化全生命周期 |
|
||
| 核心优势 | 成功率提升 3 倍的方法论 |
|
||
| 精选案例 | 500+ 企业的增长实践 |
|
||
| 行业洞见 | 把握数字化前沿趋势 |
|
||
| 客户评价 | 96% 客户选择继续合作 |
|
||
|
||
2. **答案优先的文案结构**
|
||
- 每个 Section 先给结论（标题）
|
||
- 再给 2-3 个支撑论据
|
||
- 数据用品牌红高亮
|
||
|
||
3. **每段文字 ≤ 3 行**
|
||
- 超过 3 行则拆分为点列
|
||
- 保持可读性和节奏
|
||
|
||
### 验收标准
|
||
- [ ] 关键 Section 标题为结论型表述
|
||
- [ ] 文案结构符合"结论优先"原则
|
||
- [ ] 每段文字 ≤ 3 行
|
||
|
||
---
|
||
|
||
## 任务 5：极简留白优化
|
||
|
||
**优先级：** 中
|
||
**依赖：** 无
|
||
|
||
### 改动文件
|
||
- `src/app/(marketing)/home-content.tsx`
|
||
- `src/app/globals.css`（可选，增加工具类）
|
||
|
||
### 具体改动
|
||
|
||
1. **Hero 区域增加留白**
|
||
- 桌面端：上下留白从当前值增加到 ≥ 20vh
|
||
- 内容垂直居中更宽松
|
||
- 减少视觉元素，聚焦核心信息
|
||
|
||
2. **CTA 区域增加留白**
|
||
- 桌面端：上下留白 ≥ 120px
|
||
- 内容中心化，最大宽度收窄到 max-w-3xl
|
||
- 增加呼吸感
|
||
|
||
3. **节奏变化**
|
||
- 形成"信息密度 → 大留白 → 再信息密度"的节奏
|
||
- Hero（大留白）→ 服务网格（信息密度）→ Stats Bar（中密度）→ 案例（中密度）→ CTA（大留白）
|
||
|
||
4. **可选：增加 CSS 工具类**
|
||
- `section-padding-lg`：营销页大间距
|
||
- `content-narrow`：内容收窄类
|
||
|
||
### 验收标准
|
||
- [ ] Hero 区域留白比例符合 Bain 式极简美学
|
||
- [ ] CTA 区域留白充足，内容聚焦
|
||
- [ ] 页面节奏有张有弛
|
||
- [ ] 响应式布局正常
|
||
|
||
---
|
||
|
||
## 总体验收
|
||
|
||
### 功能验收
|
||
- [ ] 首页首屏 3 秒内能看懂核心价值
|
||
- [ ] 每页品牌红触达点 ≥ 3 个且面积 ≤ 10%
|
||
- [ ] 案例卡片采用 Bain 式三段式结构
|
||
- [ ] 关键 Section 标题为结论型表述
|
||
- [ ] Hero、CTA 区域留白比例符合 Bain 式极简美学
|
||
|
||
### 技术验收
|
||
- [ ] TypeScript 类型检查通过（0 errors）
|
||
- [ ] ESLint 检查通过（0 errors）
|
||
- [ ] 构建成功，无报错
|
||
- [ ] 响应式布局正常（sm/md/lg/xl 断点）
|
||
|
||
### 设计验收
|
||
- [ ] 品牌红使用符合"朱砂点睛"原则
|
||
- [ ] 信息层级清晰，对比强烈
|
||
- [ ] 留白有节奏感，不拥挤也不空洞
|
||
- [ ] 数据呈现方式专业、有说服力
|
||
|
||
---
|
||
|
||
## 执行顺序
|
||
|
||
```
|
||
任务1（Hero重构） → 任务2（品牌红贯穿） → 任务3（案例卡片） → 任务4（内容策略） → 任务5（留白优化） → 总体验收
|
||
```
|
||
|
||
**并行可能性：** 任务 2、4、5 可以部分并行，因为它们修改的文件不同。
|