4.1 KiB
4.1 KiB
1. Product Overview
对你现有前端进行「全量视觉与交互」重构：统一设计体系与设计令牌（Design Tokens），并达到 WCAG 2.1 AA。 交付要求包含像素级验收标准、灰度发布策略与一键回滚预案，确保可控上线与风险可管理。
2. Core Features
2.1 User Roles
| 角色 | 参与方式 | 核心权限 |
|---|---|---|
| 设计师 | 项目成员 | 维护设计体系规范；输出像素级标注与验收基线 |
| 前端开发 | 项目成员 | 落地设计令牌与组件；改造页面交互；接入自动化验收 |
| QA/测试 | 项目成员 | 执行无障碍与视觉回归验收；管理缺陷闭环 |
| 发布负责人 | 项目成员 | 配置灰度、监控指标、执行回滚 |
2.2 Feature Module
本次重构需求由以下最小页面集合承载（现有业务页面不新增路由，仅整体替换视觉与交互实现）：
- 全站现有业务页面（整体改造范围）：统一设计体系应用、交互一致性、无障碍支持、像素级对齐。
- 设计体系与组件库（内部）：设计令牌预览、组件展示/用法、可访问性与交互规范说明。
- 灰度发布与验收面板（内部）：灰度配置、验收结果汇总、回滚操作与审计。
2.3 Page Details
| Page Name | Module Name | Feature description |
|---|---|---|
| 全站现有业务页面（整体改造范围） | 设计体系应用 | 应用统一色板/字体/间距/圆角/阴影等令牌；保证跨页面一致性与可复用性 |
| 全站现有业务页面（整体改造范围） | 交互一致性 | 统一表单校验/错误提示/加载态/空态/弹窗/提示条等行为与文案；保持可预测的交互反馈 |
| 全站现有业务页面（整体改造范围） | WCAG 2.1 AA | 支持键盘可达与可见焦点；语义化结构与必要 ARIA；颜色对比度达标；支持减少动效偏好 |
| 全站现有业务页面（整体改造范围） | 像素级验收 | 以设计基线为准对齐尺寸/间距/字号/行高；定义容差规则与截图基线；记录差异与闭环 |
| 设计体系与组件库（内部） | Design Tokens | 浏览/搜索令牌（颜色、排版、间距、动效、z-index 等）；展示令牌到 CSS 变量/类名/组件 props 的映射 |
| 设计体系与组件库（内部） | 组件与模式 | 展示基础组件与复合模式（表单、表格、弹窗等）；提供交互状态（hover/focus/disabled/loading/invalid） |
| 设计体系与组件库（内部） | 无障碍规范 | 提供组件级 a11y 清单（键盘、读屏、对比度、焦点顺序）；给出 Do/Don’t 与示例 |
| 灰度发布与验收面板（内部） | 灰度发布 | 配置灰度策略（按环境/用户段/百分比/白名单）；实时显示启用状态与版本信息 |
| 灰度发布与验收面板（内部） | 验收总览 | 汇总自动化 a11y 扫描、视觉回归、关键路径冒烟结果；支持按版本/页面/组件查看 |
| 灰度发布与验收面板（内部） | 回滚与审计 | 一键关闭灰度/回滚到上个稳定版本；记录操作人、时间、原因、影响范围 |
3. Core Process
设计→开发→测试→灰度→全量→回滚（可选）
- 设计师流程：沉淀设计体系（颜色/排版/栅格/动效/组件状态）→ 输出令牌字典与组件规范 → 提供像素级标注与验收基线截图。
- 前端开发流程：令牌工程化（生成 CSS 变量/主题）→ 组件库落地并替换旧组件 → 分批改造现有页面（优先核心路径）→ 接入自动化 a11y 与视觉回归。
- QA/测试流程：执行无障碍检查（键盘、读屏、对比度）→ 执行视觉回归与关键路径冒烟 → 缺陷闭环并冻结验收基线。
- 发布负责人流程：开启小流量灰度→ 观察关键指标与错误率 → 分阶段扩大→ 全量；如异常则关闭灰度并回滚。
graph TD
A["全站现有业务页面"] --> B["设计体系与组件库（内部）"]
B --> A
A --> C["灰度发布与验收面板（内部）"]
C --> A
C --> D["回滚到上一稳定版本"]