张翔
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
9.1 KiB
9.1 KiB
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 中：
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组件，支持variantprop（'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 - 使用
useReducedMotionhook 检测用户偏好 - 减少动画时，保留基本淡入效果
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