tonytech/kindergarten_java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
d0439bc8b5
kindergarten_java/docs/design/kids-lesson-view-design.md

612 lines
33 KiB
Markdown
Raw Normal View History

提交说明
2026-02-28 16:41:39 +08:00
# 少儿友好授课界面设计方案
> 版本: v1.0
> 设计日期: 2026-02-22
> 设计目标: 为幼儿园小朋友提供沉浸式、互动性强的授课展示界面
---
## 一、背景与问题
### 1.1 当前问题
现有 `LessonView.vue` 授课界面存在以下问题：
- ❌ 教师讲稿直接展示，不适合给小朋友看
- ❌ 界面复杂，左侧导航+中间内容+右侧工具栏
- ❌ 资源展示不直观，需要点击小标签才能查看
- ❌ 没有针对大屏/投屏场景优化
### 1.2 目标场景
```
┌─────────────────────────────────────────────────────────────┐
│ 教室场景 │
│ │
│ ┌──────────┐ ┌──────────────────┐ │
│ │ │ │ │ │
│ │ 教师 │ ──── 操作控制 ────► │ 电子白板/投影 │ │
│ │ │ │ │ │
│ │ 教师控制台│ │ 投屏展示界面 │ │
│ │(iPad/PC) │ ◄──── 状态同步 ──── │ (KidsView) │ │
│ │ │ │ │ │
│ └──────────┘ └──────────────────┘ │
│ ▲ │
│ │ │
│ ┌────┴────┐ │
│ │ 小朋友 │ │
│ │ 观看 │ │
│ └─────────┘ │
└─────────────────────────────────────────────────────────────┘
```
### 1.3 设计原则
根据儿童UI设计最佳实践：
| 原则 | 规范 | 说明 |
|------|------|------|
| **简洁性** | 隐藏所有控制元素 | 全屏沉浸式展示 |
| **大按钮** | ≥60x60px | 方便教师触摸操作 |
| **鲜艳色彩** | 主题色 #FF8C42 | 温暖、活泼的橙色系 |
| **即时反馈** | ≤300ms | 动画过渡流畅 |
| **进度可视** | 环节进度条 | 让小朋友知道进度 |
---
## 二、整体架构
### 2.1 双模式架构
```
┌─────────────────────────────────────────────────────────────┐
│ LessonView.vue │
│ (授课总控制器) │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────┐ ┌─────────────────────┐ │
│ │ TeacherMode │ │ KidsMode │ │
│ │ (教师控制台) │ │ (投屏展示) │ │
│ ├─────────────────────┤ ├─────────────────────┤ │
│ │ • 教师讲稿 │ │ • 绘本大图 │ │
│ │ • 互动要点 │ │ • 视频/动画 │ │
│ │ • 计时器 │ │ • 音频播放 │ │
│ │ • 课堂评价 │ │ • 互动游戏 │ │
│ │ • 笔记记录 │ │ • 环节进度 │ │
│ │ • 资源预览 │ │ • 延伸活动 │ │
│ └─────────────────────┘ └─────────────────────┘ │
│ │ │ │
│ └───────────┬───────────────┘ │
│ │ │
│ 共享状态管理 │
│ (currentStep, currentPage) │
│ │
└─────────────────────────────────────────────────────────────┘
```
### 2.2 实现方式选择
| 方案 | 描述 | 推荐度 |
|------|------|--------|
| **A. 同页面模式切换** | 在 LessonView 中添加模式切换按钮 | ⭐⭐⭐⭐⭐ 推荐 |
| B. 新标签页 | window.open() 打开独立页面 | ⭐⭐⭐ |
| C. 路由切换 | /teacher/lessons/:id/kids | ⭐⭐ |
**推荐方案 A 的理由：**
- 状态共享最简单（同一个 Vue 组件）
- 切换流畅无延迟
- 便于实现双屏同步显示
---
## 三、界面设计详细方案
### 3.1 KidsMode 布局
```
┌────────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ 主内容展示区 │ │
│ │ (绘本/视频/游戏/动画) │ │
│ │ │ │
│ │ 占据 80% 屏幕 │ │
│ │ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │ │
│ │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ 5 │ │ 延伸 │ │ │
│ │ │导入 │ │共读 │ │互动 │ │游戏 │ │总结 │ │ 活动 │ │ │
│ │ │ 🎯 │ │ 📖 │ │ 🎨 │ │ 🎮 │ │ ⭐ │ │ 🎁 │ │ │
│ │ └──┯──┘ └──┯──┘ └──┯──┘ └──┯──┘ └──┯──┘ └──┯──┘ │ │
│ │ └──────┴──────┴──────┴──────┴──────┴──────┘ │ │
│ │ 进度条 │ │
│ └──────────────────────────────────────────────────────────┘ │
│ 底部导航区 (15%) │
└────────────────────────────────────────────────────────────────┘
```
### 3.2 各资源类型展示组件
#### 3.2.1 绘本展示 (EbookViewer)
```
┌────────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ │ │ │
│ │ │ 绘本页面 │ │ │
│ │ │ (大图) │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └──────────────┘ │ │
│ │ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ◀━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━▶ │
│ 翻页控制 │
│ 第 3 页 / 共 12 页 自动播放 ▶ │
└────────────────────────────────────────────────────────────────┘
```
**功能特性：**
- 大图全屏展示
- 点击左侧翻上一页，右侧翻下一页
- 可选自动翻页（可设置间隔）
- 页码显示
- 双指缩放（触屏设备）
#### 3.2.2 视频播放 (VideoPlayer)
```
┌────────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ 视频全屏播放 │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ ▶ ━━━━━━━━━━━━━━━━━━━━━━━━━●━━━━━━━━━━━━━━━━━━━━ 🔊 │ │
│ │ 播放控制条 │ │
│ └──────────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
```
**功能特性：**
- 全屏播放
- 简化控制条（播放/暂停、进度、音量）
- 自动隐藏控制条（3秒无操作）
- 循环播放选项
#### 3.2.3 音频播放 (AudioPlayer)
```
┌────────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ │ │ │
│ │ │ 动画背景 │ │ │
│ │ │ (波浪/气泡) │ │ │
│ │ │ │ │ │
│ │ │ 🎵 音乐 │ │ │
│ │ │ │ │ │
│ │ └──────────────┘ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────┐ │
│ │ ♪ ━━━━━━━━━━━━━━━━━━━━●━━━━━━━━━━━━ 🔊 │ │
│ │ 正在播放: 绘本配乐 │ │
│ └────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────────┘
```
**功能特性：**
- 搭配动态背景动画（波浪、气泡、星星等）
- 简洁的播放控制
- 可搭配绘本图片轮播
#### 3.2.4 互动游戏 (GameViewer)
```
┌────────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ ┌──────────────────────┐ │ │
│ │ │ │ │ │
│ │ │ 游戏嵌入区域 │ │ │
│ │ │ (iframe/组件) │ │ │
│ │ │ │ │ │
│ │ │ 支持触摸交互 │ │ │
│ │ │ │ │ │
│ │ └──────────────────────┘ │ │
│ │ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ 退出游戏 │
└────────────────────────────────────────────────────────────────┘
```
**游戏类型支持：**
- H5 游戏（iframe 嵌入）
- 拖拽配对游戏
- 点击选择游戏
- 涂色游戏
- 拼图游戏
#### 3.2.5 PPT/挂图展示 (SlidesViewer)
```
┌────────────────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ ┌──────────────┐ │ │
│ │ │ │ │ │
│ │ │ PPT 幻灯片 │ │ │
│ │ │ (PDF渲染) │ │ │
│ │ │ │ │ │
│ │ │ │ │ │
│ │ └──────────────┘ │ │
│ │ │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ ◀━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━▶ │
│ 第 1 页 / 共 8 页 全屏 ⛶ │
└────────────────────────────────────────────────────────────────┘
```
### 3.3 底部导航栏设计
```
┌────────────────────────────────────────────────────────────────┐
│ 环节导航 + 延伸活动 │
├────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ ╭───╮ │ │ ╭───╮ │ │ ╭───╮ │ │ ╭───╮ │ │
│ │ │ 🎯 │ │ │ │ 📖 │ │ │ │ 🎨 │ │ │ │ ⭐ │ │ │
│ │ ╰───╯ │ │ ╰───╯ │ │ ╰───╯ │ │ ╰───╯ │ │
│ │ 导入 │ │ 共读 │ │ 互动 │ │ 总结 │ │
│ │ 3分钟 │ │ 8分钟 │ │ 5分钟 │ │ 4分钟 │ │
│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │
│ │ │ │ │ │
│ ┌────┴──────────┴──────────┴──────────┴────┐ │
│ │██████████████████░░░░░░░░░░░░░░░░░░░░░░░░│ │
│ └───────────────────────────────────────────┘ │
│ 整体进度 (40%) │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ ╭───╮ │ │ ╭───╮ │ │ ╭───╮ │ │
│ │ │ 🎁 │ │ │ │ 🎨 │ │ │ │ 🏃 │ │ │
│ │ ╰───╯ │ │ ╰───╯ │ │ ╰───╯ │ │
│ │ 手工活动 │ │ 绘画活动 │ │ 户外活动 │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ 延伸活动 │
└────────────────────────────────────────────────────────────────┘
```
**设计要点：**
- 当前环节高亮（放大+边框）
- 已完成环节显示 ✓
- 图标+名称+时长
- 进度条实时更新
- 延伸活动单独一行
### 3.4 环节内容自动适配
根据环节类型自动选择展示组件：
| 环节类型 | stepType | 主要展示内容 | 默认组件 |
|---------|----------|-------------|---------|
| 导入环节 | INTRO | 视频/动画/图片 | VideoPlayer |
| 师幼共读 | READING | 绘本+音频 | EbookViewer + AudioPlayer |
| 互动环节 | INTERACTION | 游戏/问答 | GameViewer |
| 延伸活动 | EXTENSION | 视频/指导 | VideoPlayer + 活动卡片 |
| 总结环节 | SUMMARY | 图片/PPT | SlidesViewer |
---
## 四、技术实现方案
### 4.1 组件结构
```
src/views/teacher/lessons/
├── LessonView.vue # 授课主页面（模式切换控制器）
├── components/
│ ├── TeacherMode.vue # 教师控制台（现有界面优化）
│ ├── KidsMode.vue # 投屏展示模式（新增）
│ │ ├── KidsHeader.vue # 顶部标题栏（可选显示）
│ │ ├── KidsContent.vue # 主内容区
│ │ └── KidsNav.vue # 底部导航
│ ├── viewers/
│ │ ├── EbookViewer.vue # 绘本查看器
│ │ ├── VideoPlayer.vue # 视频播放器
│ │ ├── AudioPlayer.vue # 音频播放器
│ │ ├── GameViewer.vue # 游戏查看器
│ │ └── SlidesViewer.vue # PPT/挂图查看器
│ └── shared/
│ ├── ProgressBar.vue # 进度条
│ └── StepIndicator.vue # 环节指示器
```
### 4.2 状态管理
```typescript
// useLessonState.ts - 共享状态
interface LessonState {
// 模式
mode: 'teacher' | 'kids';
// 课程信息
courseId: number;
course: Course;
// 进度
currentStepIndex: number; // 当前环节
currentPageIndex: number; // 当前页码（绘本）
currentResourceIndex: number; // 当前资源索引
// 播放状态
isPlaying: boolean;
isAutoPlay: boolean;
autoPlayInterval: number; // 自动翻页间隔（秒）
// 计时
timerSeconds: number;
timerRunning: boolean;
}
```
### 4.3 模式切换实现
```vue
<!-- LessonView.vue -->
<template>
<div class="lesson-view" :class="{ 'kids-mode': mode === 'kids' }">
<!-- 模式切换按钮 -->
<div class="mode-switch" v-if="mode === 'teacher'">
<a-button type="primary" size="large" @click="switchToKidsMode">
<template #icon><ExpandOutlined /></template>
投屏模式
</a-button>
</div>
<!-- 退出投屏按钮（悬浮） -->
<div class="kids-exit-btn" v-if="mode === 'kids'" @click="switchToTeacherMode">
<CloseOutlined />
</div>
<!-- 教师模式 -->
<TeacherMode v-if="mode === 'teacher'" v-bind="sharedProps" />
<!-- 投屏模式 -->
<KidsMode v-else v-bind="sharedProps" />
</div>
</template>
```
### 4.4 数据流
```
┌─────────────────────────────────────────────────────────────┐
│ API Layer │
│ getLessonDetail(courseId) │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ LessonView.vue │
│ 数据加载与状态 │
│ │
│ course: { │
│ scripts: CourseScript[], // 教学环节 │
│ resources: CourseResource[], // 课程资源 │
│ activities: CourseActivity[], // 延伸活动 │
│ ebookPaths: string, // 绘本路径 JSON │
│ audioPaths: string, // 音频路径 JSON │
│ videoPaths: string, // 视频路径 JSON │
│ } │
└─────────────────────────────────────────────────────────────┘
│
┌───────────────┴───────────────┐
▼ ▼
┌─────────────────────────┐ ┌─────────────────────────┐
│ TeacherMode │ │ KidsMode │
│ (教师控制台) │ │ (投屏展示) │
│ │ │ │
│ • 读取 teacherScript │ │ • 读取 resourceIds │
│ • 显示互动要点 │ │ • 展示资源内容 │
│ • 计时/评价/记录 │ │ • 播放/翻页控制 │
└─────────────────────────┘ └─────────────────────────┘
```
---
## 五、交互设计
### 5.1 手势/触摸操作
| 操作 | 绘本模式 | 视频模式 | 游戏模式 |
|------|---------|---------|---------|
| 点击左侧 | 上一页 | 后退10秒 | - |
| 点击右侧 | 下一页 | 前进10秒 | - |
| 双击 | 全屏 | 全屏 | - |
| 双指缩放 | 放大/缩小 | - | - |
| 左右滑动 | 翻页 | 进度调整 | - |
### 5.2 键盘快捷键
| 按键 | 功能 |
|------|------|
| `←` / `A` | 上一步/上一页 |
| `→` / `D` | 下一步/下一页 |
| `Space` | 播放/暂停 |
| `F` | 全屏切换 |
| `Esc` | 退出投屏模式 |
| `M` | 静音切换 |
### 5.3 自动化功能
| 功能 | 说明 |
|------|------|
| **自动翻页** | 绘本模式下可设置间隔自动翻页（默认5秒） |
| **环节计时提醒** | 超过预计时长时顶部提醒 |
| **进度自动保存** | 每30秒自动保存当前进度 |
| **全屏自动进入** | 进入KidsMode自动请求全屏 |
---
## 六、视觉设计规范
### 6.1 配色方案
```css
/* 主题色 - 温暖橙色系 */
--kids-primary: #FF8C42; /* 主色 */
--kids-primary-light: #FFB380; /* 主色浅 */
--kids-primary-dark: #E67635; /* 主色深 */
/* 背景色 */
--kids-bg: #FFF9F5; /* 温暖白 */
--kids-bg-card: #FFFFFF; /* 卡片白 */
/* 辅助色 */
--kids-success: #52C41A; /* 成功绿 */
--kids-info: #1890FF; /* 信息蓝 */
--kids-warning: #FAAD14; /* 警告黄 */
/* 文字色 */
--kids-text: #333333; /* 主文字 */
--kids-text-secondary: #666666;/* 次要文字 */
```
### 6.2 字体规范
```css
/* 主字体 */
font-family: 'Comic Sans MS', 'YouYuan', 'Microsoft YaHei', sans-serif;
/* 字号 */
--kids-font-title: 36px; /* 大标题 */
--kids-font-subtitle: 28px; /* 副标题 */
--kids-font-body: 24px; /* 正文 */
--kids-font-small: 18px; /* 小字 */
/* 圆角 */
--kids-radius-sm: 12px;
--kids-radius-md: 20px;
--kids-radius-lg: 28px;
```
### 6.3 动画效果
```css
/* 页面切换 */
.page-enter-active {
transition: all 0.3s ease-out;
}
.page-leave-active {
transition: all 0.2s ease-in;
}
/* 环节切换 */
.step-change {
animation: stepSlide 0.5s ease;
}
@keyframes stepSlide {
0% { transform: translateX(100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
/* 完成动画 */
@keyframes celebrate {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
```
---
## 七、实施计划
### 7.1 开发阶段
| 阶段 | 内容 | 预计工时 |
|------|------|---------|
| **Phase 1** | 基础架构 + 模式切换 | 4h |
| **Phase 2** | 绘本查看器 + 翻页控制 | 4h |
| **Phase 3** | 视频/音频播放器 | 3h |
| **Phase 4** | 底部导航 + 进度条 | 3h |
| **Phase 5** | 互动游戏支持 | 3h |
| **Phase 6** | 延伸活动展示 | 2h |
| **Phase 7** | 优化测试 | 3h |
| **总计** | | **22h** |
### 7.2 文件清单
| 文件 | 说明 | 优先级 |
|------|------|--------|
| `KidsMode.vue` | 投屏模式主组件 | P0 |
| `KidsContent.vue` | 主内容区 | P0 |
| `KidsNav.vue` | 底部导航 | P0 |
| `EbookViewer.vue` | 绘本查看器 | P0 |
| `VideoPlayer.vue` | 视频播放器 | P0 |
| `AudioPlayer.vue` | 音频播放器 | P1 |
| `GameViewer.vue` | 游戏查看器 | P1 |
| `SlidesViewer.vue` | PPT查看器 | P1 |
| `useLessonState.ts` | 状态管理 | P0 |
---
## 八、设计决策（已确认）
| 问题 | 决策 | 说明 |
|------|------|------|
| **互动游戏** | 暂不开发，后续补充 | 记录在待办事项中 |
| **资源关联** | 使用课程包配置 | 环节与资源已在创建时关联 |
| **绘本音频同步** | 可选同步模式 | 提供开关，用户可选择 |
| **延伸活动展示** | 底部独立入口 | 作为独立区域，不融入主流程 |
| **双屏需求** | 先做单屏切换 | 后续可扩展双屏模式 |
---
## 九、待办事项
### 后续功能（P2）
| 功能 | 描述 | 预计工时 |
|------|------|---------|
| **互动游戏模块** | 支持拖拽配对、点击选择、涂色、拼图等游戏类型 | 16h |
| **双屏投影模式** | 教师控制台 + 投屏端同步显示 | 8h |
| **音频页面同步** | 绘本阅读时音频与页面自动同步 | 4h |
---
*设计完成于 2026-02-22*
*文档版本: v1.1*
*最后更新: 2026-02-22*
Reference in New Issue Copy Permalink