novalon-website/docs/plans/2026-08-18-vibe-design-optimization-plan.md

# Novalon 官网设计优化实施计划

> 依据：人人都是产品经理《AI 时代 Vibe Design 必备的 50 种 UI 风格名词！》（https://www.woshipm.com/share/6446559.html）
> 日期：2026-08-18
> 状态：✅ 已完成封版（Phase 1-3 实现 + 质量门禁 + 用户旅程测试 UJ-01~11 61 passed + impeccable critique 三轮 31→26→34 + CMS 内容层收尾）
> 执行原则：按 `AGENTS.md` 工作流，先文档共识 → 任务拆解 → TDD 实现 → 质量门禁 → 文档同步。

---

## 1. 背景与目标

当前 Novalon 官网已有「白底 + 墨色 + 朱砂红 + 克制动效」的咨询专业风骨架（Swiss Modernism 2.0 雏形），但存在以下问题：

1. 首页 Hero 只有文字，没有产品视觉，首屏说服力弱。
2. 列表页全部是等尺寸卡片墙，信息层级扁平，缺乏记忆点。
3. 四层叙事模型中的 L3 信任层基本缺失，Social Proof / Trust & Authority 未落地。
4. 首页是并列区块，不是「痛点 → 方案 → 结果」的章节叙事。
5. 动效全部是统一 fade-up，缺少首屏编排与差异化微交互。
6. 品牌视觉资产（朱砂下划线、数字编号、点阵纹理、数据可视化）未形成统一系统。

### 目标

在不改变「咨询专业风 + 品牌红点缀」定位的前提下：

- 首屏从「文字海报」升级为「价值 + 产品视觉 + 单一 CTA」的转化型 Hero。
- 产品/服务/方案列表从「均匀卡片」升级为「Bento Box 非对称网格」，主次分明。
- 补齐可验证的信任层与章节式叙事。
- 建立统一动效语言与品牌视觉资产。
- 通过全部质量门禁（type-check / lint / unit / e2e / visual / lighthouse / a11y）。

---

## 2. 设计方向（风格定位）

一句话定位：

> **Swiss Modernism 2.0（骨架） + Bento Box Grid（信息组织） + Hero-Centric & Conversion-Optimized（首屏转化） + Trust & Authority & Social Proof（信任层） + Interactive Product Demo / Motion-Driven（差异化记忆点） + Accessible & Ethical（底线）**

### 从文章借用的风格标签

| 风格 | 用途 | 落地位置 |
|---|---|---|
| Swiss Modernism 2.0 | 全站网格、字阶、留白基线 | `globals.css`、所有页面 |
| Hero-Centric Design | 首屏单一价值主张 + 单一主 CTA | 首页、产品/方案/服务列表页 Hero |
| Conversion-Optimized | 围绕「预约咨询/演示」优化路径 | 所有 CTA 区、Contact 页 |
| Bento Box Grid | 功能多时用非对称模块拉开主次 | 产品矩阵、服务、方案列表 |
| Feature-Rich Showcase | 产品功能分组展示，避免同尺寸卡片 | 产品详情页 |
| Trust & Authority | 真实可验证的信任信号 | 首页信任区、详情页 L3、About |
| Social Proof-Focused | 首批客户共创、真实 quote | 首页/About/详情页 L3 |
| Storytelling-Driven | 章节化叙事，替代并列卡片 | 首页、About、详情页 L2 |
| Interactive Product Demo | 产品界面/数据可视化直接展示 | 首页 Hero、产品详情页 |
| Micro-interactions / Motion-Driven | 有目的的短动效，避免统一反射 | 全站交互反馈、首屏入场 |
| Accessible & Ethical / Inclusive Design | WCAG 2.1 AA 底线 | 全站 |

### 明确不采用的风格

- ❌ Glassmorphism / Liquid Glass（背景一乱文字糊，性能开销大）
- ❌ Neumorphism / Claymorphism / Skeuomorphism（对比度与专业感风险）
- ❌ Y2K / Vaporwave / Cyberpunk / Memphis / Brutalism（与咨询品牌人格冲突）
- ❌ 大面积渐变、发光边框、连续循环动画
- ❌ 虚构案例、客户 logo、资质、数据（零编造原则）

---

## 3. 范围与不在范围内

### 在范围内

