bmad-method-template/planning-artifacts/ux-design-specification.md

stepsCompleted, inputDocuments, documentCounts, workflowType, projectName, author, date, lastStep, status

stepsCompleted	inputDocuments	documentCounts	workflowType	projectName	author	date	lastStep	status
step-01-init step-02-discovery step-03-core-experience step-04-emotional-response step-05-inspiration step-06-design-system step-07-defining-experience step-08-visual-foundation step-09-design-directions step-10-user-journeys step-11-component-strategy step-12-ux-patterns step-13-responsive-accessibility step-14-complete	path type loadedAt /mnt/code/226-244-template-6/ai-tutor-requirements.md requirements 2026-03-28T13:00:00Z	briefs prds projectDocs 0 0 1	ux-design	AI 智能抽背助手	BMAD & Claude	2026-03-28	14	complete

UX 设计规范 - AI 智能抽背助手

作者: BMAD & Claude 日期: 2026-03-28 版本: 1.0 状态: 已完成

---

执行摘要

项目愿景

AI 智能抽背助手是一款面向考研、医学考试等学习场景的微信小程序，通过 AI 智能抽背、艾宾浩斯记忆曲线、卡片式学习和挖空填空等多种学习模式，帮助用户高效记忆知识点，提升学习效果。

目标用户

主要用户群体：

• 考研学生：需要系统化复习和记忆大量知识点
• 医学考生：需要记忆方剂、中药、病理等专业内容
• 其他应试学习者：需要高效记忆方法的学习者

用户特征：

• 学习压力大，时间紧张
• 需要科学的学习方法辅助
• 对移动端学习有强烈需求
• 重视学习效果反馈

核心设计挑战

1. 学习效率与体验平衡：如何让抽背过程既高效又不枯燥？
2. 记忆曲线可视化：如何将抽象的记忆曲线直观呈现给用户？
3. 多模式学习统一性：如何确保卡片式、挖空、语音抽背等不同模式体验一致？
4. 个性化与标准化：如何平衡个性化推荐与标准化学习路径？

设计机会

1. 游戏化学习：通过成就、进度等元素提升学习动力
2. 智能推荐：基于遗忘曲线的精准复习提醒
3. 社交学习：分享学习成果，与同伴竞争
4. 情感化设计：通过友好的AI助教角色减轻学习压力

---

1. 核心用户体验

1.1 核心体验定义

"一键开启智能抽背，让记忆更科学"

AI 智能抽背助手的核心体验是让用户通过最简单的操作——点击"开始抽背"按钮，即可进入由 AI 驱动的智能抽背流程。系统会根据用户的学习历史、记忆曲线状态，自动选择最适合的知识点进行抽背，并实时反馈学习效果。

1.2 平台策略

主要平台： 微信小程序

选择理由：

• 用户无需下载安装，降低使用门槛
• 与微信生态无缝集成（分享、通知）
• 跨平台一致性体验
• 开发和维护成本可控

次要平台： 后台管理系统（Web端）

平台特性：

• 移动端优先设计
• 触摸为主，语音为辅
• 支持离线模式（缓存题库）
• 响应式布局适配不同屏幕

1.3 无缝交互设计

一键启动抽背：

• 首页大按钮"开始抽背"，点击即可进入抽背流程
• 系统自动选择抽背范围（基于学习进度和遗忘曲线）
• 无需复杂配置，开箱即用

智能语音交互：

• 点击麦克风按钮即可语音回答
• 实时语音转文字，用户可见回答内容
• AI 即时判断正误，无需等待

流畅卡片切换：

• 左右滑动切换卡片
• 点击"已记住"/"未记住"自动进入下一题
• 进度实时显示，心中有数

1.4 关键成功时刻

1. 首次启动成功：新用户打开小程序，3秒内理解如何开始抽背
2. 首次正确反馈：用户首次回答问题，AI 给出即时正向反馈
3. 记忆曲线生效：用户收到遗忘点提醒，复习后感觉"真的记住了"
4. 学习成果可见：用户查看抽背报告，看到自己的进步曲线
5. 社交分享时刻：用户分享学习成果到朋友圈，获得点赞

1.5 体验设计原则

