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