1. 首页 Hero 重做。
2. 产品矩阵页 Bento Box 化。
3. 服务/方案列表页信息层级优化（与产品矩阵共用组件模式）。
4. 详情页 L3 信任层组件启用（数据就绪时）。
5. 首页/About 章节式叙事改造。
6. 动效语言统一（首屏编排、微交互、reduced-motion）。
7. 品牌视觉资产统一（数字编号、色条、点阵、数据可视化插画）。
8. 相关单测 / E2E / 视觉回归 / Lighthouse 更新。

### 不在范围内

- ❌ 更换技术栈（保持 Next.js App Router + React + Tailwind）。
- ❌ 重构 CMS / Admin / 后端 API。
- ❌ 引入新 UI 框架或重型动效库。
- ❌ 重做 Logo / 品牌色 / 字体（身份保留优先）。
- ❌ 编造真实案例、资质、客户数据。
- ❌ 全站深色模式大改版。

---

## 4. 阶段总览

| 阶段 | 内容 | 预估工期 |
|---|---|---|
| Phase 0 | 基线对齐：设计令牌、组件现状盘点、测试基线 | 0.5–1 天 |
| Phase 1 | P0：首页 Hero + 产品矩阵 Bento Box | 2–3 天 |
| Phase 2 | P1：信任层 + 章节式叙事 | 2–3 天 |
| Phase 3 | P2：动效统一 + 品牌视觉资产 + 无障碍收尾 | 1–2 天 |
| Phase 4 | 全量验证 + 文档同步 | 1 天 |

---

## 5. Phase 0：基线对齐

**目标：** 确认现状、锁定设计令牌、建立可回滚基线。

- [ ] 盘点当前所有页面 Hero / 卡片 / CTA 组件，输出「同构组件清单」。
- [ ] 确认 `globals.css` 设计令牌与 `CONTEXT.md` / `PRODUCT.md` 一致（品牌红 ≤10%、动效 200-300ms、ease-ink）。
- [ ] 运行 `npm run type-check`、`npm run lint`、`npm run test:unit`、`npm run test:visual` 记录基线。
- [ ] 更新 `docs/plans/2026-08-18-vibe-design-optimization-plan.md` 中受影响文件清单（如实现过程中有增删）。

---

## 6. Phase 1：P0 首屏与信息架构

### 6.1 首页 Hero 重做（Hero-Centric + Conversion-Optimized + Interactive Product Demo）

**文件：**
- 修改：`src/app/(marketing)/home-content-v14.tsx`
- 可能新增：`src/components/sections/hero-product-visual.tsx`、`src/components/sections/hero-data-visual.tsx`

**任务：**

- [x] 首屏布局改为左右分栏（桌面）：左侧价值主张 + 单一主 CTA，右侧产品界面/数据看板可视化。
- [x] 主 CTA 保留「预约咨询」；次级 CTA 降级为文字链接（如「查看产品矩阵」）。
- [x] 数据条（stats）保留但压缩为 3 个以内，不与 CTA 抢注意力；数字使用 tabular-nums。
- [x] 产品视觉采用 **React/CSS/SVG 高保真产品界面 Mockup**（`hero-product-visual.tsx`）：应用窗口 + 侧边导航 + KPI + 趋势图 + 待办预警 + 商机表，内容使用真实产品模块命名，标注「产品界面示意」与「示例数据」避免误导。
- [ ] 若后续有已脱敏的真实产品截图，可替换 SVG 示意；禁止使用虚构客户数据的截图。
- [x] 移动端：视觉图置于价值主张下方，CTA 保持首屏可达。
- [x] 新增 `@media (prefers-reduced-motion: reduce)` 降级路径（沿用现有 ScrollReveal / useReducedMotion）。
- [x] 新增 `src/app/(marketing)/home-content-v14.test.tsx` 覆盖 Hero 产品视觉、单一 CTA、stats 断言。

**验收标准：**
- [ ] 首屏出现真实产品视觉（非纯文字）。
- [ ] 首屏只有一个主 CTA 按钮。
- [ ] 首屏高度不超 100vh（桌面 90vh 左右）。
- [ ] 移动端 375px 无横向滚动，CTA 首屏可见。

### 6.2 产品矩阵页 Bento Box（Bento Box Grid + Feature-Rich Showcase）

**文件：**
- 修改：`src/app/(marketing)/products/products-content-v3.tsx`
- 可能新增：`src/components/sections/bento-product-card.tsx`

**任务：**

