📘 产品开发文档：儿童汉字学习 Web App

🎯 产品目标

打造一款适合 5 岁儿童的汉字识字 Web App，以现代简约风格为主，专为移动端设计，支持离线运行和语音朗读。学习过程参考“百词斩”，孩子通过左右滑动或点击按钮浏览汉字并听发音，轻松掌握常见汉字。

⸻

🧩 产品功能模块

1️⃣ 汉字展示模块 • 页面中央大号汉字展示。 • 汉字基于内置 300 个常用字（可参考小学低年级识字表）。 • 自动记录当前学习进度（浏览第几个字），刷新页面后可继续。

2️⃣ 导航切换模块 • 支持左右滑动切换汉字（手机滑屏手势）。 • 提供“上一个 / 下一个”按钮，适合小朋友操作。

3️⃣ 语音朗读模块 • 每个汉字下方有喇叭按钮。 • 点击喇叭后，浏览器原生 SpeechSynthesis 发音。 • 发音语速较慢（rate=0.8），适合儿童识别。 • 发音过程中防止重复触发（喇叭有播放状态）。

4️⃣ 内置字体支持 • 内置一款适合儿童识字的免费商用字体（如阿里妈妈方圆体或站酷快乐体）。 • 字体文件内嵌在项目中（woff2 格式）。

5️⃣ 移动端适配模块 • 页面自适应手机和平板。 • 所有操作按钮触控区域 ≥ 44px。 • 禁用双击放大，防止误触。

⸻

⚙ 技术实现方案

模块 技术选型 说明 前端框架 纯 React、 Tailwind CSS实现,使用Material UI(MUI)组件,推荐纯前端静态部署，简单快速 滑动交互 原生 touch 事件或 react-swipeable 实现左右滑切字卡 发音 浏览器原生 SpeechSynthesis 无需音频文件或后端 数据 内置静态数组，包含 300 汉字 小文件，适合前端静态数据管理 存储 localStorage 保存进度 无后端依赖

⸻

🎨 UI / 设计要求

元素 要求 背景 柔和纯色（浅蓝、浅黄、浅灰，#f5f5f5） 汉字 页面中央，字号至少 10rem，圆润、醒目 喇叭按钮 大图标（≥ 48px），居汉字下方 导航按钮 左右对称，图标尺寸 ≥ 44px，带触控缓冲区 动画 汉字切换带淡入淡出或滑入滑出效果 滑动手势 左右滑屏顺畅，防止误触上下滑动干扰 响应式 页面适配手机、平板；按键误触防护