nextjs-admin-assistant/docs/ui-analysis-report-group2.md

UI 设计分析报告

界面概览

共识别出 6 个界面

---

界面详细分析

界面 1：首页界面

坐标范围：X:88-219, Y:74-504 位置：左侧

功能定位

该界面是 AI 学习 App 的首页，核心功能是 展示学习任务与知识点，支持用户快速进入学习流程（如查看学习计划、开始任务、进入客服咨询），同时通过"广告弹窗"引导用户关注重要信息（如新任务通知）。

核心 UI 元素

按钮（4个）：

• 顶部左侧："老师"下拉选择器（用于切换学习角色）
• 中部弹窗内："您有新的学习任务"按钮（蓝色背景，白色文字，突出新任务提醒）
• 中部下方："卡片式抽背"按钮（白色背景，黑色文字，位于"重点背诵"模块）
• 中部下方："智能推荐您的"按钮（白色背景，黑色文字，位于"智能考点"模块）

导航栏（底部，3个Tab）：

• 左侧："首页"（图标+文字，当前选中状态）
• 中间："智能推荐"（图标+文字）
• 右侧："我的"（图标+文字）

其他交互元素：

• 顶部："老师"下拉选择器（用于切换学习角色，如老师/学生）
• 中部弹窗：关闭按钮（×图标，位于弹窗右上角）
• 底部导航栏：图标按钮（首页、智能推荐、我的）

布局结构

顶部区域：

• 状态栏（显示时间"4:41"、电池等图标）
• 角色选择器（"老师"下拉菜单）
• 学习概览卡片（"学习概览(2026-03-13)"，包含"已学习128""未学习45次""待完成12"三个数据模块）

中部区域：

• 弹窗（"您有新的学习任务"，蓝色背景，突出显示）
• 模块列表（"重点背诵""智能考点"，每个模块包含对应按钮）

底部区域：

• 底部导航栏（3个Tab，当前选中"首页"）

交互模式

• 操作类型：点击（按钮、选择器、导航栏）、下拉（角色选择器）
• 操作反馈：
  • 按钮点击：跳转至对应页面
  • 弹窗关闭：点击×图标后弹窗消失
  • 导航栏切换：点击Tab后，页面切换至对应模块

视觉风格

• 主色调：白色（背景）、蓝色（弹窗/按钮强调色）、黑色（文字）
• 背景色：纯白色（整体背景），弹窗为浅蓝色（突出新任务）
• 字体：
  • 标题：中等大小，粗体
  • 数据：小字号，常规粗细
  • 按钮文字：中等大小，常规粗细
• 间距与留白：模块间留白充足，按钮与文字间距适中，整体布局清晰

文字内容

标题：

• "学习概览(2026-03-13)"（顶部卡片标题）
• "您有新的学习任务"（弹窗标题）
• "重点背诵"（中部模块标题）
• "智能考点"（中部模块标题）

按钮文字：

• "卡片式抽背"（中部"重点背诵"模块按钮）
• "智能推荐您的"（中部"智能考点"模块按钮）

提示语：

• 弹窗内："您有新的学习任务"
• 底部导航栏："首页""智能推荐""我的"

数据文字：

• "已学习128""未学习45次""待完成12"（学习概览卡片数据）

---

界面 2：知识目录列表页

坐标范围：X:249-381, Y:74-504 位置：中间偏左

功能定位

该界面是 AI 学习 APP 的"知识目录"列表页，核心功能是 展示用户当前学习模块的知识点目录，支持用户快速浏览、选择并进入具体知识点内容（如课程、练习等），为后续学习任务（如做题、记忆）提供入口。

核心 UI 元素

按钮（7个）：

• 数量：7个（均为"知识目录"按钮，无其他功能按钮）
• 位置：垂直排列于界面中部，占据主要视觉区域
• 文字内容：全部为"知识目录"（无差异化文字，统一标识知识点分类）

导航栏（底部，3个Tab）：

• "首页"（图标+文字，当前未选中）
• "智能书架"（图标+文字，当前选中，图标为机器人形象，暗示AI推荐功能）
• "我的"（图标+文字，当前未选中）

其他交互元素：

• 底部导航栏的"智能书架"图标：机器人形象，强化AI学习属性