- [x] 将「企业套装」6 款产品改为非对称 Bento 网格：**ERP（睿新管理系统）占 2×2 大卡（当前旗舰）**，**BI（睿新商业智能分析平台）占 1×2 次大卡**（呼应「数据到决策」品牌主张），其余产品 1×1。
- [x] `featured` 优先级先写死为 ERP + BI，后续有真实咨询/转化数据后可改为 CMS 可配置字段。
- [x] 大卡展示：产品名 + 定位语 + 核心指标 + 推荐组合；小卡保持轻量快照。
- [x] 保留「企业套装 / 专业产品」分区，但删除同尺寸重复卡片。
- [ ] 复用服务编号 + 4px 色条编码体系，不整卡上色。
- [x] 卡片 hover：上移 4px + 底部品牌色条延展 + 箭头位移，统一 200-300ms。
- [x] 更新 `src/app/(marketing)/products/products-content-v3.test.tsx`（新增 ERP large / BI wide 断言）。

**验收标准：**
- [ ] 产品网格存在至少两种卡片尺寸（非对称）。
- [ ] 每个产品卡片仍能在一屏内识别名称、场景、关键指标。
- [ ] 品牌红面积 ≤10%。

### 6.3 服务/方案列表页对齐（共用 Bento 模式）

**文件：**
- 修改：`src/app/(marketing)/services/services-content-v3.tsx`
- 修改：`src/app/(marketing)/solutions/solutions-content-v3.tsx`

**任务：**

- [x] 服务页：核心服务大卡（含指标、能力清单），辅助服务小卡；删除等宽四卡（首个服务 `md:col-span-2` 大卡，其余 1 列）。
- [x] 方案页：行业卡片保留「痛点 + 推荐产品组合 + 成果」，但用 2+1 非对称布局突出重点行业（首个方案 `md:col-span-2` 大卡，其余 1 列）。
- [x] 与产品矩阵共用 `BentoProductCard` / 通用 Bento 容器（抽到 `src/components/ui/bento-grid.tsx` 或 `src/components/sections/bento-grid.tsx`）。

**验收标准：**
- [ ] 服务/方案页不再出现全等尺寸卡片墙。
- [ ] 页面首屏到内容区的视觉节奏有主次。

---

## 7. Phase 2：P1 信任与叙事

### 7.1 信任层（Trust & Authority + Social Proof-Focused）

**文件：**
- 修改：`src/app/(marketing)/home-content-v14.tsx`（TrustSection）
- 修改：`src/app/(marketing)/products/product-detail-content-v3.tsx`（CaseStudiesSection / CertificationsSection）
- 修改：`src/app/(marketing)/solutions/solution-detail-content-v3.tsx`
- 修改：`src/app/(marketing)/services/service-detail-content-v4.tsx`
- 修改：`src/lib/constants/*`（products.ts / solutions.ts / services.ts / company.ts / stats.ts）

**任务：**

- [x] 将首页 TrustSection 从「4 个数据卡」升级为「数据条 + 可验证信任信号」组合：成立时间、核心团队、自研产品、私有化部署、首批客户共创。
- [x] 真实数据才展示；无真实案例时显示「首批客户共创中」标签，不渲染空白 L3。
- [ ] 若已有真实 quote / 共创伙伴，使用 `Testimonial` 组件（现有 `src/components/content/testimonials.tsx`）。
- [x] 详情页 L3：有数据 → 正常展示；有意向 → 「正在服务中」；无数据 → 不显示（沿用 CONTEXT.md 三档策略）。
- [x] 确保所有数字、资质、案例可追溯来源，禁止编造。

**验收标准：**
- [ ] 首页信任区全部内容可验证（来源注释或数据文件）。
- [ ] 无虚构客户 logo / 案例 / 资质。
- [ ] 详情页 L3 空数据时不出现空白区块。

### 7.2 章节式叙事（Storytelling-Driven）

**文件：**
- 修改：`src/app/(marketing)/home-content-v14.tsx`
- 修改：`src/app/(marketing)/about/about-content-v4.tsx`
- 修改：详情页 L2 组件（`product-detail-content-v3.tsx`、`solution-detail-content-v3.tsx`、`service-detail-content-v4.tsx`）

**任务：**

- [x] 首页新增「问题 → 方法 → 结果」三幕叙事区，替代/重组现有服务卡片并列结构。
- [x] 使用章节编号（01 诊断 / 02 设计 / 03 交付 / 04 陪伴）强化节奏。
- [x] About 页把「公司简介」改为「为什么成立 → 怎么做事 → 走到哪里」的故事线。
- [x] 详情页 L2 使用「痛点 → 架构 → 组合 → 成果」的线性叙事，而不是纯功能卡片堆叠。
- [ ] 每章保留一个「快速查看详情」入口，避免长文淹没。

