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