qiye/mobile/interaction.md

# 危化品车辆监控系统（简化版）- 交互设计

## 核心交互功能

### 1. 园区车辆概览交互
**主要交互流程：**
- 用户进入首页，直接显示三个核心统计数字
- 数字采用大字体显示，配合图标增强视觉效果
- 点击统计卡片可查看详细信息（模态窗口显示）
- 数据每30秒自动刷新，用户可手动下拉刷新

**交互细节：**
- 使用数字动画效果，从0递增到目标数值
- 统计卡片使用不同颜色区分：蓝色（总数）、绿色（申请）、橙色（运单）
- 卡片点击时轻微缩放反馈，增强交互体验

### 2. 报警信息管理交互
**主要交互流程：**
- 报警信息以列表形式展示，按时间倒序排列
- 每条报警显示车牌号、报警类型、位置、时间
- 点击报警项可切换"未查看"/"已查看"状态
- 支持按状态筛选报警（全部、未查看、已查看）

**报警类型和显示：**
- **违停报警**: 红色标识，显示"XXX车牌违停，在XX位置，XX时间触发"
- **超速报警**: 橙色标识，显示"XXX车牌超速，在XX位置，XX时间触发"
- **其他报警**: 黄色标识，根据具体情况显示

**状态管理：**
- **未查看**: 红色圆点标识，文字加粗显示
- **已查看**: 灰色圆点标识，文字正常显示
- 状态切换通过点击实现，切换后更新视觉样式

### 3. 车辆轨迹查询交互
**主要交互流程：**
- 用户在输入框中输入车牌号（支持模糊匹配）
- 点击查询按钮，系统显示该车辆的轨迹信息
- 轨迹信息包括：行驶路线、停留点、报警记录
- 支持查看最近7天的轨迹记录

**查询功能：**
- 支持车牌号前缀搜索（如输入"京A"显示所有京A车辆）
- 输入框提供历史查询记录快捷选择
- 查询结果以时间轴形式展示关键轨迹点
- 每个轨迹点显示时间、位置、状态信息

### 4. 页面导航交互
**底部导航栏：**
- **首页**: 显示园区概览和最新报警
- **监控**: 专门的报警管理页面，功能更完整
- **轨迹**: 车辆轨迹查询专用页面

**导航特性：**
- 当前页面图标高亮显示
- 页面切换使用平滑过渡动画
- 保持用户操作上下文，避免数据丢失

## 简化交互原则

### 操作简化
- 减少多步骤操作，一键完成主要功能
- 避免复杂的表单填写，使用选择代替输入
- 关键操作提供确认提示，防止误操作

### 信息显示
- 突出关键信息，次要信息可折叠显示
- 使用图标和颜色编码，减少文字阅读负担
- 重要数据使用大字体和醒目颜色

### 响应速度
- 所有操作提供即时视觉反馈
- 数据加载使用骨架屏，避免空白等待
- 优化动画时长，确保流畅体验

## 移动端适配

### 触摸交互
- 所有可点击元素最小44px×44px触摸区域
- 支持滑动查看更多信息
- 长按显示快捷操作菜单

### 屏幕适配
- 适配不同屏幕尺寸和分辨率
- 横竖屏切换保持功能可用性
- 考虑刘海屏和底部指示条适配