张翔
8d0f86c365
- 修复 Input/Textarea 组件中 React Hook 条件调用问题 - 修复 AboutSection 中的引号转义问题 - 更新 Input/Textarea 样式为医疗健康风格
447 lines
14 KiB
Markdown
447 lines
14 KiB
Markdown
# Novalon 官网设计方案 - 金融科技中国风融合版
|
||
|
||
**设计日期：** 2026-02-22
|
||
**设计风格：** 金融科技风 + 中国传统美学融合
|
||
**项目目标：** 融合 Wickret 金融科技设计语言 + 中国传统印章元素，打造兼具国际视野与文化底蕴的企业官网
|
||
|
||
---
|
||
|
||
## 一、设计理念与品牌定位
|
||
|
||
### 1.1 核心概念
|
||
|
||
**"数字印章，智连未来"**
|
||
|
||
将中国传统印章（诚信、权威、稳重）的意象与现代金融科技（创新、安全、高效）相结合，形成独特的设计语言。
|
||
|
||
### 1.2 设计风格定位
|
||
|
||
| 维度 | 融合方案 |
|
||
|------|---------|
|
||
| **国际视野** | Wickret 金融科技风格 - 深色背景、渐变光晕、专业简洁 |
|
||
| **文化底蕴** | 中国传统印章元素 - 红色点缀、方正布局、留白意境 |
|
||
| **科技感** | 现代渐变色彩 - 科技蓝、紫罗兰、粉紫渐变 |
|
||
| **情感连接** | 温暖而有力量 - 红色传递热情与信任 |
|
||
|
||
### 1.3 设计原则
|
||
|
||
1. **色彩平衡** - 科技蓝紫为主色调（70%），印章红为点缀色（20%），中性灰为辅助（10%）
|
||
2. **层次分明** - 借鉴 Wickret 的信息层次设计，大标题 + 关键点 + 详情
|
||
3. **动静结合** - 优雅的微动效，不过度炫技，注重体验流畅
|
||
4. **留白呼吸** - 借鉴东方美学的大面积留白，让信息有呼吸空间
|
||
|
||
---
|
||
|
||
## 二、色彩系统
|
||
|
||
### 2.1 配色比例
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 主色调（科技渐变） 70% 深色背景 + 蓝紫渐变 │
|
||
│ 品牌色（印章红） 20% 点缀、CTA、强调 │
|
||
│ 辅助色（中性灰） 10% 文字、边框、次要信息 │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 2.2 核心配色
|
||
|
||
#### 深色背景（主背景）
|
||
|
||
```css
|
||
--bg-primary: #0A0A0A /* 主背景 - 深黑 */
|
||
--bg-secondary: #141414 /* 次级背景 - 炭黑 */
|
||
--bg-tertiary: #1A1A1A /* 卡片背景 - 深灰 */
|
||
--bg-elevated: #242424 /* 悬停状态 - 中灰 */
|
||
```
|
||
|
||
#### 科技渐变色系（70%）
|
||
|
||
```css
|
||
--tech-blue: #00D9FF /* 电光蓝 - 主交互色 */
|
||
--tech-blue-hover: #00B8D9 /* 悬停态 */
|
||
--tech-purple: #A855F7 /* 霓虹紫 - 渐变终点 */
|
||
--tech-purple-hover: #9333EA
|
||
--tech-pink: #D946EF /* 粉紫 - 渐变中间色 */
|
||
--tech-cyan: #06B6D4 /* 青色 - 点缀 */
|
||
```
|
||
|
||
**渐变组合：**
|
||
- 主渐变：`linear-gradient(135deg, #00D9FF 0%, #A855F7 50%, #D946EF 100%)`
|
||
- 柔和渐变：`linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%)`
|
||
- 光晕效果：`radial-gradient(circle at 50% 0%, rgba(0, 217, 255, 0.15) 0%, transparent 50%)`
|
||
|
||
#### 印章红色系（20%）
|
||
|
||
```css
|
||
--brand-primary: #C41E3A /* 印章红 - 主品牌色 */
|
||
--brand-hover: #A01830 /* 悬停态 */
|
||
--brand-light: #E04A68 /* 浅色点缀 */
|
||
--brand-glow: rgba(196, 30, 58, 0.4) /* 发光效果 */
|
||
```
|
||
|
||
**使用场景：**
|
||
- Logo/图标
|
||
- CTA 按钮（主按钮）
|
||
- 重要数据强调
|
||
- 装饰性点缀元素
|
||
- 悬停高亮
|
||
|
||
#### 中性灰色系（10%）
|
||
|
||
```css
|
||
--text-primary: #FAFAFA /* 主文字 - 近白 */
|
||
--text-secondary: #D4D4D4 /* 次级文字 - 浅灰 */
|
||
--text-tertiary: #A3A3A3 /* 辅助文字 - 中灰 */
|
||
--text-muted: #737373 /* 禁用/提示 - 深灰 */
|
||
|
||
--border-default: #262626 /* 默认边框 */
|
||
--border-hover: #333333 /* 悬停边框 */
|
||
--border-accent: #00D9FF /* 聚焦边框 */
|
||
```
|
||
|
||
### 2.3 浅色模式配色（可选）
|
||
|
||
```css
|
||
--bg-primary-light: #FFFFFF
|
||
--bg-secondary-light: #FAFAFA
|
||
--text-primary-light: #171717
|
||
--text-secondary-light: #525252
|
||
--brand-primary-light: #C41E3A
|
||
```
|
||
|
||
---
|
||
|
||
## 三、页面布局设计
|
||
|
||
### 3.1 首页整体结构
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────┐
|
||
│ HEADER (64px) │
|
||
│ [Logo] [首页] [产品] [解决方案] [案例] [关于] [CTA] │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ HERO SECTION (100vh) │
|
||
│ │
|
||
│ ┌─────────────────────┐ ┌──────────────────────────┐ │
|
||
│ │ │ │ │ │
|
||
│ │ 主标题文案 │ │ 动态视觉元素 │ │
|
||
│ │ 副标题描述 │ │ - 光晕渐变 │ │
|
||
│ │ CTA 按钮组 │ │ - 抽象图形 │ │
|
||
│ │ 特性标签 │ │ - 微妙动效 │ │
|
||
│ │ │ │ │ │
|
||
│ └─────────────────────┘ └──────────────────────────┘ │
|
||
│ │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ SERVICES SECTION │
|
||
│ [图标] 服务领域1 [图标] 服务领域2 [图标] ... │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ PRODUCTS SECTION │
|
||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||
│ │ 产品卡1 │ │ 产品卡2 │ │ 产品卡3 │ │
|
||
│ └─────────┘ └─────────┘ └─────────┘ │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ ABOUT SECTION │
|
||
│ ┌──────────────┐ ┌─────────────────────────────────┐ │
|
||
│ │ 关于我们 │ │ 核心数据 / 成就展示 │ │
|
||
│ │ 企业理念 │ │ [数字动画] │ │
|
||
│ └──────────────┘ └─────────────────────────────────┘ │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ NEWS SECTION │
|
||
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
||
│ │ 新闻卡1 │ │ 新闻卡2 │ │ 新闻卡3 │ │
|
||
│ └─────────┘ └─────────┘ └─────────┘ │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ CONTACT SECTION │
|
||
│ [联系表单] [联系信息] │
|
||
├────────────────────────────────────────────────────────────┤
|
||
│ FOOTER │
|
||
│ [Logo] [导航链接] [社交媒体] [版权信息] │
|
||
└────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3.2 Hero 区域设计
|
||
|
||
#### 布局结构
|
||
- **高度：** 100vh（首屏全屏）
|
||
- **左右比例：** 60% 文案 / 40% 视觉元素
|
||
|
||
#### 视觉层次
|
||
|
||
**背景层：**
|
||
1. 深色底 `#0A0A0A`
|
||
2. 微妙网格线 `rgba(255,255,255)`（Stripe,0.02 风格）
|
||
3. 顶部渐变光晕 `radial-gradient(from 50% 0%, rgba(0, 217, 255, 0.1), transparent 50%)`
|
||
4. 底部暖色光晕 `radial-gradient(to 50% 100%, rgba(196, 30, 58, 0.08), transparent 40%)`
|
||
|
||
**文案层：**
|
||
- 主标题：品牌名 + Slogan
|
||
- 副标题：价值主张（2-3行）
|
||
- CTA 按钮组：主按钮（印章红）+ 次按钮（渐变轮廓）
|
||
- 特性标签：3个核心优势点
|
||
|
||
**视觉层：**
|
||
- 右侧抽象图形：圆形/线条组合（象征连接、印章）
|
||
- 动态光晕：缓慢脉动的渐变圆
|
||
- 微妙粒子：缓慢漂浮（可选）
|
||
|
||
### 3.3 内容区块设计
|
||
|
||
**通用规则：**
|
||
- 上下间距：`120px`（桌面）/ `80px`（移动）
|
||
- 最大内容宽度：`1280px`
|
||
- 内边距：`24px`（桌面）/ `16px`（移动）
|
||
|
||
---
|
||
|
||
## 四、UI 组件设计
|
||
|
||
### 4.1 按钮系统
|
||
|
||
#### 主按钮（CTA - 印章红）
|
||
|
||
```css
|
||
/* 默认状态 */
|
||
background: #C41E3A;
|
||
color: #FFFFFF;
|
||
border-radius: 8px;
|
||
padding: 12px 32px;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
|
||
/* 悬停状态 */
|
||
background: #A01830;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 0 30px rgba(196, 30, 58, 0.4);
|
||
|
||
/* 点击状态 */
|
||
transform: translateY(0);
|
||
box-shadow: 0 0 15px rgba(196, 30, 58, 0.3);
|
||
```
|
||
|
||
#### 次按钮（渐变轮廓）
|
||
|
||
```css
|
||
/* 默认状态 */
|
||
background: transparent;
|
||
border: 1px solid rgba(0, 217, 255, 0.5);
|
||
color: #00D9FF;
|
||
border-radius: 8px;
|
||
|
||
/* 悬停状态 */
|
||
background: rgba(0, 217, 255, 0.1);
|
||
border-color: #00D9FF;
|
||
box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
|
||
```
|
||
|
||
#### 渐变按钮
|
||
|
||
```css
|
||
/* 默认状态 */
|
||
background: linear-gradient(135deg, #00D9FF 0%, #A855F7 100%);
|
||
color: #FFFFFF;
|
||
border-radius: 8px;
|
||
|
||
/* 悬停状态 */
|
||
background: linear-gradient(135deg, #00B8D9 0%, #9333EA 100%);
|
||
box-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
|
||
```
|
||
|
||
### 4.2 卡片系统
|
||
|
||
#### 服务/产品卡片
|
||
|
||
```css
|
||
/* 背景 */
|
||
background: #1A1A1A;
|
||
border: 1px solid #262626;
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
|
||
/* 悬停 */
|
||
border-color: #00D9FF;
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 0 40px rgba(0, 217, 255, 0.1);
|
||
|
||
/* 图标容器 */
|
||
background: linear-gradient(135deg, rgba(0, 217, 255, 0.1), rgba(168, 85, 247, 0.1));
|
||
border-radius: 12px;
|
||
```
|
||
|
||
#### 数据卡片
|
||
|
||
```css
|
||
/* 背景 */
|
||
background: #141414;
|
||
border: 1px solid #333333;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
|
||
/* 数字样式 */
|
||
color: #00D9FF;
|
||
font-size: 48px;
|
||
font-weight: 700;
|
||
|
||
/* 标签样式 */
|
||
color: #A3A3A3;
|
||
font-size: 14px;
|
||
```
|
||
|
||
### 4.3 导航栏
|
||
|
||
```css
|
||
/* 背景 */
|
||
background: rgba(10, 10, 10, 0.8);
|
||
backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid #262626;
|
||
height: 64px;
|
||
|
||
/* Logo */
|
||
color: #C41E3A（印章红 Logo）
|
||
color: #FAFAFA（公司名）
|
||
|
||
/* 导航链接 */
|
||
color: #D4D4D4（默认）
|
||
color: #00D9FF（悬停/当前）
|
||
```
|
||
|
||
### 4.4 表单组件
|
||
|
||
```css
|
||
/* 输入框 */
|
||
background: #1A1A1A;
|
||
border: 1px solid #262626;
|
||
border-radius: 8px;
|
||
color: #FAFAFA;
|
||
padding: 12px 16px;
|
||
|
||
/* 聚焦状态 */
|
||
border-color: #00D9FF;
|
||
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
|
||
|
||
/* 占位符 */
|
||
color: #737373;
|
||
```
|
||
|
||
---
|
||
|
||
## 五、动效系统
|
||
|
||
### 5.1 全局动效参数
|
||
|
||
```css
|
||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||
--duration-fast: 150ms;
|
||
--duration-normal: 300ms;
|
||
--duration-slow: 500ms;
|
||
```
|
||
|
||
### 5.2 动效类型
|
||
|
||
#### 进入动效（页面加载）
|
||
- 元素从下方淡入
|
||
- 交错延迟：每元素 50ms
|
||
- 持续时间：500ms
|
||
|
||
#### 悬停动效
|
||
- 卡片上移 + 边框发光
|
||
- 按钮轻微上浮 + 阴影增强
|
||
- 持续时间：300ms
|
||
|
||
#### 背景动效
|
||
- 光晕缓慢脉动（4-6秒周期）
|
||
- 粒子缓慢漂浮（可选）
|
||
- 微妙流畅，不过度
|
||
|
||
---
|
||
|
||
## 六、响应式断点
|
||
|
||
```css
|
||
/* 移动优先设计 */
|
||
--breakpoint-sm: 640px; /* 手机横屏 */
|
||
--breakpoint-md: 768px; /* 平板 */
|
||
--breakpoint-lg: 1024px; /* 小笔记本 */
|
||
--breakpoint-xl: 1280px; /* 桌面 */
|
||
--breakpoint-2xl: 1536px; /* 大桌面 */
|
||
```
|
||
|
||
---
|
||
|
||
## 七、中国风元素设计
|
||
|
||
### 7.1 印章元素
|
||
|
||
**Logo/图标区：**
|
||
- 保留现有红色印章 Logo
|
||
- 印章可作为页面的"签名"元素出现在适当位置
|
||
|
||
**装饰元素：**
|
||
- 细线方形框（类似传统画框）
|
||
- 红色点缀线条
|
||
|
||
### 7.2 排版风格
|
||
|
||
**借鉴东方美学：**
|
||
- 大标题简洁有力
|
||
- 适当留白（padding/margin 略大）
|
||
- 信息层次清晰但不拥挤
|
||
|
||
**文字排版：**
|
||
- 标题：Bold, 紧凑字间距
|
||
- 正文：Regular, 宽松行高（1.6-1.8）
|
||
|
||
### 7.3 色彩呼应
|
||
|
||
- 科技蓝紫渐变 = 科技、创新
|
||
- 印章红 = 诚信、权威、稳重
|
||
- 深色背景 = 专业、神秘感
|
||
|
||
---
|
||
|
||
## 八、验收标准
|
||
|
||
### 8.1 视觉验收
|
||
|
||
- [ ] 深色背景正确显示（#0A0A0A）
|
||
- [ ] 蓝紫渐变正确应用
|
||
- [ ] 印章红作为点缀正确使用
|
||
- [ ] 卡片悬停效果流畅
|
||
- [ ] 动效优雅不卡顿
|
||
- [ ] 响应式布局正常
|
||
|
||
### 8.2 功能验收
|
||
|
||
- [ ] 导航链接正常工作
|
||
- [ ] CTA 按钮点击正常
|
||
- [ ] 表单交互正常
|
||
- [ ] 主题切换正常（如保留）
|
||
- [ ] 移动端菜单正常
|
||
|
||
### 8.3 性能验收
|
||
|
||
- [ ] 首屏加载 < 3s
|
||
- [ ] 动画流畅（60fps）
|
||
- [ ] 无控制台错误
|
||
|
||
---
|
||
|
||
## 九、实施优先级
|
||
|
||
### Phase 1: 核心视觉
|
||
1. 更新全局配色系统
|
||
2. 重构 Hero 区域
|
||
3. 更新按钮和卡片样式
|
||
|
||
### Phase 2: 组件优化
|
||
4. 优化导航栏
|
||
5. 更新服务/产品区块
|
||
6. 添加动效
|
||
|
||
### Phase 3: 完善细节
|
||
7. 响应式优化
|
||
8. 性能优化
|
||
9. 跨浏览器测试
|