**验收标准：**
- [ ] 首页存在至少一个非卡片式的叙事区块。
- [ ] 所有叙事内容与现有数据一致，不新增虚构事实。

---

## 8. Phase 3：P2 动效、品牌资产与无障碍

### 8.1 动效统一（Motion-Driven + Micro-interactions）

**文件：**
- 修改：`src/app/(marketing)/home-content-v14.tsx`
- 修改：`src/app/(marketing)/products/products-content-v3.tsx`
- 修改：`src/app/(marketing)/solutions/solutions-content-v3.tsx`
- 修改：`src/app/(marketing)/services/services-content-v3.tsx`
- 修改：`src/components/ui/scroll-reveal.tsx`（如需要）
- 修改：`src/components/ui/button.tsx`、`src/components/ui/card.tsx`（如需要）

**任务：**

- [x] 首页首屏做一次有编排的入场：Logo → 标题逐行 → 数据 → 产品视觉 → CTA，各元素 stagger 30-60ms。
- [x] 列表页统一卡片 hover：`translateY(-4px)` + 色条/箭头反馈，150-300ms。
- [x] 保留数字 count-up，但确保 reduced-motion 下直接显示最终值。
- [ ] 移除「每个 section 都 fade-up」的机械反射；不同区块使用不同入场方式（clip-path、位移、透明度组合）。
- [ ] 所有动画遵守：200-300ms 入场、150ms hover、100ms 反馈、ease-ink、禁止 >700ms、禁止弹性入场。

**验收标准：**
- [ ] `prefers-reduced-motion: reduce` 下无位移/闪烁动画，内容完整可见。
- [ ] 无连续循环装饰动画。

### 8.2 品牌视觉资产

**文件：**
- 修改：`src/app/globals.css`
- 修改：`tailwind.config.js`
- 可能新增：`src/components/ui/data-visual.tsx`、`src/components/ui/brand-motif.tsx`

**任务：**

- [x] 把「朱砂下划线 + 数字编号 + 极淡点阵 + 数据可视化风格」固化为可复用组件/工具类（`bento-grid.tsx` 新增，`brand-visuals.tsx` 已有 GeometricDecoration / DataBar 覆盖点阵与数据可视化）。
- [ ] 产品/方案/服务详情页使用同一套数据可视化插画语言（图表、架构图、仪表盘）。
- [ ] 在 `CONTEXT.md` 记录风格主词：Swiss Modernism 2.0 + Bento Box + Hero-Centric + Motion-Driven。

**验收标准：**
- [ ] 全站至少 3 个页面出现可识别的同一品牌视觉资产。
- [ ] 品牌红面积 ≤10%，每页 ≥3 处触达点。

### 8.3 无障碍与性能收尾（Accessible & Ethical）

**任务：**

- [x] 全站焦点态检查：`:focus-visible` 统一为品牌红描边。
- [x] 新增视觉元素补充 aria-label / role / alt（hero-product-visual 已有「产品界面示意」「示例数据」标注与 aria-hidden）。
- [x] 运行 `npm run check:contrast`、`npm run check:headings`。
- [ ] 运行 Lighthouse mobile + desktop，性能 ≥ 90（在现有基线基础上不退化）。[环境受限：TRAE 沙箱拦截 Chrome Crashpad 目录，需在沙箱外运行]
- [x] 若引入 SVG 数据可视化，确认不阻塞 LCP、不增加明显 bundle 体积（纯 CSS/SVG 组件实现，无图片资源）。

**验收标准：**
- [ ] `npm run check:contrast` 通过。
- [ ] `npm run check:headings` 通过。
- [ ] Lighthouse 各项较当前基线不下降（或按 lhci 断言通过）。

---

## 9. 受影响文件清单（预计）

### 修改

