novalon-website/docs/plans/2026-02-21-website-redesign-design.md

# Novalon 官网重新设计方案

**设计日期：** 2026-02-21  
**设计风格：** 极简科技风  
**项目目标：** 品牌形象升级 + 用户体验优化

---

## 一、项目背景

### 当前状态

- 技术栈：Next.js 16 + React 19 + TypeScript + Tailwind CSS v4
- 现有页面：首页包含13个section，信息密度较高
- 目标用户：混合群体（企业决策者、技术人员、业务人员）

### 设计目标

1. **品牌形象升级** - 打造科技创新与前沿感的品牌调性
2. **用户体验优化** - 全方位改进导航、内容展示、交互体验和移动端适配

---

## 二、整体架构与导航结构

### 信息架构优化

**一级导航（顶部固定）：**

- 首页
- 产品（下拉：ERP、CRM、OA、BI、IoT）
- 解决方案（下拉：按行业、按场景）
- 案例
- 关于我们
- 联系我们

**首页结构精简（从13个section减少到8个）：**

1. **Hero区域** - 核心价值主张 + 动态粒子背景
2. **核心优势** - 4个关键数据指标（动态计数）
3. **产品矩阵** - 卡片式展示核心产品
4. **解决方案** - 行业/场景分类展示
5. **成功案例** - 精选3个典型案例
6. **技术实力** - 技术栈展示
7. **客户评价** - 轮播式testimonial
8. **CTA区域** - 行动号召

**优化效果：**

- 减少到8个核心section，提升信息聚焦度
- 下拉菜单提供更清晰的信息层级
- 每个section都有明确的用户目标和转化路径

---

## 三、视觉设计系统

### 色彩系统

**主色调：**

- 深色背景：`#0A0A0A`（主背景）、`#1A1A1A`（次级背景）、`#2A2A2A`（卡片背景）
- 科技蓝：`#00D9FF`（主要强调色、CTA按钮）
- 紫色：`#A855F7`（次要强调色、装饰元素）
- 青色：`#06B6D4`（辅助色、图标）

**文字色彩：**

- 主文字：`#FFFFFF`（白色）
- 次级文字：`#A0A0A0`（灰色）
- 禁用文字：`#606060`（深灰）

**渐变色：**

- 主渐变：`linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)`
- 背景渐变：`linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%)`
- 光晕效果：`radial-gradient(circle, #00D9FF20 0%, transparent 70%)`

### 字体系统

**主字体：**

- 标题：`Inter` 或 `SF Pro Display`（现代无衬线字体）
- 正文：`Inter`（高可读性）
- 代码/数据：`JetBrains Mono`（等宽字体）

**字号规范：**

- H1：`64px`（Hero标题）
- H2：`48px`（Section标题）
- H3：`32px`（卡片标题）
- Body：`16px`（正文）
- Small：`14px`（辅助文字）

### 间距系统

基于 8px 网格：

- xs：`4px`
- sm：`8px`
- md：`16px`
- lg：`24px`
- xl：`32px`
- 2xl：`48px`
- 3xl：`64px`

### 圆角系统

- 小圆角：`8px`（按钮、标签）
- 中圆角：`12px`（卡片）
- 大圆角：`16px`（大卡片、容器）
- 全圆角：`9999px`（徽章、标签）

---

## 四、核心组件设计

### 1. Hero 区域设计

**布局：**

- 全屏高度（100vh）
- 左侧：核心文案 + CTA按钮
- 右侧：动态粒子效果 + 抽象几何动画
- 底部：滚动提示动画

**视觉元素：**

- 背景：深色渐变 + 微妙的网格线
- 粒子效果：蓝色和紫色粒子缓慢漂浮
- 光晕：科技蓝的径向渐变光晕
- 文字：大标题 + 副标题 + 两个CTA按钮（主次分明）

**动效：**

- 文字淡入上移（staggered animation）
- 粒子持续运动
- 按钮悬停发光效果
- 滚动提示上下浮动