布局结构

顶部区域：

• 状态栏：显示时间（如"4:41"）、电池、信号等系统图标
• 标题栏：无明确标题文字（或标题为"知识目录"）

中部区域：

• 垂直列表：7个"知识目录"按钮，每个按钮为圆角矩形（浅灰色背景，深灰色文字），间距均匀，占据界面约70%高度，是核心交互区域

底部区域：

• 导航栏：3个Tab，固定在界面底部，图标+文字组合，当前选中"智能书架"

交互模式

• 交互方式：点击（用户通过点击"知识目录"按钮进入具体知识点页面）
• 操作反馈：
  • 按钮点击时：预期会有视觉反馈（如背景色加深、文字变亮）
  • 导航栏切换：点击"首页"或"我的"时，界面会跳转至对应页面

视觉风格

• 主色调：
  • 背景：纯白色（#FFFFFF），简洁干净
  • 按钮：浅灰色（#F5F5F5），文字为深灰色（#333333），对比度适中，易读性强
• 字体：
  • 按钮/文字：无衬线字体（如"苹方"或"Roboto"），字体大小约14px，粗细为常规（400）
• 间距/留白：
  • 按钮之间的垂直间距：约16px（均匀分布，避免拥挤）
  • 列表与顶部/底部的留白：约20px（顶部留白适配状态栏，底部留白适配导航栏）

文字内容

• 标题：无明确标题（或隐含为"知识目录"）
• 按钮文字：全部为"知识目录"（7个按钮文字一致）
• 导航栏文字：
  • "首页"（底部左侧）
  • "智能书架"（底部中间，当前选中）
  • "我的"（底部右侧）

---

界面 3：AI学习详情页（挖空模式）

坐标范围：X:431-563, Y:74-504 位置：中间偏右

功能定位

该界面是 AI 学习详情页的挖空模式，用于展示挖空题目、答案按钮、评论功能，支持用户通过填空方式学习知识点。

核心 UI 元素

顶部导航栏（3个元素）：

• 左侧：返回按钮（← 图标，白色背景）
• 中部：标题文字（知识点名称，如"阴阳失调基本概念"）
• 右侧：更多选项按钮（⋯ 图标）

中部内容区（3个核心元素）：

• 知识点标题（如"阴阳失调的基本概念"，18pt 粗体）
• 挖空题目展示区（包含挖空的句子，挖空部分用黄色或蓝色背景高亮显示，如"阴阳失调是指机体在疾病发展过程中，由于____、____等因素的作用，导致阴阳失调而出现的病理状态。"）
• 输入提示（如"点击空白处填入答案"或"语音输入答案"，小字号灰色文字）

底部操作区（4个按钮）：

• 左侧："看答案"按钮（白色背景，蓝色边框，16pt 常规）
• 左侧："隐藏答案"按钮（白色背景，灰色边框，16pt 常规，初始隐藏）
• 中间："语音输入"按钮（麦克风图标，圆形按钮，蓝色背景）
• 右侧："评论"按钮（气泡图标，白色背景，显示评论数量如"12"）

其他交互元素：

• 挖空空白处：可点击的输入区域，高亮背景（黄色 #FFF9C4 或蓝色 #E3F2FD）
• 进度指示器（如"3/10"，显示当前题目进度）
• 知识点导航（如"上一题"/"下一题"按钮，位于底部两侧）

布局结构

顶部区域（高度约60px）：

• 状态栏（显示时间、电池等系统图标）
• 导航栏（返回按钮、标题、更多选项）

中部区域（占据约60%高度）：

• 知识点标题（顶部居中，留白约20px）
• 挖空题目展示区（中部核心区域，行间距约1.5倍）
• 输入提示语（题目下方，小字号灰色文字）

底部区域（高度约80px）：

• 操作按钮区域（4个按钮均匀分布）
• 按钮间距约12px，距离底部约20px

交互模式

• 点击空白处：弹出键盘或显示答案选项，支持文字输入
• 点击"看答案"：显示正确答案，挖空处填充正确内容（绿色文字）
• 点击"隐藏答案"：隐藏已显示的答案，恢复挖空状态
• 点击"语音输入"：启动语音识别，用户说出答案后自动填入
• 点击"评论"：跳转至评论页面，查看或发表评论
• 点击"上一题"/"下一题"：切换至相邻题目，自动保存当前答案
• 滑动操作：左右滑动切换题目，上下滑动查看长题目内容

