张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
199 lines
5.5 KiB
Markdown
199 lines
5.5 KiB
Markdown
# 第三阶段实现计划：塑造个性（Porsche 点睛）
|
||
|
||
> 前置条件：第一阶段（Accenture骨架）+ 第二阶段（Bain血肉）已完成
|
||
> 核心原则：克制是金，动效只为品牌叙事服务，不炫技
|
||
|
||
## 总览
|
||
|
||
**目标：** 用精巧的动效为网站注入灵魂，传递"技术驱动变革"的品牌故事
|
||
**预计任务数：** 5 个核心任务
|
||
**验收标准：** TypeScript 0 errors + ESLint 0 errors + 动效流畅不卡顿
|
||
|
||
---
|
||
|
||
## 任务 1：滚动视差增强（Hero + 关键 Section）
|
||
|
||
**优先级：** 高
|
||
**依赖：** 无
|
||
|
||
### 改动文件
|
||
- `src/app/(marketing)/home-content.tsx`（Hero 部分）
|
||
- `src/components/sections/stats-bar.tsx`（数字渐进式出现）
|
||
|
||
### 具体改动
|
||
|
||
1. **Hero 多层视差**
|
||
- 背景光晕层：滚动时缓慢下移（速率 0.3x）
|
||
- 网格纹理层：滚动时缓慢上移（速率 0.15x）
|
||
- 内容层：正常滚动，但有淡出效果（已有）
|
||
- 三层速率差异创造深度感
|
||
|
||
2. **StatsBar 数字渐进式"生长"**
|
||
- 从 0 增长到目标值的 countUp 动画（已有，优化缓动）
|
||
- 数字出现时伴随轻微的 scale 从 0.9 → 1
|
||
- 单位和标签延迟 200ms 出现
|
||
|
||
### 验收标准
|
||
- [ ] Hero 有多层视差深度感
|
||
- [ ] 数字滚动动画流畅自然
|
||
- [ ] 所有动效使用 transform + opacity，性能良好
|
||
- [ ] 尊重 prefers-reduced-motion 设置
|
||
|
||
---
|
||
|
||
## 任务 2：品牌动效叙事线
|
||
|
||
**优先级：** 中
|
||
**依赖：** 无
|
||
|
||
### 改动文件
|
||
- `src/components/sections/service-card.tsx`（色条动画）
|
||
- `src/components/sections/case-card.tsx`（成果数字点亮）
|
||
- `src/components/sections/section-header.tsx`（装饰线生长动画）
|
||
|
||
### 具体改动
|
||
|
||
1. **ServiceCard 左侧色条"生长"动画**
|
||
- 入场时：色条从高度 0 → 完整高度
|
||
- 从下往上生长，速率 0.4s ease-out
|
||
- 比卡片内容早 100ms 开始
|
||
|
||
2. **SectionHeader 装饰线动画**
|
||
- 入场时：装饰线从 0 高度 → 完整高度
|
||
- 与 eyebrow 文字同步出现
|
||
|
||
3. **CaseCard 成果数字"点亮"**
|
||
- 入场时：数字从灰色 → 白色 + 轻微放大
|
||
- 延迟 200ms，在挑战/方案文字之后出现
|
||
- 象征"从问题到成果"的叙事
|
||
|
||
### 验收标准
|
||
- [ ] ServiceCard 色条有生长动画
|
||
- [ ] SectionHeader 装饰线有入场动画
|
||
- [ ] CaseCard 成果数字有延迟点亮效果
|
||
- [ ] 动效形成品牌叙事线，不堆砌
|
||
|
||
---
|
||
|
||
## 任务 3：微动效精细化
|
||
|
||
**优先级：** 中
|
||
**依赖：** 无
|
||
|
||
### 改动文件
|
||
- `src/components/ui/button.tsx`（hover 填充动画）
|
||
- `src/components/sections/product-card.tsx`（hover 微动效）
|
||
- `src/components/ui/static-link.tsx` 或全局 CSS（链接下划线动画）
|
||
|
||
### 具体改动
|
||
|
||
1. **Button hover：从左到右颜色填充**
|
||
- 背景色从左往右滑入，不是突然变色
|
||
- 时长 250ms，ease-out
|
||
- 文字保持在最上层
|
||
|
||
2. **卡片 hover 精细化**
|
||
- 上浮 2px → 4px（更明显但克制）
|
||
- 阴影从浅到深的过渡
|
||
- 边框颜色的微妙变化
|
||
|
||
3. **链接 hover：下划线扩展**
|
||
- 文本链接 hover 时，下划线从中间向两边扩展
|
||
- 使用伪元素实现，不影响布局
|
||
|
||
### 验收标准
|
||
- [ ] 按钮有从左到右的填充动画
|
||
- [ ] 卡片 hover 动效细腻自然
|
||
- [ ] 链接有下划线扩展动画
|
||
- [ ] 所有动效时长 ≤ 300ms，不拖沓
|
||
|
||
---
|
||
|
||
## 任务 4：滚动进度指示器
|
||
|
||
**优先级：** 低
|
||
**依赖：** 无
|
||
|
||
### 改动文件
|
||
- 新建 `src/components/ui/scroll-progress.tsx`
|
||
- `src/app/(marketing)/layout.tsx` 或首页引入
|
||
|
||
### 具体改动
|
||
|
||
1. **顶部细进度条**
|
||
- 高度 2px，固定在页面顶部
|
||
- 品牌红渐变填充，随滚动增长
|
||
- 轻量化，z-index 很高但不干扰内容
|
||
|
||
2. **可配置选项**
|
||
- 可选颜色（默认品牌红）
|
||
- 可选高度（默认 2px）
|
||
- 可选位置（顶部/底部，默认顶部）
|
||
|
||
### 验收标准
|
||
- [ ] 进度条随滚动平滑增长
|
||
- [ ] 不干扰页面内容
|
||
- [ ] 性能良好，不影响滚动流畅度
|
||
|
||
---
|
||
|
||
## 任务 5：页面入场与过渡优化
|
||
|
||
**优先级：** 中
|
||
**依赖：** 无
|
||
|
||
### 改动文件
|
||
- `src/app/(marketing)/home-content.tsx`（Hero 入场优化）
|
||
- 全局 CSS（过渡曲线统一）
|
||
|
||
### 具体改动
|
||
|
||
1. **首屏渐进式入场**
|
||
- 背景层先出现（淡入）
|
||
- 内容层后出现（上移 + 淡入）
|
||
- 各元素按层级依次入场，有节奏感
|
||
|
||
2. **动效曲线统一**
|
||
- 全站使用统一的 ease-out 曲线
|
||
- 快速开始，缓慢结束（cubic-bezier(0.22, 1, 0.36, 1)）
|
||
- 模拟物理世界的减速感
|
||
|
||
### 验收标准
|
||
- [ ] 首屏入场有层次感、节奏感
|
||
- [ ] 动效曲线统一自然
|
||
- [ ] 完全尊重 prefers-reduced-motion
|
||
|
||
---
|
||
|
||
## 总体验收
|
||
|
||
### 功能验收
|
||
- [ ] Hero 有多层视差深度感
|
||
- [ ] 品牌红元素形成叙事流动线
|
||
- [ ] 微动效细腻自然，不炫技
|
||
- [ ] 滚动进度指示器工作正常
|
||
- [ ] 页面入场有层次感
|
||
|
||
### 技术验收
|
||
- [ ] TypeScript 类型检查通过（0 errors）
|
||
- [ ] ESLint 检查通过（0 errors）
|
||
- [ ] 构建成功，无报错
|
||
- [ ] 所有动效使用 transform + opacity，性能良好
|
||
- [ ] 完全尊重 prefers-reduced-motion 设置
|
||
|
||
### 设计验收
|
||
- [ ] 动效克制，只为品牌叙事服务
|
||
- [ ] 动效曲线统一自然
|
||
- [ ] 不干扰阅读和操作
|
||
- [ ] 整体传达"技术驱动变革"的品牌故事
|
||
|
||
---
|
||
|
||
## 执行顺序
|
||
|
||
```
|
||
任务1（视差增强） → 任务2（品牌叙事线） → 任务3（微动效） → 任务4（进度指示器） → 任务5（入场优化） → 总体验收
|
||
```
|
||
|
||
**并行可能性：** 任务 2、3 可以部分并行，修改的组件不同。
|