Files

T

- 修复 Input/Textarea 组件中 React Hook 条件调用问题
- 修复 AboutSection 中的引号转义问题
- 更新 Input/Textarea 样式为医疗健康风格

2026-02-23 08:16:36 +08:00

14 KiB

Raw Blame History

Novalon 官网设计方案 - 金融科技中国风融合版

设计日期： 2026-02-22
设计风格： 金融科技风 + 中国传统美学融合
项目目标： 融合 Wickret 金融科技设计语言 + 中国传统印章元素，打造兼具国际视野与文化底蕴的企业官网

一、设计理念与品牌定位

1.1 核心概念

"数字印章，智连未来"

将中国传统印章（诚信、权威、稳重）的意象与现代金融科技（创新、安全、高效）相结合，形成独特的设计语言。

1.2 设计风格定位

维度	融合方案
国际视野	Wickret 金融科技风格 - 深色背景、渐变光晕、专业简洁
文化底蕴	中国传统印章元素 - 红色点缀、方正布局、留白意境
科技感	现代渐变色彩 - 科技蓝、紫罗兰、粉紫渐变
情感连接	温暖而有力量 - 红色传递热情与信任

1.3 设计原则

色彩平衡 - 科技蓝紫为主色调（70%），印章红为点缀色（20%），中性灰为辅助（10%）
层次分明 - 借鉴 Wickret 的信息层次设计，大标题 + 关键点 + 详情
动静结合 - 优雅的微动效，不过度炫技，注重体验流畅
留白呼吸 - 借鉴东方美学的大面积留白，让信息有呼吸空间

二、色彩系统

2.1 配色比例

┌─────────────────────────────────────────────────────────┐
│  主色调（科技渐变）         70%  深色背景 + 蓝紫渐变    │
│  品牌色（印章红）           20%  点缀、CTA、强调        │
│  辅助色（中性灰）          10%  文字、边框、次要信息    │
└─────────────────────────────────────────────────────────┘

2.2 核心配色

深色背景（主背景）

--bg-primary: #0A0A0A        /* 主背景 - 深黑 */
--bg-secondary: #141414     /* 次级背景 - 炭黑 */
--bg-tertiary: #1A1A1A      /* 卡片背景 - 深灰 */
--bg-elevated: #242424      /* 悬停状态 - 中灰 */

科技渐变色系（70%）

--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%）

--brand-primary: #C41E3A    /* 印章红 - 主品牌色 */
--brand-hover: #A01830      /* 悬停态 */
--brand-light: #E04A68     /* 浅色点缀 */
--brand-glow: rgba(196, 30, 58, 0.4)  /* 发光效果 */

使用场景：

Logo/图标
CTA 按钮（主按钮）
重要数据强调
装饰性点缀元素
悬停高亮

中性灰色系（10%）

--text-primary: #FAFAFA    /* 主文字 - 近白 */
--text-secondary: #D4D4D4  /* 次级文字 - 浅灰 */
--text-tertiary: #A3A3A3  /* 辅助文字 - 中灰 */
--text-muted: #737373     /* 禁用/提示 - 深灰 */

--border-default: #262626   /* 默认边框 */
--border-hover: #333333    /* 悬停边框 */
--border-accent: #00D9FF   /* 聚焦边框 */

2.3 浅色模式配色（可选）

--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% 视觉元素

视觉层次

背景层：

深色底 #0A0A0A
微妙网格线 rgba(255,255,255)（Stripe,0.02 风格）
顶部渐变光晕 radial-gradient(from 50% 0%, rgba(0, 217, 255, 0.1), transparent 50%)
底部暖色光晕 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 - 印章红）

/* 默认状态 */
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);

次按钮（渐变轮廓）

/* 默认状态 */
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);

渐变按钮

/* 默认状态 */
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 卡片系统

服务/产品卡片

/* 背景 */
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;

数据卡片

/* 背景 */
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 导航栏

/* 背景 */
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 表单组件

/* 输入框 */
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 全局动效参数

--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秒周期）
粒子缓慢漂浮（可选）
微妙流畅，不过度

六、响应式断点

/* 移动优先设计 */
--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: 核心视觉

更新全局配色系统
重构 Hero 区域
更新按钮和卡片样式

Phase 2: 组件优化

优化导航栏
更新服务/产品区块
添加动效

Phase 3: 完善细节

响应式优化
性能优化
跨浏览器测试

14 KiB Raw Blame History Unescape Escape