| 文件 | 变更 |
|---|---|
| `src/app/(marketing)/home-content-v14.tsx` | Hero 重做、Trust 升级、叙事区、动效 |
| `src/app/(marketing)/products/products-content-v3.tsx` | Bento 网格 |
| `src/app/(marketing)/solutions/solutions-content-v3.tsx` | 非对称布局 |
| `src/app/(marketing)/services/services-content-v3.tsx` | 非对称布局 |
| `src/app/(marketing)/products/product-detail-content-v3.tsx` | L3 信任层、叙事 |
| `src/app/(marketing)/solutions/solution-detail-content-v3.tsx` | L3 信任层、叙事 |
| `src/app/(marketing)/services/service-detail-content-v4.tsx` | L3 信任层、叙事 |
| `src/app/(marketing)/about/about-content-v4.tsx` | 故事化叙事 |
| `src/app/globals.css` | 品牌视觉资产、焦点态 |
| `tailwind.config.js` | 如有新工具类/令牌 |
| `src/lib/constants/*.ts` | 信任数据、内容字段 |
| 相关 `*.test.tsx` / E2E / 视觉快照 | 同步更新 |

### 可能新增

| 文件 | 用途 |
|---|---|
| `src/components/sections/bento-grid.tsx` | ✅ 已新增：通用 Bento 容器 |
| `src/components/sections/bento-product-card.tsx` | 未新增（由 `BentoItem` + 现有 `ProductCard` 承担） |
| `src/components/sections/hero-product-visual.tsx` | ✅ 已存在（Phase 1） |
| `src/components/ui/data-visual.tsx` | 未新增（`brand-visuals.tsx` 的 DataBar 已覆盖） |
| `src/components/ui/brand-motif.tsx` | 未新增（`brand-visuals.tsx` 已覆盖） |

---

## 10. 质量门禁（每个 Phase 结束必须执行）

| 检查 | 命令 | 通过标准 |
|---|---|---|
| 类型检查 | `npm run type-check` | 无错误 |
| Lint | `npm run lint` | 无错误、无警告 |
| 单元测试 | `npm run test:unit` | 全部通过 |
| 覆盖率 | `npm run test:coverage` | 不低于 jest.config.js 阈值 |
| E2E | `npm run test:e2e:fast` | 全部通过 |
| 视觉回归 | `npm run test:visual` | 快照通过（必要时更新并人工确认） |
| 对比度 | `npm run check:contrast` | WCAG 2.1 AA |
| 标题层级 | `npm run check:headings` | 通过 |
| 性能 | `npm run lighthouse` | lhci 断言通过 |

---

## 11. 风险与规避

| 风险 | 规避 |
|---|---|
| 视觉改版破坏现有测试/快照 | 每个 Phase 先跑基线，快照更新需人工确认 |
| 产品视觉素材缺失 | 优先用真实产品截图 / SVG 数据可视化；禁止占位色块 |
| 初创期无真实案例 | 三档信任策略：有数据展示 / 有意向打标签 / 无数据不渲染 |
| 动效过度 | 遵守动效四原则；reduced-motion 全覆盖 |
| 品牌红失控 | 每次合并前用脚本/目视检查面积与触达点 |
| 范围蔓延 | 严格按本计划 Phase 执行，超出范围需重新评审 |

---

## 12. 执行顺序建议

1. **先做 Phase 1 首页 Hero**（tracer-bullet：首页 Hero → 产品视觉 → 单一 CTA → 测试通过）。
2. 再横向复制到产品/方案/服务列表页。
3. 再补信任层与叙事。
4. 最后统一动效与无障碍。
5. 每阶段结束更新本计划勾选项与 `README.md` / `CONTEXT.md` / `CLAUDE.md` 文档同步。

---

## 13. 已确认决策

1. **Hero 产品视觉素材**：使用 **React/CSS/SVG 高保真产品界面 Mockup**（`hero-product-visual.tsx`，标注「产品界面示意」+「示例数据」）。理由：
   - 无真实客户数据，避免虚构截图；
   - 高保真应用窗口（侧边导航 + 顶部操作栏 + KPI + 图表 + 预警 + 商机表）比纯示意更有真实产品感；
   - 纯组件实现，轻量、响应式、不依赖图片资源，符合性能约束；
   - 数据看板是 B2B 决策者最易感知的「产品价值」载体，与「从数据到决策」定位一致。
2. **首批客户 quote**：暂无。信任层按「无数据不渲染 L3」策略处理；首页信任区只展示可验证事实（成立时间、核心团队、自研产品、私有化部署、首批客户共创中）。
3. **Bento 大卡优先级**：**ERP 2×2 大卡 + BI 1×2 次大卡**。理由：
   - ERP 是「核心系统升级」入口与套装组合枢纽；
   - BI 呼应品牌主张「从数据到决策」；
   - 后续有真实转化数据后改为 CMS 可配置 `featured` 字段动态决定。