Appearance
模多多教育版正式交付版UI/UX设计v1
模多多-教育版-小学段-V1.0 UI/UX设计
本部分将详细阐述“模多多教育版”学生学习前台和教师管理后台关键页面的交互逻辑和布局细节，以确保产品设计符合“课程为本，AI赋能”的核心理念，并严格遵守各项教育政策。
I. 学生学习前台
核心交互理念： 学生前台的交互应以课程学习路径为核心，AI功能作为课程中的任务和体验环节自然融入，而非独立的工具入口。界面设计应趣味性强、引导性强、安全性高。
1. 页面名称：学生仪表盘 / 主页 (Student Dashboard / Homepage)
整体布局： 采用简洁、清晰的两段式布局：顶部导航栏和主体内容区。底部栏可选，但为保持简洁性, 初期可省略。
顶部导航栏 (固定，高度约 60-80px)：
左侧： 产品Logo“模多多教育版”。设计应卡通化、友好，符合小学生审美。
右侧： 学生姓名/头像（圆形，点击可进入个人资料），通知图标（小铃铛，有未读消息时显示红点），设置/退出链接（小齿轮图标或下拉菜单）。这些元素应排列整齐，留有足够点击空间。
主体内容区 (占据屏幕大部分空间)：
区域一：“我的课程” (My Courses) - 占据左侧或顶部约 60% 的内容区域：
布局： 以**卡片（Card）**形式展示学生已加入的课程。每行可显示 2-3 张卡片，支持左右滑动或分页浏览（如果课程数量多）。
卡片内容： 每张卡片应包含：
课程图片/图标： 大而醒目，可带有可爱的课程主题插图或颜色编码，视觉上吸引学生。
课程名称： 清晰的无衬线字体，字号偏大。
（可选）学习进度条： 视觉化明显，例如采用填充式或环形进度条，直观显示课程完成度。
交互：
点击卡片： 学生点击任一课程卡片，无缝跳转到该课程的**“课程学习页面”**，并默认加载该课程的第一个未完成任务或章节。
区域二：“待完成任务” (To-Do Tasks) - 占据右侧或底部约 40% 的内容区域：
布局： 列表形式展示当前需要学生完成的任务。可按截止日期或所属课程进行排序。
任务项内容： 每个任务项应包含：
任务名称： 简洁明了，使用清晰的图标区分任务类型（如阅读、视频、AI互动、作业）。
所属课程： 提示该任务属于哪个课程。
截止日期（如有）： 醒目显示，提醒学生。
交互：
点击任务项： 学生点击任务项，直接跳转到**“课程学习页面”**内的对应任务环节，并自动滚动到该任务位置。
UX 注意： 此页面设计严格遵循“淡化AI功能模块的独立入口”原则。顶部导航栏或主体内容区不应出现独立的AI工具图标或入口（如实例图page2.png顶部的“AI作文”、“AI英语”等）。所有AI功能都将通过“我的课程”或“待完成任务”进入，并在课程情境中体验。
2. 页面名称：课程学习页面 (Course Learning Page)
整体布局： 采用经典的三栏式布局，确保内容和导航的清晰度。
顶部导航栏 (固定，与主页顶部导航栏一致)： 保持品牌一致性，提供Logo、学生信息、通知、设置/退出等。
左侧导航栏 (固定，宽度约 200-250px)：
内容： 显示当前课程的章节和任务列表，以树状或层级列表形式呈现。
视觉反馈： 高亮显示当前学生正在学习的章节/任务，提供视觉引导。
交互：
点击章节/任务： 允许学生在已解锁的章节/任务间导航，点击后中间内容区域会加载对应内容。
折叠/展开： 章节可折叠/展开，方便学生概览课程结构。
中间内容区域 (可滚动，占据屏幕大部分空间)：
默认状态： 显示当前课程内容（如教师上传的PPT图片、视频播放器、文本阅读区）。内容区应有充足留白，保证易读性。
AI互动环节时 (动态切换)：
界面切换： 此区域会动态切换到相应的AI体验模块界面。切换应平滑，带有适度动画效果，避免突兀。
任务指引： 在AI模块界面上方或侧边，提供清晰的任务指引。例如：“请用AI绘画完成这张图的创作，感受AI是如何识别物体的”；“请跟着AI语音小助手读出这些词语，看看AI能否识别”。
交互元素：
AI绘画任务： 包含色彩鲜明、易于拖拽的预设素材选择区（如右侧或底部），中央是画布区，下方或侧边有“选择素材”、“组合”、“清除”、“提交”等操作按钮。
AI对话任务： 下拉菜单选择预设对话脚本（如“认识小动物对话”、“问候语对话”，高年级课件可以在限定时间开放自由对话。
AI识图： 包含上传图片按钮（或摄像头调用），AI识别结果展示区（如识别出的物体名称、分类）。
安全提示： 在AI互动模块界面内，以醒目的颜色和图标（如警示三角形）呈现的安全提示弹窗或文字。文字应简洁明了，如对话气泡形式或底部固定提示条。例如：“请在老师指导下进行本环节”、“请不要输入你的个人信息或考试题目”。
作业练习界面：
布局： 界面左侧显示题目编号和进度卡片，中间区域显示题干和选项。
交互： 选项易于点选，下方有“提交”、“下一题”等按钮。
答题反馈： 提交后，学生可立即查看系统给出的正确答案、解析（非AI生成）、视频讲解等反馈。反馈应以积极和中性的方式呈现（如绿色对勾），避免使用可能引起焦虑的强烈负面反馈（如大红叉、刺耳音效）。
右侧辅助信息/工具栏 (可选，宽度约 180-220px)：
内容： 可包含笔记区、相关资源链接（如词汇表、扩展阅读）、课程公告等。
交互： 可折叠/展开，不强制占用屏幕空间。
底部 (固定，高度约 50-60px)：
导航按钮： “上一个任务”/“下一个任务”导航按钮，清晰可见，引导学生按课程顺序学习。
任务完成提交按钮： 如果当前环节是需要提交的（如作业或AI创作任务），则显示此按钮。
3. 页面名称：课程学习页面 - 实时课堂模式 (Course Learning Page - Live Lesson Mode)
整体布局： 适应实时课堂的布局，以教师广播内容为核心，辅以必要的互动和辅助信息。
顶部导航栏 (固定，与主页顶部导航栏一致)： 保持品牌一致性，提供Logo、学生信息、通知、设置/退出等。可增加“离开课堂”按钮。
主广播内容区 (占据屏幕大部分空间，可全屏)：
内容： 显示教师广播的实时视频流（教师摄像头画面或屏幕共享内容，即教师正在展示的课件内容）。
视觉： 视频流应清晰流畅，支持全屏模式。
交互： 学生在此区域通常为观看模式，无法直接操作教师广播内容。
左侧导航栏 (可收起/展开)：
内容： 仍然显示当前课程的章节和任务列表，但在此模式下主要用于查看进度或快速跳转至教师指定的课程点（如果教师允许）。
视觉反馈： 高亮显示教师当前正在讲解的章节/任务。
交互： 学生点击章节/任务时，若教师未允许自由跳转，则会提示“请跟随教师的课堂进度”。
右侧互动与辅助区 (可收起/展开，宽度约 250-300px)：
内容：
课堂聊天/提问区： 学生可在此发送文字消息或提问（教师可控制是否开启）。消息区应支持滚动，新消息高亮。
（可选）举手功能： 按钮，学生点击表示有问题或需要发言。
（可选）投票/问卷区： 当教师发起投票时，此区域显示投票选项和提交按钮。
AI互动任务区 (动态显示)： 这是关键！ 当教师在直播中触发AI互动任务（如AI对话、AI绘画）时，此区域会动态切换，显示该AI任务的操作界面。
AI对话任务： 显示对话气泡、预设选项或限定输入框，学生在此完成与AI的互动。
AI绘画任务： 显示小画布、预设素材选择区、组合按钮等，学生在此完成AI绘画任务。
任务指引和安全提示会在此区域内清晰显示，与非直播模式下的AI互动界面一致。
交互： 学生在此区域进行实时互动，如发送消息、投票、完成AI任务。
底部控制栏 (可收起/展开，高度约 50-60px)：
内容：
麦克风/摄像头开关： 学生可控制自己的麦克风和摄像头（教师可控制是否允许学生开启）。
音量控制： 调节直播音量。
（可选）屏幕共享： 学生可共享屏幕（教师可控制是否允许）。
交互： 简洁的图标按钮。
II. 教师管理后台
核心交互理念： 教师后台的交互应以课程管理为核心，提供清晰、高效的工具，辅助教师进行课程设计、教学管理和学生监控。AI辅助功能应明确标识，并强调教师的最终决策权。
1. 页面名称：教师仪表盘 (Teacher Dashboard)
整体布局： 采用顶部导航栏、左侧主菜单和主体内容区的三段式布局。
顶部导航栏 (固定，高度约 60-80px)：
左侧： 产品Logo“模多多教育版”。
右侧： 教师姓名/头像，通知图标（小铃铛），帮助中心链接，设置/退出链接。
左侧主菜单 (固定，宽度约 200-250px)：
核心功能入口： 以**“课程管理”为核心入口**，置于最醒目位置。其他入口如“班级管理”、“学生管理”、“作业批改”、“作品管理”、“数据分析/报告”、“资源中心”、“直播课堂”等以列表形式排列。
视觉反馈： 当前选中的菜单项应高亮显示。
交互：
点击菜单项： 教师点击菜单项，主体内容区会加载对应管理页面的概览或列表。
主体内容区 (占据屏幕大部分空间)：
概览卡片区 (顶部)：
布局： 以卡片形式展示关键教学数据，如“进行中的课程数量”、“待批改作业数量”、“近期学生动态摘要”。
视觉： 数据图表应简洁明了，关键信息突出显示。
快捷入口按钮区 (下方)：
布局： 放置常用操作的快捷入口按钮，如“创建新课程”、“发布作业”、“开始直播”。
视觉： 使用清晰的图标和文字标签。
（可选）可定制仪表板视图： 允许教师个性化仪表板视图，通过拖拽或配置小组件，快速访问关键指标和常用工具。
2. 页面名称：课程管理系统页面 (Course Management Page - 创建/编辑课程)
整体布局： 采用经典的三栏式布局，是教师后台最复杂但最重要的页面。
顶部操作栏 (固定，高度约 60-80px)：
操作按钮： “创建新课程”按钮（用于新建课程），“保存课程”按钮（保存当前编辑），“发布课程”按钮（将课程发布给学生）。这些按钮应有明确的视觉层级和状态反馈（如保存成功提示）。
左侧课程列表/结构树 (固定，宽度约 200-250px)：
内容： 展示教师创建的所有课程列表。选中一个课程后，以树状结构展示该课程的章节和具体学习活动（课件、视频、AI互动环节、作业等）。
交互：
点击课程/章节/活动： 选中后，中间编辑区会加载对应的编辑界面。
拖拽调整： 允许教师拖拽调整章节和学习活动的顺序，提供视觉反馈（如拖拽时的虚线框）。
添加/删除： 提供“+”号或右键菜单，方便添加新章节、新活动。
中间编辑区 (核心区域，可滚动，占据屏幕大部分空间)：
动态显示： 当在左侧结构树选中一个学习活动时，此区域会动态显示其编辑界面。
课件上传： 提供文件上传控件（支持PPT、图片、文本、视频），显示已上传文件列表，可预览、删除。
嵌入AI互动环节：
AI模块列表： 在编辑区侧边或弹出框中，提供可选的AI互动模块列表（如限定式AI绘画任务、AI语音识别小挑战）。模块应有清晰的图标和名称。
拖拽嵌入： 教师可将选中的AI模块拖拽到课程结构树中（左侧），或直接在中间编辑区点击“添加AI互动”按钮。
编辑界面： 当选中已嵌入的AI模块后，中间编辑区会显示该AI模块的预览或基本设置，右侧属性区则显示详细配置。
内容编辑器： 提供富文本编辑器，用于编辑课程文本内容、任务说明等。
右侧属性/配置区 (可折叠/展开，宽度约 250-300px)：
动态显示： 当在中间编辑区选中一个课程元素（如章节、课件、AI互动环节）时，此区域显示其详细属性和配置选项。
AI互动环节配置：
表单清晰： 提供清晰的表单，用于设置AI绘画任务的可用素材范围（如选择预设素材包）、AI作文任务的词汇填充库（如上传词汇列表）。
参数设定： 设定其在课程中的出现时机和具体要求（如任务说明、完成标准）。
细粒度控制： 教师后台必须提供对学生端AI功能在“课程级别”的细粒度控制。例如，此处可设置“本课程中AI绘画仅限使用动物和植物素材”、“本课程中AI作文只允许使用提供的100个词汇”。UI上应有明确的开关、选择器和输入框来实现这些控制。
帮助提示： 提供必要的帮助提示或说明文字，解释每个配置项的作用。
安全和伦理提示： 在涉及学生数据和AI功能设置的区域，提供明确的安全和伦理提示，可采用信息卡片、警告图标或提示文本的形式，提醒教师遵守政策规定。
3. 页面名称：直播课堂管理页面 (Live Lesson Management Page) - 新增页面
整体布局： 采用三栏式布局，左侧为直播控制区，中间为广播主画面，右侧为学生互动/监控区。
顶部导航栏 (固定，与教师仪表盘顶部导航栏一致)： 保持品牌一致性，提供Logo、教师信息、通知、帮助中心、设置/退出等。可增加“结束直播”按钮。
左侧直播控制区 (固定，宽度约 250-300px)：
直播状态： 显示当前直播状态（未开始/直播中/已结束）。
课程选择： 下拉菜单选择要广播的课程。
课件导航： 列表显示当前课程的章节和任务，教师可点击跳转，中间广播画面随之切换。
麦克风/摄像头控制： 开关按钮，控制教师的音视频输入。
屏幕共享控制： 按钮，选择共享整个屏幕、特定应用窗口或浏览器标签页。
开始/暂停/结束直播按钮： 核心操作按钮，有明确的视觉反馈。
课堂设置： 弹出菜单，控制学生麦克风/摄像头权限、聊天权限、举手功能开关等。
AI互动触发器： 这是关键！
AI模块列表： 列表显示课程中已嵌入的AI互动任务（如AI对话任务、AI绘画任务）。
“触发”按钮： 教师点击某个AI任务旁的“触发”按钮，学生的“课程学习页面”将动态切换到该AI互动界面，并开始计时（如果任务有时间限制）。
“收回”按钮： 教师可选择“收回”AI互动界面，学生端返回直播主画面。
AI任务进度概览： 简要显示当前AI任务的完成情况（如“10/30名学生已完成AI绘画”）。
中间广播主画面 (占据屏幕大部分空间)：
内容： 实时显示教师的摄像头画面、屏幕共享内容（即教师正在讲解的课件内容）。
视觉： 视频流应清晰流畅，支持全屏预览。
AI任务预览： 当教师触发AI互动任务时，此区域可缩小显示直播画面，并在旁边或下方小窗口预览学生端的AI任务界面，方便教师指导。
右侧学生互动/监控区 (可收起/展开，宽度约 250-300px)：
学生列表： 显示当前在线学生列表，可查看学生在线状态、举手状态。
课堂聊天/提问区： 显示学生发送的实时文字消息和提问。教师可在此回复或选择性展示。
AI任务实时反馈： 当AI互动任务触发时，此区域可实时显示学生提交的AI作品缩略图（如AI绘画作品），或AI对话的进度摘要。教师可点击查看具体学生的AI互动详情。
（可选）投票/问卷结果： 实时显示教师发起的投票或问卷结果。
4. 页面名称：作业批改页面 (Teacher Backend - Assignment Grading Page)
整体布局： 通常采用两栏或三栏布局，左侧为作业列表/学生列表，中间为作业详情/批改区，右侧为辅助信息（如学生历史表现）。
左侧： 作业列表（按课程、班级筛选）或学生列表（选中作业后显示提交学生）。
中间批改区：
学生提交内容展示： 清晰展示学生提交的作业内容，包括AI生成内容（如AI作文、AI绘画作品）。
AI辅助批改建议：
视觉区分： AI建议应与教师手动输入区域有明显区分，但又融为一体，方便教师参考和确认。例如，AI对客观题的判断可显示为灰色文本，对主观题可提供关键词匹配或语法检查的建议。
交互： 教师可以点击“采纳AI建议”或手动输入批改意见。
教师批改输入区： 提供富文本编辑器，供教师输入批改意见、评分。
评分区： 明确的评分输入框。
交互： “保存批改”、“发布批改”按钮。
安全提示： 在批改页面中，可再次强调“避免AI直接评价学生”的原则，提醒教师最终判断权归属。