# 危化品车辆管理应用 - 设计风格指南

## 设计理念

### 核心设计原则
**专业可靠**：体现工业级安全管理的专业性，建立用户信任感
**清晰高效**：信息层次清晰，操作流程简洁，适合移动端快速操作
**安全警示**：通过颜色和视觉元素强调安全重要性，突出关键信息
**现代简洁**：采用现代化设计语言，避免过度装饰，专注功能性

### 色彩系统
**主色调**：深海蓝 (#1e3a8a) - 体现专业性和信任感
**辅助色**：
- 安全绿 (#10b981) - 正常状态、成功操作
- 警告橙 (#f59e0b) - 注意事项、中等风险
- 危险红 (#ef4444) - 报警状态、高风险
- 中性灰 (#6b7280) - 辅助信息、禁用状态

**背景色系**：
- 主背景：浅灰白 (#f9fafb)
- 卡片背景：纯白 (#ffffff)
- 分割线：浅灰 (#e5e7eb)

### 字体系统
**标题字体**：Noto Sans SC Bold - 用于页面标题和重要信息
**正文字体**：Noto Sans SC Regular - 用于一般内容和描述文字
**数字字体**：等宽字体用于数据显示，确保对齐和易读性

**字体大小规范**：
- 大标题：24px (1.5rem)
- 中标题：18px (1.125rem)
- 正文：14px (0.875rem)
- 小字：12px (0.75rem)

### 视觉语言
**图标风格**：线性图标，2px描边，圆角处理，保持简洁现代感
**卡片设计**：轻微圆角 (8px)，微妙阴影，突出层次感
**按钮设计**：圆角按钮，明确的视觉反馈，适合触摸操作
**状态指示**：使用颜色、图标和文字组合，确保信息传达清晰

## 视觉效果

### 动画效果库选择
**Anime.js**：用于页面切换和元素动画
- 卡片进入动画：淡入 + 上移效果
- 状态切换动画：颜色渐变和尺寸变化
- 加载动画：脉冲效果和进度指示

**ECharts.js**：用于数据可视化
- 车辆状态分布饼图
- 报警趋势折线图
- 实时数据仪表盘

### 背景效果
**主背景**：纯色背景配合微妙的几何图案
- 使用CSS生成的点阵网格作为装饰背景
- 保持低对比度，不影响内容可读性

**卡片效果**：
- 轻微阴影：box-shadow: 0 1px 3px rgba(0,0,0,0.1)
- 悬浮状态：轻微上浮效果（仅桌面端）

### 交互反馈
**触摸反馈**：
- 按钮按下时轻微缩放效果 (scale: 0.95)
- 列表项点击时背景色变化
- 开关组件的平滑过渡动画

**状态动画**：
- 实时数据更新时的脉冲效果
- 报警状态的闪烁提醒
- 加载状态的旋转动画

### 图标和图形元素
**功能图标**：
- 车辆监控：卡车图标
- 报警管理：警告三角形图标
- 轨迹回放：路径箭头图标
- 系统设置：齿轮图标

**状态图标**：
- 在线状态：绿色圆点
- 离线状态：灰色圆点
- 报警状态：红色感叹号
- 警告状态：黄色三角形

### 布局设计原则
**信息层次**：
- 重要信息使用大字体和醒目颜色
- 次要信息使用小字体和中性色
- 相关信息分组展示，使用卡片容器

**空间利用**：
- 移动端优先，确保内容在小屏幕上清晰可读
- 合理的留白，避免信息过于密集
- 关键操作按钮放置在拇指易触及区域

**响应式设计**：
- 适配不同屏幕尺寸
- 横竖屏切换时的布局调整
- 考虑刘海屏和导航栏的适配

### 特殊视觉元素
**报警通知**：
- 顶部横幅通知，使用渐变背景
- 紧急报警使用全屏遮罩和震动效果
- 声音提醒配合视觉闪烁

**数据展示**：
- 使用进度条和仪表盘展示关键指标
- 数字数据使用等宽字体，便于对比
- 趋势图使用品牌色彩，突出变化

**加载状态**：
- 骨架屏替代传统loading动画
- 分页加载时的无限滚动效果
- 数据为空时的友好提示插图