操作反馈：

• 答案正确：绿色勾号或成功动画
• 答案错误：红色叉号或温和提示，显示正确答案
• 加载状态：Loading 动画或进度条

视觉风格

• 主色调：
  • 背景：纯白色（#FFFFFF）
  • 高亮色：蓝色（#2196F3，用于按钮和强调）
  • 挖空高亮：黄色（#FFF9C4）或浅蓝色（#E3F2FD）
  • 正确答案：绿色（#4CAF50）
  • 错误答案：红色（#F44336）
• 字体：
  • 标题：18pt，粗体（600）
  • 题目内容：16pt，常规（400）
  • 提示语：12pt，常规（400），灰色（#757575）
  • 按钮文字：16pt，常规（400）
• 间距与留白：
  • 标题与题目间距：20px
  • 题目行间距：1.5倍（24px）
  • 按钮间距：12px
  • 底部留白：20px

文字内容

标题：

• "阴阳失调的基本概念"（知识点标题）

题目内容：

• "阴阳失调是指机体在疾病发展过程中，由于____、____等因素的作用，导致阴阳失调而出现的病理状态。"（挖空题目示例）

按钮文字：

• "看答案"（显示正确答案）
• "隐藏答案"（隐藏已显示的答案）
• "评论"（查看评论，带数量如"12"）

提示语：

• "点击空白处填入答案"（操作提示）
• "或点击麦克风使用语音输入"（语音输入提示）

导航文字：

• "上一题"（返回上一题）
• "下一题"（进入下一题）
• "3/10"（当前进度）

---

界面 4：卡片式记忆与挖空切换页

坐标范围：X:599-731, Y:74-504 位置：中间偏右

功能定位

该界面是 卡片式记忆与挖空切换页，展示阴阳失调基本概念、记忆状态按钮，支持用户在卡片式学习和挖空练习之间切换。

核心 UI 元素

顶部导航栏（3个元素）：

• 左侧：返回按钮（← 图标，白色背景）
• 中部：标题文字（如"阴阳失调"，16pt 粗体）
• 右侧：学习模式切换（Tab 切换，"卡片式"|"挖空"，当前选中"卡片式"）

中部卡片区（主要展示区）：

• 知识点卡片（圆角矩形，白色背景，带阴影效果）
  • 卡片标题："阴阳失调的基本概念"（18pt 粗体）
  • 卡片内容：详细知识点文字（14pt 常规，行间距1.6倍）
  • 卡片尺寸：占据界面约70%高度，左右留白各20px
• 记忆状态指示器（右上角，圆形标签，如"已记住"绿色或"未记住"橙色）

底部操作区（4个按钮）：

• 左侧："未记住"按钮（橙色背景 #FF9800，白色文字，16pt 常规）
• 右侧："已记住"按钮（绿色背景 #4CAF50，白色文字，16pt 常规）
• 底部左侧："上一题"按钮（灰色背景，白色文字）
• 底部右侧："下一题"按钮（蓝色背景 #2196F3，白色文字）

其他交互元素：

• 进度指示器（如"5/20"，显示当前卡片进度）
• 卡片阴影（box-shadow: 0 2px 8px rgba(0,0,0,0.1)）
• 滑动提示（如"← 滑动查看更多 →"，小字号灰色文字）

布局结构

顶部区域（高度约60px）：

• 状态栏（显示时间、电池等系统图标）
• 导航栏（返回按钮、标题、模式切换Tab）

中部区域（占据约70%高度）：

• 知识点卡片（居中显示，圆角矩形，带阴影）
• 卡片内部布局：
  • 标题（顶部，留白约16px）
  • 内容（中部，留白约20px）
  • 记忆状态标签（右上角）
• 卡片左右留白：各20px
• 卡片上下留白：各24px

底部区域（高度约80px）：

• 记忆状态按钮（左右分布，占据约60%宽度）
• 导航按钮（底部两侧，占据剩余空间）
• 按钮间距约12px，距离底部约20px

