张翔
8e4d292698
- 设计风格：数字未来风（未来科技感） - 配色系统：科技蓝 + 紫色渐变 + 印章红 - UI 组件：按钮、卡片、导航栏设计规范 - 页面布局：Hero 区域 + 8 个核心 Section - 交互设计：微交互、动效规范、性能优化 - 响应式设计：断点系统、移动端适配 - 技术栈：Next.js 16 + React 19 + AntV 生态
16 KiB
16 KiB
Novalon 官网重新设计方案
设计日期： 2026-02-22
设计风格： 数字未来风（未来科技感）
项目目标： 采用更现代、更前沿的设计语言，全方位升级配色、UI/UE/UX
一、设计理念与品牌定位
品牌定位
- 企业类型： 综合型科技集团
- 业务领域： 金融科技、企业级软件服务、科技创新等多领域
- 品牌内涵： "睿新致遠" - 传统底蕴与科技创新的融合
设计风格
数字未来风 - 深色背景 + 渐变光效（蓝紫渐变、青色光晕），流畅而现代
设计原则
- 品牌识别优先 - 印章红色作为核心识别色
- 科技感与专业性平衡 - 蓝紫渐变营造未来感，深色背景体现专业
- 传统与现代融合 - 红色印章代表传统，蓝紫渐变代表创新
二、核心配色系统
主色调 - 数字未来风渐变
科技蓝系列
- 主色：
#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：
- Hero - 核心价值主张 + 动态背景
- 核心优势 - 4 个数据指标（动态计数）
- 产品矩阵 - 3 列卡片网格
- 解决方案 - 行业/场景分类展示
- 成功案例 - 精选 3 个案例卡片
- 技术实力 - 技术栈图标展示
- 客户评价 - 轮播式 testimonial
- 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 列布局
七、技术栈与实施
技术栈推荐
核心框架
{
"next": "16.1.6",
"react": "19.2.3",
"react-dom": "19.2.3",
"typescript": "^5"
}
数据可视化（AntV 生态）
{
"@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：大数据表格、多维分析表格
动效库
{
"framer-motion": "^12.34.3", // 主要动效库
"gsap": "^3.12.0" // 复杂动画场景（可选）
}
UI 组件库
{
"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 类名合并
}
工具库
{
"date-fns": "^3.0.0", // 日期处理
"zod": "^4.3.6" // 数据验证
}
性能监控
{
"@vercel/analytics": "^1.0.0", // Vercel 分析
"web-vitals": "^4.0.0" // 性能指标采集
}
AntV 与设计系统集成
色彩系统集成
import { Chart } from '@antv/g2';
const chart = new Chart({
theme: {
defaultColor: '#00D9FF',
colors10: [
'#00D9FF', // 科技蓝
'#A855F7', // 紫色
'#C41E3A', // 印章红
'#06B6D4', // 青色
'#33E1FF', // 亮蓝
],
},
});
动效集成
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：核心配色系统（高优先级）
- 更新
globals.css中的 CSS 变量 - 更新
colors.ts中的色彩定义 - 测试深色/浅色模式切换
Phase 2：UI 组件更新（高优先级）
- 更新按钮组件样式
- 更新卡片组件样式
- 更新导航栏组件
Phase 3：页面布局优化（中优先级）
- 优化 Hero 区域设计
- 精简首页 Section 数量
- 添加滚动揭示动效
Phase 4：动效与交互（中优先级）
- 添加粒子效果
- 实现数字计数动画
- 优化微交互反馈
Phase 5：响应式适配（中优先级）
- 测试各断点布局
- 优化移动端体验
- 性能优化
八、验收标准
视觉验收
- 配色方案与设计稿一致
- 组件样式符合设计规范
- 响应式布局在各设备正常显示
性能验收
- 首屏加载时间 < 2s
- Lighthouse 性能分数 ≥ 90
- 无明显的卡顿或延迟
可访问性验收
- Lighthouse 可访问性分数 ≥ 95
- 键盘导航正常
- 屏幕阅读器兼容
- 色彩对比度符合 WCAG AA 标准
- 为动效提供
prefers-reduced-motion支持
九、总结
本设计方案通过数字未来风的设计语言，将 Novalon 的传统印章文化与科技创新未来完美融合。以印章红作为品牌识别核心，蓝紫渐变营造科技感，深色背景体现专业性，打造出一个既具有文化底蕴又充满未来感的品牌形象。
设计系统遵循极简主义原则，注重性能优化和可访问性，确保在各种设备和网络环境下都能提供优秀的用户体验。通过 AntV 生态的可视化能力，为数据展示提供强大的支持。
设计团队： AI 设计助手
审核状态： 待审核
下一步： 提交审核 → 开始实施