# 原型制作 Overview

## 项目概述
基于UX研究报告，制作了"6岁儿童英语自主学习工具"的完整可交互HTML原型。

## 产出文件
- `prototype/index.html` — 完整交互原型（83KB，单文件，零依赖）

## 原型包含的页面（共10个页面）

### 入口页
1. **模式选择入口** — 儿童模式 / 家长模式选择

### 儿童端（6个页面）
2. **学习首页** — 图标化任务卡片、连续天数/星星/完成数统计、底部导航
3. **视频学习页** — 模拟视频播放器、中英双语字幕、AI跟读麦克风+发音评分反馈
4. **音频练习页** — 动态波形动画、6个动物单词卡片点按播放
5. **PDF绘本阅读** — 4页翻页式绘本、点击单词听发音、朗读播放条
6. **AI辅导对话** — 猫头鹰老师角色、双语对话气泡、快捷回复按钮、语音+文字输入
7. **奖励系统** — 星星总数、进度条、6个徽章（4已解锁/2锁定）

### 家长端（4个页面）
8. **学习仪表盘** — 4项核心统计、柱状图(每日时长)、环形图(类型分布)、最近活动列表
9. **资源管理** — 分类筛选(视频/音频/PDF)、6个资源卡片、预览/下发操作
10. **课件下发** — 当前计划展示、新建任务表单(名称/日期/时长/资源选择)
11. **学习报告** — 五项技能雷达式进度条、课程明细表格、AI建议卡片
12. **屏幕时间管理** — 圆环进度展示、5项开关控制、今日时间安排表

## 交互效果
- 页面切换淡入动画
- 视频进度条模拟播放
- AI跟读麦克风脉冲动画 + 评分反馈（正确/部分正确/错误标签）
- 音频波形动画 + 单词卡片点击高亮
- PDF翻页 + 点击单词提示
- AI对话模拟（快捷回复触发AI回应、输入框发送）
- Toast提示系统
- 图表数据可视化（CSS柱状图 + SVG环形图）
- 开关切换动画
- Hover悬浮提升效果

## 设计原则体现
- **零文字依赖**：儿童端大量使用图标、emoji、大色块
- **8分钟分段**：屏幕时间页展示8分钟分段+休息安排
- **即时反馈**：AI跟读2.5秒后给出评分，所有操作有Toast反馈
- **家长可观测**：仪表盘+报告+活动记录
- **离线优先**：单HTML文件，无外部依赖