张翔
17 KiB
17 KiB
Novalon 官网重新设计方案
设计日期： 2026-02-21
设计风格： 极简科技风
项目目标： 品牌形象升级 + 用户体验优化
一、项目背景
当前状态
- 技术栈：Next.js 16 + React 19 + TypeScript + Tailwind CSS v4
- 现有页面：首页包含13个section，信息密度较高
- 目标用户：混合群体（企业决策者、技术人员、业务人员）
设计目标
- 品牌形象升级 - 打造科技创新与前沿感的品牌调性
- 用户体验优化 - 全方位改进导航、内容展示、交互体验和移动端适配
二、整体架构与导航结构
信息架构优化
一级导航（顶部固定）：
- 首页
- 产品（下拉：ERP、CRM、OA、BI、IoT）
- 解决方案（下拉：按行业、按场景）
- 案例
- 关于我们
- 联系我们
首页结构精简（从13个section减少到8个）：
- Hero区域 - 核心价值主张 + 动态粒子背景
- 核心优势 - 4个关键数据指标（动态计数）
- 产品矩阵 - 卡片式展示核心产品
- 解决方案 - 行业/场景分类展示
- 成功案例 - 精选3个典型案例
- 技术实力 - 技术栈展示
- 客户评价 - 轮播式testimonial
- 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配置扩展：
// 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变量系统：
/* 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
开发流程：
- 从
develop创建feature分支 - 开发 + 单元测试
- 提交PR + Code Review
- 合并到
develop - 测试通过后合并到
main - 自动部署
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周
九、设计决策记录
为什么选择深色科技风？
- 符合科技创新与前沿感的品牌定位
- 顶级科技公司的主流选择（Apple、Microsoft、GitHub、Vercel）
- 对企业决策者显得更加专业、高端、可信赖
- 深色背景配合霓虹色点缀能更好突出关键信息
- 移动端更受欢迎（省电、护眼）
为什么选择 AntV？
- 完善的中文文档和社区支持
- 企业级稳定性，适合金融场景
- 丰富的图表类型和交互能力
- 良好的性能表现
为什么精简到8个section？
- 提升信息聚焦度，避免用户认知负担
- 每个section都有明确的用户目标和转化路径
- 更好的性能表现（减少渲染内容）
- 更清晰的信息层级
十、下一步行动
- ✅ 设计方案已完成并文档化
- ⏭️ 准备进入实施阶段
- ⏭️ 创建详细的实施计划（使用
writing-plansskill） - ⏭️ 创建隔离的开发环境（使用
using-git-worktreesskill）
设计者： AI Assistant
审核者： 待定
最后更新： 2026-02-21