feat: 添加UI/UX设计规格到需求文档

- 在第四部分（AI语音抽背模块）为每个子模块添加详细的UI/UX设计规格
- 新增第六部分：UI设计分析总结
- 包含4个核心界面的详细分析
- 添加视觉设计、交互设计、响应式设计原则
- 列出待优化功能点

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/ai-tutor-requirements.md

@@ -67,6 +67,22 @@
   1. 支持语音/文字输入提问，选择抽背范围（学科章节、错题本、收藏题）
   2. 可设置抽背方式（顺序/随机）、抽背间隔时间（如每 30 秒一题）
 - **使用场景**: 用户想通过语音互动抽背；想针对性抽背某部分内容，控制抽背节奏
+- **UI/UX 设计规格**:
+  - **主入口界面设计**:
+    - 顶部：虚拟人物展示区域（占屏幕约30%高度），增强亲和力
+    - 中部：4个抽背考点选择按钮（2x2网格布局），快速进入抽背
+    - 底部：固定导航栏（3个Tab：抽背、AI交互、个人中心）
+    - 主操作按钮："点击进行抽背"（醒目样式，居中或底部突出位置）
+  - **抽背工作台界面**:
+    - 抽背范围选择：单选按钮组，包含"学段章节"、"未掌握知识点"、"收藏"三个选项
+    - 抽背模式选择：单选按钮，支持"顺序"/"随机"切换
+    - 抽背间隔设置：预设时间选项（如30秒、60秒、90秒），支持自定义
+    - 交互模式：采用单选按钮交互，点击即选中并高亮显示
+  - **视觉风格**:
+    - 背景色：白色为主，保持简洁清爽
+    - 主色调：建议使用蓝色或绿色系（代表学习、成长）
+    - 字体：清晰易读的无衬线字体
+    - 间距：合理的留白，避免拥挤感
 
 ### 4.2 抽背过程交互
 - **需求描述**:
@@ -76,6 +92,28 @@
 - **使用场景**: 用户进行实时抽背，检验背诵效果；想知道背诵错误的内容及原因
 - **技术要求**:
   - 语音播报需清晰，语速可调节（如正常/慢速）
+- **UI/UX 设计规格**:
+  - **AI智能抽背助手界面**:
+    - 顶部：设置入口（齿轮图标），支持快速调整参数
+    - 中部上方：AI助教引导语显示区（如"你好！我是你的AI助教，准备好了吗？"）
+    - 中部核心：当前抽背题目显示（大字号，清晰易读）
+    - 语音交互区：
+      - 麦克风按钮（大尺寸，居中或底部突出位置）
+      - 实时状态显示："正在倾听..."（语音输入中）
+      - 语音转文字显示区：实时显示用户说话内容
+    - 反馈区：AI判断结果（正确/错误），错误时显示正确答案和解析
+  - **交互流程**:
+    1. 进入抽背界面 → AI问候并说明抽背主题
+    2. 显示第一题 → 用户点击麦克风按钮开始回答
+    3. 实时语音转文字 → 用户可看到自己的回答内容
+    4. AI即时判断 → 显示正误反馈
+    5. 错误时 → 显示正确答案+解析，自动标记为"待再次抽背"
+    6. 下一题 → 自动或手动切换
+  - **视觉反馈**:
+    - 麦克风按钮：点击时高亮或动画效果
+    - 正确答案：绿色勾号或成功提示
+    - 错误答案：红色叉号或温和的错误提示
+    - 语音波形动画（可选）：增强交互感
 
 ### 4.3 抽背结果反馈
 - **需求描述**:
@@ -84,6 +122,38 @@
 - **使用场景**: 用户完成抽背后想总结效果；需要知道后续如何巩固抽背内容
 - **技术要求**:
   - 报告需突出错误点，建议需具体可执行（如"复习第三章第二节后再抽背"）
