1

mobile/interaction.md

@@ -0,0 +1,85 @@
+# 危化品车辆监控系统（简化版）- 交互设计
+
+## 核心交互功能
+
+### 1. 园区车辆概览交互
+**主要交互流程：**
+- 用户进入首页，直接显示三个核心统计数字
+- 数字采用大字体显示，配合图标增强视觉效果
+- 点击统计卡片可查看详细信息（模态窗口显示）
+- 数据每30秒自动刷新，用户可手动下拉刷新
+
+**交互细节：**
+- 使用数字动画效果，从0递增到目标数值
+- 统计卡片使用不同颜色区分：蓝色（总数）、绿色（申请）、橙色（运单）
+- 卡片点击时轻微缩放反馈，增强交互体验
+
+### 2. 报警信息管理交互
+**主要交互流程：**
+- 报警信息以列表形式展示，按时间倒序排列
+- 每条报警显示车牌号、报警类型、位置、时间
+- 点击报警项可切换"未查看"/"已查看"状态
+- 支持按状态筛选报警（全部、未查看、已查看）
+
+**报警类型和显示：**
+- **违停报警**: 红色标识，显示"XXX车牌违停，在XX位置，XX时间触发"
+- **超速报警**: 橙色标识，显示"XXX车牌超速，在XX位置，XX时间触发"
+- **其他报警**: 黄色标识，根据具体情况显示
+
+**状态管理：**
+- **未查看**: 红色圆点标识，文字加粗显示
+- **已查看**: 灰色圆点标识，文字正常显示
+- 状态切换通过点击实现，切换后更新视觉样式
+
+### 3. 车辆轨迹查询交互
+**主要交互流程：**
+- 用户在输入框中输入车牌号（支持模糊匹配）
+- 点击查询按钮，系统显示该车辆的轨迹信息
+- 轨迹信息包括：行驶路线、停留点、报警记录
+- 支持查看最近7天的轨迹记录
+
+**查询功能：**
+- 支持车牌号前缀搜索（如输入"京A"显示所有京A车辆）
+- 输入框提供历史查询记录快捷选择
+- 查询结果以时间轴形式展示关键轨迹点
+- 每个轨迹点显示时间、位置、状态信息
+
+### 4. 页面导航交互
+**底部导航栏：**
+- **首页**: 显示园区概览和最新报警
+- **监控**: 专门的报警管理页面，功能更完整
+- **轨迹**: 车辆轨迹查询专用页面
+
+**导航特性：**
+- 当前页面图标高亮显示
+- 页面切换使用平滑过渡动画
+- 保持用户操作上下文，避免数据丢失
+
+## 简化交互原则
+
+### 操作简化
+- 减少多步骤操作，一键完成主要功能
+- 避免复杂的表单填写，使用选择代替输入
+- 关键操作提供确认提示，防止误操作
+
+### 信息显示
+- 突出关键信息，次要信息可折叠显示
+- 使用图标和颜色编码，减少文字阅读负担
+- 重要数据使用大字体和醒目颜色
+
+### 响应速度
+- 所有操作提供即时视觉反馈
+- 数据加载使用骨架屏，避免空白等待
+- 优化动画时长，确保流畅体验
+
+## 移动端适配
+
+### 触摸交互
+- 所有可点击元素最小44px×44px触摸区域
+- 支持滑动查看更多信息
+- 长按显示快捷操作菜单
+
+### 屏幕适配
+- 适配不同屏幕尺寸和分辨率
+- 横竖屏切换保持功能可用性
+- 考虑刘海屏和底部指示条适配