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

# Novalon 官网重新设计方案

**设计日期：** 2026-02-22  
**设计风格：** 数字未来风（未来科技感）  
**项目目标：** 采用更现代、更前沿的设计语言，全方位升级配色、UI/UE/UX

---

## 一、设计理念与品牌定位

### 品牌定位
- **企业类型：** 综合型科技集团
- **业务领域：** 金融科技、企业级软件服务、科技创新等多领域
- **品牌内涵：** "睿新致遠" - 传统底蕴与科技创新的融合

### 设计风格
**数字未来风** - 深色背景 + 渐变光效（蓝紫渐变、青色光晕），流畅而现代

### 设计原则
1. **品牌识别优先** - 印章红色作为核心识别色
2. **科技感与专业性平衡** - 蓝紫渐变营造未来感，深色背景体现专业
3. **传统与现代融合** - 红色印章代表传统，蓝紫渐变代表创新

---

## 二、核心配色系统

### 主色调 - 数字未来风渐变

#### 科技蓝系列
- **主色：** `#00D9FF`（电光蓝）- 主要交互元素、链接、图标
- **深色：** `#00B8D9`（深电光蓝）- 悬停状态
- **浅色：** `#33E1FF`（亮电光蓝）- 光晕效果

#### 紫色系列
- **主色：** `#A855F7`（霓虹紫）- 装饰元素、渐变终点
- **深色：** `#9333EA`（深紫）- 悬停状态
- **浅色：** `#C084FC`（亮紫）- 光晕效果

#### 渐变组合
- **主渐变：** `linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)`
- **反向渐变：** `linear-gradient(135deg, #A855F7 0%, #00D9FF 100%)`
- **光晕渐变：** `radial-gradient(circle, rgba(0, 217, 255, 0.15) 0%, transparent 70%)`

### 品牌色 - 印章红

- **主色：** `#C41E3A`（印章红）- Logo、CTA 按钮、重要信息
- **深色：** `#A01830`（深红）- 悬停状态
- **浅色：** `#E04A68`（亮红）- 背景装饰
- **背景色：** `#FEF2F4`（淡红背景）- 浅色模式下的卡片背景

### 背景色系

#### 深色背景（默认）
- **主背景：** `#0A0A0A`（深黑）- 页面主背景
- **次级背景：** `#141414`（炭黑）- Section 背景
- **卡片背景：** `#1A1A1A`（深灰）- 卡片、容器
- **悬停背景：** `#242424`（中灰）- 交互状态

#### 浅色背景（可选模式）
- **主背景：** `#FAFAFA`（浅灰白）
- **次级背景：** `#FFFFFF`（纯白）
- **卡片背景：** `#FFFFFF`（纯白）
- **悬停背景：** `#F5F5F5`（浅灰）

### 文字色系

#### 深色模式文字
- **主文字：** `#FAFAFA`（近白）- 标题、重要内容
- **次级文字：** `#D4D4D4`（浅灰）- 正文、描述
- **辅助文字：** `#A3A3A3`（中灰）- 提示、标签
- **禁用文字：** `#737373`（深灰）- 禁用状态

#### 浅色模式文字
- **主文字：** `#171717`（深黑）
- **次级文字：** `#525252`（深灰）
- **辅助文字：** `#737373`（中灰）
- **禁用文字：** `#A3A3A3`（浅灰）

### 边框与分割线

- **主边框：** `#262626`（深灰）- 深色模式
- **次级边框：** `#333333`（中深灰）
- **浅色边框：** `#E5E5E5`（浅灰）- 浅色模式
- **强调边框：** `#00D9FF`（科技蓝）- 聚焦状态

---

## 三、UI 组件设计

### 按钮系统

#### 主要按钮

**CTA 按钮（印章红）：**
- 背景：`#C41E3A` → 悬停 `#A01830`
- 文字：`#FFFFFF`（白色）
- 边框：无
- 圆角：`8px`
- 阴影：悬停时添加 `0 0 20px rgba(196, 30, 58, 0.4)` 发光效果
- 动效：悬停时轻微上移 `2px` + 发光增强