1. 简洁至上：减少操作步骤，让用户专注于学习本身
2. 即时反馈：每个操作都有清晰的视觉或听觉反馈
3. 智能辅助：AI 在后台默默优化，前台体验自然流畅
4. 正向激励：通过成就、进度、鼓励性语言提升学习动力
5. 科学记忆：基于艾宾浩斯记忆曲线，让复习更高效

---

2. 情感响应设计

2.1 主要情感目标

核心情感：自信与掌控

用户在使用 AI 智能抽背助手时，应该感到：

• 自信：相信自己的学习方法是科学的
• 掌控：清楚自己的学习进度和薄弱环节
• 高效：时间用在刀刃上，不浪费
• 鼓励：即使答错也能得到正向引导

2.2 情感旅程映射

阶段	用户情感	设计响应
发现产品	好奇与期待	简洁的首页，清晰的价值主张
首次使用	紧张与不确定	友好的AI助教引导语，详细的操作提示
核心学习	专注与投入	沉浸式界面，减少干扰元素
答题正确	成就与满足	明确的成功反馈（绿色勾号+鼓励文字）
答题错误	挫败与困惑	温和的错误提示+正确答案+解析
完成学习	成就与轻松	详细的报告，可视化的进步
收到提醒	被关心与重视	个性化的提醒语，明确复习内容
长期使用	信任与依赖	稳定的体验，持续的学习效果

2.3 微情感设计

情感维度	正向目标	负向避免	设计实现
信心	清晰的进度指示	不确定性	实时进度条、已完成计数
信任	准确的记忆预测	失败的预测	基于真实数据的科学算法
激励	成就感、进步感	平淡无奇	徽章系统、进度对比图
宽慰	友好的错误提示	打击感	温和的红色提示、鼓励文字
期待	对下一次学习的期待	厌倦感	多样化的学习模式、惊喜元素

2.4 情感设计原则

1. 错误不是失败：答错时强调"学习机会"而非"失败"
2. 进步可视化：通过图表、数字让进步看得见
3. 个性化关怀：AI 助教使用用户昵称，针对性鼓励
4. 庆祝小成就：每完成一个小目标都有庆祝反馈
5. 长期陪伴：记忆曲线提醒体现"我一直在关心你"

---

3. UX 模式分析与灵感

3.1 灵感产品分析

Anki (间隔重复学习)

• 可借鉴：成熟的间隔重复算法，卡片翻转交互
• 创新点：加入 AI 语音抽背，更丰富的反馈

Quizlet (学习卡片)

• 可借鉴：简洁的卡片界面，多种学习模式
• 创新点：基于艾宾浩斯曲线的智能提醒，挖空填空

Duolingo (游戏化学习)

• 可借鉴：成就系统，进度可视化，连续学习打卡
• 创新点：应用到知识记忆场景，社交分享

Notion (知识管理)

• 可借鉴：清晰的分类结构，灵活的内容组织
• 创新点：专门为学习优化的知识点管理

3.2 可迁移的 UX 模式

导航模式：

• 底部三Tab导航（首页/智能抽背/我的）- 移动端标准模式
• 卡片堆叠式浏览 - 类似 Anki 的卡片复习
• 滑动切换手势 - 提升操作效率

交互模式：

• 点击+滑动混合操作 - 降低学习成本
• 语音按钮长按录音 - 符合用户对语音交互的预期
• 双按钮选择（已记住/未记住）- 简化决策

视觉模式：

• 大字号题目显示 - 突出核心内容
• 进度环/进度条 - 清晰的进度感知
• 颜色编码（绿色=正确，红色=错误，橙色=待复习）- 快速识别

反馈模式：

• 即时反馈动画 - 提升操作满足感
• 详细解析展开 - 按需获取更多信息
• 报告可视化图表 - 一目了然的学习效果

3.3 避免的反模式

1. 复杂的初始设置：不要让用户在首次使用时做大量配置
2. 隐藏的进度信息：不要让用户猜测自己的学习进度
3. 突兀的错误提示：不要用刺眼的红色或严厉的措辞
4. 单一的学习模式：不要强制用户只用一种方式学习
5. 缺失的离线支持：不要让网络问题影响学习连续性

3.4 设计灵感策略

直接采用：