+- **UI/UX 设计规格**:
+  - **抽背报告页界面**:
+    - 顶部标题：报告标题（如"报告显示已记文字"）
+    - 报告元信息：
+      - 报告生成时间
+      - 报告保存时长提示（如"报告将保存30天"）
+    - 核心数据展示区（建议使用卡片或图表）：
+      - 总体正确率（大号数字+百分比）
+      - 总用时（分钟/秒）
+      - 抽背题目总数
+      - 正确/错误题目数量
+    - 详细分析区：
+      - 错误题目列表（可展开查看详情）
+      - 错误知识点统计（按章节或类别分组）
+      - 表现趋势图（可选）：多次抽背的正确率变化曲线
+    - 复习建议区：
+      - 基于错误知识点的具体建议
+      - 推荐复习章节或内容
+      - 推荐练习题目链接
+    - 底部操作栏：
+      - 返回按钮（抽屉图标）
+      - 个人中心入口
+      - 分享报告按钮（可选）
+      - 重新抽背按钮（可选）
+  - **数据可视化建议**:
+    - 正确率：使用环形图或进度条
+    - 错误分布：使用柱状图或饼图
+    - 时间趋势：使用折线图
+  - **交互设计**:
+    - 错误题目可点击跳转到对应的知识点学习
+    - 支持导出报告（PDF或图片格式）
+    - 支持历史报告对比
 
 ### 4.4 记忆曲线助力
 - **需求描述**:
@@ -92,6 +162,32 @@
 - **使用场景**: 用户想长期记忆知识点，避免遗忘；需要科学的复习时间规划
 - **技术要求**:
   - 需精准计算遗忘周期，提醒时间需合理（如避免深夜推送）
+- **UI/UX 设计规格**:
+  - **记忆曲线提醒界面**:
+    - 推送通知设计：
+      - 标题：温馨的提醒语（如"该复习啦！"、"记忆巩固时间到啦"）
+      - 内容：具体要复习的知识点名称
+      - 操作按钮："开始复习"、"稍后提醒"、"已掌握"
+    - 记忆曲线可视化（可选）：
+      - 展示知识点的记忆强度变化曲线
+      - 标注当前所处的记忆阶段
+      - 预测下次遗忘时间点
+    - 复习计划日历：
+      - 以日历形式展示复习时间安排
+      - 用不同颜色标记复习状态（待复习、已完成、已掌握）
+      - 支持查看历史复习记录
+  - **提醒时间设置**:
+    - 默认提醒时间：上午9-10点、下午3-4点、晚上7-8点
+    - 支持用户自定义提醒时间段
+    - 避免在以下时间段推送：22:00-8:00（睡眠时间）
+  - **复习优先级**:
+    - 即将遗忘的知识点标记为"紧急复习"
+    - 新学的内容标记为"初次复习"
+    - 已掌握的内容标记为"巩固复习"
+  - **数据记录**:
+    - 记录每次抽背的时间、正确率
+    - 计算知识点的记忆强度
+    - 自动调整下次复习时间间隔
 
 ### 4.5 抽背内容后台查询
 - **需求描述**:
@@ -100,6 +196,39 @@
 - **使用场景**: 班主任想了解学生抽背情况；管理员统计班级整体抽背效果
 - **技术要求**:
   - 数据需实时同步，支持导出（如 Excel），方便统计分析
+- **UI/UX 设计规格**:
+  - **后台管理界面**:
+    - 顶部筛选区：
+      - 用户选择（支持搜索、多选）
+      - 时间范围选择（日期区间选择器）
+      - 学科/章节筛选
+      - 抽背类型筛选（初次复习、巩固复习等）
+    - 数据概览卡片：
+      - 总抽背次数
+      - 平均正确率
+      - 活跃用户数
+      - 今日抽背次数
+    - 详细数据表格：
+      - 列：用户姓名、抽背时间、抽背内容、正确率、用时、错误知识点
+      - 支持排序、分页
+      - 支持点击查看详情
+    - 数据可视化：
+      - 班级整体正确率趋势图
+      - 个人表现对比图
+      - 错误知识点分布图
+    - 操作按钮：
+      - 导出Excel/CSV
+      - 发送报告给家长/学生
+      - 批量提醒复习
+  - **权限管理**:
+    - 班主任：可查看本班学生数据
+    - 管理员：可查看所有数据
+    - 学生：只能查看自己的数据
+  - **数据统计维度**:
+    - 按学生：个人抽背记录、进步趋势
+    - 按班级：班级整体表现、平均正确率
+    - 按知识点：易错知识点排行
+    - 按时间：日/周/月抽背活跃度
 
 ---
 
@@ -146,9 +275,118 @@
 
 ---
 
