# 「压力盲盒」互动网页制作需求说明书 ## 一、项目整体说明 ### 1. 项目名称 小学生压力盲盒抽取互动网页 ### 2. 使用场景 小学六年级心理健康课课堂大屏互动、团体辅导活动、心理课前暖场，也可支持学生平板/电脑端自主参与。 ### 3. 核心目标 以趣味盲盒抽卡的形式，降低学生对“谈论压力”的抵触感；通过随机呈现真实压力源，快速引发学生情绪共鸣，为后续压力识别、压力疏导的教学环节做铺垫。 ### 4. 目标受众 小学六年级学生（11-12岁），整体设计兼顾童趣与适配年龄感，避免低幼化，同时贴合深圳本地学生的压力特点。 ## 二、核心交互全流程（分步详细描述） ### 阶段1：初始待机页（盲盒未开启状态） 1. **页面布局**：页面顶部显示活动标题，页面正中央为卡通盲盒主体形象，盲盒下方放置一行引导操作文字，页面底部可标注小字说明。 2. **视觉状态**：盲盒保持轻微的上下呼吸动效（缓慢浮动），营造“待点击”的氛围感；引导文字清晰醒目，适配教室大屏远距离观看。 3. **触发条件**：用户点击盲盒任意区域，即可触发抽取流程。 ### 阶段2：点击抽取动效阶段 1. 点击盲盒后，盲盒立即执行**左右快速摇晃3次**的动效，伴随轻微的上下弹跳，模拟“拆盒前晃动”的仪式感； 2. 摇晃结束后，一张卡片从盲盒顶部弹出，同时执行**3D翻转动效**（从卡片背面翻转到正面），动效总时长控制在1.5-2秒，节奏轻快不拖沓； 3. 动效过程中可搭配轻柔的点击反馈音效（可选），无音效也不影响核心功能。 ### 阶段3：结果展示页（卡片正面呈现） 1. 动效结束后，卡片居中定格展示，卡片内清晰显示**压力主题词**与对应卡通小图标； 2. 卡片正下方显示「再抽一次」按钮，点击按钮后，卡片收回盲盒，页面回到初始待机状态，可进行下一轮随机抽取； 3. **抽取规则**：从15张压力卡片池中完全随机抽取，无次数限制，允许重复抽到同一张卡片；每次抽取相互独立，无“必须抽完全部才能重复”的限制。 ## 三、视觉设计规范 ### 1. 整体风格 卡通治愈风，线条圆润柔和，色彩明快温暖；避免暗沉、尖锐、压抑的视觉元素，在呈现“压力”主题的同时，保持心理辅导的安全、舒缓氛围。 ### 2. 配色方案 - 页面背景：浅淡的天蓝色渐变 + 极低透明度的点状底纹，营造轻松感；可加入极淡的深圳城市天际线剪影作为本地化细节，不抢夺主体注意力。 - 盲盒主体：马卡龙色系（推荐淡蓝+鹅黄搭配），卡通立体造型，可搭配简约蝴蝶结或小表情，可爱但不低幼。 - 压力卡片：圆角矩形，浅米白/浅灰底色，深灰正文文字，每个主题词搭配1个对应彩色线稿小图标，清晰易读。 - 按钮：柔和圆角按钮，主色调用与盲盒呼应的蓝色，悬停时有轻微变色反馈。 ### 3. 字体与排版 - 全部使用**圆润无衬线字体**，字号足够大，适配教室大屏投影，后排学生也能清晰识别。 - 标题加粗突出，卡片主题字为页面核心视觉，字号最大；辅助说明文字字号适中，不干扰主体。 ### 4. 尺寸适配 - 默认比例为16:9宽屏，完美适配教室主流投影尺寸； - 支持响应式布局，在电脑、平板、手机端打开均能正常显示，核心元素不偏移。 ## 四、压力卡片内容池（共15张） 每张卡片包含「压力主题词 + 对应图标」，具体对应关系如下： | 序号 | 压力主题词 | 推荐配套图标 | | :--- | :--- | :--- | | 1 | 作业太多 | 堆叠的书本/练习册 | | 2 | 怕考不好 | 打叉的试卷/皱眉的表情 | | 3 | 周末满课 | 排满的日程表/时钟 | | 4 | 考级比赛 | 奖杯/证书 | | 5 | 进度太快 | 飞速的箭头/翻页的课本 | | 6 | 总被比较 | 两个对比的小人/天平 | | 7 | 父母期望 | 对话气泡/加油的手势 | | 8 | 同学竞争 | 跑步冲刺/两个并肩的小人 | | 9 | 融不进去 | 站在人群外的小人 | | 10 | 害怕落后 | 向后掉落的箭头/追赶的小人 | | 11 | 睡眠不足 | 打哈欠的月亮/黑眼圈表情 | | 12 | 被孤立 | 单独的小人/远离的人群 | | 13 | 没时间玩 | 收起的玩具/空荡的操场 | | 14 | 怕拖后腿 | 掉落的拼图/队伍末尾的小人 | | 15 | 担心未来 | 问号/望向远方的背影 | ## 五、页面文案清单 | 位置 | 文案内容 | 备注 | | :--- | :--- | :--- | | 页面顶部标题 | 压力盲盒 | 主标题，加粗放大 | | 盲盒下方引导语 | 点击盲盒，抽取你的专属压力卡 | 初始页显示，抽卡后隐藏 | | 卡片底部按钮 | 再抽一次 | 结果页显示，点击返回初始态 | | 页面底部小字（可选） | 六年级压力源专属 · 心理课堂互动 | 装饰性说明，字号偏小 | ## 六、技术与功能要求 1. **实现形式**：纯前端H5网页，无需后台服务器、无需登录注册，打开链接即可直接使用；代码轻量化，加载速度快。 2. **核心逻辑**：内置15条压力卡片数据池，点击盲盒时调用随机函数，抽取任意一条数据渲染到卡片上。 3. **兼容性**：支持Chrome、Edge、微信内置浏览器等主流环境，适配Windows系统、平板设备，确保课堂投影时无显示异常。 4. **交互反馈**：按钮、盲盒点击时有 hover 状态变化，动效流畅无卡顿，适配鼠标点击与触屏点击两种操作方式。 ## 七、可选拓展功能（按需选用） 1. **全部卡片一览按钮**：页面角落增加「查看全部压力」按钮，点击弹出网格布局的15张卡片总览，方便课堂总结环节使用。 2. **抽取计数**：页面角落显示“已抽取 X 次”，增加互动趣味性。 3. **分享/保存卡片**：支持将抽到的压力卡片保存为图片，方便学生课后记录（课堂场景非必需）。