交互模式

• 点击"已记住"：标记当前知识点为已记住，卡片显示绿色勾号，自动跳转至下一题
• 点击"未记住"：标记当前知识点为未记住，卡片显示橙色提醒，加入复习计划
• 点击"上一题"/"下一题"：切换至相邻卡片，支持平滑过渡动画
• 滑动操作：左右滑动切换卡片，上下滑动查看长内容
• 切换学习模式：点击顶部Tab，在"卡片式"和"挖空"模式间切换
• 长按卡片：显示操作菜单（如"收藏""分享""报错"等）

操作反馈：

• 已记住：绿色勾号动画，按钮高亮
• 未记住：橙色提醒动画，按钮高亮
• 卡片切换：平滑滑动动画（约300ms）
• 模式切换：Tab切换动画，界面淡入淡出

视觉风格

• 主色调：
  • 背景：浅灰色（#F5F5F5）
  • 卡片背景：纯白色（#FFFFFF）
  • 已记住：绿色（#4CAF50）
  • 未记住：橙色（#FF9800）
  • 主按钮：蓝色（#2196F3）
  • 次要按钮：灰色（#9E9E9E）
• 字体：
  • 卡片标题：18pt，粗体（600）
  • 卡片内容：14pt，常规（400），行间距1.6倍
  • 按钮文字：16pt，常规（400）
  • 进度指示：12pt，常规（400），灰色（#757575）
• 间距与留白：
  • 卡片内边距：20px
  • 卡片与顶部留白：24px
  • 卡片与底部留白：24px
  • 按钮间距：12px
  • 内容行间距：1.6倍（22px）
• 视觉效果：
  • 卡片阴影：box-shadow: 0 2px 8px rgba(0,0,0,0.1)
  • 圆角：border-radius: 12px
  • 按钮圆角：border-radius: 8px

文字内容

标题：

• "阴阳失调"（知识点分类标题）

卡片内容：

• "阴阳失调的基本概念"（卡片标题）
• "阴阳失调是指机体在疾病发展过程中，由于阴阳消长平衡失调而出现的病理状态。在正常情况下，人体阴阳保持着动态平衡..."（卡片详细内容）

按钮文字：

• "已记住"（标记为已掌握）
• "未记住"（标记为需复习）
• "上一题"（返回上一卡片）
• "下一题"（进入下一卡片）

模式切换：

• "卡片式"（当前模式，蓝色高亮）
• "挖空"（切换模式）

进度指示：

• "5/20"（当前进度）
• "← 滑动查看更多 →"（滑动提示）

---

界面 5：麻黄汤禁忌症选择题页

坐标范围：X:805-937, Y:74-504 位置：右侧

功能定位

该界面是 选择题答题页，展示麻黄汤禁忌症选择题选项、答题按钮，支持用户进行选择题练习。

核心 UI 元素

顶部导航栏（3个元素）：

• 左侧：返回按钮（← 图标，白色背景）
• 中部：题目编号（如"第 8 题"，16pt 粗体）
• 右侧：计时器（如"02:35"，16pt 常规，可选功能）

中部题目区（2个核心元素）：

• 题目展示区：
  • 题目标题："麻黄汤的禁忌症包括哪些？"（18pt 粗体）
  • 题目类型标识：右上角标签"多选题"或"单选题"（12pt，蓝色背景）
  • 题目说明：如"请选择所有正确的选项"（14pt 常规，灰色）
• 选项列表（4-6个选项）：
  • 选项 A："A. 体虚者"（16pt 常规）
  • 选项 B："B. 孕妇"（16pt 常规）
  • 选项 C："C. 高血压患者"（16pt 常规）
  • 选项 D："D. 表实无汗者"（16pt 常规）
  • 每个选项：圆角矩形，左侧圆圈复选框，右侧选项文字
  • 选项间距：12px

底部操作区（3个按钮）：

• 左侧："收藏"按钮（星形图标，白色背景，灰色边框）
• 中间："提交答案"按钮（蓝色背景 #2196F3，白色文字，18pt 粗体，占据约60%宽度）
• 右侧："下一题"按钮（绿色背景 #4CAF50，白色文字，18pt 粗体，初始隐藏）