• Anki 的间隔重复算法（基于艾宾浩斯曲线）
• 移动端标准的底部导航模式
• 卡片翻转/展开交互

创新改进：

• AI 语音抽背（语音识别+语义理解）
• 挖空填空交互（音频+填空双重输入）
• 记忆曲线可视化（让遗忘曲线看得见）

完全创新：

• AI 助教角色（拟人化的学习伙伴）
• 多模式融合抽背（语音+卡片+挖空）
• 智能考点推荐（基于错题和薄弱点）

---

4. 设计系统选择

4.1 设计系统决策

选择：微信小程序原生设计语言 + Vant Weapp 组件库

4.2 选择理由

1. 平台一致性：完全符合微信小程序设计规范，用户零学习成本
2. 开发效率：Vant Weapp 提供丰富的组件，加速开发
3. 成熟稳定：经过大量项目验证，稳定可靠
4. 文档完善：社区活跃，问题容易解决
5. 定制能力：支持主题定制，可满足品牌化需求

4.3 实施方法

组件使用策略：

• 基础组件（Button、Cell、Icon等）：直接使用 Vant
• 业务组件（抽背卡片、挖空填空等）：自定义开发
• 布局组件（Flex、Grid等）：基于 Vant 定制

主题定制：

• 使用 CSS 变量定义品牌色
• 覆盖 Vant 默认样式变量
• 保持组件交互行为不变

4.4 自定义策略

需要自定义的组件：

1. 抽背卡片组件（支持翻转、滑动）
2. 挖空填空组件（音频播放+填空交互）
3. 记忆曲线图表组件
4. 语音波形动画组件
5. AI 助教对话气泡组件

---

5. 核心交互体验

5.1 定义性体验

"点击麦克风，说出答案，AI 即时反馈"

这是 AI 智能抽背助手区别于其他学习应用的核心交互。用户不需要打字，不需要点击选项，只需要像和真人对话一样说出答案，AI 就能理解并给出反馈。

5.2 用户心智模型

用户对抽背的预期：

• 像老师提问一样自然
• 可以用自己的话回答，不用死记硬背
• 答错了能得到解释，不只是对错
• 不会的内容会被标记，稍后会再问

当前解决方案的痛点：

• 需要自己安排复习时间
• 不知道哪些内容快忘了
• 复习时没有针对性
• 缺乏学习成就感

5.3 成功标准

用户说"这个好用了"的时刻：

• 语音识别准确：说的话能被正确识别
• 语义理解到位：AI 理解回答的意思，不只是关键词匹配
• 反馈及时：回答后立刻得到反馈
• 解析有用：错误时给出的解析真的能帮助理解
• 再复习有效：被标记的内容真的在合适时机再次出现

5.4 新颖 vs 已知模式

使用已知模式：

• 语音按钮：符合用户对语音输入的预期
• 即时反馈：用户对"立刻知道结果"有明确预期

创新点：

• 语义理解：不只是关键词匹配，而是理解回答的含义
• 记忆曲线集成：复习提醒基于科学算法，不是随机
• 多模式融合：语音、卡片、挖空无缝切换

5.5 体验机制详解

1. 启动阶段

• 触发：点击"开始抽背"按钮
• 反馈：页面转场动画，进入抽背界面
• AI 助教：显示问候语"你好！我是你的AI助教，今天我们来复习XX内容"

2. 交互阶段

• 提示：显示抽背题目（大字号，清晰易读）
• 输入：用户点击麦克风按钮，开始语音输入
• 状态：按钮变为"正在倾听..."，波形动画
• 转换：实时显示语音转文字结果
• 判断：AI 分析回答，判断正误

3. 反馈阶段

• 正确：绿色勾号 + "太棒了！回答正确"
• 错误：温和提示 + 正确答案 + 详细解析
• 自动标记：错误内容自动加入"待复习"列表

4. 完成阶段

• 进度：显示"已完成X题，共Y题"
• 选项：继续抽背 / 查看报告 / 返回首页
• 报告：生成详细报告（正确率、用时、错误分析）

---

6. 视觉设计基础

6.1 色彩系统

主色调（品牌色）：