**次要按钮（科技蓝渐变）：**
- 背景：`linear-gradient(135deg, #00D9FF 0%, #A855F7 100%)`
- 文字：`#FFFFFF`
- 边框：无
- 圆角：`8px`
- 阴影：悬停时添加 `0 0 20px rgba(0, 217, 255, 0.3)` 发光效果
- 动效：悬停时渐变角度旋转 + 发光增强

#### 辅助按钮

**轮廓按钮：**
- 背景：透明
- 文字：`#00D9FF`（科技蓝）
- 边框：`1px solid #00D9FF`
- 悬停：背景变为 `rgba(0, 217, 255, 0.1)` + 发光边框

**幽灵按钮：**
- 背景：透明
- 文字：`#D4D4D4`
- 边框：无
- 悬停：背景变为 `rgba(255, 255, 255, 0.05)`

#### 按钮尺寸
- **大号：** 高度 `48px`，内边距 `16px 32px`，字号 `16px`
- **中号：** 高度 `40px`，内边距 `12px 24px`，字号 `14px`
- **小号：** 高度 `32px`，内边距 `8px 16px`，字号 `14px`

### 卡片系统

#### 基础卡片
- 背景：`#1A1A1A`（深灰）
- 边框：`1px solid #262626`
- 圆角：`12px`
- 内边距：`24px`
- 阴影：无（保持极简）
- 悬停效果：
  - 上移 `4px`
  - 边框变为 `#00D9FF`
  - 添加 `0 0 30px rgba(0, 217, 255, 0.15)` 发光

#### 产品卡片（增强版）
- 背景：`#1A1A1A`
- 边框：`1px solid #262626`
- 圆角：`16px`
- 结构：
  - 顶部：产品图标（科技蓝渐变）+ 渐变边框装饰
  - 中部：产品名称（白色）+ 描述（浅灰）
  - 底部：特性标签（胶囊形状，科技蓝边框）
- 悬停：边框渐变发光 + 图标放大 `1.05`

#### 数据卡片
- 背景：`#141414`（更深）
- 边框：`1px solid #333333`
- 圆角：`12px`
- 内容：大号数字（科技蓝）+ 标签（浅灰）
- 动效：数字计数动画（从 0 到目标值）

### 导航栏设计

#### 桌面导航
- 高度：`64px`
- 背景：`rgba(10, 10, 10, 0.8)` + `backdrop-blur(12px)`
- 边框：底部 `1px solid #262626`
- 布局：
  - 左侧：Logo（印章 + 文字）
  - 中间：导航链接（首页、产品、解决方案、案例、关于）
  - 右侧：主题切换 + CTA 按钮（印章红）

#### 导航链接样式
- 文字：`#D4D4D4`（默认）→ `#00D9FF`（悬停）
- 当前页：文字 `#00D9FF` + 底部 `2px` 下划线
- 下拉菜单：
  - 背景：`#1A1A1A` + `backdrop-blur(12px)`
  - 边框：`1px solid #262626`
  - 圆角：`8px`
  - 阴影：`0 8px 32px rgba(0, 0, 0, 0.4)`

#### 移动端导航
- 高度：`56px`
- 汉堡菜单：点击展开全屏抽屉
- 抽屉背景：`#0A0A0A` + 半透明遮罩
- 菜单项：垂直排列，每项高度 `56px`

---

## 四、页面布局设计

### Hero 区域设计

#### 布局结构
- 高度：`100vh`（全屏）
- 背景：`#0A0A0A` + 微妙的网格线（`rgba(0, 217, 255, 0.03)`）
- 左侧（60%）：核心文案 + CTA 按钮
- 右侧（40%）：动态视觉元素

