cavin/smart-crop-ui

Fork 0

Files

peng ec58562661 提交1 bmad搭建与项目启动 - ok

2025-10-17 17:24:56 +08:00

30 KiB

Raw Blame History

🎨 Crop-X 智慧农业系统 UI/UX 规格说明

📋 目录

引言
整体UX目标和原则
信息架构
用户流程
线框图和原型
组件库/设计系统
品牌和样式指南
无障碍性要求
响应式策略
动画和微交互
性能考虑
下一步

📋 引言

本文档定义了Crop-X智慧农业管理系统的用户体验目标、信息架构、用户流程和视觉设计规格。基于对现有系统的深入分析，包括登录页面、导航系统、农机管理等核心模块的代码研究，本规格为React 19 + Zustand + shadcn/ui现代化改造提供完整的UX设计指导。

变更日志

日期	版本	描述	作者
2025-10-17	1.0	基于现有系统代码分析的初始UX规格	Sally (UX专家)

🎯 整体UX目标和原则

目标用户画像

农场管理员 👨‍🌾

背景: 农场运营管理者，负责整体农业生产规划
技术能力: 中等，熟悉基础办公软件
核心需求: 数据可视化、资源调度、决策支持
使用场景: 办公室环境，长时间使用，需要详细报表和分析

农机操作员 🚜

背景: 一线农机操作人员，负责设备日常操作
技术能力: 低到中等，可能使用移动设备
核心需求: 简化操作流程、实时状态显示、快速故障处理
使用场景: 田地现场，移动优先，需要快速响应和清晰指引

农业技术员 👨‍🔬

背景: 农业技术人员，负责技术指导和数据分析
技术能力: 中等到高，需要处理复杂数据
核心需求: 数据分析工具、技术诊断、专业报告
使用场景: 实验室/办公室，需要专业工具和深度分析

系统管理员 🛠️

背景: IT系统管理员，负责系统维护和配置
技术能力: 高，熟悉复杂管理系统
核心需求: 权限管理、系统监控、配置管理
使用场景: 数据中心，需要强大的管理工具

可用性目标

学习效率: 新用户在15分钟内能完成核心任务操作
操作效率: 管理员级用户在3次点击内完成常用操作
错误预防: 关键操作有明确的确认和撤销机制
记忆保持: 不经常使用的用户能在重新使用时快速上手
移动友好: 田地操作员能在移动设备上完成80%的核心任务

设计原则

渐进式现代化 - 保持99.5%的界面一致性，逐步引入现代UX模式
移动优先农业场景 - 针对田间作业优化移动体验
数据驱动可视化 - 将复杂农业数据转化为直观的可视化图表
情境感知设计 - 根据使用环境（办公室/田地）调整界面复杂度
可靠性优先 - 在关键农业生产时刻确保系统稳定可用

🗺️ 信息架构

站点地图/屏幕清单

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分钟内完成日常检查和问题处理

流程图:

graph TD
    A[登录系统] --> B[查看消息通知]
    B --> C[检查农机状态]
    C --> D{是否有异常?}
    D -->|是| E[处理异常问题]
    D -->|否| F[查看作业报告]
    E --> G[调度维修/人员]
    F --> H[生成今日总结]
    G --> H
    H --> I[结束日常工作]

边缘情况和错误处理:

网络断线：显示离线状态，支持数据缓存
系统错误：提供错误报告机制，自动重试
权限不足：明确提示权限限制，提供申请路径

用户流程2: 农机操作员现场作业

用户目标: 执行农机作业任务，实时汇报工作状态

入口点: 移动端登录 → 任务列表 → 作业执行

成功标准: 在移动设备上完成作业任务和状态更新

流程图:

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
提供清晰的错误提示
支持表单重置和草稿保存

用途: 系统导航和页面切换

变体:

顶部主导航
侧边栏导航
面包屑导航
标签页导航

状态:

激活状态
悬停状态
禁用状态
展开状态

使用指南:

保持导航路径的一致性
支持键盘导航
移动端适配优化

🎨 品牌和样式指南

视觉识别

品牌指南链接: [现有品牌规范文件]

调色板

基于实际代码分析，系统采用绿色为主色调的农业主题设计：

颜色类型	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	边框、文本、背景

特色渐变：

/* 主背景渐变 */
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	标签、状态文字

实际代码中发现的字体使用模式：