• 主色：#1890FF（科技蓝）- 代表智慧、信任
• 辅助色：#52C41A（成功绿）- 正确、已完成
• 警告色：#FAAD14（提醒橙）- 待复习、警告
• 错误色：#F5222D（错误红）- 错误、重要提示

中性色：

• 文字主色：#262626（深灰）
• 文字辅色：#8C8C8C（中灰）
• 文字禁用：#BFBFBF（浅灰）
• 背景色：#FFFFFF（纯白）
• 浅背景：#F5F5F5（浅灰）
• 分割线：#E8E8E8（极浅灰）

语义色应用：

• 记忆状态：新学（蓝色）→ 复习中（橙色）→ 已掌握（绿色）
• 答题反馈：正确（绿色背景）、错误（浅红背景）、进行中（蓝色边框）

6.2 字体系统

字体家族：

• 主字体：-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
• 数字字体：DIN Alternate, Roboto, sans-serif（用于数据展示）

字号规范：

用途	字号	行高	字重
大标题	24px	1.3	Medium
标题	18px	1.4	Medium
副标题	16px	1.5	Regular
正文	14px	1.6	Regular
辅助文字	12px	1.5	Regular
说明文字	10px	1.4	Regular

6.3 间距与布局

间距单位（8px基准）：

• xs: 4px
• sm: 8px
• md: 16px
• lg: 24px
• xl: 32px
• xxl: 48px

卡片内边距：

• 标准卡片：16px
• 紧凑卡片：12px
• 宽松卡片：20px

元素间距：

• 段落间距：16px
• 列表项间距：12px
• 表单字段间距：20px

6.4 无障碍考虑

• 所有文字与背景对比度 ≥ 4.5:1（WCAG AA标准）
• 触摸目标最小尺寸：44x44px
• 支持系统字体缩放
• 颜色不作为唯一的信息传递方式

---

7. 设计方向决策

7.1 设计方向选择

选择方向：简洁专业型

采用简洁的白底为主色调，辅以蓝色品牌色，突出内容本身，减少视觉干扰。整体风格专业、可信，符合教育产品的定位。

7.2 设计原则

1. 内容为王：知识点内容占据最大视觉比重
2. 层次清晰：通过字号、颜色、间距建立清晰的信息层级
3. 操作明确：主要操作按钮大而醒目，次要操作低调
4. 反馈及时：每个操作都有视觉或动画反馈
5. 情感友好：使用圆角、柔和的色彩降低学习的紧张感

7.3 核心界面设计方向

首页：

• 顶部：学习概览卡片（今日数据）
• 中部：快速入口（4个抽背考点按钮）
• 底部：固定导航栏

抽背界面：

• 顶部：AI 助教引导语
• 中部：当前题目（大字号）
• 底部：操作区（麦克风按钮+已记住/未记住）

报告页：

• 顶部：核心数据（正确率大号显示）
• 中部：图表可视化
• 底部：操作按钮

7.4 实施方法

• 使用 Vant Weapp 作为组件基础
• 自定义业务组件时遵循相同的设计语言
• 建立 Figma 设计规范文档
• 开发前进行视觉评审

---

8. 用户旅程流程

8.1 首次使用旅程

graph TD
    A[打开小程序] --> B[授权登录]
    B --> C[完善个人信息]
    C --> D[选择学习场景]
    D --> E[AI 助教欢迎引导]
    E --> F[首次抽背体验]
    F --> G{体验如何?}
    G -->|好| H[开始正式学习]
    G -->|一般| I[调整设置]
    H --> J[完成首次抽背]
    I --> F
    J --> K[查看首次报告]
    K --> L[设置学习提醒]
    L --> M[成为活跃用户]

8.2 日常抽背旅程

graph TD
    A[打开小程序] --> B[首页查看今日任务]
    B --> C{有提醒?}
    C -->|是| D[点击去背诵]
    C -->|否| E[点击开始抽背]
    D --> F[进入抽背界面]
    E --> F
    F --> G[查看题目]
    G --> H{选择回答方式}
    H -->|语音| I[点击麦克风]
    H -->|文字| J[点击文字输入]
    I --> K[语音回答]
    J --> L[文字回答]
    K --> M[AI 判断]
    L --> M
    M --> N{正确?}
    N -->|是| O[绿色反馈]
    N -->|否| P[红色反馈+解析]
    O --> Q{继续?}
    P --> Q
    Q -->|是| R[下一题]
    Q -->|否| S[查看报告]
    R --> G
    S --> T[报告分析]
    T --> U[退出/分享]