#### 视觉元素
- **粒子效果：** 科技蓝和紫色粒子缓慢漂浮（使用 Framer Motion）
- **光晕：** 多个径向渐变光晕（`rgba(0, 217, 255, 0.1)` 和 `rgba(168, 85, 247, 0.1)`）
- **几何图形：** 半透明的六边形、圆形线条装饰
- **Logo 印章：** 右下角大尺寸半透明印章（`opacity: 0.05`）

#### 文案设计
- **主标题：** `64px`，白色，字重 `700`
- **副标题：** `24px`，浅灰（`#D4D4D4`），字重 `400`
- **描述文字：** `16px`，中灰（`#A3A3A3`）

#### CTA 按钮组
- **主按钮：** 印章红背景，"立即体验"
- **次按钮：** 科技蓝渐变背景，"了解更多"

#### 动效
- 文字：淡入上移（staggered animation，延迟 100ms）
- 粒子：持续漂浮运动
- 光晕：缓慢脉动（scale 1.0 → 1.1）
- 滚动提示：底部向下箭头，上下浮动动画

### 首页布局结构

精简为 **8 个核心 Section**：

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

#### Section 间距
- 桌面：`120px`（上下）
- 平板：`80px`
- 移动端：`60px`

#### 内容最大宽度
- 桌面：`1280px`
- 大屏：`1440px`
- 内边距：`24px`（移动端）→ `48px`（桌面）

---

## 五、交互设计与动效规范

### 微交互设计

#### 按钮交互
- 悬停：`transform: translateY(-2px)` + 发光阴影增强
- 点击：`transform: scale(0.98)` + 快速反馈
- 加载：旋转图标 + 文字变淡
- 过渡时间：`200ms cubic-bezier(0.16, 1, 0.3, 1)`

#### 卡片交互
- 悬停：上移 `4px` + 边框发光 + 阴影增强
- 点击：轻微缩放 `scale(0.99)`
- 进入视口：淡入上移（Intersection Observer）
- 过渡时间：`300ms cubic-bezier(0.16, 1, 0.3, 1)`

#### 导航交互
- 链接悬停：文字颜色渐变过渡
- 下拉菜单：淡入 + 下移 `8px`
- 移动端菜单：从右侧滑入 + 背景遮罩淡入
- 过渡时间：`200ms`

### 页面过渡动效

#### 滚动揭示
- 元素初始：`opacity: 0` + `translateY(30px)`
- 进入视口：`opacity: 1` + `translateY(0)`
- 延迟：子元素依次延迟 `100ms`
- 过渡时间：`600ms cubic-bezier(0.16, 1, 0.3, 1)`

#### 数字计数动画
- 起始值：`0`
- 目标值：实际数据
- 持续时间：`2000ms`
- 缓动函数：`ease-out`
- 触发：进入视口时开始

#### 粒子效果
- 数量：30-50 个粒子
- 颜色：科技蓝（60%）+ 紫色（40%）
- 运动：随机漂浮，速度缓慢
- 交互：鼠标悬停时粒子轻微远离

### 光效与渐变动画

#### 光晕脉动
- 动画：`scale 1.0 → 1.15 → 1.0`
- 透明度：`0.1 → 0.15 → 0.1`
- 持续时间：`4000ms`
- 循环：无限循环

#### 渐变流动
- 动画：渐变角度 `135deg → 225deg → 135deg`
- 持续时间：`8000ms`
- 应用：CTA 按钮背景、装饰元素

#### 边框发光
- 状态：悬停时触发
- 效果：`box-shadow: 0 0 20px rgba(0, 217, 255, 0.3)`
- 过渡：`300ms`

### 性能优化

#### 动效性能
- 使用 `transform` 和 `opacity`（GPU 加速）
- 避免动画 `width`、`height`、`margin`
- 使用 `will-change` 提示浏览器优化
- 移动端减少动效复杂度

#### 加载优化
- 骨架屏：灰色占位 + 脉冲动画
- 图片懒加载：进入视口时加载
- 代码分割：按路由分割，减少首屏加载

