3.7 KiB
3.7 KiB
AI产业链分析平台 - 设计风格
设计理念
核心概念
"数字时代的商业智慧" - 将复杂的AI产业链分析转化为直观、专业的数字体验
设计原则
- 专业权威: 体现深度分析的专业性和可信度
- 科技前沿: 展现AI产业的创新性和未来感
- 数据驱动: 突出数据可视化的重要性
- 简洁优雅: 避免过度设计，保持内容聚焦
视觉语言
色彩系统
主色调: 深蓝灰 (#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结构
- 清晰的标题层级
- 有意义的链接文本