8.3 挖空填空旅程

graph TD
    A[选择音频带背] --> B[进入挖空界面]
    B --> C[播放原声音频]
    C --> D[显示挖空题目]
    D --> E[查看选项]
    E --> F[点击选择答案]
    F --> G{是否正确?}
    G -->|是| H[填入正确]
    G -->|否| I[提示错误]
    H --> J{完成所有填空?}
    I --> E
    J -->|否| E
    J -->|是| K[显示完整答案]
    K --> L{已记住?}
    L -->|是| M[标记已记住]
    L -->|否| N[标记未记住]
    M --> O[下一题]
    N --> O

8.4 旅程模式

导航模式：

• 返回按钮：左上角，所有二级页面统一
• 设置按钮：右上角，齿轮图标
• 底部导航：首页/智能抽背/我的，固定

决策模式：

• 已记住/未记住：双按钮，互斥选择
• 继续退出：模态弹窗确认
• 答案选项：点击即选中，高亮显示

反馈模式：

• 即时反馈：操作后300ms内显示
• 成功反馈：绿色+动画
• 错误反馈：浅红色+解析
• 加载状态：骨架屏或加载动画

---

9. 组件策略

9.1 设计系统组件（来自 Vant Weapp）

可直接使用：

• Button（按钮）：主操作、次操作、文字按钮
• Cell（单元格）：列表项、卡片内容
• Icon（图标）：状态图标、操作图标
• Dialog（对话框）：确认弹窗
• Toast（轻提示）：操作反馈
• Loading（加载）：加载状态
• Progress（进度条）：学习进度

需要定制：

• 调整颜色变量以符合品牌色
• 调整圆角、间距以符合设计规范

9.2 自定义组件

9.2.1 抽背卡片组件 (QuizCard)

用途： 显示抽背题目，支持翻转和滑动

状态：

• 默认：显示题目
• 翻转：显示答案和解析
• 正确：绿色高亮
• 错误：红色高亮

交互：

• 点击卡片：翻转查看答案
• 左右滑动：切换上一题/下一题
• 长按：显示操作菜单

9.2.2 挖空填空组件 (FillBlank)

用途： 音频带背挖空填空交互

结构：

• 题目区域：带下划线的挖空处
• 音频按钮：播放原声
• 选项区域：圆形按钮网格
• 操作按钮：显示答案/已记住

交互：

• 点击选项：填入挖空处
• 播放音频：显示播放状态
• 完成填空：验证答案

9.2.3 记忆曲线组件 (MemoryCurve)

用途： 可视化展示记忆强度和复习时间点

结构：

• 曲线图：记忆强度变化
• 标记点：复习时间点
• 当前位置：用户当前所处阶段

交互：

• 点击标记点：查看该次复习详情
• 长按曲线：显示数据详情

9.2.4 AI 助教组件 (AITutor)

用途： 显示 AI 助教的对话和引导

结构：

• 头像：AI 助教形象
• 气泡：对话内容
• 动画：说话时的波形动画

交互：

• 点击头像：播放问候语
• 长按气泡：复制内容

9.3 实施路线图

第一阶段（核心组件）：

• 抽背卡片组件 - 所有抽背模式的基础
• 挖空填空组件 - 音频带背核心
• AI 助教组件 - 品牌特色

第二阶段（支持组件）：

• 记忆曲线组件 - 数据可视化
• 报告图表组件 - 学习效果展示
• 提醒设置组件 - 个性化配置

第三阶段（增强组件）：

• 社交分享组件 - 分享学习成果
• 排行榜组件 - 竞争激励
• 成就徽章组件 - 游戏化元素

---

10. UX 一致性模式

10.1 按钮层级

主要按钮（Primary Button）：

• 用途：页面主要操作（开始抽背、提交答案等）
• 样式：品牌色背景，白色文字，圆角8px
• 尺寸：高度44px，宽度自适应或全宽

次要按钮（Secondary Button）：

• 用途：辅助操作（查看详情、取消等）
• 样式：白色背景，品牌色边框，品牌色文字
• 尺寸：高度44px

