From 8e4d2926983f5b2bb83085fd7ff7229a3d5bc10b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E7=BF=94?= Date: Sun, 22 Feb 2026 14:49:16 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=20Novalon=20?= =?UTF-8?q?=E5=AE=98=E7=BD=91=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1=E6=96=B9?= =?UTF-8?q?=E6=A1=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 设计风格：数字未来风（未来科技感） - 配色系统：科技蓝 + 紫色渐变 + 印章红 - UI 组件：按钮、卡片、导航栏设计规范 - 页面布局：Hero 区域 + 8 个核心 Section - 交互设计：微交互、动效规范、性能优化 - 响应式设计：断点系统、移动端适配 - 技术栈：Next.js 16 + React 19 + AntV 生态 --- .../2026-02-22-novalon-redesign-design.md | 584 ++++++++++++++++++ 1 file changed, 584 insertions(+) create mode 100644 docs/plans/2026-02-22-novalon-redesign-design.md diff --git a/docs/plans/2026-02-22-novalon-redesign-design.md b/docs/plans/2026-02-22-novalon-redesign-design.md new file mode 100644 index 0000000..454cf3d --- /dev/null +++ b/docs/plans/2026-02-22-novalon-redesign-design.md @@ -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 设计助手 +**审核状态：** 待审核 +**下一步：** 提交审核 → 开始实施