novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add light/dark mode support with Tailwind dark: prefix

Browse Source
This commit is contained in:
张翔
2026-02-21 23:32:47 +08:00
parent 1d7872c8cc
commit 15e17a8f20
13 changed files with 2581 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/plans/2026-02-21-website-redesign-design.md
+693
View File
@@ -0,0 +1,693 @@
# 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
docs/plans/2026-02-21-website-redesign.md
+1800
View File
File diff suppressed because it is too large Load Diff