答题后显示区域（隐藏元素）：

• 答案反馈：
  • 正确提示："✓ 回答正确！"（绿色文字，16pt 粗体）
  • 错误提示："✕ 回答错误"（红色文字，16pt 粗体）
• 答案解析：
  • "正确答案：A、B、C"（14pt 粗体）
  • "解析：麻黄汤具有发汗解表、宣肺平喘的功效，但对于体虚者、孕妇、高血压患者等人群应慎用或禁用..."（14pt 常规）
  • 解析区域背景：浅蓝色（#E3F2FD）

其他交互元素：

• 进度指示器（如"8/25"，显示当前题目进度）
• 进度条（底部或顶部，蓝色进度条）
• 快捷键提示（如"按 Enter 提交"，小字号灰色文字）

布局结构

顶部区域（高度约60px）：

• 状态栏（显示时间、电池等系统图标）
• 导航栏（返回按钮、题目编号、计时器）

中部区域（占据约60%高度）：

• 题目展示区（顶部，留白约16px）
• 题目类型标签（右上角）
• 题目内容（中部，行间距约1.5倍）
• 选项列表（下方，垂直排列）
  • 每个选项：圆角矩形，高度约48px
  • 选项间距：12px
  • 选项左侧：复选框或单选框
  • 选项右侧：选项文字
• 答案解析区（底部，初始隐藏，答题后显示）

底部区域（高度约80px）：

• 操作按钮区域（3个按钮均匀分布）
• 按钮间距约12px，距离底部约20px
• 进度条（底部或顶部，高度约4px）

交互模式

• 点击选项：选中/取消选中选项
  • 单选题：点击后选中，再次点击其他选项切换选择
  • 多选题：点击后选中/取消选中，可同时选择多个
  • 选中状态：蓝色边框，蓝色复选框勾号
• 点击"提交答案"：验证答案
  • 正确：显示绿色勾号和答案解析
  • 错误：显示红色叉号、正确答案和解析
  • 提交后"提交答案"按钮变为"下一题"按钮
• 点击"下一题"：跳转至下一题，自动保存答题记录
• 点击"收藏"：收藏当前题目，收藏图标变为金色
• 滑动操作：上下滑动查看长题目或多个选项
• 快捷键（可选）：
  • 按 A/B/C/D 选择对应选项
  • 按 Enter 提交答案
  • 按 → 进入下一题

操作反馈：

• 选项选中：蓝色边框，复选框勾号动画
• 答案正确：绿色勾号，成功提示音（可选）
• 答案错误：红色叉号，温和提示音（可选）
• 答案解析：淡入动画（约300ms）
• 按钮点击：高亮或背景色变化

视觉风格

• 主色调：
  • 背景：纯白色（#FFFFFF）
  • 选项背景：浅灰色（#F5F5F5）
  • 选项选中：蓝色边框（#2196F3）
  • 主按钮：蓝色（#2196F3）
  • 正确答案：绿色（#4CAF50）
  • 错误答案：红色（#F44336）
  • 解析背景：浅蓝色（#E3F2FD）
• 字体：
  • 题目标题：18pt，粗体（600）
  • 选项文字：16pt，常规（400）
  • 按钮文字：18pt，粗体（600）
  • 解析文字：14pt，常规（400）
  • 进度指示：12pt，常规（400），灰色（#757575）
• 间距与留白：
  • 题目与选项间距：20px
  • 选项间距：12px
  • 按钮间距：12px
  • 底部留白：20px
  • 选项内边距：12px
• 视觉效果：
  • 选项圆角：border-radius: 8px
  • 按钮圆角：border-radius: 8px
  • 复选框：圆形或方形，蓝色边框
  • 阴影：box-shadow: 0 2px 4px rgba(0,0,0,0.1)

文字内容

导航文字：

• "第 8 题"（题目编号）
• "02:35"（计时器，可选）

题目内容：

• "麻黄汤的禁忌症包括哪些？"（题目标题）
• "多选题"（题目类型标签）
• "请选择所有正确的选项"（题目说明）

选项内容：

• "A. 体虚者"
• "B. 孕妇"
• "C. 高血压患者"
• "D. 表实无汗者"

