0. 当前交付目录
| 首页入口 | 内容 | 说明 |
|---|---|---|
| 1 UI demo | 共 9 个正式演示 | 包含默认血液、历史血液、超长周期、跨月、异常经期、打断场景、多段展示和震动提示；已去掉旧的完整流程演示入口。 |
| 2 交互文档 | 当前页面 | 对齐产品、设计、开发的交互细节，支持本地编辑保存。 |
| 3 需求文档 | PRD 阅读版 | 以最新优先弹窗流程和压缩动效时长为准。 |
| 4 客户端交付 | 代码包下载 | 包含 HTML demo、提示词、双端说明、iOS/Android/跨端参考代码。 |
1. 触发范围与播放条件
| 项目 | 规则 |
|---|---|
| 触发入口 | 仅记录 tab 触发血量动效；其他入口只同步最终记录状态，不播放逐格血流。 |
| 常规记录 | 用户点击“大姨妈来了-是”后先进入白底中间态并显示黄色开始 icon，再弹出记经期必填弹窗；点击确定后才展开下方当天记录列表并开始播放血流动画；点击取消不记录、不播放。 |
| 历史日补记/提前来了 | 用户在已记录的经期开始了情况下修改开始日，先弹窗提示确认；点击确定后按新经期范围进入优先弹窗流程并播放动效；点击取消不播放且不改写原周期。 |
| 历史周期与当前周期 | 只要发生“记录月经开始”且在记录 tab 内，历史周期和当前周期均播放。 |
| 实验互斥 | 版本 ≥ 9.07.0 中，2232 记录月经动效实验与 1830 不规律经期实验互斥；命中互斥实验时按实验平台分组结果执行。 |
| 多段经期 | 多段展示用于表达多个已确认经期片段；播放中日历被锁定，用户不能再切换其他日期触发新的经期记录。 |
2. 核心动效流程
| 阶段 | 交互与视觉 |
|---|---|
| 初始状态 | 经期中日期格子显示深粉色；预测经期日期显示浅粉格子；今天或选中日显示红色描边和白色内描边；未点击“是”前不显示黄色开始 icon。 |
| 点击“是” | 按钮点击被接受后立即触发一次较强震感；本次经期范围内格子先变白 white_AN，并在选中开始日显示黄色开始 icon。该阶段只做白底中间态，不开始血流动画。 |
| 必填弹窗 | 白底中间态完成后弹出记经期必填弹窗。弹窗为必填步骤，点击确定后展开下方当天记录列表并开始血流动画；点击取消后弹窗收起，恢复未记录态，不播放血流动画。 |
| 动画播放中 | 日历表格进入禁用态，不能切换其他日期，也不能触发其他会改写经期范围的操作；下方当天记录列表保持可操作。 |
| 白底中间态 | 点击“是”后、必填弹窗弹出前，本次经期范围内格子先变白 white_AN；日期文字变粉色：历史日和今天为深粉色 #FF4D88，未来日为浅粉色 #FFCADB；选中开始日显示黄色开始 icon。 |
| 血量上涨 | 按日期顺序播放液体按照比例上涨；血液颜色为 #FF4D88，动效有粘黏感，下一格在上一格接近结束前提前启动。血液覆盖文字时，覆盖部分文字反白，未覆盖部分保持原粉色。 |
| 最终定格 | 动画完成后统一冲满 100%；历史日和今天定格为深粉色，未来日定格为浅粉色，文字为白色。 |
| 分析弹泡 | 血流播放完后才弹出分析弹泡；分析弹泡出现后，代表本次经期记录完成，再允许其他日期选择和操作。 |
3. 颜色规则
| 对象 | 颜色/表现 |
|---|---|
| 血液液面 | #FF4D88 |
| 白底中间态文字-历史日/今天 | #FF4D88 |
| 白底中间态文字-未来日 | #FFCADB |
| 最终定格-历史日/今天 | 格子 #FF4D88，文字 #FFFFFF |
| 最终定格-未来日 | 格子 #FFD6E4，文字 #FFFFFF |
| 开始 icon | 确定记录后显示在选中开始日，尺寸 12×12；未确认前不显示。 |
4. 经期天数、长周期与跨月
| 规则 | 说明 |
|---|---|
| 默认周期 | 未设置时使用默认 5 天，播放完整 5 天动效。 |
| 常规周期 | 使用用户设置值，常规范围为 3-15 天。 |
| 1 天模型 | 不提供 1 天血量比例模型；如服务端出现异常 1 天周期，客户端按最终态静态兜底。 |
| 主动画上限 | 最多 7 天按比例逐格播放，避免播放时间过长。 |
| 8 天以上 | 第 8 天及以后日期统一 5% 液面轻量反馈，最终一起 100% 定格。 |
| 跨月经期 | 按真实日期连续计算，不按当前日历视图是否可见来截断；跨月经期整段周期都要参与播放。当前页面只渲染可见日期，切换到跨月其他月份时直接展示该段经期最终态。 |
4.1 血量比例数组
| 经期天数 | 血量数组 | 说明 |
|---|---|---|
| 2 天 | [60, 100] | 2 天起按真实趋势展示。 |
| 3 天 | [60, 90, 40] | 先升高，再回落。 |
| 4 天 | [50, 90, 60, 30] | 第二天附近达到高点。 |
| 5 天 | [40, 80, 60, 30, 20] | 默认 demo 使用该数组。 |
| 6 天 | [35, 80, 65, 40, 22, 12] | 后段逐步降低。 |
| 7 天 | [30, 60, 85, 65, 40, 24, 15] | 主动画播放上限。 |
| 8 天以上 | [30, 60, 85, 65, 40, 24, 15, 5, 5, 5...] | 前 7 天逐格播放；第 8 天及以后日期统一 5% 轻量反馈。 |
5. 动效节奏参数
| 参数 | 规则 |
|---|---|
| 单格时长公式 | duration = 125 + level * 5.3 |
| 100% 参考时长 | 655ms |
| 白底中间态停留 | 115ms |
| 重叠比例 | 0.35，下一格在上一格约 65% 进度时启动。 |
| 最小启动间隔 | 118ms |
| 统一冲满等待 | 170ms |
| 统一冲满时长 | 360ms |
| 整体时长 | 5 天常规动效约 1.9 秒；15 天超长周期约 2.4 秒；整体建议不超过 2.5 秒。 |
6. 震感规则
| 规则项 | 交互细则 |
|---|---|
| 点击“是” | 需要触发一次较强震感，作为用户确认记录“大姨妈来了”的即时反馈；强震感发生在“是”按钮点击被客户端接受后，并与白底中间态启动同时发生，早于必填弹窗和血流动画，不等待接口返回。 |
| 点击“否”/取消 | 不触发额外强震感，不使用当前 demo 的强震动模式；点击后立即恢复未记录态。 |
| iOS | 点击“是”保持较强系统触感效果，建议使用 UIImpactFeedbackGenerator(style: .heavy)。点击“否”或取消仅保留系统控件默认触感反馈，不额外调用强震感；系统关闭触感时静默降级。 |
| Android | 点击“是”需要触发较强震感，可使用系统允许的强震感能力；点击“否”或取消不做客户端震感，不调用震动能力。 |
| Web demo | 仅用于演示：点击“是”调用 navigator.vibrate([80,30,80])；点击“否”不调用震动。网页展示限制仅部分安卓机可感受，客户端按照上述要求实现。 |
| 禁止项 | 不要用页面抖动、按钮抖动或其他视觉动画替代震感；震感不作为记录成功判断依据，不阻塞记录流程和血流动效。 |
7. 打断、接口与降级
| 类型 | 场景 | 处理 |
|---|---|---|
| 弹窗取消 | 必填弹窗中点击取消，或未确定前关闭弹窗。 | 不写入记录，不播放血流，恢复未记录态。 |
| 播放中日期操作 | 血流动画播放中尝试切换日期或改写经期范围。 | 日历表格处于禁用态，操作不可触发；等分析弹泡出现后再恢复。 |
| 播放中列表操作 | 血流动画播放中记录爱爱、体温、体重、心情、日记、症状等当天列表项。 | 允许操作，下方列表按线上逻辑处理；日历血流继续播放。 |
| 系统不可见中断 | 播放中切换 tab、离开记录 tab 进入二级页、退后台、锁屏等导致记录页面不可见。 | 中断后不续播半截动画；回来后按接口最终结果展示最终态或回滚态。 |
| 接口失败 | 记录保存失败，或服务器返回失败发生在切断后。 | 以接口最终结果为准：失败回到初始态并提示同线上规则；成功展示最终态。 |
| 低性能设备 | 明显卡顿或系统 Reduce Motion。 | 可降级关闭水波纹，保留液面高度、文字反白和最终定格；Reduce Motion 可使用短过渡直达最终态。 |
8. 验收标准
- 点击“是”后先完成白底中间态并显示黄色开始 icon，再出现记经期必填弹窗；点击确定后才展开当天记录列表并开始血流动画。
- 血流动画播放期间日历表格不可切换其他日期，下方当天记录列表可操作。
- 血流播放完成后弹出分析弹泡；分析弹泡出现后，才允许其他日期选择和操作。
- 点击“是”按钮时有较强震动反馈；点击“否”或取消不触发额外强震感。
- 白底中间态、血流上涨、文字反白、最终定格、黄色开始 icon 均符合颜色规则。
- 历史日补记、提前来了、异常周期、跨月经期都按整段新范围播放。
- 长周期前 7 天按比例播放，第 8 天及以后统一 5% 反馈，最终一起定格。
- 播放中被切断时不续播半截动画，直接按业务结果展示最终态或回滚态。
- UI demo、交互文档、需求文档、客户端交付入口均可在手机浏览器正常打开。