# ERP 产品落地页设计规格

**日期**: 2026-04-24
**状态**: 待审查
**参考**: Terminal Industries 网站设计风格

---

## 1. 概述

### 1.1 目标

将 ERP 产品详情页改造为 Terminal 风格的全屏沉浸式落地页，同时保持"水墨科技"品牌基因。

### 1.2 范围

- 仅改造 ERP 产品页 (`/products/erp`)
- 其他产品页（CRM、CMS、BI）暂不改动，待验证后推广

### 1.3 设计决策

| 决策项 | 选择 |
|--------|------|
| 视觉风格 | 全屏沉浸式（深墨色 + 明暗交替） |
| 视频内容 | 暂不添加，使用粒子/水墨动画替代 |
| 导航栏 | 动态变色（滚动后变深色毛玻璃） |
| 实现方案 | 组件化重构，复用现有动画库 |

---

## 2. 页面结构

### 2.1 整体布局

```
Section 1: 全屏沉浸 Hero        [深墨色 #0A0A0A]
Section 2: 产品概述             [宣纸白 #FFFFFF]
Section 3: 核心功能（滚动叙事）  [深墨色 #0A0A0A]
Section 4: 产品优势             [宣纸白 #FFFFFF]
Section 5: 实施流程             [浅灰 #F5F5F5]
Section 6: 技术规格             [宣纸白 #FFFFFF]
Section 7: 定价方案             [深墨色 #0A0A0A]
Section 8: CTA 横幅             [朱砂红渐变]
```

**明暗节奏**: 深 → 白 → 深 → 白 → 灰 → 白 → 深 → 红

### 2.2 Section 详细设计

#### Section 1: 全屏沉浸 Hero

- **背景**: 深墨色 `#0A0A0A` + 水墨粒子动画（`InkBackground` + `DataParticleFlow`）
- **内容**:
  - 分类标签: "企业软件"（朱砂红背景 `bg-[#C41E3A]/20`）
  - 产品名称: "睿新ERP管理系统"（白色，大标题）
  - 价值主张: "集成财务、采购、销售、库存、生产等模块..."（浅灰色）
  - CTA 按钮: "预约演示"（朱砂红，磁性按钮 `MagneticButton`）
  - 滚动指示器: 向下箭头动画
- **动画**: 入场淡入 + 上移，背景粒子持续运动

#### Section 2: 产品概述

- **背景**: 宣纸白 `#FFFFFF`
- **内容**: overview 文本
- **动画**: 文字逐词揭示（`TextReveal`）

#### Section 3: 核心功能（滚动叙事）

- **背景**: 深墨色 `#0A0A0A`
- **布局**: 6 个功能分 6 个滚动区块
- **每个区块**:
  - 编号: `01` - `06`（Geist Mono，朱砂红，大号，低透明度作为装饰）
  - 功能名称: 如"财务管理"
  - 功能描述: 如"支持总账、应收应付、成本核算..."
  - 动画区域: 粒子/水墨特效展示
- **动画**:
  - 编号从左侧滑入 + 淡入
  - 名称逐字揭示
  - 描述模糊揭示
  - 动画区域缩放 + 淡入
  - 整体视差滚动（比页面慢 20%）
- **触发**: `useInView` + `amount: 0.5`

#### Section 4: 产品优势

- **背景**: 宣纸白 `#FFFFFF`
- **布局**: 4 张卡片，2x2 网格
- **卡片内容**:
  - 数据高亮: "30%"、"20%"等（朱砂红，大号）
  - 描述文字
- **动画**: 卡片交错入场（`StaggerReveal` + `StaggerItem`）

#### Section 5: 实施流程

- **背景**: 浅灰 `#F5F5F5`
- **布局**: 6 步时间线，垂直排列
- **每步**:
  - 编号圆形: 朱砂红背景，白色数字
  - 步骤文字
  - 连接线（步骤之间）
- **动画**: 滚动触发逐个显现

#### Section 6: 技术规格

- **背景**: 宣纸白 `#FFFFFF`
- **布局**: 5 项规格，2 列网格
- **动画**: 简单淡入

#### Section 7: 定价方案

- **背景**: 深墨色 `#0A0A0A`
- **布局**: 3 档定价卡片，水平排列
- **卡片样式**:
  - 基础版: 深灰背景，白色文字
  - 标准版: 朱砂红渐变背景，白色文字，"推荐"标签
  - 企业版: 深灰背景，白色文字
- **动画**: 卡片交错入场

#### Section 8: CTA 横幅

- **背景**: 朱砂红渐变 `from-[#C41E3A] to-[#A01830]`
- **内容**:
  - 标题: "准备好提升企业运营效率了吗？"
  - 按钮: "立即咨询"（白色，磁性按钮）
- **动画**: 滚动触发淡入

---

## 3. 文件结构

### 3.1 新增文件

```
src/app/(marketing)/products/[id]/
└── product-detail-client.tsx   # 客户端组件，组合所有 section

src/components/products/
├── product-hero-section.tsx    # Section 1
├── product-overview-section.tsx # Section 2
├── product-features-section.tsx # Section 3
├── product-benefits-section.tsx # Section 4
├── product-process-section.tsx  # Section 5
├── product-specs-section.tsx    # Section 6
├── product-pricing-section.tsx  # Section 7
└── product-cta-section.tsx      # Section 8
```

### 3.2 修改文件

```
src/app/(marketing)/products/[id]/page.tsx
- 保留服务端逻辑（generateStaticParams, generateMetadata）
- 导入并渲染 product-detail-client.tsx
- 传递产品数据作为 props
```

### 3.3 复用的现有组件

