张翔
fe6e4b1c54
- Remove TestimonialSection from homepage (no customers yet) - Footer: dark theme, NAVIGATION_V2 + MEGA_DROPDOWN_DATA links - Mobile Menu: NAVIGATION_V2 with collapsible dropdown support
333 lines
9.1 KiB
Markdown
333 lines
9.1 KiB
Markdown
# 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
|