docs: 添加 Novalon 官网重新设计方案

- 设计风格：数字未来风（未来科技感） - 配色系统：科技蓝 + 紫色渐变 + 印章红 - UI 组件：按钮、卡片、导航栏设计规范 - 页面布局：Hero 区域 + 8 个核心 Section - 交互设计：微交互、动效规范、性能优化 - 响应式设计：断点系统、移动端适配 - 技术栈：Next.js 16 + React 19 + AntV 生态
2026-02-22 14:49:16 +08:00
parent 15e17a8f20
commit 8e4d292698
1 changed files with 584 additions and 0 deletions
@@ -0,0 +1,584 @@
+# 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 设计助手  
+**审核状态：** 待审核  
+**下一步：** 提交审核 → 开始实施