### 2. 导航栏设计

**样式：**

- 固定顶部，滚动时背景变深（`backdrop-blur`）
- Logo左侧，导航居中，CTA按钮右侧
- 高度：`64px`（桌面）、`56px`（移动端）

**交互：**

- 下拉菜单：悬停展开，带淡入动画
- 移动端：汉堡菜单，全屏抽屉式导航
- 当前页面：底部蓝色下划线指示

**特殊效果：**

- Logo悬停：微妙的发光效果
- 导航项悬停：文字颜色变科技蓝
- CTA按钮：渐变背景 + 悬停放大

### 3. 产品卡片设计

**布局：**

- 网格布局：桌面3列、平板2列、移动端1列
- 卡片高度：固定或自适应内容
- 卡片间距：`24px`

**卡片结构：**

- 顶部：产品图标/图片（带渐变边框）
- 中部：产品名称 + 简短描述
- 底部：核心特性标签 + "了解更多"链接

**视觉效果：**

- 背景：`#2A2A2A`，悬停时变亮
- 边框：1px灰色边框，悬停时科技蓝边框
- 阴影：悬停时添加发光阴影
- 图标：科技蓝或紫色渐变

**动效：**

- 悬停：卡片上移 `8px` + 边框发光
- 点击：轻微缩放反馈
- 加载：骨架屏或淡入动画

### 4. 数据可视化组件（使用 AntV）

**技术选型：**

- **@antv/g2** - 基础图表（折线图、柱状图、饼图等）
- **@antv/g6** - 关系图、拓扑图
- **@antv/l7** - 地理空间数据可视化
- **@antv/x6** - 流程图、架构图编辑

**统计数字展示：**

- 大号数字：`48-64px`，科技蓝色
- 动态计数动画：从0到目标值
- 标签：灰色小号文字
- 布局：4列网格，每项居中对齐

**图表配置：**

- 主题：深色主题定制
- 配色：科技蓝 `#00D9FF`、紫色 `#A855F7`、青色 `#06B6D4`
- 背景：透明或半透明深色
- 网格线：淡灰色，降低视觉干扰
- 动画：流畅的入场动画

**交互特性：**

- 悬停：显示详细数据 tooltip
- 点击：可配置的交互事件
- 缩放：支持图表缩放（如需要）
- 响应式：自适应容器大小

---

## 五、交互体验与动效设计

### 1. 页面过渡与滚动体验

**页面加载：**

- 首屏优先加载策略
- 骨架屏占位，提升感知速度
- 渐进式图片加载（blur-up 技术）
- 关键CSS内联，非关键CSS延迟加载

**滚动体验：**

- 平滑滚动：`scroll-behavior: smooth`
- 视差效果：背景元素随滚动缓慢移动
- 渐入动画：元素进入视口时触发淡入上移
- 进度指示：顶部细线显示页面滚动进度

**Section切换：**

- 每个Section进入视口时触发动画
- 标题先出现，内容依次淡入
- 数字计数动画在可见时触发
- 图表在可见时才开始渲染

### 2. 微交互设计

**按钮交互：**

- 悬停：背景渐变流动 + 轻微放大（scale 1.05）
- 点击：缩小反馈（scale 0.95）+ 波纹效果
- 加载中：旋转图标 + 禁用状态
- 成功/失败：短暂的颜色变化反馈

**表单交互：**

- 输入框聚焦：边框变科技蓝 + 外发光
- 实时验证：输入时显示验证状态
- 错误提示：红色边框 + 错误信息淡入
- 提交成功：绿色勾选动画 + 成功消息

**卡片交互：**

- 悬停：上移 + 边框发光 + 阴影增强
- 点击：轻微缩放 + 跳转或展开详情
- 加载：骨架屏动画
- 收藏/分享：图标变化动画

### 3. 动画效果库

**入场动画：**