| 组件 | 路径 | 用途 |
|------|------|------|
| `ScrollReveal` | `src/components/ui/scroll-animations.tsx` | 滚动揭示 |
| `TextReveal` | `src/components/ui/scroll-animations.tsx` | 文字逐词揭示 |
| `ParallaxSection` | `src/components/ui/scroll-animations.tsx` | 视差效果 |
| `StaggerReveal` | `src/components/ui/scroll-animations.tsx` | 交错动画容器 |
| `StaggerItem` | `src/components/ui/scroll-animations.tsx` | 交错动画子项 |
| `CounterWithEffect` | `src/lib/animations.tsx` | 数字滚动 |
| `MagneticButton` | `src/lib/animations.tsx` | 磁性按钮 |
| `BlurReveal` | `src/lib/animations.tsx` | 模糊揭示 |
| `InkBackground` | `src/components/effects/ink-decoration.tsx` | 水墨背景 |
| `DataParticleFlow` | `src/components/effects/data-particle-flow.tsx` | 粒子流 |

---

## 4. 导航栏动态变色

### 4.1 行为定义

| 状态 | 背景 | 文字颜色 | Logo |
|------|------|---------|------|
| Hero 区域内 | 透明 | 白色 | 白色 |
| 滚动出 Hero 后 | 深墨毛玻璃 `bg-[#0A0A0A]/90 backdrop-blur-xl` | 白色 | 白色 |

### 4.2 实现方式

在 `product-detail-client.tsx` 中：

```tsx
const [isScrolled, setIsScrolled] = useState(false);

useEffect(() => {
  const handleScroll = () => {
    setIsScrolled(window.scrollY > 50);
  };
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);
```

通过 Context 或 props 传递 `isScrolled` 状态给 Header 组件，切换导航栏样式。

### 4.3 注意事项

- 产品页导航栏始终保持深色系
- 用户点击导航返回主站时，导航栏自动恢复白色
- 需要修改 `Header` 组件，支持 `variant` prop（`'light' | 'dark'`）

---

## 5. 颜色规范

### 5.1 深色区块

| 角色 | 色值 | 用途 |
|------|------|------|
| 背景 | `#0A0A0A` | 深墨色主背景 |
| 主文字 | `#FFFFFF` | 标题、重要文字 |
| 次文字 | `#B0B0B0` | 描述、辅助文字 |
| 强调色 | `#C41E3A` | 编号装饰、CTA |
| 卡片背景 | `#1A1A1A` | 定价卡片等 |

### 5.2 浅色区块

| 角色 | 色值 | 用途 |
|------|------|------|
| 背景 | `#FFFFFF` | 宣纸白主背景 |
| 主文字 | `#1C1C1C` | 标题、正文 |
| 次文字 | `#5C5C5C` | 描述、辅助文字 |
| 强调色 | `#C41E3A` | 数据高亮、图标 |
| 卡片背景 | `#F5F7FA` | 功能卡片 |

---

## 6. 动画规范

### 6.1 时长

| 类型 | 时长 | 用途 |
|------|------|------|
| 快速 | 200ms | hover、微交互 |
| 标准 | 500ms | 大部分入场动画 |
| 慢速 | 800ms | 大元素、视差 |

### 6.2 缓动函数

| 类型 | 缓动 | 用途 |
|------|------|------|
| 入场 | `ease-out` | 淡入、滑入 |
| 退出 | `ease-in` | 淡出、滑出 |
| 弹性 | `spring` | 数字滚动、磁性按钮 |

### 6.3 无障碍

- 所有动画尊重 `prefers-reduced-motion`
- 使用 `useReducedMotion` hook 检测用户偏好
- 减少动画时，保留基本淡入效果

---

## 7. 性能考虑

### 7.1 代码分割

- `product-detail-client.tsx` 使用 `dynamic` 导入，禁用 SSR
- 各 section 组件按需加载

### 7.2 动画优化

- 使用 `will-change` 提示浏览器优化
- 避免同时触发过多动画
- 使用 `IntersectionObserver` 替代 `scroll` 事件监听

### 7.3 图片优化

- 使用 Next.js `Image` 组件自动优化
- 暂无图片需求，后续可扩展

---

## 8. 成功标准

### 8.1 功能验收

- [ ] ERP 产品页展示所有产品信息
- [ ] 8 个 section 按设计顺序渲染
- [ ] 所有动画正常触发
- [ ] 导航栏动态变色正常
- [ ] CTA 按钮链接正确

### 8.2 性能验收

- [ ] Lighthouse Performance > 80
- [ ] First Contentful Paint < 2s
- [ ] 无明显卡顿或闪烁

### 8.3 无障碍验收

- [ ] 键盘导航正常
- [ ] 屏幕阅读器可访问
- [ ] 减少动画偏好生效

---

## 9. 后续扩展

### 9.1 其他产品页

验证通过后，可将组件复用到 CRM、CMS、BI 产品页：
- 创建 `ProductDetailClient` 通用组件
- 通过 props 传入产品数据
- 保持一致的交互体验

### 9.2 视频集成

预留视频播放能力：
- 创建 `ProductVideo` 组件
- 支持滚动触发播放/暂停
- 支持 wide/vert 双版本

---

## 10. 风险与缓解

| 风险 | 影响 | 缓解措施 |
|------|------|---------|
| 动画性能问题 | 用户体验下降 | 使用 `will-change`、减少同时动画数量 |
| 导航栏切换闪烁 | 视觉瑕疵 | 使用 CSS transition 平滑过渡 |
| SEO 影响 | 搜索排名下降 | 保留服务端元数据、使用 SSR 首屏 |

---

**文档版本**: 1.0
**最后更新**: 2026-04-24