按钮文字：

• "提交答案"（验证答案）
• "下一题"（进入下一题）

答案反馈：

• "✓ 回答正确！"（正确提示）
• "✕ 回答错误"（错误提示）

答案解析：

• "正确答案：A、B、C"
• "解析：麻黄汤具有发汗解表、宣肺平喘的功效，但对于体虚者、孕妇、高血压患者等人群应慎用或禁用。表实无汗者反而是麻黄汤的适应证，不是禁忌症。"

进度指示：

• "8/25"（当前进度）
• "按 Enter 提交"（快捷键提示）

---

界面 6：卡片式记忆与挖空切换页（底部）

坐标范围：X:599-731, Y:544-975 位置：底部

功能定位

该界面是 卡片式记忆与挖空切换页的批量展示形式，展示多个知识卡片列表、批量操作按钮，支持用户批量管理学习进度和快速浏览知识点。

核心 UI 元素

顶部导航栏（3个元素）：

• 左侧：返回按钮（← 图标，白色背景）
• 中部：标题文字（如"阴阳失调 - 知识点"，16pt 粗体）
• 右侧：编辑模式按钮（"编辑"文字或铅笔图标，14pt 常规）

中部卡片区（主要展示区）：

• 卡片列表（垂直滚动，4-8个卡片）：
  • 卡片 1："阴阳失调的基本概念"（已记住，绿色标签）
  • 卡片 2："阴阳失调的病因病机"（未记住，橙色标签）
  • 卡片 3："阴阳失调的临床表现"（已记住，绿色标签）
  • 卡片 4："阴阳失调的辨证要点"（未记住，橙色标签）
  • 卡片 5："阴阳失调的治疗原则"（未学习，灰色标签）
  • 每个卡片：
    • 圆角矩形（border-radius: 12px）
    • 卡片高度：约80px
    • 卡片间距：12px
    • 左侧：状态图标（✓ 已记住/○ 未记住/⊗ 未学习）
    • 中部：卡片标题和摘要（2-3行文字）
    • 右侧：记忆状态标签（绿色/橙色/灰色）
    • 卡片阴影：box-shadow: 0 2px 6px rgba(0,0,0,0.08)

底部操作区（编辑模式隐藏，常规模式显示）：

• 常规模式（2个按钮）：
  • 左侧："开始学习"按钮（蓝色背景 #2196F3，白色文字，16pt 粗体）
  • 右侧："智能推荐"按钮（绿色背景 #4CAF50，白色文字，16pt 粗体）
• 编辑模式（3个按钮）：
  • 左侧："全选"按钮（白色背景，灰色边框）
  • 中间："批量标记已记住"按钮（绿色背景 #4CAF50，白色文字）
  • 右侧："批量删除"按钮（红色背景 #F44336，白色文字）

其他交互元素：

• 搜索栏（顶部，可选）：
  • 搜索图标（左侧）
  • 占位符文字："搜索知识点..."
  • 清除按钮（右侧，× 图标）
• 筛选器（搜索栏下方，可选）：
  • "全部"（当前选中，蓝色下划线）
  • "已记住"（绿色）
  • "未记住"（橙色）
  • "未学习"（灰色）
• 进度统计（顶部或底部）：
  • "已记住：3"（绿色）
  • "未记住：2"（橙色）
  • "未学习：1"（灰色）

布局结构

顶部区域（高度约100px）：

• 状态栏（显示时间、电池等系统图标）
• 导航栏（返回按钮、标题、编辑按钮）
• 搜索栏（可选，高度约48px）
• 筛选器（可选，Tab 切换样式）

中部区域（占据约70%高度）：

• 卡片列表（垂直滚动）
• 每个卡片：
  • 卡片内边距：16px
  • 状态图标：左侧，尺寸约24px
  • 卡片内容：中部，占据约70%宽度
  • 状态标签：右侧，圆角矩形，宽度约60px
• 卡片间距：12px
• 列表左右留白：各16px

底部区域（高度约80px）：

• 操作按钮区域（2-3个按钮均匀分布）
• 按钮间距约12px，距离底部约20px
• 进度统计（可选，显示在按钮上方）

交互模式