---

## 六、响应式设计与移动端适配

### 断点系统

**Tailwind CSS 断点：**
- `sm`：`640px`（小平板）
- `md`：`768px`（平板竖屏）
- `lg`：`1024px`（平板横屏/小笔记本）
- `xl`：`1280px`（桌面）
- `2xl`：`1536px`（大屏桌面）

### 布局适配策略

#### 导航栏
- 桌面（≥1024px）：水平导航，Logo 左侧，链接居中，CTA 右侧
- 平板（768px-1023px）：Logo 左侧，汉堡菜单右侧，简化导航项
- 移动端（<768px）：汉堡菜单，全屏抽屉式导航

#### Hero 区域
- 桌面：左右分栏（60% / 40%）
- 平板：上下布局，文案在上，视觉元素在下
- 移动端：单列布局，视觉元素简化或移除

#### 卡片网格
- 桌面（≥1280px）：3 列
- 平板（768px-1279px）：2 列
- 移动端（<768px）：1 列

### 字体大小适配

#### 标题字号
- H1：`64px`（桌面）→ `48px`（平板）→ `36px`（移动端）
- H2：`48px`（桌面）→ `36px`（平板）→ `28px`（移动端）
- H3：`32px`（桌面）→ `24px`（平板）→ `20px`（移动端）

#### 正文字号
- 正文：`16px`（桌面）→ `15px`（移动端）
- 小字：`14px`（桌面）→ `13px`（移动端）

### 间距适配

#### Section 间距
- 桌面：`120px`
- 平板：`80px`
- 移动端：`60px`

#### 卡片内边距
- 桌面：`24px`
- 平板：`20px`
- 移动端：`16px`

#### 按钮尺寸
- 桌面：高度 `48px`，内边距 `16px 32px`
- 移动端：高度 `44px`，内边距 `14px 24px`（增大点击区域）

### 移动端特殊优化

#### 触摸交互
- 最小点击区域：`44px × 44px`（符合 WCAG 标准）
- 按钮间距：至少 `12px`
- 禁用 hover 效果（使用 `:active` 状态）

#### 性能优化
- 减少粒子数量：50 个 → 20 个
- 简化光效：移除复杂渐变动画
- 图片优化：使用 WebP 格式，懒加载
- 减少重绘：避免复杂的 CSS 动画

#### 手势支持
- 滑动切换：testimonial 轮播、案例展示
- 下拉刷新：新闻列表页
- 双击缩放：产品详情图片

### 横屏适配

#### 平板横屏
- 保持桌面布局，适当缩小间距
- 导航栏保持水平布局
- 卡片网格：2-3 列

#### 移动端横屏
- 简化导航，保持汉堡菜单
- Hero 区域：左右分栏，文案左侧
- 卡片：2 列布局

---

## 七、技术栈与实施

### 技术栈推荐

#### 核心框架
```json
{
  "next": "16.1.6",
  "react": "19.2.3",
  "react-dom": "19.2.3",
  "typescript": "^5"
}
```

#### 数据可视化（AntV 生态）
```json
{
  "@antv/g2": "^5.4.8",      // 基础图表（折线、柱状、饼图等）
  "@antv/g6": "^5.0.0",      // 关系图、拓扑图、组织架构图
  "@antv/l7": "^2.0.0",      // 地理可视化（如有地图需求）
  "@antv/s2": "^2.0.0"       // 高性能表格（如有大数据表格需求）
}
```

**AntV 应用场景：**
- **@antv/g2**：数据统计图表、业务指标展示
- **@antv/g6**：技术架构图、业务流程图、关系网络图
- **@antv/l7**：客户分布地图、区域数据可视化
- **@antv/s2**：大数据表格、多维分析表格

#### 动效库
```json
{
  "framer-motion": "^12.34.3",  // 主要动效库
  "gsap": "^3.12.0"             // 复杂动画场景（可选）
}
```