- 淡入上移：`fade-in-up`（最常用）
- 淡入缩放：`fade-in-scale`（适合卡片）
- 从左滑入：`slide-in-left`（适合侧边内容）
- 从右滑入：`slide-in-right`（适合侧边内容）

**持续动画：**

- 粒子漂浮：随机运动轨迹
- 光晕脉动：缓慢的透明度变化
- 渐变流动：背景渐变位置移动
- 图标旋转：加载状态的旋转动画

**退出动画：**

- 淡出：`fade-out`
- 缩小淡出：`scale-out-fade`
- 向上滑出：`slide-out-up`

**动画时长规范：**

- 快速：`150ms`（按钮反馈、状态切换）
- 标准：`300ms`（大多数过渡效果）
- 慢速：`500ms`（页面过渡、大型动画）
- 超慢：`1000ms+`（特殊强调效果）

### 4. 性能优化策略

**动画性能：**

- 优先使用 `transform` 和 `opacity`（GPU加速）
- 避免动画 `width`、`height`、`top`、`left`
- 使用 `will-change` 提示浏览器优化
- 复杂动画使用 `requestAnimationFrame`

**移动端优化：**

- 减少移动端动画复杂度
- 使用 `prefers-reduced-motion` 媒体查询
- 触摸事件优化（防止滚动卡顿）
- 移动端禁用某些装饰性动画

**加载优化：**

- 动画库按需加载（如 `framer-motion`）
- 图片懒加载 + WebP格式
- 代码分割，按路由加载
- 预加载关键资源

---

## 六、响应式设计与移动端体验

### 1. 响应式断点系统

**断点定义：**

- 移动端：`< 640px`（sm）
- 平板：`640px - 1024px`（md）
- 桌面：`1024px - 1280px`（lg）
- 大屏：`> 1280px`（xl）

**布局策略：**

- 移动优先设计
- 弹性网格系统
- 内容优先级排序
- 触摸友
好的交互区域

### 2. 移动端特殊设计

**导航栏：**
- 高度：`56px`
- Logo居左，汉堡菜单居右
- 点击展开全屏抽屉式导航
- 抽屉内容：垂直排列的导航项 + CTA按钮
- 关闭按钮：右上角X图标

**Hero区域：**
- 高度：`100vh`（移动端可能更高）
- 文案居中或左对齐
- 标题字号：`36-40px`（缩小但仍突出）
- 粒子效果：减少粒子数量，降低性能消耗
- CTA按钮：垂直堆叠，全宽

**内容区域：**
- 单列布局为主
- 卡片全宽显示
- 图片：自适应宽度，保持比例
- 文字：行高适当增加，提升可读性

**交互优化：**
- 最小触摸区域：`44px × 44px`
- 按钮全宽或大尺寸
- 表单输入框：大尺寸，易于点击
- 滑动操作：支持手势滑动（如轮播图）

### 3. 平板端设计

**布局调整：**
- 2列网格布局
- 导航栏：完整导航或简化版
- Hero区域：文案左侧，视觉元素右侧
- 卡片：2列排列

**交互优化：**
- 支持触摸和鼠标操作
- 下拉菜单：点击触发（非悬停）
- 表单：优化触摸输入体验

### 4. 桌面端设计

**布局优化：**
- 3列或4列网格
- 完整导航栏 + 下拉菜单
- Hero区域：左右分栏，视觉平衡
- 卡片：3列排列，悬停效果丰富

**交互增强：**
- 悬停效果：丰富的视觉反馈
- 键盘导航：支持Tab键导航
- 快捷键：如搜索（Cmd/Ctrl + K）

### 5. 性能与可访问性

**移动端性能优化：**
- 图片：使用 `srcset` 提供不同尺寸
- 动画：减少复杂动画，优先性能
- 字体：使用 `font-display: swap`
- 懒加载：图片和组件按需加载