• 点击卡片：进入知识点详情页（卡片式或挖空模式）
  • 如果已记住，显示复习提示
  • 如果未记住，直接进入学习
• 长按卡片：进入编辑模式，显示复选框
  • 长按后可以多选卡片
  • 选中状态：蓝色边框 + 蓝色勾号
• 点击"编辑"按钮：进入/退出编辑模式
  • 进入编辑模式：所有卡片显示复选框
  • 退出编辑模式：取消选择，恢复常规模式
• 点击"开始学习"：从未记住的知识点开始学习
  • 按顺序学习所有未记住的知识点
  • 自动跳过已记住的知识点
• 点击"智能推荐"：AI 推荐当前应学习的知识点
  • 基于遗忘曲线算法
  • 优先推荐需要复习的知识点
• 批量操作（编辑模式）：
  • "全选"：选中/取消选中所有卡片
  • "批量标记已记住"：将选中的卡片标记为已记住
  • "批量删除"：删除选中的卡片（二次确认）
• 滑动操作：
  • 上下滑动浏览卡片列表
  • 左滑卡片显示快捷操作（标记、删除、分享）
• 搜索功能：
  • 输入关键词实时筛选卡片
  • 支持模糊搜索
• 筛选功能：
  • 点击 Tab 筛选不同状态的知识点
  • 支持组合筛选

操作反馈：

• 卡片点击：高亮或背景色变化（约200ms）
• 长按卡片：震动反馈（可选），显示复选框动画
• 批量操作：成功提示（如"已标记 3 个知识点为已记住"）
• 编辑模式切换：按钮文字变化（"编辑" ↔ "完成"）
• 搜索/筛选：列表实时更新，淡入淡出动画（约300ms）

视觉风格

• 主色调：
  • 背景：浅灰色（#F5F5F5）
  • 卡片背景：纯白色（#FFFFFF）
  • 已记住：绿色（#4CAF50）
  • 未记住：橙色（#FF9800）
  • 未学习：灰色（#9E9E9E）
  • 主按钮：蓝色（#2196F3）
  • 成功按钮：绿色（#4CAF50）
  • 危险按钮：红色（#F44336）
  • 选中状态：蓝色（#2196F3）
• 字体：
  • 卡片标题：16pt，粗体（600）
  • 卡片摘要：12pt，常规（400），灰色（#757575）
  • 按钮文字：16pt，粗体（600）
  • 状态标签：12pt，常规（400）
  • 搜索栏：14pt，常规（400）
• 间距与留白：
  • 卡片内边距：16px
  • 卡片间距：12px
  • 按钮间距：12px
  • 底部留白：20px
  • 列表左右留白：16px
• 视觉效果：
  • 卡片圆角：border-radius: 12px
  • 按钮圆角：border-radius: 8px
  • 卡片阴影：box-shadow: 0 2px 6px rgba(0,0,0,0.08)
  • 选中边框：border: 2px solid #2196F3
  • 状态标签：圆角矩形，border-radius: 4px

文字内容

标题：

• "阴阳失调 - 知识点"（页面标题）

搜索栏：

• "搜索知识点..."（占位符文字）

筛选器：

• "全部"（显示所有卡片，当前选中）
• "已记住"（只显示已记住的卡片）
• "未记住"（只显示未记住的卡片）
• "未学习"（只显示未学习的卡片）

卡片内容：

• "阴阳失调的基本概念"（卡片 1 标题）
• "阴阳失调是指机体在疾病发展过程中..."（卡片 1 摘要）
• "阴阳失调的病因病机"（卡片 2 标题）
• "阴阳失调的临床表现"（卡片 3 标题）
• "阴阳失调的辨证要点"（卡片 4 标题）
• "阴阳失调的治疗原则"（卡片 5 标题）

状态标签：

• "已记住"（绿色标签）
• "未记住"（橙色标签）
• "未学习"（灰色标签）

按钮文字：

• "编辑"（进入编辑模式）
• "完成"（退出编辑模式）
• "开始学习"（开始学习未记住的知识点）
• "智能推荐"（AI 推荐学习内容）
• "全选"（选中所有卡片）
• "批量标记已记住"（批量标记）
• "批量删除"（批量删除）

进度统计：

