「戏崽·小偶伴」APP全部页面内容详细说明
本文档完整梳理「戏崽·小偶伴」APP所有页面，按用户使用流程排序（从启动到退出），每个页面均说明核心定位、整体布局、核心组件及功能，严格延续新中式童趣风，贴合闽南木偶麒麟IP，所有组件尺寸、颜色、字体遵循统一UI规范，适配4-7岁儿童及家长使用，细节完整可直接用于毕设。
第一页：启动页（静态展示页）
核心定位：品牌曝光、IP展示，作为APP启动后的第一个页面，无复杂操作，仅用于快速传递品牌调性，停留后自动跳转至加载页，是用户对APP的第一视觉印象。
整体布局：全屏无状态栏、无导航栏，采用“上-中-下”均衡布局，视觉焦点集中在中部IP形象，整体风格柔和、童趣，贴合木偶麒麟主题。
核心内容及组件：
- 背景组件：全屏海沫绿（#A0D8C1）渐变，顶部透明度80%，底部100%，底部叠加极淡木偶木质纹理（透明度10%），四角各有1个浅白云纹图标（白色，透明度30%，20×20px），无尖锐棱角，奠定国风童趣基调。
- 核心IP形象：麟偶团团（木偶麒麟），Q版大头造型（头身1:1），高度占屏幕垂直方向40%，水平居中，面部为简化木偶脸谱，黑色圆形眼睛、微笑弧线嘴巴，瑞兽朱红（#E27063）腮红，头顶木偶暖金（#E8C38A）麒麟角，表面有轻微毛绒质感，带轻微阴影（#68A899，透明度20%）；IP下方有3个磁吸头饰图标（花、小冠、球），尺寸30×30px，颜色分别为淡青蓝（#B5D8EB）、木偶暖金、瑞兽朱红，均匀分布。
- APP名称组件：位于IP形象正上方，主名称「戏崽」采用汉仪尚巍手书简，36sp，木偶暖金，带1px深海沫绿（#68A899）描边；副名称「小偶伴」采用阿里巴巴普惠体Bold，18sp，深海沫绿，位于主名称下方，间距8px，水平居中。
- Slogan组件：位于屏幕底部，距离下边缘30px，文字「掌心木偶，AI陪伴」，思源黑体Regular，16sp，中性色#555555，水平居中，两侧各有1个简化木偶流苏图标（#68A899，16×16px）。
- 隐藏功能组件：默认停留2-3秒自动跳转至加载页，支持点击屏幕任意位置快速跳转；若APP初始化失败，底部Slogan下方会显示红色提示文字（「加载失败，请重试」，14sp），点击可重新初始化。
第二页：加载页（动态过渡页）
核心定位：承接启动页，展示APP初始化、蓝牙搜索进度，缓解用户等待焦虑，加载完成后自动跳转至设备连接页，是启动页与功能页的过渡页面。
整体布局：与启动页尺寸一致，全屏无状态栏、无导航栏，视觉元素与启动页高度衔接，仅新增进度相关组件，保持界面连贯性。
核心内容及组件：
- 背景组件：与启动页完全一致（海沫绿渐变+木偶木质纹理+四角云纹），无任何修改，确保页面切换无视觉断层。
- 核心IP形象：与启动页IP形象造型、尺寸、位置一致，新增轻微动效——缓慢上下浮动（幅度5px，频率1.5秒/次），无其他多余动效，告知用户APP正在运行。
- 加载进度组件：位于IP形象下方，间距30px，水平居中；进度条容器为圆角矩形（宽度60%屏幕宽度，高度8px，圆角4px），底色浅云白（#F7F6F2），边框淡灰色（#D9D9D9，1px）；进度条填充色为海沫绿，加载时从左至右线性填充，末端有呼吸动效（透明度80%-100%切换，1秒/次）；进度提示文字位于进度条下方，14sp，#888888，随进度变化（初始化中→正在搜索小偶伴→即将进入）。
- 跳过按钮组件：位于屏幕右上角，距离上边缘20px、右边缘20px，圆角矩形（60×30px，圆角16px），底色浅云白，边框淡灰色，带轻微阴影；文字「跳过」，阿里巴巴普惠体Bold，14sp，深海沫绿，点击时有颜色反馈（底色变海沫绿，文字变白），点击后直接跳转至设备连接页。
- 辅助提示组件：默认不显示，加载超时（超过10秒）或蓝牙搜索失败时，进度条下方显示红色提示文字（「加载超时，请检查蓝牙是否开启」或「未搜索到设备，请检查玩具是否开机」，14sp，#E27063），右侧有「重试」按钮（40×24px，透明底色，朱红边框，12sp文字），点击可重新加载。
- 隐藏功能组件：进度达到100%后，0.3秒淡入动效跳转至设备连接页；实时检测蓝牙状态，未开启时自动提示；优先搜索已配对玩具，进度提示文字变为「正在连接已配对设备」。
第三页：设备连接页（功能入口页）
核心定位：APP核心功能入口，负责搜索、连接、绑定木偶麒麟玩具，承接加载页，适配儿童与家长操作，操作极简，无复杂步骤，是用户使用APP功能的第一步。
整体布局：包含顶部状态栏、顶部导航栏、中部核心交互区、底部操作区、底部安全区，布局均衡，视觉焦点集中在中部IP形象和设备列表，操作按钮尺寸偏大，适配儿童手部。
核心内容及组件：
- 顶部状态栏：屏幕最顶端，高度自适应，背景为浅海沫绿渐变，显示系统信息（时间、信号、电量、Wi-Fi），蓝牙断开时新增红色提示（「蓝牙已断开」，12sp）。
- 顶部导航栏：状态栏下方，全屏宽度，高度56dp，白底，底部有1px浅灰（#D9D9D9）分割线；左侧返回按钮（24×24dp，深海沫绿，向左箭头），点击返回上一页；中间标题「连接小偶伴」（阿里巴巴普惠体Bold，18sp，#333333），水平居中；右侧帮助按钮（22×22dp，深海沫绿，问号图标），点击弹出玩具开机、蓝牙连接教程。
- 中部核心交互区：IP形象（180×180dp，水平居中，位于导航栏下方30px），待机时轻微呼吸动效，搜索中耳朵/头饰晃动，连接成功时眨眼微笑；状态提示文字（16sp，#555555），位于IP下方24dp，随状态变化（初始→搜索中→发现设备→连接中→连接成功→失败）；设备列表卡片（320×72dp，白卡带阴影，圆角20dp），找到设备后显示，左侧设备图标（麒麟头像，32×32dp），中间设备名称（16sp，#333），右侧连接按钮（海沫绿底色，圆角16px，文字「连接」），点击后变为「连接中…」，不可重复点击；环形加载动画（海沫绿，32dp直径），搜索/连接时显示，位于设备列表下方。
- 底部操作区：重新搜索按钮（300×52dp，浅云白底色，圆角24dp，16sp，深海沫绿文字），位于中部区域下方，点击后清空列表重新扫描；底部提示文案（12sp，#999999，「玩具需开机并靠近手机1米内」），位于安全区上方，水平居中；可选隐私/版本文字（10sp，#CCCCCC，「v1.0 · 隐私政策」），位于屏幕最底部。
- 完整状态逻辑：未搜索（显示IP+提示文字+重新搜索按钮）→搜索中（IP晃动+搜索文字+环形加载，按钮置灰）→发现设备（显示设备卡片+连接按钮）→连接中（按钮禁用，显示「正在连接」，IP微笑）→连接成功（弹出成功提示，2秒后跳转至第四页）→连接失败（红色提示+重试按钮，IP委屈表情）；全程单点击交互，蓝牙未开启自动弹窗引导。
第四页：主控交互页（核心操作页）
核心定位：APP核心操作页，承接设备连接页，是用户使用频率最高的页面，核心功能是控制木偶麒麟玩具（表情、动作、声音、头饰），兼顾儿童操作简易性和家长操作便捷性。
整体布局：包含顶部状态栏、顶部导航栏、中部核心交互区、底部功能栏、底部安全区，中部为视觉和操作核心，布局整齐，按钮尺寸偏大，适配儿童自主操作。
核心内容及组件：
- 顶部状态栏：与设备连接页一致，浅海沫绿渐变背景，蓝牙断开时显示红色提示，确保视觉统一性。
- 顶部导航栏：与设备连接页尺寸、样式一致（高度56dp，白底，底部浅灰分割线）；左侧返回/断开按钮（24×24dp，深海沫绿，向左箭头），点击返回设备连接页，长按弹出「断开设备连接」提示；中间标题「小偶伴主控」（18sp，#333333），右侧连接状态标识（圆形图标，16dp，海沫绿对勾/朱红×，旁边12sp文字「已连接」/「已断开」）；右侧设置按钮（22×22dp，深海沫绿，齿轮图标），点击有旋转动效，跳转至设置页。
- 中部核心交互区：分为IP形象展示区和核心控制按钮区；IP形象展示区（180×180dp，水平居中，距离导航栏底部30px），带圆形云纹边框（直径200dp，海沫绿线条，透明度30%），悬浮阴影，待机时呼吸动效，点击控制按钮后同步切换表情/动作/声音/头饰，蓝牙断开时显示委屈表情、停止动效；核心控制按钮区（4组，2行2列，每组140×100dp，间距20dp），每组包含标题（16sp，#333333，水平居中）和3个操作按钮（40×40dp，圆角16px，浅云白底色，海沫绿边框），按钮图标为简化线条版，颜色#68A899，点击有颜色反馈（底色变海沫绿，图标变白），同步反馈至IP形象：
- 表情控制组：标题「表情」，按钮对应开心、委屈、生气，点击后IP切换对应表情，头部轻微晃动。
- 动作控制组：标题「动作」，按钮对应点头、摇头、挥手，点击后IP执行对应动作，持续1秒后恢复待机。
- 声音控制组：标题「声音」，按钮对应笑声、问候语、儿歌片段，点击后玩具播放对应声音，IP嘴巴同步开合、头部跟随节奏晃动。
- 头饰切换组：标题「头饰」，按钮对应花、小冠、球，点击后IP头部显示对应磁吸头饰，有磁吸动效。
- 底部功能栏：高度48dp，白底，底部有1px浅灰分割线，包含2个功能按钮（水平居中，间距60dp）；左侧「返回首页」按钮（图标+文字，图标24×24dp，文字14sp，#68A899），点击返回设备连接页；右侧「互动模式」按钮（图标+文字，图标24×24dp，文字14sp，#68A899），点击跳转至互动模式页。
- 隐藏功能组件：操作时所有按钮仅单次触发，无选中状态，避免儿童误触；声音播放音量可通过设置页调节；蓝牙断开时，所有控制按钮置灰，无法操作，同步显示断开提示。
第五页：互动模式页（拓展功能页）
核心定位：拓展互动功能，丰富用户体验，承接主控交互页，提供更具趣味性的互动形式（故事模式、录音互动），兼顾儿童娱乐性和启蒙性。
整体布局：与主控交互页一致（状态栏+导航栏+中部交互区+底部功能栏），中部为互动模式选择区，视觉风格延续国风童趣，操作逻辑与主控页一致，降低用户学习成本。
核心内容及组件：
- 顶部状态栏、导航栏：与主控交互页完全一致，导航栏中间标题改为「互动模式」，右侧设置按钮功能不变，确保视觉和操作连贯性。
- 中部互动模式选择区：水平居中，2个大型互动卡片（每行1个，间距30dp，宽度300dp，高度120dp，圆角24dp，白卡带阴影，海沫绿边框），卡片内包含图标、标题、简介，点击有轻微按压动效（缩放0.98↔1.0，0.2秒）：
- 故事模式卡片：左侧图标（木偶书，48×48dp，#68A899），右侧标题「故事模式」（18sp，#333333），简介「听麟偶团团讲闽南民间故事」（14sp，#888888）；点击后跳转至故事列表页，玩具同步播放故事，IP形象嘴巴开合、头部跟随节奏晃动。
- 录音互动卡片：左侧图标（麦克风，48×48dp，#68A899），右侧标题「录音互动」（18sp，#333333），简介「录下你的声音，小偶伴跟着学」（14sp，#888888）；点击后进入录音界面，支持录音、播放，玩具同步模仿录音内容，IP形象同步动作。
- 中部辅助提示：位于2个互动卡片下方，文字「选择喜欢的模式，和小偶伴一起互动吧」（16sp，#555555），水平居中，带轻微云纹点缀。
- 底部功能栏：与主控交互页一致，「返回首页」按钮点击返回主控交互页，「互动模式」按钮置灰（当前页面），确保操作逻辑清晰。
- 隐藏功能组件：点击互动卡片跳转时，有0.3秒淡入动效；故事模式支持暂停、切换故事；录音互动支持删除录音、调节录音音量，录音时长最长30秒。
第六页：设置页（进阶功能页）
核心定位：承接主控交互页，提供进阶设置功能，主要供家长操作，包含设备设置、声音设置、隐私设置等，不干扰儿童核心操作，保证APP使用的便捷性和安全性。
整体布局：状态栏+导航栏+中部设置列表+底部安全区，中部为设置选项列表，布局简洁，选项清晰，操作逻辑符合家长使用习惯。
核心内容及组件：
- 顶部状态栏、导航栏：与前几页一致，导航栏中间标题改为「设置」，左侧返回按钮（24×24dp，深海沫绿），点击返回主控交互页，右侧无其他按钮，确保界面简洁。
- 中部设置列表：包含6个设置选项，每个选项为圆角矩形（全屏宽度，高度56dp，无边框，白底），左侧图标（24×24dp，#68A899），中间文字（16sp，#333333），右侧箭头（16×16dp，#999999），点击后跳转至对应设置子页，选项间距1px（浅灰色，#D9D9D9）：
- 设备设置：图标为设备图标，文字「设备设置」，包含玩具电量查看、蓝牙重新连接、设备解绑功能。
- 声音设置：图标为音量图标，文字「声音设置」，包含玩具音量调节、声音类型选择（儿歌、故事、音效）。
- 显示设置：图标为显示图标，文字「显示设置」，包含APP亮度调节、主题切换（仅2种：默认国风、浅色系）。
- 隐私设置：图标为隐私图标，文字「隐私设置」，包含权限管理、数据清理、隐私政策查看。
- 关于我们：图标为信息图标，文字「关于我们」，包含APP版本、开发者信息、联系方式。
- 退出登录：图标为退出图标，文字「退出登录」（颜色#E27063），点击后弹出确认提示（「确定要退出吗？」），确认后退出APP，返回启动页。
- 底部安全区：无额外组件，仅预留安全距离，避免设置选项被手机底部导航栏遮挡。
- 隐藏功能组件：所有设置选项点击后有轻微颜色反馈（底色变浅云白）；设备设置中可查看玩具实时电量，低电量时显示红色提示；声音设置中音量调节有实时反馈（玩具同步发出声音）。
第七页：故事列表页（子页面）
核心定位：承接互动模式页的故事模式，展示所有可用的闽南民间故事，供用户选择播放，丰富儿童启蒙体验，贴合木偶麒麟的国风主题。
整体布局：状态栏+导航栏+中部故事列表+底部播放控制栏，中部为故事列表，底部为播放控制区，操作逻辑简单，适合儿童自主选择。
核心内容及组件：
- 顶部状态栏、导航栏：与前几页一致，导航栏中间标题改为「闽南民间故事」，左侧返回按钮（点击返回互动模式页），右侧搜索按钮（22×22dp，#68A899，放大镜图标），点击可搜索故事名称。
- 中部故事列表：包含5-8个故事卡片，每行1个，间距15dp，卡片尺寸（全屏宽度-32dp，高度80dp），圆角20dp，白卡带阴影，左侧故事封面（70×70dp，圆角16dp，木偶风格故事插画），右侧故事标题（16sp，#333333）、简介（12sp，#888888），点击卡片可播放对应故事，播放中的卡片边框变为海沫绿，显示「播放中」标识（12sp，#A0D8C1）。
- 底部播放控制栏：高度56dp，白底，底部浅灰分割线，包含播放/暂停按钮（28×28dp，海沫绿）、进度条（宽度60%屏幕宽度，高度4px，底色#D9D9D9，填充色#A0D8C1）、音量调节按钮（24×24dp，#68A899）；播放时IP形象（小型，40×40dp）位于控制栏左侧，同步嘴巴开合动效。
- 隐藏功能组件：支持故事循环播放、上一曲/下一曲切换；搜索功能支持关键词搜索，无匹配结果时显示提示文字（「未找到相关故事」，16sp，#888888）；故事播放时，玩具同步播放声音，IP形象同步动作。
第八页：录音互动页（子页面）
核心定位：承接互动模式页的录音互动，提供录音、播放、模仿功能，让儿童通过录音与玩具互动，增强趣味性和参与感，操作简单，适配儿童使用。
整体布局：状态栏+导航栏+中部录音控制区+底部功能按钮，中部为核心录音组件，布局简洁，操作按钮尺寸偏大，避免儿童误触。
核心内容及组件：
- 顶部状态栏、导航栏：与前几页一致，导航栏中间标题改为「录音互动」，左侧返回按钮（点击返回互动模式页），右侧无其他按钮。
- 中部录音控制区：水平居中，核心为录音按钮（圆形，直径80dp，海沫绿底色，麦克风图标，24×24dp，白色），位于中部上方；录音按钮下方为录音时长显示（24sp，#333333，默认「00:00」），录音时实时跳动（最长00:30）；录音完成后，显示播放按钮（圆形，直径60dp，浅云白底色，海沫绿边框，播放图标），位于录音按钮位置，点击可播放录音，玩具同步模仿录音内容，IP形象同步动作。
- 中部提示文字：录音前显示「按住录音，说出你想对小偶伴说的话」（16sp，#555555），录音中显示「录音中...」（16sp，#A0D8C1），录音完成后显示「点击播放，小偶伴跟着学」（16sp，#555555）。
- 底部功能按钮：2个按钮水平排列，间距40dp，尺寸120×48dp，圆角24dp，浅云白底色，海沫绿边框，文字16sp，#68A899；左侧「重新录音」按钮，点击后清空当前录音，恢复录音按钮状态；右侧「保存录音」按钮，点击后保存录音，可在主控页声音控制中调用。
- 隐藏功能组件：录音时松开按钮自动结束录音；录音时长超过30秒自动停止；播放录音时，可点击暂停按钮暂停；保存的录音最多可存储10条，超出后提示删除旧录音。
补充说明（全APP通用）
- 视觉规范：全APP统一海沫绿（#A0D8C1）主色调，木偶暖金（#E8C38A）、瑞兽朱红（#E27063）辅助色，浅云白（#F7F6F2）、白色为底色，中性色#333、#555、#888、#999用于文字，圆角统一16-24dp，无尖锐棱角，字体层级清晰（标题18sp，正文16sp，辅助文字12-14sp）。
- 交互规范：所有可点击组件均有明显反馈（颜色变化、轻微动效），避免儿童误触；全程单点击交互，无复杂手势操作；异常状态（蓝牙断开、加载失败、电量不足）均有明确提示，引导用户操作。
- 适配规范：所有页面均支持手机竖屏自适应，组件尺寸、间距按比例缩放，确保不同手机型号展示效果一致；字体清晰易识别，适配儿童视觉习惯，无高饱和、强对比色彩。