蜕变首页、时间课程与付费转化链路
本版本将新版首页归入“蜕变”Tab，新增按时段开放的免费课程体系与非当前时段课程付费转化能力，并把付费页拆成“QA 完成后的首次沉浸式付费墙”和“未付费用户后续常驻常规付费页”，形成从内容体验到会员转化的完整闭环。
范围、角色与主链路
定义本次改版边界和页面关系
需求范围
- 新版“蜕变”首页及三栏底部导航。
- 首页时间课程模块与“全部”详情页。
- 全部课程页：目标部位、跟着练、专题计划三类内容。
- 时间课程当前时段免费与非当前时段付费转化。
- QA 后沉浸式付费页。
- 24h 内/外两态常规付费页。
用户角色
- 新用户：首次 QA 流程尚未完成。
- QA 完成未付费用户：先触发沉浸式页，关闭后进入常驻付费体系。
- 非会员：可免费练当前时段课程；点击任意非当前时段课程直接进入常规付费页。
- 会员：已开放的课程按会员权限进入训练；页面不展示会员/非会员演示切换控件。
核心链路
蜕变首页改版
承载每日计划、时间课程、训练与成长内容
首页还原方式
评审原型中的首页直接使用用户提供的完整高清设计长图，按 386px 逻辑画板等比展示，确保视觉内容与原图一致。原图中的模块、字段和布局作为开发还原基线；不再用重新编码的近似页面替代视觉稿。
导航与定位
底部导航固定为“记录 / 蜕变 / 我的”，当前首页归属“蜕变”并默认选中。记录承载训练与变化历史；我的承载账户、会员和设置。
页面模块顺序
- 用户问候与连续训练
- 今日主训练计划
- 时间课程
- 目标部位
- 跟着练
- 专属计划
时间课程入口
横向展示当前时段课程和下一时段课程。当前课程标记“当前时段/免费”；点击课程直接进入训练，点击“全部”进入时间课程详情。
展示条件
游客和登录用户均可浏览；训练进度、连续天数和专属计划需要登录。无计划时 Hero 改为“生成我的改善计划”；加载失败展示缓存模块。
刷新与缓存
进入蜕变 Tab 拉取今日计划、时段和推荐；下拉刷新强制更新。前后台切换跨时段时刷新时间课程。页面配置缓存 24h，训练进度实时更新。
动效
页面进入仅使用轻量淡入；今日进度变化使用 300ms 进度动画；时间课程跨时段切换时卡片内容平滑替换并提示“已进入新时段”。
时间课程详情页
按生理节奏提供当前免费课程与全天课程预览
页面结构
顶部返回、标题、当前时段免费标签与说明入口；当前课程主卡；全天时段列表；底部固定当前课程开始栏。页面不展示“非会员状态/会员状态”切换 Tag，不提供“日历·历史课程”入口。
课程字段
slotId、开始/结束时间、课程名称、状态说明、改善标签、时长、难度、部位、封面、课程 ID、开放状态。
当前课程 Banner
严格复用原始《时间课程详情页.html》的信息层级：右上角切换倒计时、当前时段 Tag、时间范围与时段名、课程名“午后提拉醒神”、完整场景说明、5分钟/初级/脸颊标签、“立即开始”按钮及“免费”状态。图片区域与左侧文案使用渐变衔接，不用简化版 Banner 替代。
跨时段更新
页面停留跨时段时自动刷新当前主卡、列表状态和底部 CTA，并 Toast 提示；App 回到前台时立即校验服务端时间和时段。
非当前时段课程
课程卡片不在右上角展示“会员可补练”等权益文案。非会员点击任何非当前时段课程，不展示中间说明弹层，直接进入常规付费页，并携带 source=time_course、courseId 和 slotId。
会员权限
页面根据真实会员状态执行权限，不提供评审态切换控件。会员点击已开放且具备权限的课程可进入训练；具体可练范围由课程权限服务返回。
全部课程页
承载按目标、内容形态和专题计划组织的完整课程发现体验
入口与返回
从蜕变首页课程模块“全部”、时间课程页右上角“全部课程”等入口进入；左上角返回上一页。页面保持独立滚动位置，返回后恢复来源页位置。
一级结构
固定为“目标部位 / 跟着练 / 专题计划”三个平级 Tab。切换 Tab 时滚动回顶部，不改变其他 Tab 已加载的数据与筛选条件。
目标部位
提供推荐、双下巴、法令纹、抬头纹、眼部、颈线、脸颊等横向筛选；推荐列表可结合最近一次面部检测排序，课程卡展示名称、匹配度、简介、时长和难度。无检测数据时隐藏匹配度，按运营推荐排序。
跟着练
采用竖版视频双列墙，支持最热/最新排序；卡片展示封面、时长、热度标签、课程名和跟练人数。点击进入课程预览或训练，未解锁内容按会员权限进入常规付费页。
专题计划
顶部优先展示进行中的计划与完成进度；下方长卡展示周期、标签、标题、说明、课程节数和单节时长。点击继续定位下一节，点击开始计划进入计划确认与排期。
数据、刷新与缓存
课程目录来自课程服务，推荐排序来自推荐服务，计划进度来自用户训练服务。首次进入及下拉刷新更新；课程目录缓存 24h，推荐缓存 2h，进度实时写入。分页加载失败时保留已加载内容并提供重试。
异常与兼容
无推荐数据时回退热门课程；无进行中计划时隐藏顶部进度卡；封面失败使用统一占位图；低版本通过 CMS 隐藏入口。遵循 386px 原生布局、安全区与减少动态效果设置。
非当前课程与付费触发
通过直接付费跳转承接非会员转化
| 用户/课程状态 | 卡片展示 | 点击行为 | 结果 |
|---|---|---|---|
| 非会员 · 当前时段 | 播放图标、当前时段状态 | 直接开始 | 免费训练 |
| 非会员 · 任意非当前时段 | 课程基础信息；不展示“会员可补练” | 直接跳转，不弹权益 Sheet | 进入常规付费页，source=time_course |
| 会员 · 已具备权限课程 | 课程基础信息 | 直接进入课程 | 开始会员训练 |
| 会员 · 无权限或未开放课程 | 按课程服务返回状态展示 | 按服务端权限处理 | 提示开放条件或不可用原因 |
QA 后视频沉浸式付费页
首次 QA 完成后的单路径强转化页
触发条件
新用户完成全部 QA 且尚未付费时展示一次。不是 A/B 测试。关闭后不再自动展示沉浸页，后续付费入口统一进入常规页。
个性化内容
只使用 QA 已知信息：年龄段、性别策略、每日可练时间、练习目的和目标部位。不得伪造面部评分、皱纹或肤质诊断。
展示内容
QA 完成后的首次沉浸式付费页直接复用《付费页面改版》原型一的“视频沉浸式”结构与视觉层级：全屏视频/首帧区域、左上关闭、恢复订阅、匹配度与方案标题、五项权益、真实评价、新人券、单一年会员 CTA 和合规说明。V1.1.10 只保留 QA 场景所需的直接支付路径，不引入原型二常规页的档位选择。
视频规则
9:16 真人跟练混剪，8–12 秒静音循环；首帧本地内嵌。视频失败停留首帧，不出现黑屏；减少动态效果时只展示静态图。
关闭与购买
关闭按钮 3 秒后淡入；不增加二次挽留弹窗。CTA 直接唤起年会员 IAP。支付成功进入计划首页；失败保留页面并提示重试。
无检测结果文案
示例：“你希望改善法令纹，每天可练 10 分钟。已为你匹配脸颊支撑、口周放松和面中提拉为重点的 90 天计划。”
常规付费页（方案 A）
首次未购买后的常驻会员购买页
入口
首页 Banner、会员中心、非当前时间课程及其他付费入口均进入常规页。通过 source 参数记录来源，但首版页面结构保持一致。
顶部检测/QA 双状态
有有效面部检测数据时，完全复用《付费页面改版.html》常规页顶部结构：报告生成提示、短板指标环（示例抗皱 67）、“低于同龄均值”结论、问题解释、水分/光滑度/纹理/综合四项指标，以及“法令纹紧致 · 90 天改善计划 / 匹配 98%”。无检测数据时，使用独立 QA 专属计划状态，只展示已知的年龄段、练习目标、每日时长与难度，不伪造面部指标；评审页提供“无检测数据”独立入口。
会员档位
年 ¥168/208、半年 ¥188、季 ¥98、月 ¥38、永久 ¥648 全部保留。默认选中年会员。半年承担价格锚点，不下架。
价格表达
24h 内：“比半年省 ¥20，多享 6 个月”；超过 24h：“只比半年多 ¥20，多享 6 个月”。CTA 永远跟随选中 SKU 和实付价。
状态展示
页面顶部不展示“新用户 24h 内 / 超过 24h”的状态切换 Tag。用户仅看到服务端判定后的当前优惠状态；评审页通过两个独立预览入口查看两种状态。
评价与权益顺序
价格、CTA 与合规说明之后，先展示“她们练到了第几周”两条完整评价，再展示“会员权益 · 开通后即刻解锁”。该顺序用于先建立结果信任，再强化权益差异。
强对比权益样式
权益使用双列表头与五行对比卡：左列为灰色“非会员”，使用 × 图标和弱化背景；右列为紫色“会员”，使用 ✓ 图标、渐变浅紫背景和加粗权益名称。两列严格按课程、跟练、AI 检测、定制计划、成果记录逐项对齐。
自动续费合规
按钮附近必须展示实际扣费金额、订阅周期、自动续费、取消路径、恢复购买和协议入口；永久会员不显示自动续费文案。
优惠券资格与价格状态
服务端控制 24h 新人强优惠与长期常规优惠
| 状态 | 资格 | 年会员 | 页面表达 | 默认档位 |
|---|---|---|---|---|
| 新人 24h 内 | 服务端首次激活/注册后 24h | 原价 ¥388 - ¥220 = ¥168 | “新人券已抵 ¥220”+ 真实剩余时间 | 年会员 |
| 超过 24h | 新人券失效后长期 | 原价 ¥388 - ¥180 = ¥208 | “已为你长期保留 ¥180 会员优惠”，无倒计时 | 年会员 |
资格与防刷
以服务端账号资格为准，结合设备和支付账号风控；修改本地时间、卸载重装不能恢复 ¥220 券。
订单锁价
24h 内创建订单后锁价 15 分钟；支付回调超过资格时间但在锁价期内仍按 ¥168 生效。超时重建订单使用 ¥208。
刷新
页面前台每分钟更新倒计时；归零时重新请求资格并平滑切换优惠券文案、年卡价格、年卡说明和 CTA，不刷新整页，也不展示供用户手动切换优惠状态的 Tag。
异常
资格接口失败时禁止客户端自行猜价；优先使用短期有效缓存，否则展示标准可购买价格并提示刷新，不能显示错误优惠。
数据来源、埋点与成功指标
覆盖首页内容、时间课程、付费漏斗与优惠券
核心数据对象
| 对象 | 关键字段 | 来源 | 刷新 |
|---|---|---|---|
| 首页配置 | 模块开关、排序、推荐内容、图片版本 | CMS + 推荐服务 | 进入页/下拉，缓存 24h |
| 时间课程 | date、slotId、时间段、courseId、状态、会员权限 | 课程服务 + 服务端时间 | 跨时段/回前台/手动刷新 |
| QA/检测画像 | hasDetection、年龄段、性别、目标、可练时长、偏好、检测指标 | Onboarding QA + 面部检测服务 | QA 完成、检测完成或用户修改后 |
| 券资格 | couponId、金额、startAt、expireAt、状态 | 商业化资格服务 | 进入付费页、倒计时归零 |
| 商品 | sku、周期、价格、续费类型、地区 | App Store/Google Play + 商品服务 | 每次进入付费页校验 |
关键埋点字典（功能点逐一对应）
| 事件 | 中文名 | 对应功能点 | 触发条件 / 展示或点击 | 属性名 | 属性中文名 | 上报值示例 | 补充属性与原事件映射 |
|---|---|---|---|---|---|---|---|
| ui_launch | 展示 | 蜕变首页 | 进入蜕变首页且首屏核心数据渲染完成；一次页面进入仅报一次 | page_name | 页面名称 | 蜕变首页 | 替代 home_view |
| ui_launch | 展示 | 时间课程模块 | 蜕变首页“时间课程”模块进入可视区域≥50%，持续≥1秒；一次页面进入仅报一次 | module_name | 模块名称 | 蜕变首页_时间课程 | 原 time_module_expose |
| ui_click | 点击 | 时间课程模块-全部入口 | 点击蜕变首页时间课程模块右上角“全部” | click_name | 页面点击 | 蜕变首页_时间课程_全部 | 原 time_module_click；结果进入时间课程详情页 |
| ui_click | 点击 | 时间课程模块-课程卡 | 点击蜕变首页时间课程卡；当前时段进入训练，非当前时段按权限处理 | click_name | 页面点击 | 蜕变首页_时间课程_{课程名称} | 同时上报 course_id、slot_id、slot_status、member_status |
| ui_launch | 展示 | 时间课程详情页 | 时间课程详情页首屏渲染完成；一次页面进入仅报一次 | page_name | 页面名称 | 时间课程_午后醒神_午后提拉醒神 | 原 time_detail_view |
| ui_click | 点击 | 时间课程时段卡 | 点击全天时段列表中的任一课程卡 | click_name | 页面点击 | 时间课程_午后醒神_午后提拉醒神 | 原 slot_click；同时上报 slot_status=过去/当前/未来、member_status=会员/非会员、course_id、slot_id |
| ui_click | 点击 | 当前课程立即开始 | 点击当前课程主卡或底部固定栏“立即开始/开始” | click_name | 页面点击 | 时间课程_立即开始_{课程名称} | 同时上报 course_id、slot_id、slot_status=当前 |
| business_trigger | 业务触发 | 时间课程付费墙触发 | 非会员点击非当前时段课程，系统判定需付费并准备跳转常规付费页 | trigger_name | 触发名称 | 时间课程_非当前时段_触发付费页 | 原 time_course_paywall_trigger；同时上报 course_id、slot_id、slot_status、source=time_course |
| ui_launch | 展示 | 沉浸式付费页 | QA 完成后首次沉浸式付费页渲染完成 | page_name | 页面名称 | 付费页_沉浸式_QA完成 | 原 paywall_view；variant=immersive，source=qa_complete，coupon_state=新人券220 |
| ui_launch | 展示 | 常规付费页 | 常规付费页渲染完成，包括首页/会员中心/时间课程等来源 | page_name | 页面名称 | 付费页_常规_{来源}_{优惠状态} | 原 paywall_view；variant=regular；同时上报 source、coupon_state、has_detection |
| ui_click | 点击 | 会员档位选择 | 点击月/季/半年/年/永久会员任一价格档位；重复点击当前档位不重复报 | click_name | 页面点击 | 付费页_会员档位_{月/季/半年/年/永久} | 原 tier_select；同时上报 sku_id、period、display_price、coupon_state |
| ui_click | 点击 | 购买按钮 | 点击付费页底部购买 CTA，且客户端准备创建订单 | click_name | 页面点击 | 付费页_立即开通_{档位}_{实付价} | 原 purchase_click；同时上报 sku_id、order_id、variant、source |
| business_result | 结果 | 购买成功 | 支付平台返回成功且服务端订单校验通过 | result_name | 结果名称 | 会员购买_成功_{档位} | 原 purchase_success；同时上报 order_id、sku_id、pay_amount、currency、source |
| business_result | 结果 | 购买失败 | 支付失败、取消、超时或服务端校验失败 | result_name | 结果名称 | 会员购买_失败_{失败原因} | 原 purchase_fail；同时上报 order_id、sku_id、fail_code、fail_reason、source；用户主动取消单独标记 fail_reason=用户取消 |
| ui_click | 点击 | 关闭付费页 | 点击沉浸式或常规付费页关闭按钮；系统返回不算点击 | click_name | 页面点击 | 付费页_关闭_{沉浸式/常规} | 原 paywall_dismiss；同时上报 variant、source、stay_duration、coupon_state |
| ui_launch | 展示 | 会员权益对比 | 付费页“非会员/会员权益对比”模块进入可视区域≥50%，持续≥1秒 | module_name | 模块名称 | 付费页_会员权益对比 | 原 benefit_compare_expose；同时上报 variant、source |
| ui_launch | 展示 | 用户评价模块 | 付费页“她们练到了第几周”评价模块进入可视区域≥50%，持续≥1秒 | module_name | 模块名称 | 付费页_用户评价 | 原 review_expose；同时上报 variant、source、review_set_id |
ui_launch（中文名：展示）；② 用户主动点击使用 ui_click（中文名：点击）；③ 系统业务判定使用 business_trigger；④ 支付结果使用 business_result。上报值中的 {课程名称}、{时段名称}、{来源}、{优惠状态}、{档位}、{实付价} 为动态值，中文业务值必须来自服务端枚举或统一字典，禁止客户端自由拼写。展示事件去重范围为单次页面会话；模块曝光满足可视面积≥50%且持续≥1秒。核心指标
- 蜕变首页到课程详情点击率
- 当前时段课程启动率/完成率
- 非当前时段课程付费触发率与购买率
- 沉浸式页曝光收入
- 常规页 24h 内/外曝光收入
- 年会员占比、退款率、续费率
加载、异常、缓存与版本兼容
非理想状态与恢复路径
| 场景 | 处理 | 恢复 |
|---|---|---|
| 首页加载中 | 按最终布局展示骨架屏，首屏图片预留尺寸 | 配置与数据并行加载 |
| 无网络 | 展示缓存首页和时间课程；不可开始需在线校验的付费/新课程 | 网络恢复静默刷新一次 |
| 跨时段 | 当前课程、列表状态、倒计时和底栏同步切换 | 服务端时间校正，避免设备时间误差 |
| QA 数据缺失 | 使用通用“每天 X 分钟的 90 天渐进计划”，隐藏未知标签 | 引导补充目标，不伪造诊断 |
| 视频失败 | 沉浸页停留本地首帧，不影响权益和购买 | 后台重试一次 |
| 商品加载失败 | 禁用 CTA，展示“价格加载失败，点击重试” | 重新请求商店商品 |
| 支付处理中 | 按钮 loading，防重复下单 | 依据平台回调恢复；支持恢复购买 |
| 低版本 | CMS 不下发新模块；付费入口回退现有稳定页 | 升级后启用 V1.1.10 |