文字按钮（Text Button）：

• 用途：低优先级操作（跳过、稍后等）
• 样式：透明背景，灰色文字
• 尺寸：高度40px

10.2 反馈模式

成功反馈：

• 图标：绿色勾号
• 文字：描述性成功信息
• 动画：勾号弹出动画
• 位置：页面中心或顶部

错误反馈：

• 图标：红色叉号或感叹号
• 文字：温和的错误描述+解决建议
• 背景：浅红色（#FFF2F0）
• 位置：相关元素附近

警告反馈：

• 图标：橙色感叹号
• 文字：警告信息
• 背景：浅橙色（#FFF7E6）
• 位置：顶部提示栏

信息反馈：

• 图标：蓝色信息图标
• 文字：提示信息
• 背景：浅蓝色（#E6F7FF）
• 位置：页面顶部

10.3 表单模式

输入框：

• 默认状态：灰色边框，浅灰占位文字
• 聚焦状态：品牌色边框
• 错误状态：红色边框，错误提示文字
• 禁用状态：灰色背景，不可编辑

验证规则：

• 即时验证：失去焦点时验证
• 错误提示：输入框下方红色文字
• 成功提示：绿色勾号图标

10.4 导航模式

底部导航：

• 3个Tab：首页、智能抽背、我的
• 选中状态：品牌色图标+文字
• 未选中状态：灰色图标+文字
• 图标尺寸：24x24px
• 动画：选中时轻微放大

返回导航：

• 位置：所有二级页面左上角
• 图标：向左箭头
• 尺寸：44x44px点击区域

10.5 模态与弹窗

确认弹窗：

• 标题：描述操作
• 内容：确认信息
• 按钮：取消（左）/ 确定（右，品牌色）

底部操作面板：

• 从底部滑入
• 显示操作选项列表
• 点击外部或取消关闭

10.6 空状态与加载

空状态：

• 图标：相关主题插画
• 文字：描述性文字
• 操作：引导用户操作

加载状态：

• 页面级：骨架屏
• 组件级：加载动画
• 按钮级：按钮内加载图标

---

11. 响应式与无障碍

11.1 响应式策略

移动优先设计：

• 基准设计：iPhone 12（390x844px）
• 小屏适配：iPhone SE（375x667px）
• 大屏优化：iPhone 14 Pro Max（430x932px）

断点策略：

/* 小屏手机 */
@media (max-width: 374px) { }

/* 标准手机 */
@media (min-width: 375px) and (max-width: 413px) { }

/* 大屏手机 */
@media (min-width: 414px) { }

/* 平板 */
@media (min-width: 768px) {
  /* 两栏布局，侧边导航 */
}

布局适配：

• 小屏：单列布局，隐藏次要信息
• 标准：单列布局，完整信息
• 大屏：单列布局，增加留白
• 平板：两栏布局，侧边导航

11.2 无障碍策略

WCAG 2.1 AA 级别合规：

色彩对比度：

• 正常文字：至少 4.5:1
• 大文字（18px+）：至少 3:1
• 图标/图形：至少 3:1

键盘导航：

• 所有交互元素可键盘访问
• 清晰的焦点指示器
• 合理的 Tab 顺序
• Skip Links 跳过重复内容

屏幕阅读器：

• 语义化 HTML 结构
• ARIA 标签和角色
• Alt 文字描述图片
• 状态变化通知

触摸目标：

• 最小尺寸：44x44px
• 间距：相邻目标至少8px间距

其他：

• 支持系统字体缩放（最大200%）
• 不依赖颜色传递信息
• 表单错误关联提示
• 动画可暂停（减少动画设置）

11.3 测试策略

响应式测试：

• 真机测试：iPhone SE、12、14 Pro Max
• 微信开发者工具模拟器
• 不同网络环境测试

无障碍测试：

• iOS VoiceOver 测试
• Android TalkBack 测试
• 色盲模拟器测试
• 键盘导航测试

---

12. 6个核心界面详细设计

12.1 界面1：首页

功能定位： 学习入口与概览

布局结构：