**可访问性（A11y）：**
- 色彩对比度：符合WCAG 2.1 AA标准
- 键盘导航：所有交互元素可访问
- 屏幕阅读器：语义化HTML + ARIA标签
- 焦点管理：清晰的焦点指示器
- 减少动画：尊重 `prefers-reduced-motion`

**触摸体验：**
- 防止误触：按钮间距合理
- 触摸反馈：即时的视觉反馈
- 滚动优化：防止滚动卡顿
- 手势支持：滑动、缩放等

### 6. 特殊场景处理

**横屏模式：**
- 检测横屏，调整布局
- Hero区域：可能需要重新排版
- 导航：考虑底部导航栏

**小屏设备：**
- 内容优先级排序
- 隐藏次要信息
- 简化视觉元素

**大屏设备：**
- 最大内容宽度：`1440px` 或 `1600px`
- 内容居中，两侧留白
- 充分利用空间，展示更多信息

---

## 七、技术实现方案

### 1. 技术栈确认与增强

**现有技术栈：**
- Next.js 16.1.6（App Router）
- React 19.2.3
- TypeScript 5
- Tailwind CSS v4
- shadcn/ui + Radix UI

**新增依赖：**
- **动画库：** `framer-motion` - 流畅的动画效果
- **图表库：** `@antv/g2` - 数据可视化
- **图标库：** `lucide-react`（已有）
- **工具库：**
  - `clsx` + `tailwind-merge`（已有）
  - `class-variance-authority` - CVA变体管理
  - `zod` - 数据验证（已有）

**开发工具：**
- ESLint + Prettier - 代码规范
- Husky + lint-staged - Git hooks
- Commitlint - 提交信息规范

### 2. 组件库架构

**目录结构：**
```
src/
├── components/
│   ├── ui/              # 基础UI组件
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   └── ...
│   ├── layout/          # 布局组件
│   │   ├── header.tsx
│   │   ├── footer.tsx
│   │   ├── mobile-menu.tsx
│   │   └── ...
│   ├── sections/        # 页面区块组件
│   │   ├── hero-section.tsx
│   │   ├── products-section.tsx
│   │   └── ...
│   ├── effects/         # 特效组件
│   │   ├── particle-background.tsx
│   │   ├── glow-effect.tsx
│   │   └── ...
│   └── charts/          # 图表组件
│       ├── line-chart.tsx
│       ├── bar-chart.tsx
│       └── ...
├── hooks/               # 自定义Hooks
│   ├── use-animation.ts
│   ├── use-intersection-observer.ts
│   └── ...
├── lib/                 # 工具库
│   ├── utils.ts
│   ├── constants.ts
│   ├── theme.ts
│   └── ...
└── styles/              # 样式文件
    ├── globals.css
    ├── animations.css
    └── ...
```

### 3. 样式系统设计

**Tailwind配置扩展：**
```typescript
// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        // 深色主题
        dark: {
          DEFAULT: '#0A0A0A',
          secondary: '#1A1A1A',
          tertiary: '#2A2A2A',
        },
        // 科技色
        tech: {
          blue: '#00D9FF',
          purple: '#A855F7',
          cyan: '#06B6D4',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      animation: {
        'fade-in-up': 'fadeInUp 0.6s ease-out',
        'fade-in-scale': 'fadeInScale 0.6s ease-out',
        'glow': 'glow 2s ease-in-out infinite',
      },
      keyframes: {
        fadeInUp: {
          '0%': { opacity: '0', transform: 'translateY(20px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        fadeInScale: {
          '0%': { opacity: '0', transform: 'scale(0.95)' },
          '100%': { opacity: '1', transform: 'scale(1)' },
        },
        glow: {
          '0%, 100%': { boxShadow: '0 0 20px rgba(0, 217, 255, 0.3)' },
          '50%': { boxShadow: '0 0 40px rgba(0, 217, 255, 0.6)' },
        },
      },
    },
  },
}
```

