166 lines
3.7 KiB
Markdown
166 lines
3.7 KiB
Markdown
# 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结构
|
|
- 清晰的标题层级
|
|
- 有意义的链接文本 |