┌─────────────────────────────┐
│ 09:41              信号 电池 │ 状态栏
├─────────────────────────────┤
│ [考研 ▼]                    │ 场景选择
├─────────────────────────────┤
│ 学习概览（2026-03-13）      │ 学习概览卡片
│ 已记忆:128  未记忆:45  待复习:12 │
├─────────────────────────────┤
│ 学习计划制定  [您有新的任务] │ 任务模块
│ [要点背诵] [卡片式抽背]      │
│ [音频带背（挖空）]           │
├─────────────────────────────┤
│ 记忆曲线提醒                │ 记忆曲线卡片
│ 临界点复习：麻黄汤功效 [去背诵]│
├─────────────────────────────┤
│ 高频考点                    │ 高频考点卡片
│ 高频考点1           [去学习] │
├─────────────────────────────┤
│ [首页] [智能抽背] [我的]     │ 底部导航
└─────────────────────────────┘

交互说明：

• 场景选择：点击下拉切换学习场景（考研/医学/其他）
• 数字高亮：待复习数字用红色突出显示
• 按钮点击：所有"去"字按钮跳转对应页面

12.2 界面2：知识点目录页

功能定位： 知识点列表导航

布局结构：

┌─────────────────────────────┐
│ 09:41              信号 电池 │
├─────────────────────────────┤
│ [知识点目录]                │ 卡片1
│                             │
├─────────────────────────────┤
│ [知识点目录]                │ 卡片2
│                             │
├─────────────────────────────┤
│ [知识点目录]                │ 卡片3
│                             │
├─────────────────────────────┤
│ [知识点目录]                │ 卡片4
│                             │
├─────────────────────────────┤
│ [知识点目录]                │ 卡片5
│                             │
├─────────────────────────────┤
│ [首页] [智能背诵] [我的]     │
└─────────────────────────────┘

交互说明：

• 卡片点击：进入对应知识点详情页
• 长按卡片：显示操作菜单（收藏/分享/移除）

12.3 界面3：音频带背详情页（挖空）

功能定位： 音频+挖空填空学习

布局结构：

┌─────────────────────────────┐
│ [←] 音频带背（挖空）  [⚙]  │ 导航栏
├─────────────────────────────┤
│ 听音填空：方剂学  [播放原声] │ 题目标题
├─────────────────────────────┤
│ 麻黄汤的组成包括麻黄、桂枝、 │
│ 杏仁和______，其核心功效为 │ 挖空题目
│ ______、宣肺平喘，主治______证。│
├─────────────────────────────┤
│ 点击选择输入：              │ 提示文字
│  [甘草] [发汗解表] [风寒表实] [大枣]│ 选项
│  [清热解毒] [     ]         │
├─────────────────────────────┤
│ [显示答案]           [已记住]│ 操作按钮
├─────────────────────────────┤
│              下一题          │ 底部提示
│ （方剂学）：麻黄汤禁忌证     │ AI提示
└─────────────────────────────┘

交互说明：

• 播放原声：点击播放音频，显示播放进度
• 填空：点击选项按钮，填入挖空处
• 显示答案：展开显示完整答案
• 已记住：标记掌握状态，进入下一题

12.4 界面4：卡片背诵详情页

功能定位： 卡片翻转学习

布局结构：

┌─────────────────────────────┐
│ [×] 卡片背诵           [⚙]  │
├─────────────────────────────┤
│ ━━━━━━━━━━━━━━━━━━━━━ 4/12 │ 进度条
├─────────────────────────────┤
│ ┌─────────────────────────┐ │
│ │                         │ │
│ │   阴阳失调的基本概念    │ │ 卡片
│ │                         │ │
│ │   点击查看详情          │ │
│ │                         │ │
│ └─────────────────────────┘ │
├─────────────────────────────┤
│ [未记住]              [已记住]│
└─────────────────────────────┘

交互说明：

• 点击卡片：翻转显示详细内容
• 滑动：左滑上一张，右滑下一张
• 未记住/已记住：标记状态并切换

12.5 界面5：答题详情页

功能定位： 选择题练习

布局结构：

