1156 lines
30 KiB
Markdown
1156 lines
30 KiB
Markdown
# 🎨 Crop-X 智慧农业系统 UI/UX 规格说明
|
||
|
||
## 📋 目录
|
||
|
||
1. [引言](#引言)
|
||
2. [整体UX目标和原则](#整体ux目标和原则)
|
||
3. [信息架构](#信息架构)
|
||
4. [用户流程](#用户流程)
|
||
5. [线框图和原型](#线框图和原型)
|
||
6. [组件库/设计系统](#组件库设计系统)
|
||
7. [品牌和样式指南](#品牌和样式指南)
|
||
8. [无障碍性要求](#无障碍性要求)
|
||
9. [响应式策略](#响应式策略)
|
||
10. [动画和微交互](#动画和微交互)
|
||
11. [性能考虑](#性能考虑)
|
||
12. [下一步](#下一步)
|
||
|
||
---
|
||
|
||
## 📋 引言
|
||
|
||
本文档定义了Crop-X智慧农业管理系统的用户体验目标、信息架构、用户流程和视觉设计规格。基于对现有系统的深入分析，包括登录页面、导航系统、农机管理等核心模块的代码研究，本规格为React 19 + Zustand + shadcn/ui现代化改造提供完整的UX设计指导。
|
||
|
||
### 变更日志
|
||
|
||
| 日期 | 版本 | 描述 | 作者 |
|
||
|------|---------|-------------|---------|
|
||
| 2025-10-17 | 1.0 | 基于现有系统代码分析的初始UX规格 | Sally (UX专家) |
|
||
|
||
---
|
||
|
||
## 🎯 整体UX目标和原则
|
||
|
||
### 目标用户画像
|
||
|
||
**农场管理员** 👨🌾
|
||
- **背景**: 农场运营管理者，负责整体农业生产规划
|
||
- **技术能力**: 中等，熟悉基础办公软件
|
||
- **核心需求**: 数据可视化、资源调度、决策支持
|
||
- **使用场景**: 办公室环境，长时间使用，需要详细报表和分析
|
||
|
||
**农机操作员** 🚜
|
||
- **背景**: 一线农机操作人员，负责设备日常操作
|
||
- **技术能力**: 低到中等，可能使用移动设备
|
||
- **核心需求**: 简化操作流程、实时状态显示、快速故障处理
|
||
- **使用场景**: 田地现场，移动优先，需要快速响应和清晰指引
|
||
|
||
**农业技术员** 👨🔬
|
||
- **背景**: 农业技术人员，负责技术指导和数据分析
|
||
- **技术能力**: 中等到高，需要处理复杂数据
|
||
- **核心需求**: 数据分析工具、技术诊断、专业报告
|
||
- **使用场景**: 实验室/办公室，需要专业工具和深度分析
|
||
|
||
**系统管理员** 🛠️
|
||
- **背景**: IT系统管理员，负责系统维护和配置
|
||
- **技术能力**: 高，熟悉复杂管理系统
|
||
- **核心需求**: 权限管理、系统监控、配置管理
|
||
- **使用场景**: 数据中心，需要强大的管理工具
|
||
|
||
### 可用性目标
|
||
|
||
- **学习效率**: 新用户在15分钟内能完成核心任务操作
|
||
- **操作效率**: 管理员级用户在3次点击内完成常用操作
|
||
- **错误预防**: 关键操作有明确的确认和撤销机制
|
||
- **记忆保持**: 不经常使用的用户能在重新使用时快速上手
|
||
- **移动友好**: 田地操作员能在移动设备上完成80%的核心任务
|
||
|
||
### 设计原则
|
||
|
||
1. **渐进式现代化** - 保持99.5%的界面一致性，逐步引入现代UX模式
|
||
2. **移动优先农业场景** - 针对田间作业优化移动体验
|
||
3. **数据驱动可视化** - 将复杂农业数据转化为直观的可视化图表
|
||
4. **情境感知设计** - 根据使用环境（办公室/田地）调整界面复杂度
|
||
5. **可靠性优先** - 在关键农业生产时刻确保系统稳定可用
|
||
|
||
---
|
||
|
||
## 🗺️ 信息架构
|
||
|
||
### 站点地图/屏幕清单
|
||
|
||
```mermaid
|
||
graph TD
|
||
A[登录页面] --> B[主控制台]
|
||
B --> C[7大业务系统]
|
||
|
||
C --> D[智能农机管理系统]
|
||
C --> E[地块信息管理系统]
|
||
C --> F[农事操作管理系统]
|
||
C --> G[农业资产管理系统]
|
||
C --> H[AI作物模型系统]
|
||
C --> I[水肥控制系统]
|
||
C --> J[中心配置管理]
|
||
|
||
D --> D1[农机档案]
|
||
D --> D2[驾驶员档案]
|
||
D --> D3[负载管理]
|
||
D --> D4[实时监控]
|
||
D --> D5[故障诊断]
|
||
D --> D6[精准作业]
|
||
D --> D7[数据分析]
|
||
D --> D8[调度管理]
|
||
D --> D9[安全安防]
|
||
|
||
E --> E1[地块档案]
|
||
E --> E2[地图管理]
|
||
E --> E3[空间分析]
|
||
E --> E4[环境监测]
|
||
E --> E5[适宜性评价]
|
||
E --> E6[对比分析]
|
||
E --> E7[风险预警]
|
||
|
||
J --> J1[租户管理]
|
||
J --> J2[用户管理]
|
||
J --> J3[系统参数]
|
||
J --> J4[系统监控]
|
||
J --> J5[消息中心]
|
||
```
|
||
|
||
### 导航结构
|
||
|
||
**主导航（水平标签栏）:**
|
||
- 7个主要业务系统标签，支持快速切换
|
||
- 每个标签有独特的图标和颜色标识
|
||
- 激活状态有明显的视觉反馈（绿色背景+底部线条）
|
||
|
||
**二级导航（左侧边栏）:**
|
||
- 基于选中的主系统显示相应的子功能
|
||
- 最多支持三级菜单结构（系统→模块→页面）
|
||
- 支持搜索和快速定位功能
|
||
|
||
**面包屑策略:**
|
||
- 显示完整的导航路径：`系统 > 模块 > 页面`
|
||
- 面包屑支持点击导航，快速返回上级页面
|
||
- 在移动端简化为返回按钮
|
||
|
||
---
|
||
|
||
## 🔄 用户流程
|
||
|
||
### 用户流程1: 农场管理员日常工作
|
||
|
||
**用户目标:** 查看农场整体运营状态，处理异常情况
|
||
|
||
**入口点:** 系统登录 → 主控制台 → 消息通知
|
||
|
||
**成功标准:** 在10分钟内完成日常检查和问题处理
|
||
|
||
**流程图:**
|
||
```mermaid
|
||
graph TD
|
||
A[登录系统] --> B[查看消息通知]
|
||
B --> C[检查农机状态]
|
||
C --> D{是否有异常?}
|
||
D -->|是| E[处理异常问题]
|
||
D -->|否| F[查看作业报告]
|
||
E --> G[调度维修/人员]
|
||
F --> H[生成今日总结]
|
||
G --> H
|
||
H --> I[结束日常工作]
|
||
```
|
||
|
||
**边缘情况和错误处理:**
|
||
- 网络断线：显示离线状态，支持数据缓存
|
||
- 系统错误：提供错误报告机制，自动重试
|
||
- 权限不足：明确提示权限限制，提供申请路径
|
||
|
||
### 用户流程2: 农机操作员现场作业
|
||
|
||
**用户目标:** 执行农机作业任务，实时汇报工作状态
|
||
|
||
**入口点:** 移动端登录 → 任务列表 → 作业执行
|
||
|
||
**成功标准:** 在移动设备上完成作业任务和状态更新
|
||
|
||
**流程图:**
|
||
```mermaid
|
||
graph TD
|
||
A[移动端登录] --> B[查看今日任务]
|
||
B --> C[开始作业]
|
||
C --> D[实时更新状态]
|
||
D --> E{完成作业?}
|
||
E -->|否| F[记录异常情况]
|
||
E -->|是| G[提交作业报告]
|
||
F --> D
|
||
G --> H[上传现场照片]
|
||
H --> I[任务完成]
|
||
```
|
||
|
||
**边缘情况和错误处理:**
|
||
- 信号不好：支持离线记录，网络恢复后自动同步
|
||
- 设备故障：一键故障报告，自动通知维修部门
|
||
- 操作错误：提供撤销功能和操作确认
|
||
|
||
---
|
||
|
||
## 📐 线框图和原型
|
||
|
||
### 主要设计文件
|
||
|
||
**设计工具链接:** [Figma设计文件链接] （需要创建）
|
||
|
||
### 关键屏幕布局
|
||
|
||
#### 屏幕名称: 登录页面
|
||
|
||
**目的:** 用户身份验证，系统安全入口
|
||
|
||
**关键元素:**
|
||
- Logo和系统标题
|
||
- 双标签切换（密码登录/手机登录）
|
||
- 表单输入区域（用户名、密码、验证码）
|
||
- 登录按钮和加载状态
|
||
- 测试账号提示
|
||
- 安全保障信息展示
|
||
|
||
**交互说明:**
|
||
- 支持Tab键导航
|
||
- 密码可见性切换
|
||
- 表单验证和错误提示
|
||
- 记住登录状态功能
|
||
|
||
#### 屏幕名称: 主控制台
|
||
|
||
**目的:** 系统概览，快速访问各功能模块
|
||
|
||
**关键元素:**
|
||
- 顶部导航栏（7大系统切换）
|
||
- 消息通知中心（带未读数量标记）
|
||
- 用户信息菜单
|
||
- 左侧功能菜单
|
||
- 主内容区域
|
||
|
||
**交互说明:**
|
||
- 系统切换保持用户会话
|
||
- 消息弹窗支持快捷操作
|
||
- 侧边栏支持搜索和折叠
|
||
|
||
#### 屏幕名称: 农机档案管理
|
||
|
||
**目的:** 农机设备信息管理和维护
|
||
|
||
**关键元素:**
|
||
- 页面标题和操作按钮（新增农机）
|
||
- 数据表格（支持排序、筛选、搜索）
|
||
- 操作列（编辑、详情、二维码、删除）
|
||
- 分页控制
|
||
- 批量操作功能
|
||
|
||
**交互说明:**
|
||
- 表格行支持快捷操作
|
||
- 搜索实时响应
|
||
- 批量选择支持全选/反选
|
||
|
||
---
|
||
|
||
## 🧩 组件库/设计系统
|
||
|
||
### 设计系统方法
|
||
|
||
使用 **shadcn/ui** 作为基础组件库，结合 **Tailwind CSS** 进行样式定制。保持与现有系统的视觉一致性，同时引入现代的交互模式。
|
||
|
||
### 核心组件
|
||
|
||
#### 组件名称: 表格组件（DataTable）
|
||
|
||
**用途:** 数据展示和管理，支持复杂操作
|
||
|
||
**变体:**
|
||
- 基础表格：简单的数据展示
|
||
- 可选表格：支持行选择和批量操作
|
||
- 可排序表格：支持列排序
|
||
- 可搜索表格：内置搜索功能
|
||
|
||
**状态:**
|
||
- 默认状态
|
||
- 加载状态
|
||
- 空数据状态
|
||
- 错误状态
|
||
- 选择状态
|
||
|
||
**使用指南:**
|
||
- 对于大数据量（>100条）使用虚拟滚动
|
||
- 提供导出功能（Excel/PDF）
|
||
- 支持列显示/隐藏自定义
|
||
|
||
#### 组件名称: 表单组件（Form）
|
||
|
||
**用途:** 数据录入和编辑操作
|
||
|
||
**变体:**
|
||
- 水平布局表单
|
||
- 垂直布局表单
|
||
- 步骤式表单
|
||
- 内联编辑表单
|
||
|
||
**状态:**
|
||
- 初始状态
|
||
- 验证中状态
|
||
- 验证通过/失败状态
|
||
- 提交中状态
|
||
|
||
**使用指南:**
|
||
- 实时验证，延迟300ms
|
||
- 提供清晰的错误提示
|
||
- 支持表单重置和草稿保存
|
||
|
||
#### 组件名称: 导航组件（Navigation）
|
||
|
||
**用途:** 系统导航和页面切换
|
||
|
||
**变体:**
|
||
- 顶部主导航
|
||
- 侧边栏导航
|
||
- 面包屑导航
|
||
- 标签页导航
|
||
|
||
**状态:**
|
||
- 激活状态
|
||
- 悬停状态
|
||
- 禁用状态
|
||
- 展开状态
|
||
|
||
**使用指南:**
|
||
- 保持导航路径的一致性
|
||
- 支持键盘导航
|
||
- 移动端适配优化
|
||
|
||
---
|
||
|
||
## 🎨 品牌和样式指南
|
||
|
||
### 视觉识别
|
||
|
||
**品牌指南链接:** [现有品牌规范文件]
|
||
|
||
### 调色板
|
||
|
||
基于实际代码分析，系统采用**绿色为主色调**的农业主题设计：
|
||
|
||
| 颜色类型 | Tailwind类名 | 十六进制值 | 使用场景 |
|
||
|---------|-------------|-----------|----------|
|
||
| **主绿色** | `green-600` | #16a34a | 主要按钮、图标、激活状态 |
|
||
| **深绿色** | `green-700` | #15803d | 悬停状态、重要标题 |
|
||
| **更深绿色** | `green-800` | #166534 | 副标题、重要文字 |
|
||
| **最深绿色** | `green-900` | #14532d | 主标题、品牌色 |
|
||
| **浅绿色背景** | `green-50` | #f0fdf4 | 卡片背景、浅色背景 |
|
||
| **绿色提示** | `green-100` | #dcfce7 | 成功状态背景 |
|
||
| **绿色文字** | `green-700` | #15803d | 成功状态文字 |
|
||
|
||
**语义化状态颜色：**
|
||
| 状态 | 背景色 | 文字色 | 使用场景 |
|
||
|------|--------|--------|----------|
|
||
| **运行中** | `bg-green-100` | `text-green-700` | 设备正常运行 |
|
||
| **空闲中** | `bg-gray-100` | `text-gray-700` | 设备空闲状态 |
|
||
| **待维护** | `bg-orange-100` | `text-orange-700` | 设备需要维护 |
|
||
| **已报废** | `bg-red-100` | `text-red-700` | 设备已报废 |
|
||
|
||
**辅助色彩：**
|
||
| 颜色类型 | Tailwind类名 | 十六进制值 | 使用场景 |
|
||
|---------|-------------|-----------|----------|
|
||
| **蓝色系** | `blue-50`, `blue-600` | #eff6ff, #2563eb | 辅助背景、信息按钮 |
|
||
| **青色系** | `cyan-50` | #ecfeff | 渐变背景、辅助色 |
|
||
| **中性灰** | `gray-100` ~ `gray-900` | #f3f4f6 ~ #111827 | 边框、文本、背景 |
|
||
|
||
**特色渐变：**
|
||
```css
|
||
/* 主背景渐变 */
|
||
bg-gradient-to-br from-green-50 via-blue-50 to-cyan-50
|
||
|
||
/* 卡片渐变 */
|
||
bg-gradient-to-r from-green-50 to-teal-50
|
||
```
|
||
|
||
### 字体排印
|
||
|
||
**字体系列:**
|
||
- **主字体:** Inter, system-ui, sans-serif (用于英文和数字)
|
||
- **中文字体:** "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif (用于中文)
|
||
- **等宽字体:** "JetBrains Mono", "Fira Code", "Consolas", monospace (用于代码、序列号)
|
||
|
||
**字体大小表:**
|
||
|
||
| 元素 | Tailwind类名 | 大小 | 字重 | 行高 | 使用场景 |
|
||
|------|-------------|------|------|------|----------|
|
||
| **主标题** | `text-2xl` | 24px | 700 | 1.2 | 系统主标题、页面标题 |
|
||
| **副标题** | `text-xl` | 20px | 600 | 1.3 | 卡片标题、区域标题 |
|
||
| **小标题** | `text-lg` | 18px | 600 | 1.4 | 子模块标题 |
|
||
| **正文** | `text-sm` | 14px | 400 | 1.5 | 正文内容、描述 |
|
||
| **小字体** | `text-xs` | 12px | 400 | 1.4 | 辅助信息、时间戳 |
|
||
| **微字体** | `text-xs` | 11px | 400 | 1.3 | 标签、状态文字 |
|
||
|
||
**实际代码中发现的字体使用模式：**
|
||
```css
|
||
/* 系统标题 - 深绿色，大字体 */
|
||
.text-green-900.mb-2 /* 主标题 */
|
||
.text-green-800 /* 副标题 */
|
||
|
||
/* 正文和辅助文字 */
|
||
.text-sm.text-muted-foreground /* 辅助说明文字 */
|
||
.text-xs.text-muted-foreground /* 小字提示信息 */
|
||
|
||
/* 按钮文字 */
|
||
text-white primary-foreground /* 按钮文字颜色 */
|
||
```
|
||
|
||
### 图标设计
|
||
|
||
**图标库:** Lucide React
|
||
|
||
**核心图标映射:**
|
||
| 业务系统 | 图标 | 使用场景 |
|
||
|---------|------|----------|
|
||
| **智能农机管理** | `Tractor` | 系统Logo、农机相关 |
|
||
| **地块信息管理** | `Map` | 地块、地图功能 |
|
||
| **农事操作管理** | `Clipboard` | 任务、操作记录 |
|
||
| **农业资产管理** | `Package` | 资产、设备管理 |
|
||
| **AI作物模型** | `Brain` | AI分析、智能决策 |
|
||
| **水肥控制系统** | `Droplets` | 灌溉、水肥管理 |
|
||
| **中心配置管理** | `Settings` | 系统配置、管理 |
|
||
|
||
**功能图标:**
|
||
| 功能 | 图标 | 使用场景 |
|
||
|------|------|----------|
|
||
| **登录认证** | `Lock`, `User`, `Phone` | 登录表单 |
|
||
| **消息通知** | `Bell`, `CheckCircle` | 消息中心 |
|
||
| **操作按钮** | `Edit`, `Trash2`, `Eye`, `QrCode` | 表格操作 |
|
||
| **状态指示** | `CheckCircle`, `AlertCircle`, `XCircle` | 成功/警告/错误 |
|
||
| **导航菜单** | `UserCircle`, `LogOut` | 用户菜单 |
|
||
|
||
**图标使用规范:**
|
||
```typescript
|
||
// 尺寸规范
|
||
const iconSizes = {
|
||
xs: 'w-3 h-3', // 12px - 标签内小图标
|
||
sm: 'w-4 h-4', // 16px - 按钮、表格操作
|
||
md: 'w-5 h-5', // 20px - 导航图标
|
||
lg: 'w-6 h-6', // 24px - Logo、重要功能
|
||
xl: 'w-8 h-8', // 32px - 页面标题装饰
|
||
'2xl': 'w-16 h-16' // 64px - 登录页Logo
|
||
};
|
||
|
||
// 颜色规范
|
||
const iconColors = {
|
||
primary: 'text-green-600', // 主要功能图标
|
||
success: 'text-green-600', // 成功状态
|
||
warning: 'text-orange-600', // 警告状态
|
||
error: 'text-red-600', // 错误状态
|
||
muted: 'text-muted-foreground', // 辅助信息
|
||
white: 'text-white' // 深色背景上的图标
|
||
};
|
||
```
|
||
|
||
### 间距和布局
|
||
|
||
**网格系统:** 使用12列网格系统
|
||
|
||
**间距比例:** 4px基础单位，基于Tailwind CSS间距系统
|
||
|
||
| Tailwind类名 | 间距值 | 使用场景 |
|
||
|-------------|--------|----------|
|
||
| `gap-1` | 4px | 紧密元素间距 |
|
||
| `gap-2` | 8px | 按钮组、图标间距 |
|
||
| `gap-3` | 12px | 表单项间距 |
|
||
| `gap-4` | 16px | 卡片内边距、标准间距 |
|
||
| `gap-6` | 24px | 区块间距 |
|
||
| `gap-8` | 32px | 大区块间距 |
|
||
| `gap-12` | 48px | 页面级间距 |
|
||
| `gap-16` | 64px | 最大间距 |
|
||
|
||
**实际代码中的布局模式:**
|
||
```css
|
||
/* 卡片布局 */
|
||
.p-8.shadow-xl /* 登录卡片内边距 */
|
||
.p-4 /* 标准卡片内边距 */
|
||
.p-6.border-t /* 用户信息区域 */
|
||
|
||
/* 弹性布局 */
|
||
.flex.items-center.gap-3 /* 水平居中布局 */
|
||
.flex.items-center.justify-between /* 两端对齐布局 */
|
||
.flex.flex-wrap.gap-2 /* 换行布局 */
|
||
|
||
/* 网格布局 */
|
||
.grid.grid-cols-1.md:grid-cols-4 /* 响应式网格 */
|
||
.grid.grid-cols-1.md:grid-cols-5 /* 筛选栏网格 */
|
||
|
||
/* 尺寸规范 */
|
||
.w-full.max-w-md /* 标准宽度限制 */
|
||
.w-10.h-10 /* 正方形图标区域 */
|
||
.w-16.h-16 /* 大图标区域 */
|
||
.min-w-[120px] /* 最小宽度 */
|
||
```
|
||
|
||
**容器规范:**
|
||
```css
|
||
/* 页面容器 */
|
||
.min-h-screen /* 全屏高度 */
|
||
.px-6.py-4 /* 导航栏内边距 */
|
||
.p-4 /* 标准页面内边距 */
|
||
|
||
/* 组件容器 */
|
||
.w-full /* 全宽组件 */
|
||
.max-w-2xl /* 对话框最大宽度 */
|
||
.w-96 /* 弹出框固定宽度 */
|
||
.max-h-96 /* 滚动区域最大高度 */
|
||
```
|
||
|
||
---
|
||
|
||
## ♿ 无障碍性要求
|
||
|
||
### 合规目标
|
||
|
||
**标准:** WCAG AA 级别合规
|
||
|
||
### 关键要求
|
||
|
||
**视觉:**
|
||
- 颜色对比度：正常文本4.5:1，大文本3:1
|
||
- 焦点指示器：清晰的焦点样式，2px边框
|
||
- 文本大小：支持放大到200%而不丢失功能
|
||
- 色彩不依赖：不仅依靠颜色传达信息
|
||
|
||
**交互:**
|
||
- 键盘导航：所有功能可通过键盘访问
|
||
- 屏幕阅读器支持：提供适当的ARIA标签
|
||
- 触摸目标：最小44px×44px的触摸区域
|
||
- 操作超时：提供足够的时间调整
|
||
|
||
**内容:**
|
||
- 替代文本：为所有图片提供有意义的alt文本
|
||
- 标题结构：正确使用H1-H6标题层次
|
||
- 表单标签：所有表单字段都有标签
|
||
|
||
### 测试策略
|
||
|
||
- 使用axe-core进行自动化无障碍测试
|
||
- 定期进行键盘导航测试
|
||
- 屏幕阅读器兼容性测试（NVDA, JAWS）
|
||
- 移动设备无障碍性测试
|
||
|
||
---
|
||
|
||
## 📱 响应式策略
|
||
|
||
### 断点
|
||
|
||
| 断点 | 最小宽度 | 最大宽度 | 目标设备 |
|
||
|------|----------|----------|----------|
|
||
| 移动端 | 320px | 768px | 智能手机 |
|
||
| 平板 | 768px | 1024px | iPad/平板 |
|
||
| 桌面 | 1024px | 1440px | 笔记本电脑 |
|
||
| 宽屏 | 1440px | - | 台式机/大屏 |
|
||
|
||
### 适配模式
|
||
|
||
**布局变化:**
|
||
- 移动端：单列布局，折叠导航
|
||
- 平板：双列布局，可折叠侧边栏
|
||
- 桌面：多列布局，完整导航
|
||
- 宽屏：利用屏幕空间显示更多信息
|
||
|
||
**导航变化:**
|
||
- 移动端：汉堡菜单 + 底部标签栏
|
||
- 平板：简化顶部导航 + 侧边栏
|
||
- 桌面：完整导航系统
|
||
- 宽屏：完整导航 + 快捷操作面板
|
||
|
||
**内容优先级:**
|
||
- 移动端：关键操作优先，次要信息折叠
|
||
- 平板：平衡信息展示
|
||
- 桌面：完整信息展示
|
||
- 宽屏：增强信息密度
|
||
|
||
**交互变化:**
|
||
- 移动端：触摸优化，大按钮，手势支持
|
||
- 平板：触摸+鼠标混合优化
|
||
- 桌面：鼠标和键盘优化
|
||
- 宽屏：键盘快捷键增强
|
||
|
||
---
|
||
|
||
## ✨ 动画和微交互
|
||
|
||
### 动画原则
|
||
|
||
**运动原则:** 自然、流畅、有意义。所有动画都应该有明确的目的，避免过度装饰。
|
||
|
||
### 关键动画
|
||
|
||
- **页面切换:** 淡入淡出效果（持续时间：300ms，缓动：ease-in-out）
|
||
- **按钮点击:** 轻微缩放效果（持续时间：150ms，缓动：ease-out）
|
||
- **表单验证:** 输入框边框颜色变化（持续时间：200ms，缓动：ease-in-out）
|
||
- **加载状态:** 旋转动画（持续时间：1s，缓动：linear）
|
||
- **悬停效果:** 阴影和颜色变化（持续时间：200ms，缓动：ease-in-out）
|
||
|
||
---
|
||
|
||
## ⚡ 性能考虑
|
||
|
||
### 性能目标
|
||
|
||
- **页面加载:** 首屏加载时间小于3秒
|
||
- **交互响应:** 用户操作响应时间小于200ms
|
||
- **动画帧率:** 保持60fps流畅动画
|
||
|
||
### 设计策略
|
||
|
||
- 使用CSS动画替代JavaScript动画
|
||
- 图片懒加载和压缩优化
|
||
- 组件级别的代码分割
|
||
- 关键CSS内联优化
|
||
|
||
---
|
||
|
||
## 📋 下一步
|
||
|
||
### 立即行动
|
||
|
||
1. 与利益相关者审查UX规格文档
|
||
2. 在设计工具中创建/更新视觉设计
|
||
3. 为前端架构师准备设计交接
|
||
4. 标记需要进一步决策的问题
|
||
|
||
### 设计交付检查清单
|
||
|
||
- [ ] 所有用户流程已文档化
|
||
- [ ] 组件清单已完成
|
||
- [ ] 无障碍性要求已定义
|
||
- [ ] 响应式策略明确
|
||
- [ ] 品牌指导已整合
|
||
- [ ] 性能目标已建立
|
||
- [ ] 移动优先策略已确认
|
||
- [ ] 数据可视化规范已完成
|
||
- [ ] 错误处理模式已定义
|
||
- [ ] 加载状态设计已完成
|
||
|
||
---
|
||
|
||
## 🎨 交互设计模式和组件规范
|
||
|
||
基于对代码的深入分析，我发现了一些关键的交互模式和设计优化机会。以下是详细的组件库设计系统规范：
|
||
|
||
### 🧩 核心组件交互模式
|
||
|
||
#### 1. 表格组件模式 (基于 MachineryList.tsx 分析)
|
||
|
||
**当前实现特点：**
|
||
- 顶部统计卡片 + 搜索栏 + 标签筛选 + 数据表格的层级结构
|
||
- 状态颜色编码：运行中(绿色)、空闲(灰色)、维护中(橙色)、已退役(红色)
|
||
- 支持实时搜索和标签组合筛选
|
||
|
||
**UX优化建议：**
|
||
|
||
```typescript
|
||
// 增强的表格交互模式
|
||
interface DataTableInteraction {
|
||
// 快捷操作
|
||
keyboardNavigation: {
|
||
enabled: true,
|
||
shortcuts: {
|
||
'Ctrl+F': '聚焦搜索',
|
||
'ArrowKeys': '行导航',
|
||
'Enter': '查看详情',
|
||
'Delete': '删除选中项',
|
||
'Ctrl+A': '全选'
|
||
}
|
||
},
|
||
|
||
// 批量操作模式
|
||
bulkActions: {
|
||
selectionMode: 'checkbox', // checkbox 或 inline
|
||
actions: ['批量删除', '批量导出', '批量更新状态'],
|
||
position: 'top-right' // 操作按钮位置
|
||
},
|
||
|
||
// 行内交互
|
||
rowInteractions: {
|
||
hoverActions: ['编辑', '详情', '二维码'],
|
||
doubleClickAction: '编辑',
|
||
longPressAction: '详情' // 移动端优化
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 2. 表单组件模式 (基于 MachineryForm.tsx 分析)
|
||
|
||
**当前实现特点：**
|
||
- 多标签页表单（基本信息、技术参数、采购信息、保险信息）
|
||
- React Hook Form + Zod 验证
|
||
- 支持文件上传和标签选择
|
||
|
||
**UX优化建议：**
|
||
|
||
```typescript
|
||
// 表单体验增强
|
||
interface FormExperience {
|
||
// 智能保存
|
||
autoSave: {
|
||
enabled: true,
|
||
interval: 30000, // 30秒自动保存草稿
|
||
storage: 'localStorage',
|
||
notifications: true
|
||
},
|
||
|
||
// 进度指示
|
||
progressIndicator: {
|
||
type: 'steps', // steps 或 progress
|
||
showValidationStatus: true,
|
||
allowSkipTabs: false
|
||
},
|
||
|
||
// 字段级交互
|
||
fieldInteractions: {
|
||
inlineValidation: {
|
||
trigger: 'onBlur', // onChange 或 onBlur
|
||
debounce: 300
|
||
},
|
||
smartDefaults: {
|
||
basedOnHistory: true,
|
||
basedOnUser: true,
|
||
basedOnContext: true
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 3. 导航模式 (基于 Navigation.tsx 分析)
|
||
|
||
**当前实现特点：**
|
||
- 7大业务系统标签切换
|
||
- 消息通知中心带未读数量
|
||
- 用户头像下拉菜单
|
||
|
||
**UX优化建议：**
|
||
|
||
```typescript
|
||
// 导航体验优化
|
||
interface NavigationExperience {
|
||
// 智能标签管理
|
||
tabManagement: {
|
||
rememberLastTab: true,
|
||
allowPinningTabs: true, // 固定常用标签
|
||
recentlyUsed: true,
|
||
keyboardShortcuts: {
|
||
'Ctrl+1-7': '切换到对应业务系统'
|
||
}
|
||
},
|
||
|
||
// 消息中心增强
|
||
messageCenter: {
|
||
grouping: {
|
||
byType: true, // 按类型分组
|
||
byPriority: true,
|
||
byTime: 'auto' // 智能时间分组
|
||
},
|
||
actions: {
|
||
markAllAsRead: true,
|
||
bulkDelete: true,
|
||
filterByType: true,
|
||
searchMessages: true
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 📊 数据可视化组件规范
|
||
|
||
基于农业业务特点，设计专门的数据可视化组件：
|
||
|
||
#### 1. 农机状态仪表板
|
||
|
||
```typescript
|
||
interface MachineryDashboard {
|
||
// 实时状态监控
|
||
statusGauge: {
|
||
type: 'semi-circular', // 半圆形仪表盘
|
||
metrics: ['运行率', '空闲率', '维护率'],
|
||
realTimeUpdates: true,
|
||
alerts: {
|
||
threshold: 80, // 运行率超过80%显示警告
|
||
type: 'preventive-maintenance'
|
||
}
|
||
},
|
||
|
||
// 地图视图集成
|
||
mapView: {
|
||
realTimeLocation: true,
|
||
clustering: true, // 农机聚合显示
|
||
heatMap: false, // 作业热力图
|
||
routePlayback: true // 轨迹回放
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 2. 地块数据分析图表
|
||
|
||
```typescript
|
||
interface FieldAnalytics {
|
||
// 多维数据展示
|
||
multiDimensional: {
|
||
soilQuality: 'radar-chart', // 雷达图
|
||
yieldHistory: 'line-chart', // 折线图
|
||
cropComparison: 'bar-chart', // 柱状图
|
||
spatialDistribution: 'heat-map' // 热力图
|
||
},
|
||
|
||
// 交互式分析
|
||
interactiveAnalysis: {
|
||
drillDown: true, // 下钻分析
|
||
comparisonMode: true, // 对比模式
|
||
timeRangeSelector: true,
|
||
customMetrics: true
|
||
}
|
||
}
|
||
```
|
||
|
||
### 📱 移动端UX优化策略
|
||
|
||
针对田间作业场景的特殊需求，制定移动端优化策略：
|
||
|
||
#### 1. 田间作业模式
|
||
|
||
```typescript
|
||
interface FieldOperationMode {
|
||
// 环境适配
|
||
environmentalAdaptation: {
|
||
brightSunlight: {
|
||
highContrast: true,
|
||
largeText: true,
|
||
antiGlare: true
|
||
},
|
||
rainyWeather: {
|
||
touchOptimization: true, // 雨天触摸优化
|
||
voiceCommands: true // 语音控制
|
||
},
|
||
dustyConditions: {
|
||
screenProtection: true, // 防尘模式
|
||
simplifiedUI: true
|
||
}
|
||
},
|
||
|
||
// 手套友好设计
|
||
gloveFriendlyDesign: {
|
||
minTouchTarget: 48, // 最小触摸目标48px
|
||
spacingBetweenElements: 8, // 元素间距8px
|
||
gestureRecognition: true, // 手势识别
|
||
hapticFeedback: true // 触觉反馈
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 2. 离线功能支持
|
||
|
||
```typescript
|
||
interface OfflineCapability {
|
||
// 数据缓存策略
|
||
dataCaching: {
|
||
criticalData: {
|
||
syncType: 'real-time', // 实时同步
|
||
priority: 'high'
|
||
},
|
||
referenceData: {
|
||
syncType: 'on-demand', // 按需同步
|
||
priority: 'medium'
|
||
},
|
||
historicalData: {
|
||
syncType: 'scheduled', // 定时同步
|
||
priority: 'low'
|
||
}
|
||
},
|
||
|
||
// 离线操作队列
|
||
offlineQueue: {
|
||
maxQueueSize: 100,
|
||
autoSyncOnConnection: true,
|
||
conflictResolution: 'manual' // 冲突解决策略
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 3. 快速操作界面
|
||
|
||
```typescript
|
||
interface QuickActionInterface {
|
||
// 一键操作
|
||
oneTouchActions: {
|
||
emergencyStop: true, // 紧急停止
|
||
reportIssue: true, // 问题上报
|
||
statusUpdate: true, // 状态更新
|
||
photoUpload: true // 照片上传
|
||
},
|
||
|
||
// 语音集成
|
||
voiceIntegration: {
|
||
commands: [
|
||
'开始作业',
|
||
'暂停作业',
|
||
'报告故障',
|
||
'查看任务'
|
||
],
|
||
languageSupport: ['zh-CN', 'en-US'],
|
||
noiseReduction: true
|
||
}
|
||
}
|
||
```
|
||
|
||
### ⚠️ 错误处理和加载状态设计
|
||
|
||
建立统一的错误处理和反馈机制：
|
||
|
||
#### 1. 分层错误处理
|
||
|
||
```typescript
|
||
interface LayeredErrorHandling {
|
||
// 网络错误
|
||
networkErrors: {
|
||
connectionLost: {
|
||
message: '网络连接已断开，正在尝试重新连接...',
|
||
action: '重试',
|
||
autoRetry: true,
|
||
maxRetries: 3
|
||
},
|
||
slowConnection: {
|
||
message: '网络较慢，正在加载...',
|
||
showProgress: true,
|
||
allowOffline: true
|
||
}
|
||
},
|
||
|
||
// 业务逻辑错误
|
||
businessErrors: {
|
||
validationFailed: {
|
||
inlineMessages: true,
|
||
fieldHighlight: 'red-border',
|
||
summaryMessage: true
|
||
},
|
||
permissionDenied: {
|
||
message: '您没有权限执行此操作',
|
||
contactAdmin: true,
|
||
requestAccess: true
|
||
}
|
||
},
|
||
|
||
// 系统错误
|
||
systemErrors: {
|
||
unexpectedError: {
|
||
message: '系统遇到了意外错误',
|
||
reportIssue: true,
|
||
fallbackAction: '返回首页'
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 2. 智能加载状态
|
||
|
||
```typescript
|
||
interface SmartLoadingStates {
|
||
// 预加载策略
|
||
preloading: {
|
||
criticalComponents: true,
|
||
backgroundData: true,
|
||
progressiveLoading: true
|
||
},
|
||
|
||
// 加载动画
|
||
loadingAnimations: {
|
||
quickOperations: 'spinner', // 快速操作用转圈
|
||
dataIntensive: 'skeleton', // 数据密集用骨架屏
|
||
fileUpload: 'progress-bar', // 文件上传用进度条
|
||
longProcess: 'step-indicator' // 长时间操作用步骤指示器
|
||
},
|
||
|
||
// 加载时间优化
|
||
loadingOptimization: {
|
||
perceivedPerformance: true, // 感知性能优化
|
||
optimisticUI: true, // 乐观UI更新
|
||
smartCaching: true // 智能缓存
|
||
}
|
||
}
|
||
```
|
||
|
||
### 🎯 微交互和动画规范
|
||
|
||
基于农业系统的使用场景，设计合适的微交互：
|
||
|
||
#### 1. 状态变化反馈
|
||
|
||
```typescript
|
||
interface StateChangeFeedback {
|
||
// 农机状态变化
|
||
machineryStatusChange: {
|
||
fromIdleToRunning: {
|
||
animation: 'pulse-green',
|
||
duration: 800,
|
||
sound: 'engine-start' // 可选音效
|
||
},
|
||
fromRunningToMaintenance: {
|
||
animation: 'fade-warning',
|
||
duration: 1200,
|
||
vibration: 'short' // 移动端震动
|
||
}
|
||
},
|
||
|
||
// 数据保存反馈
|
||
dataSaveFeedback: {
|
||
success: {
|
||
animation: 'checkmark-slide',
|
||
duration: 600,
|
||
message: '保存成功'
|
||
},
|
||
error: {
|
||
animation: 'shake-red',
|
||
duration: 500,
|
||
message: '保存失败，请重试'
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 2. 数据可视化交互
|
||
|
||
```typescript
|
||
interface DataVisualizationInteraction {
|
||
// 图表交互
|
||
chartInteractions: {
|
||
hover: {
|
||
tooltipDelay: 300,
|
||
highlightSeries: true,
|
||
crosshair: true
|
||
},
|
||
click: {
|
||
drillDown: true,
|
||
selectionMode: 'single',
|
||
contextMenu: true
|
||
},
|
||
touch: {
|
||
pinchZoom: true,
|
||
pan: true,
|
||
doubleTap: 'reset-zoom'
|
||
}
|
||
},
|
||
|
||
// 地图交互
|
||
mapInteractions: {
|
||
machineryTracking: {
|
||
updateInterval: 5000, // 5秒更新
|
||
smoothTransition: true,
|
||
clusterZoom: true
|
||
},
|
||
fieldSelection: {
|
||
drawMode: 'polygon',
|
||
editMode: 'vertex',
|
||
measureTool: true
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 🔧 可访问性增强
|
||
|
||
确保系统符合WCAG AA标准，特别考虑农业环境的特殊需求：
|
||
|
||
#### 1. 视觉可访问性
|
||
|
||
```typescript
|
||
interface VisualAccessibility {
|
||
// 高对比度模式
|
||
highContrastMode: {
|
||
outdoorUse: {
|
||
backgroundColor: '#000000',
|
||
textColor: '#FFFFFF',
|
||
accentColor: '#FFFF00'
|
||
},
|
||
screenReaderOptimization: {
|
||
hideDecorativeElements: true,
|
||
semanticStructure: true
|
||
}
|
||
},
|
||
|
||
// 字体适配
|
||
textAdaptation: {
|
||
dynamicSizing: {
|
||
minSize: 16,
|
||
maxSize: 24,
|
||
stepSize: 2
|
||
},
|
||
dyslexiaFont: {
|
||
option: true,
|
||
fonts: ['OpenDyslexic', 'Comic Sans MS']
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 2. 运动可访问性
|
||
|
||
```typescript
|
||
interface MotorAccessibility {
|
||
// 运动障碍支持
|
||
motorImpairmentSupport: {
|
||
largeTouchTargets: {
|
||
minSize: 44,
|
||
increasedSpacing: true
|
||
},
|
||
alternativeInput: {
|
||
voiceControl: true,
|
||
switchControl: true,
|
||
eyeTracking: 'future-enhancement'
|
||
}
|
||
},
|
||
|
||
// 手势替代
|
||
gestureAlternatives: {
|
||
swipeAlternative: 'button-press',
|
||
longPressAlternative: 'double-click',
|
||
dragAlternative: 'tap-and-confirm'
|
||
}
|
||
}
|
||
```
|
||
|
||
### 📋 实施优先级和时间线
|
||
|
||
基于现有代码分析和用户需求，制定UX改进的实施计划：
|
||
|
||
#### 第一阶段 (立即实施 - 2周)
|
||
1. **表格交互优化** - 基于MachineryList.tsx的改进
|
||
2. **表单体验增强** - 基于MachineryForm.tsx的优化
|
||
3. **错误处理统一** - 建立统一的错误反馈机制
|
||
|
||
#### 第二阶段 (短期优化 - 4周)
|
||
1. **移动端适配** - 田间作业场景的移动优化
|
||
2. **数据可视化组件** - 农业数据的专业图表组件
|
||
3. **可访问性改进** - WCAG AA标准合规
|
||
|
||
#### 第三阶段 (长期增强 - 6周)
|
||
1. **智能交互** - 语音控制、手势识别
|
||
2. **离线功能** - 完整的离线操作支持
|
||
3. **高级分析** - 预测性维护和智能建议
|
||
|
||
### 🎨 设计系统交付物
|
||
|
||
为确保设计实施的一致性，需要准备以下交付物：
|
||
|
||
1. **组件库文档** - 详细的组件使用指南和交互规范
|
||
2. **设计tokens** - 颜色、字体、间距、动画的设计规范
|
||
3. **原型文件** - 关键交互的高保真原型
|
||
4. **可访问性测试报告** - WCAG合规性验证
|
||
5. **性能基准** - 用户体验性能指标和监控方案
|
||
|
||
---
|
||
|
||
**文档状态:** 基于现有系统代码分析完成，包含详细的交互设计模式和优化建议
|
||
|
||
**下一步行动:** 文档已更新完成，包含了完整的交互设计规范、移动端优化策略、错误处理机制和可访问性增强方案。可以基于这份规格文档进行具体的UI组件开发和优化工作。 |