1

mobile/design.md

@@ -0,0 +1,117 @@
+# 危化品车辆管理应用 - 设计风格指南
+
+## 设计理念
+
+### 核心设计原则
+**专业可靠**：体现工业级安全管理的专业性，建立用户信任感
+**清晰高效**：信息层次清晰，操作流程简洁，适合移动端快速操作
+**安全警示**：通过颜色和视觉元素强调安全重要性，突出关键信息
+**现代简洁**：采用现代化设计语言，避免过度装饰，专注功能性
+
+### 色彩系统
+**主色调**：深海蓝 (#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动画
+- 分页加载时的无限滚动效果
+- 数据为空时的友好提示插图