#### UI 组件库
```json
{
  "lucide-react": "^0.563.0",                        // 图标库
  "@radix-ui/react-dropdown-menu": "^2.1.16",        // 下拉菜单
  "class-variance-authority": "^0.7.1",              // 样式变体
  "clsx": "^2.1.1",                                  // 类名合并
  "tailwind-merge": "^3.4.0"                         // Tailwind 类名合并
}
```

#### 工具库
```json
{
  "date-fns": "^3.0.0",       // 日期处理
  "zod": "^4.3.6"             // 数据验证
}
```

#### 性能监控
```json
{
  "@vercel/analytics": "^1.0.0",     // Vercel 分析
  "web-vitals": "^4.0.0"             // 性能指标采集
}
```

### AntV 与设计系统集成

#### 色彩系统集成
```typescript
import { Chart } from '@antv/g2';

const chart = new Chart({
  theme: {
    defaultColor: '#00D9FF',
    colors10: [
      '#00D9FF',  // 科技蓝
      '#A855F7',  // 紫色
      '#C41E3A',  // 印章红
      '#06B6D4',  // 青色
      '#33E1FF',  // 亮蓝
    ],
  },
});
```

#### 动效集成
```typescript
import { Chart } from '@antv/g2';

const chart = new Chart({
  animate: {
    enter: {
      type: 'fadeIn',
      duration: 600,
      easing: 'easeOutQuart',
    },
  },
});
```

### 设计系统文件结构

```
src/lib/
├── colors.ts          # 色彩系统定义
├── typography.ts      # 字体系统定义
├── spacing.ts         # 间距系统定义
├── animations.ts      # 动效配置
└── design-tokens.ts   # 设计 Token 统一导出

src/components/ui/
├── button.tsx         # 按钮组件（已存在，需更新）
├── card.tsx           # 卡片组件（已存在，需更新）
├── badge.tsx          # 徽章组件（已存在）
└── ... 其他 UI 组件
```

### 实施优先级

#### Phase 1：核心配色系统（高优先级）
1. 更新 `globals.css` 中的 CSS 变量
2. 更新 `colors.ts` 中的色彩定义
3. 测试深色/浅色模式切换

#### Phase 2：UI 组件更新（高优先级）
1. 更新按钮组件样式
2. 更新卡片组件样式
3. 更新导航栏组件

#### Phase 3：页面布局优化（中优先级）
1. 优化 Hero 区域设计
2. 精简首页 Section 数量
3. 添加滚动揭示动效

#### Phase 4：动效与交互（中优先级）
1. 添加粒子效果
2. 实现数字计数动画
3. 优化微交互反馈

#### Phase 5：响应式适配（中优先级）
1. 测试各断点布局
2. 优化移动端体验
3. 性能优化

---

## 八、验收标准

### 视觉验收
- 配色方案与设计稿一致
- 组件样式符合设计规范
- 响应式布局在各设备正常显示

### 性能验收
- 首屏加载时间 < 2s
- Lighthouse 性能分数 ≥ 90
- 无明显的卡顿或延迟

### 可访问性验收
- Lighthouse 可访问性分数 ≥ 95
- 键盘导航正常
- 屏幕阅读器兼容
- 色彩对比度符合 WCAG AA 标准
- 为动效提供 `prefers-reduced-motion` 支持

---

## 九、总结

本设计方案通过**数字未来风**的设计语言，将 Novalon 的**传统印章文化**与**科技创新未来**完美融合。以**印章红**作为品牌识别核心，**蓝紫渐变**营造科技感，**深色背景**体现专业性，打造出一个既具有文化底蕴又充满未来感的品牌形象。

设计系统遵循**极简主义**原则，注重**性能优化**和**可访问性**，确保在各种设备和网络环境下都能提供优秀的用户体验。通过 AntV 生态的可视化能力，为数据展示提供强大的支持。

---

**设计团队：** AI 设计助手  
**审核状态：** 待审核  
**下一步：** 提交审核 → 开始实施