**CSS变量系统：**
```css
/* globals.css */
:root {
  --color-dark: #0A0A0A;
  --color-dark-secondary: #1A1A1A;
  --color-dark-tertiary: #2A2A2A;
  --color-tech-blue: #00D9FF;
  --color-tech-purple: #A855F7;
  --color-tech-cyan: #06B6D4;
  
  --gradient-primary: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%);
  --gradient-dark: linear-gradient(180deg, #0A0A0A 0%, #1A1A1A 100%);
}
```

### 4. 开发流程与规范

**Git工作流：**
- 分支策略：`main`（生产）、`develop`（开发）、`feature/*`（功能）
- 提交规范：`feat:`、`fix:`、`style:`、`refactor:`、`docs:`
- Code Review：必须经过至少一人审查

**代码规范：**
- ESLint配置：基于 `eslint-config-next`
- Prettier配置：统一格式化规则
- TypeScript严格模式
- 组件命名：PascalCase
- 文件命名：kebab-case

**开发流程：**
1. 从 `develop` 创建 `feature` 分支
2. 开发 + 单元测试
3. 提交PR + Code Review
4. 合并到 `develop`
5. 测试通过后合并到 `main`
6. 自动部署

### 5. 测试策略

**单元测试：**
- 框架：Vitest + React Testing Library
- 覆盖率目标：≥80%
- 重点：组件逻辑、Hooks、工具函数

**集成测试：**
- 测试关键用户流程
- API集成测试
- 状态管理测试

**E2E测试：**
- 框架：Playwright（已有）
- 重点：核心业务流程
- 视觉回归测试

**性能测试：**
- Lighthouse评分：≥90
- 首屏加载时间：<2s
- 交互响应时间：<100ms

### 6. 部署与监控

**部署方案：**
- 静态导出：`next build` + `next export`
- 托管：Vercel / 阿里云OSS + CDN
- CI/CD：GitHub Actions

**监控与优化：**
- 性能监控：Web Vitals
- 错误追踪：Sentry
- 用户行为：Google Analytics
- SEO优化：meta标签、sitemap、robots.txt

---

## 八、实施计划

### 阶段一：基础架构（1-2周）
- 设计系统搭建（色彩、字体、间距）
- 基础UI组件库开发
- 布局组件重构（Header、Footer）
- 响应式框架搭建

### 阶段二：核心页面（2-3周）
- Hero区域重构
- 产品展示页面
- 解决方案页面
- 案例展示页面

### 阶段三：交互优化（1-2周）
- 动画效果实现
- 微交互优化
- 性能优化
- 可访问性改进

### 阶段四：测试与上线（1周）
- 全面测试
- 性能优化
- 部署上线
- 监控配置

**总工期：5-8周**

---

## 九、设计决策记录

### 为什么选择深色科技风？
1. 符合科技创新与前沿感的品牌定位
2. 顶级科技公司的主流选择（Apple、Microsoft、GitHub、Vercel）
3. 对企业决策者显得更加专业、高端、可信赖
4. 深色背景配合霓虹色点缀能更好突出关键信息
5. 移动端更受欢迎（省电、护眼）

### 为什么选择 AntV？
1. 完善的中文文档和社区支持
2. 企业级稳定性，适合金融场景
3. 丰富的图表类型和交互能力
4. 良好的性能表现

### 为什么精简到8个section？
1. 提升信息聚焦度，避免用户认知负担
2. 每个section都有明确的用户目标和转化路径
3. 更好的性能表现（减少渲染内容）
4. 更清晰的信息层级

---

## 十、下一步行动

1. ✅ 设计方案已完成并文档化
2. ⏭️ 准备进入实施阶段
3. ⏭️ 创建详细的实施计划（使用 `writing-plans` skill）
4. ⏭️ 创建隔离的开发环境（使用 `using-git-worktrees` skill）

---

**设计者：** AI Assistant  
**审核者：** 待定  
**最后更新：** 2026-02-21