供团队内部审阅,不作为最终网站内容
六个模块,一条完整的产品叙事。
Product 保持连续页面,About the Team 单独成页。第三版简化固定页内导航,合并反思与现实跟进,将成长记录、徽章和社区分享整合到相应内容中。视频按最新要求放在最后,首屏仍有直接入口。各模块标题和介绍统一左对齐。
页面顺序与最终画面
| 模块 | 要讲清楚什么 | 画面安排 |
|---|---|---|
| Overview | 产品是什么、服务谁,以及儿童表达与家长回应之间的沟通需要。 | 研究背景、两个需求及简洁流程。 |
| Create story | 生活信息输入、AI 整理与故事设置、家长审核修改。 | 3 个纯色手机界面占位。 |
| Read story | 通过互动选择、多重视角和家长提示促进共同阅读与表达。 | 1 个纯色 iPad 占位;后续可在此组织多张阅读界面。 |
| Reflect & follow up | 从故事中的想法到现实尝试,再到反馈与未来故事。 | 2 个 iPad 占位,分别标出生活问题反馈区、徽章与成长记录区。 |
| Impact | 儿童表达与情绪学习、家长沟通支持、家庭之间的经验分享。 | 三个并列影响维度与一句项目目的收尾。 |
| Video | 用完整演示串联整个体验。 | 末尾 16:9 视频 placeholder,明确标注成片尚未加入。 |
素材与表述边界
- 界面占位按用户要求使用纯色。两个 iPad 内的框线只表示将来需要强调的功能,不是最终 Figma 坐标。
- Impact 讲设计希望支持的变化及实现机制,没有补造已验证的教育效果或社会影响数据。
- 30 个家庭访谈和专家咨询来自团队提供的信息,没有添加访谈比例或科学验证结论。
- 徽章鼓励参与与反思,不等同于已经在现实中掌握某项能力。
- 团队页保留 6 位成员的槽位;姓名、头像和贡献待补充。用户确认视频未完成,因此不模拟播放。
- 首屏保留现有本地插画与概念构图。此前 Figma 第三页仅确认了元数据,内容读取受调用额度限制;本版不声称已复刻 final 页面。
Framer 搭建对应
- 建立 Product 与 About the Team 两页,共用主导航和页脚。
- 建立 overview、create、read、reflect、impact、film 六个锚点;页内导航固定在主导航下并标记当前位置。
- 按占位比例替换最终截图。手机端创建区采用截图与说明并排的三行,两个跟进界面上下排列。
- 视频准备好后接入最后一个模块;本地示例可通过 film-config.js 配置媒体地址。
- 正式上线前移除 Draft 标识和本说明页,补齐团队资料与最终素材。