张翔
636bc4ecde
- 新增 ADR 架构决策记录 (Design DNA 集成与深化) - 新增 CMS 系统设计文档 - 新增实施计划文档 (Phase1-3) - 新增 Bain 品牌升级设计规格 - 新增 E2E 分层测试套件 (P1-P4) - 新增视觉回归测试配置 - 新增光效分析、视觉验证等辅助脚本 - 更新验收测试报告
5.5 KiB
5.5 KiB
第三阶段实现计划：塑造个性（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（数字渐进式出现）
具体改动
-
Hero 多层视差
- 背景光晕层：滚动时缓慢下移（速率 0.3x）
- 网格纹理层：滚动时缓慢上移（速率 0.15x）
- 内容层：正常滚动，但有淡出效果（已有）
- 三层速率差异创造深度感
-
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（装饰线生长动画）
具体改动
-
ServiceCard 左侧色条"生长"动画
- 入场时：色条从高度 0 → 完整高度
- 从下往上生长，速率 0.4s ease-out
- 比卡片内容早 100ms 开始
-
SectionHeader 装饰线动画
- 入场时：装饰线从 0 高度 → 完整高度
- 与 eyebrow 文字同步出现
-
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（链接下划线动画）
具体改动
-
Button hover：从左到右颜色填充
- 背景色从左往右滑入，不是突然变色
- 时长 250ms，ease-out
- 文字保持在最上层
-
卡片 hover 精细化
- 上浮 2px → 4px（更明显但克制）
- 阴影从浅到深的过渡
- 边框颜色的微妙变化
-
链接 hover：下划线扩展
- 文本链接 hover 时，下划线从中间向两边扩展
- 使用伪元素实现，不影响布局
验收标准
- 按钮有从左到右的填充动画
- 卡片 hover 动效细腻自然
- 链接有下划线扩展动画
- 所有动效时长 ≤ 300ms，不拖沓
任务 4：滚动进度指示器
优先级： 低 依赖： 无
改动文件
- 新建
src/components/ui/scroll-progress.tsx src/app/(marketing)/layout.tsx或首页引入
具体改动
-
顶部细进度条
- 高度 2px，固定在页面顶部
- 品牌红渐变填充，随滚动增长
- 轻量化，z-index 很高但不干扰内容
-
可配置选项
- 可选颜色（默认品牌红）
- 可选高度（默认 2px）
- 可选位置（顶部/底部，默认顶部）
验收标准
- 进度条随滚动平滑增长
- 不干扰页面内容
- 性能良好，不影响滚动流畅度
任务 5：页面入场与过渡优化
优先级： 中 依赖： 无
改动文件
src/app/(marketing)/home-content.tsx（Hero 入场优化）- 全局 CSS（过渡曲线统一）
具体改动
-
首屏渐进式入场
- 背景层先出现（淡入）
- 内容层后出现（上移 + 淡入）
- 各元素按层级依次入场，有节奏感
-
动效曲线统一
- 全站使用统一的 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 可以部分并行，修改的组件不同。