• "已记住：3"（绿色文字）
• "未记住：2"（橙色文字）
• "未学习：1"（灰色文字）

操作反馈提示：

• "已标记 3 个知识点为已记住"（成功提示）
• "已删除 2 个知识点"（删除提示）
• "请先选择要操作的知识点"（警告提示）

---

设计总结

整体设计风格

这组 UI 设计稿展示了 AI 学习 App 的核心功能界面，整体风格具有以下特点：

1. 简洁清晰：白色背景为主，强调内容可读性
2. 功能导向：每个界面聚焦单一核心功能，避免复杂交互
3. AI 属性突出：通过机器人图标、"智能推荐"等元素强化 AI 学习特色
4. 学习流程完整：从首页 → 知识目录 → 学习详情 → 练习答题 → 记忆管理，形成完整学习闭环

UI/UX 设计原则

视觉设计

• 色彩方案：
  • 主色调：白色背景 + 蓝色强调（代表学习、科技）
  • 辅助色：灰色（次要信息）、绿色（正确/已记住）、红色（错误/未掌握）
  • 状态色：用于标识不同学习状态
• 字体规范：
  • 无衬线字体为主（如苹方、Roboto）
  • 标题：16-18pt，粗体
  • 正文：14-16pt，常规
  • 辅助信息：10-12pt
• 间距布局：
  • 统一使用 8px/16px/24px 网格系统
  • 模块间留白充足（16-24px）
  • 按钮和文字间距适中（8-12px）

交互设计

• 操作反馈：
  • 按钮点击：高亮或背景色变化
  • 正确答案：绿色勾号或成功提示
  • 错误答案：红色叉号或温和提示
  • 加载状态：Loading 动画或进度条
• 流程优化：
  • 减少操作步骤，快速进入学习
  • 提供默认配置，降低使用门槛
  • 支持快捷操作（如滑动、长按）
• 学习激励：
  • 可视化学习进度（如学习概览卡片）
  • 记忆状态标识（已记住/未记住）
  • 新任务提醒（弹窗通知）

响应式设计

• 移动端优先：主要使用场景为手机
• 适配策略：
  • 小屏手机（< 5.5英寸）：紧凑布局
  • 大屏手机（5.5-6.5英寸）：舒适布局
  • 平板设备（> 7英寸）：可展示更多内容
• 横竖屏切换：支持自动适配

待优化功能点

1. 数据可视化增强：

   • 学习进度仪表板（图表展示）
   • 记忆曲线可视化
   • 学习数据统计与分析

2. 社交互动功能：

   • 学习结果分享到社交平台
   • 学习成就徽章系统
   • 排行榜（班级/全校）

3. 个性化推荐：

   • 基于学习历史的智能推荐
   • 个性化复习计划生成
   • 学习难度自适应调整

4. 离线功能：

   • 支持离线下载题库
   • 离线学习模式
   • 数据同步机制

5. 无障碍设计：

   • 语音播报和语音输入
   • 高对比度模式
   • 大字体模式

---

技术实现建议

前端技术栈

• 框架：React Native 或 Flutter（跨平台移动应用）
• 状态管理：Redux 或 MobX
• UI 组件库：
  • iOS：UIKit 或 SwiftUI
  • Android：Material Design 或 Jetpack Compose
• 网络请求：Axios 或 Fetch API
• 本地存储：AsyncStorage 或 SQLite

后端技术栈

• API 服务：Node.js + Express 或 Python + Django
• 数据库：PostgreSQL（关系型）+ MongoDB（文档型）
• AI 集成：
  • 语音识别：阿里云、腾讯云语音服务
  • 自然语言处理：OpenAI API 或自建模型
• 文件存储：阿里云 OSS 或腾讯云 COS

核心功能模块

1. 用户管理：注册、登录、个人资料
2. 知识库管理：知识点、题库、分类
3. 学习流程：学习计划、进度跟踪、记忆曲线
4. AI 交互：语音识别、自然语言处理、智能推荐
5. 数据统计：学习数据分析、报表生成

---

报告生成时间：2026-03-28 图片来源：mmexport1774685607036.jpg 分析工具：ui-layout-analyzer 技能 状态：✅ 分析完成