+## 六、UI 设计分析总结
+
+### 6.1 核心界面结构
+
+基于 UI 设计稿分析，系统包含 4 个核心界面：
+
+#### **界面 1：主入口/抽背启动页**
+- **功能定位**：系统入口，快速启动抽背
+- **核心元素**：
+  - 虚拟人物展示区（顶部，占30%高度）
+  - 4个抽背考点选择按钮（2x2网格布局）
+  - "点击进行抽背"主操作按钮
+  - 底部3Tab导航（抽背、AI交互、个人中心）
+- **设计风格**：简洁白色背景，突出核心操作
+
+#### **界面 2：AI智能抽背助手**
+- **功能定位**：语音交互抽背核心界面
+- **核心元素**：
+  - 设置入口（齿轮图标）
+  - AI助教引导语显示区
+  - 当前抽背题目显示（大字号）
+  - 麦克风按钮（大尺寸，突出显示）
+  - 实时语音转文字显示区
+  - AI判断反馈区（正确/错误+解析）
+- **交互特点**：语音为主，实时反馈
+
+#### **界面 3：抽背工作台**
+- **功能定位**：抽背参数配置界面
+- **核心元素**：
+  - 抽背范围选择（学段章节/未掌握知识点/收藏）
+  - 抽背模式选择（顺序/随机）
+  - 抽背间隔设置（30秒/60秒/90秒）
+- **交互模式**：单选按钮组，点击即选中
+
+#### **界面 4：抽背报告页**
+- **功能定位**：抽背结果展示与分析
+- **核心元素**：
+  - 报告标题和元信息（时间、保存时长）
+  - 核心数据展示（正确率、用时、题目数）
+  - 详细分析区（错误题目、知识点统计）
+  - 复习建议区
+  - 底部操作栏（返回、个人中心、分享）
+- **待完善**：图表可视化、数据对比功能
+
+### 6.2 UI/UX 设计原则
+
+#### **视觉设计**
+- **色彩方案**：
+  - 主色调：蓝色/绿色系（代表学习、成长）
+  - 背景色：白色为主，保持简洁清爽
+  - 强调色：用于重要操作按钮和反馈提示
+- **字体规范**：
+  - 使用无衬线字体，清晰易读
+  - 题目文字：大字号（18-24pt）
+  - 正文内容：中等字号（14-16pt）
+  - 辅助信息：小字号（10-12pt）
+- **间距布局**：
+  - 合理留白，避免拥挤
+  - 元素间距统一（8px/16px/24px网格）
+  - 重要内容区域突出显示
+
+#### **交互设计**
+- **操作反馈**：
+  - 按钮点击：高亮或动画效果
+  - 正确答案：绿色勾号或成功提示
+  - 错误答案：红色叉号或温和提示
+  - 语音输入：波形动画或状态文字
+- **流程优化**：
+  - 减少操作步骤，快速进入抽背
+  - 支持语音快捷操作
+  - 提供默认配置，降低设置门槛
+- **无障碍设计**：
+  - 支持语音播报和语音输入
+  - 高对比度模式（可选）
+  - 大字体模式（可选）
+
+#### **响应式设计**
+- **移动端优先**：主要使用场景为手机
+- **适配不同屏幕**：
+  - 小屏手机（< 5.5英寸）
+  - 大屏手机（5.5-6.5英寸）
+  - 平板设备（> 7英寸）
+- **横竖屏切换**：支持自动适配
+
+### 6.3 待优化功能点
+
+1. **数据可视化增强**：
+   - 添加图表展示（正确率趋势、错误分布）
+   - 记忆曲线可视化
+   - 学习进度仪表板
+
+2. **社交互动功能**：
+   - 抽背结果分享到社交平台
+   - 学习成就徽章系统
+   - 排行榜（班级/全校）
+
+3. **个性化推荐**：
+   - 基于学习历史的智能推荐
+   - 个性化复习计划生成
+   - 学习难度自适应调整
+
+4. **离线功能**：
+   - 支持离线下载题库
+   - 离线抽背模式
+   - 数据同步机制
+
+---
+
 ## 📅 创建信息
 
 - **创建日期**: 2026-03-28
-- **来源文件**: 需求.xls
+- **来源文件**: 需求.xls + UI设计稿分析
 - **整理人**: AI 智能抽背助手开发团队
-- **状态**: 待评审
+- **更新日期**: 2026-03-28（添加UI/UX设计规格）
+- **状态**: 已完成UI分析，待评审