Add Font Awesome v4 compatibility WOFF2 file
This commit is contained in:
杨水淼
@@ -0,0 +1,166 @@
|
||||
# AI产业链分析平台 - 设计风格
|
||||
|
||||
## 设计理念
|
||||
|
||||
### 核心概念
|
||||
**"数字时代的商业智慧"** - 将复杂的AI产业链分析转化为直观、专业的数字体验
|
||||
|
||||
### 设计原则
|
||||
1. **专业权威**: 体现深度分析的专业性和可信度
|
||||
2. **科技前沿**: 展现AI产业的创新性和未来感
|
||||
3. **数据驱动**: 突出数据可视化的重要性
|
||||
4. **简洁优雅**: 避免过度设计，保持内容聚焦
|
||||
|
||||
## 视觉语言
|
||||
|
||||
### 色彩系统
|
||||
**主色调**: 深蓝灰 (#1a1d29) - 专业、稳重、科技感
|
||||
**辅助色**:
|
||||
- 青蓝色 (#2563eb) - 科技、创新
|
||||
- 深青色 (#0891b2) - 数据、智能
|
||||
- 暖灰色 (#6b7280) - 中性、平衡
|
||||
|
||||
**功能色彩**:
|
||||
- 成功绿 (#059669) - 正向数据
|
||||
- 警告橙 (#d97706) - 中性数据
|
||||
- 错误红 (#dc2626) - 负向数据
|
||||
|
||||
**背景色**: 渐变从深蓝到黑色，营造深度感
|
||||
|
||||
### 字体系统
|
||||
**标题字体**: Noto Sans SC (粗体)
|
||||
- 现代、简洁、具有科技感
|
||||
- 用于主标题、导航、按钮
|
||||
|
||||
**正文字体**: Noto Serif SC (常规)
|
||||
- 优雅、易读、专业感
|
||||
- 用于正文内容、数据标签
|
||||
|
||||
**数据字体**: JetBrains Mono
|
||||
- 等宽字体，用于代码和数据展示
|
||||
|
||||
### 布局系统
|
||||
**网格系统**: 12列响应式网格
|
||||
**间距系统**: 基于8px的间距单位
|
||||
**圆角**: 8px统一圆角，体现现代感
|
||||
**阴影**: 微妙的投影，增加层次感
|
||||
|
||||
## 视觉效果
|
||||
|
||||
### 背景效果
|
||||
**主背景**: 使用shader-park创建的动态粒子场
|
||||
- 深蓝色基调
|
||||
- 缓慢移动的粒子
|
||||
- 微妙的连接线条
|
||||
- 响应鼠标移动的交互
|
||||
|
||||
### 数据可视化风格
|
||||
**图表配色**: 使用低饱和度的蓝色系渐变
|
||||
**动画效果**:
|
||||
- 数据加载动画
|
||||
- 悬停高亮效果
|
||||
- 平滑的过渡动画
|
||||
|
||||
### 交互效果
|
||||
**悬停效果**:
|
||||
- 卡片轻微上浮 (translateY: -4px)
|
||||
- 阴影加深
|
||||
- 颜色微妙变化
|
||||
|
||||
**点击效果**:
|
||||
- 微妙的缩放动画
|
||||
- 涟漪效果
|
||||
- 状态变化反馈
|
||||
|
||||
### 滚动动画
|
||||
**触发机制**: 元素进入视口上半部分时触发
|
||||
**动画效果**:
|
||||
- 淡入效果 (opacity: 0 → 1)
|
||||
- 上移效果 (translateY: 20px → 0)
|
||||
- 交错延迟 (stagger: 100ms)
|
||||
|
||||
## 组件设计
|
||||
|
||||
### 公司卡片
|
||||
**设计特点**:
|
||||
- 圆角矩形设计
|
||||
- 微妙的边框和阴影
|
||||
- 公司logo和关键信息
|
||||
- 护城河评分可视化
|
||||
|
||||
**交互状态**:
|
||||
- 默认: 轻微阴影
|
||||
- 悬停: 上浮 + 阴影加深
|
||||
- 选中: 边框高亮
|
||||
|
||||
### 数据图表
|
||||
**设计原则**:
|
||||
- 简洁的配色方案
|
||||
- 清晰的标签和图例
|
||||
- 响应式设计
|
||||
- 交互式提示框
|
||||
|
||||
### 导航组件
|
||||
**设计风格**:
|
||||
- 顶部固定导航栏
|
||||
- 半透明背景
|
||||
- 清晰的层级结构
|
||||
- 当前页面高亮
|
||||
|
||||
## 响应式设计
|
||||
|
||||
### 断点设置
|
||||
- 移动端: 320px - 767px
|
||||
- 平板端: 768px - 1199px
|
||||
- 桌面端: 1200px+
|
||||
|
||||
### 适配策略
|
||||
**移动端**:
|
||||
- 单列布局
|
||||
- 大尺寸触摸目标
|
||||
- 简化的导航
|
||||
|
||||
**平板端**:
|
||||
- 两列布局
|
||||
- 可折叠侧边栏
|
||||
- 触摸优化
|
||||
|
||||
**桌面端**:
|
||||
- 多列布局
|
||||
- 丰富的悬停效果
|
||||
- 完整的交互功能
|
||||
|
||||
## 品牌元素
|
||||
|
||||
### Logo设计概念
|
||||
**设计思路**: 抽象的神经网络节点连接图案
|
||||
**颜色**: 青蓝色渐变
|
||||
**寓意**: AI产业的连接性和智能化
|
||||
|
||||
### 图标系统
|
||||
**风格**: 线性图标
|
||||
**粗细**: 2px统一粗细
|
||||
**颜色**: 继承文本颜色
|
||||
**大小**: 16px, 20px, 24px标准尺寸
|
||||
|
||||
### 插图风格
|
||||
**风格**: 扁平化几何插图
|
||||
**配色**: 品牌色彩系统
|
||||
**主题**: AI、数据、科技元素
|
||||
|
||||
## 可访问性设计
|
||||
|
||||
### 颜色对比度
|
||||
- 所有文本与背景对比度 ≥ 4.5:1
|
||||
- 大文本对比度 ≥ 3:1
|
||||
- 使用工具验证对比度
|
||||
|
||||
### 交互反馈
|
||||
- 清晰的焦点指示器
|
||||
- 足够的点击目标大小 (44px+)
|
||||
- 明确的加载状态
|
||||
|
||||
### 内容结构
|
||||
- 语义化HTML结构
|
||||
- 清晰的标题层级
|
||||
- 有意义的链接文本
|
||||
Reference in New Issue
Block a user