┌─────────────────────────────┐
│ [×] 答题               [⚙]  │
├─────────────────────────────┤
│ ━━━━━━━━━━━━━━━━━━━━━ 4/12 │
├─────────────────────────────┤
│ ┌─────────────────────────┐ │
│ │ 麻黄汤禁忌症（）        │ │ 题目卡片
│ │                         │ │
│ │ ○ A. 选项              │ │
│ │ ○ B. 选项              │ │ 选项
│ │ ○ C. 选项              │ │
│ │ ○ D. 选项              │ │
│ └─────────────────────────┘ │
├─────────────────────────────┤
│ [未记住]              [已记住]│
└─────────────────────────────┘

交互说明：

• 选择选项：点击即选中，高亮显示
• 提交答案：选择后自动提交
• 立即反馈：正确绿色，错误红色+解析

12.6 界面6：答题关联知识点页

功能定位： 关联知识点网格展示

布局结构：

┌─────────────────────────────┐
│ [×] 答题               [⚙]  │
├─────────────────────────────┤
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐│
│ │麻黄汤│ │桂枝 │ │杏仁 │ │甘草 ││ 知识点网格
│ └─────┘ └─────┘ └─────┘ └─────┘│
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐│
│ │麻黄汤│ │桂枝 │ │杏仁 │ │甘草 ││
│ └─────┘ └─────┘ └─────┘ └─────┘│
├─────────────────────────────┤
│ [有疑问]             [返回题] │
└─────────────────────────────┘

交互说明：

• 点击卡片：进入对应知识点详情
• 有疑问：提交疑问反馈
• 返回题：返回答题页面

---

13. 后台管理界面设计

13.1 功能定位

班主任/管理员查看学生抽背数据，生成学习报告，管理学习内容。

13.2 布局结构

┌──────────────────────────────────────────┐
│ AI 智能抽背助手 - 后台管理     [管理员▼] │
├──────────────────────────────────────────┤
│ [数据概览] [学生管理] [内容管理] [系统设置]│
├──────────────────────────────────────────┤
│                                          │
│  ┌────────────┐ ┌────────────┐          │
│  │总抽背次数  │ │平均正确率  │          │
│  │   1,234    │ │    78%     │          │
│  └────────────┘ └────────────┘          │
│                                          │
│  筛选: [用户▼] [时间范围▼] [学科▼]       │
│                                          │
│  ┌────────────────────────────────────┐ │
│  │ 用户 │ 时间   │ 内容 │ 正确率│ 操作│ │
│  ├──────┼────────┼──────┼───────┼────┤ │
│  │ 张三 │03-28  │方剂学 │  85%  │详情│ │
│  │ 李四 │03-28  │中药学 │  72%  │详情│ │
│  │ ...  │ ...    │ ...  │  ...  │... │ │
│  └────────────────────────────────────┘ │
│                                          │
│  [导出Excel] [发送报告] [批量提醒]       │
└──────────────────────────────────────────┘

13.3 核心功能

1. 数据概览：总抽背次数、平均正确率、活跃用户数
2. 筛选查询：按用户、时间、学科筛选
3. 详细数据：抽背记录列表，支持查看详情
4. 数据导出：导出Excel/CSV报告
5. 报告发送：发送报告给家长/学生

---

14. 交付清单

14.1 设计文档

• ✅ UX 设计规范（本文档）
• ✅ 6个核心界面详细设计
• ✅ 用户旅程流程图
• ✅ 组件规范文档

14.2 设计资源

• Figma 设计文件（待创建）
• 图标资源库（待整理）
• 图片素材规范（待定义）

14.3 开发交付

• 设计系统文档（Vant Weapp + 自定义组件）
• 组件 API 文档
• 样式变量表（CSS Variables）
• 无障碍合规检查清单

---

附录

A. 术语表

术语	定义
抽背	AI 提问，用户回答的学习模式
挖空	知识点中部分内容留空，需用户填入
记忆曲线	艾宾浩斯遗忘曲线，用于确定复习时间
知识点	学习的最小单元，如"麻黄汤功效"

B. 参考资源

• 艾宾浩斯记忆曲线研究
• WCAG 2.1 无障碍标准
• 微信小程序设计规范
• Vant Weapp 组件库文档

C. 更新记录

日期	版本	更新内容
2026-03-28	1.0	初始版本，完整UX设计规范

---

文档状态： 已完成 下一步行动： 视觉设计 / 原型制作 / 开发准备