/* 系统标题 - 深绿色，大字体 */
.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`	用户菜单

图标使用规范:

// 尺寸规范
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	最大间距

实际代码中的布局模式:

/* 卡片布局 */
.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]                   /* 最小宽度 */

容器规范:

/* 页面容器 */
.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内联优化

📋 下一步

立即行动

与利益相关者审查UX规格文档
在设计工具中创建/更新视觉设计
为前端架构师准备设计交接
标记需要进一步决策的问题

设计交付检查清单

所有用户流程已文档化
组件清单已完成
无障碍性要求已定义
响应式策略明确
品牌指导已整合
性能目标已建立
移动优先策略已确认
数据可视化规范已完成
错误处理模式已定义
加载状态设计已完成

🎨 交互设计模式和组件规范

基于对代码的深入分析，我发现了一些关键的交互模式和设计优化机会。以下是详细的组件库设计系统规范：

🧩 核心组件交互模式

1. 表格组件模式 (基于 MachineryList.tsx 分析)

当前实现特点：

顶部统计卡片 + 搜索栏 + 标签筛选 + 数据表格的层级结构
状态颜色编码：运行中(绿色)、空闲(灰色)、维护中(橙色)、已退役(红色)
支持实时搜索和标签组合筛选

UX优化建议：

// 增强的表格交互模式
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优化建议：

// 表单体验增强
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优化建议：

// 导航体验优化
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. 农机状态仪表板

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. 地块数据分析图表

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. 田间作业模式

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. 离线功能支持

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. 快速操作界面

interface QuickActionInterface {
  // 一键操作
  oneTouchActions: {
    emergencyStop: true, // 紧急停止
    reportIssue: true, // 问题上报
    statusUpdate: true, // 状态更新
    photoUpload: true // 照片上传
  },

  // 语音集成
  voiceIntegration: {
    commands: [
      '开始作业',
      '暂停作业',
      '报告故障',
      '查看任务'
    ],
    languageSupport: ['zh-CN', 'en-US'],
    noiseReduction: true
  }
}

⚠️ 错误处理和加载状态设计

建立统一的错误处理和反馈机制：

1. 分层错误处理

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. 智能加载状态

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. 状态变化反馈

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. 数据可视化交互

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. 视觉可访问性

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. 运动可访问性

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周)

表格交互优化 - 基于MachineryList.tsx的改进
表单体验增强 - 基于MachineryForm.tsx的优化
错误处理统一 - 建立统一的错误反馈机制

第二阶段 (短期优化 - 4周)

移动端适配 - 田间作业场景的移动优化
数据可视化组件 - 农业数据的专业图表组件
可访问性改进 - WCAG AA标准合规

第三阶段 (长期增强 - 6周)

智能交互 - 语音控制、手势识别
离线功能 - 完整的离线操作支持
高级分析 - 预测性维护和智能建议

🎨 设计系统交付物

为确保设计实施的一致性，需要准备以下交付物：

组件库文档 - 详细的组件使用指南和交互规范
设计tokens - 颜色、字体、间距、动画的设计规范
原型文件 - 关键交互的高保真原型
可访问性测试报告 - WCAG合规性验证
性能基准 - 用户体验性能指标和监控方案

文档状态: 基于现有系统代码分析完成，包含详细的交互设计模式和优化建议

下一步行动: 文档已更新完成，包含了完整的交互设计规范、移动端优化策略、错误处理机制和可访问性增强方案。可以基于这份规格文档进行具体的UI组件开发和优化工作。

30 KiB Raw Blame History Unescape Escape

🎨 Crop-X 智慧农业系统 UI/UX 规格说明

📋 目录

📋 引言

变更日志

🎯 整体UX目标和原则

目标用户画像

可用性目标

设计原则

🗺️ 信息架构

站点地图/屏幕清单

导航结构

🔄 用户流程

用户流程1: 农场管理员日常工作

用户流程2: 农机操作员现场作业

📐 线框图和原型

主要设计文件

关键屏幕布局

屏幕名称: 登录页面

屏幕名称: 主控制台

屏幕名称: 农机档案管理

🧩 组件库/设计系统

设计系统方法

核心组件

组件名称: 表格组件（DataTable）

组件名称: 表单组件（Form）

组件名称: 导航组件（Navigation）

🎨 品牌和样式指南

视觉识别

调色板

字体排印

图标设计

间距和布局

♿ 无障碍性要求

合规目标

关键要求

测试策略

📱 响应式策略

断点

适配模式

✨ 动画和微交互

动画原则

关键动画

⚡ 性能考虑

性能目标

设计策略

📋 下一步

立即行动

设计交付检查清单

🎨 交互设计模式和组件规范

🧩 核心组件交互模式

1. 表格组件模式 (基于 MachineryList.tsx 分析)

2. 表单组件模式 (基于 MachineryForm.tsx 分析)

3. 导航模式 (基于 Navigation.tsx 分析)

📊 数据可视化组件规范

1. 农机状态仪表板

2. 地块数据分析图表

📱 移动端UX优化策略

1. 田间作业模式

2. 离线功能支持

3. 快速操作界面

⚠️ 错误处理和加载状态设计

1. 分层错误处理

2. 智能加载状态

🎯 微交互和动画规范

1. 状态变化反馈

2. 数据可视化交互

🔧 可访问性增强

1. 视觉可访问性

2. 运动可访问性

📋 实施优先级和时间线

第一阶段 (立即实施 - 2周)

第二阶段 (短期优化 - 4周)

第三阶段 (长期增强 - 6周)

🎨 设计系统交付物

30 KiB

Raw Blame History