背景与问题
- 现况：聊天页「我的小程序」点击 H片后前往内嵌 H5。
- 问题：H片与其他小程序入口混排，入口辨识度低；内嵌 H5 造成页面承接与返回体验不一致。
- 机会：利用聊天列表高频曝光区，以今日榜单 Top 1 封面建立更直觉的内容入口。
【IM】看H片：从内嵌 H5 改为原生
将「看H片」从「我的小程序」入口移除，改为聊天列表内的原生 Banner 入口。Banner 显示今日榜单 Top 1 封面，固定 4:3 比例；点击 Banner 进入原生看H片菜单页，返回后回到原聊天列表。
入口替换移除「我的小程序」中的 H片，避免与其他小程序混在同一区。
Top 1 封面Banner 使用今日榜单第一名内容的封面，图片比例固定 4:3。
原生菜单由 IM 原生页承接，不再跳转或载入内嵌 H5。
返回保留返回聊天列表时保留原列表滚动位置、Tab 与未读状态。
1. 需求说明
本次只处理入口与承接页，不延伸影片播放或内容管理规则。
需求范围
- Android、iOS 聊天列表新增原生 Banner。
- 从「我的小程序」中移除 H片图示与 H片跳转。
- 新增原生看H片菜单页，支持返回聊天列表。
- 建立加载、空状态、图片失败与两种默认图状态。
非本期范围
- 不重做底部 5 TAB 的信息架构。
- 不改动聊天消息、群组、联系人与红包功能。
- 不延伸与本次入口和菜单页无关的其他页面功能。
完成标准
- Banner 加载成功时展示今日榜单 Top 1 封面。
- Top 1 封面未返回、读取失败或内容不可用时展示聊天列表 Banner 入口默认图，Banner 仍可点击进入菜单页。
- 聊天列表入口与看H片页 Banner 获取失败时，分别展示对应默认图。
- 原生页返回后回到进入前的聊天列表状态。
产品决策：Banner 整体可点击，不增加右下角悬浮入口；这样可以避免与现有红包／钱包浮层竞争视线，也不增加底部 TAB。
2. 使用流程
入口、承接与返回均在 IM 原生容器内完成。
01 聊天列表使用者停留在 Android／iOS 聊天列表。
02 看见 BannerBanner 显示「今日榜单 Top 1」与 4:3 封面。
03 点击整区点击 Banner 任一位置，进入原生看H片菜单。
04 原生菜单菜单页载入分类与影片卡片。
05 返回聊天返回按钮或 Android 系统返回，回到原列表状态。
3. 原型
3.1—3.3 展示用户提供的页面原型；3.4 补充可读的其他状态示意原型。每段原型后紧接字段表，加载、空状态、失败与默认图规则写入对应页面。
聊天列表 → 原生看H片菜单
点击任一 BannerBanner 只使用今日榜单 Top 1 封面；封面比例固定为 4:3。
Android维持现有底部 5 TAB 与聊天列表结构
16:32▴ ◉ ▮ 51%
消息•••
我的小程序查看全部 ›
说球帝
UED体育
吉祥体育
活动红包
红包商城
福红包收米群桔子宝贝：以后再也不碰阿三比赛了17:29
球说球帝主播粉丝群IM 游客：都是后期阵容17:29
麻麻豆糖心UED 探花：[视频小程序]...17:01
欧欧美系列UED 探花：[视频小程序]反击17:00
比赛
聊天
TV频道
资料库
我的
iOS保留「讯息／联络／群组」顶部结构与 5 TAB
16:32⌁ ◉ ▮ 51%
讯息 (4602)＋
讯息联络群组
我的小程序查看全部 ›
说球帝直播
UED体育官网
吉祥体育
活动红包
红包商城
福红包收米群桔子宝贝：以后再也不碰阿三比赛了17:29PM
球说球帝主播粉丝群IM 游客：都是后期阵容17:29PM
麻麻豆糖心UED 探花：[视频小程序]...17:01PM
欧欧美系列UED 探花：[视频小程序]反击17:00PM
本场
聊天
吉祥体育
资料库
我的
3.1 看片列表页｜页面本身
使用用户提供的最新入口与列表页截图，说明原生看片列表页面本身的结构、影片卡片与页面状态；点击后的菜单、picker 与搜索操作统一放在 3.2。
对应 PRD（字段级）
| 呈现名称 | 位置 | 交互 | 说明 | 格式 | 范例 |
|---|---|---|---|---|---|
| 原「我的小程序」H片入口 | 聊天列表／我的小程序区 | 上线后不再呈现或响应点击 | 移除原有小程序区中的 H片 icon、H片名称与原 H5 跳转；不新增底部 TAB 或悬浮入口。 | Component state：removed | H片入口=hidden |
| Banner 入口 | 聊天列表，「我的小程序」左侧 | 点击整块进入 3.1 看片列表页 | 替代已移除的原 H片小程序入口，整块 Banner 均可点击。 | 组件／可点击区域 | 今日榜单 Top 1 |
| Banner 封面 | Banner 左侧封面容器 | 加载中显示默认图；成功后替换为 Top 1 封面 | 1 秒内未返回、读取失败或内容不可用时，使用聊天列表 Banner 入口默认图；入口仍可点击。 | 图片 URL；4:3 | coverUrl；bannerDefault |
| Banner 更新 | Banner 数据层 | 按周期重新取得最新数据 | 每 15 分钟更新一次；更新失败保留当前 Banner 或入口默认图，不阻塞聊天列表。 | Interval：15 min | rank=1；available=true |
| 页面标题 | 页面顶部导航栏中间 | 静态展示 | 显示当前原生页面名称，保持 Android／iOS 原生导航样式。 | String | 看H片 |
| 返回按钮 | 页面顶部左侧 | 点击返回聊天列表 | 回到进入前的聊天列表，并保留聊天 Tab、滚动位置与未读状态。 | Navigation action | ‹；back() |
| 榜单 TAB | 页面标题下方第一层筛选栏 | 静态展示当前选中状态 | 展示「今日榜／周榜单／月榜／全部／推荐」；首次进入默认选中「今日榜」，当前列表结果与默认榜单一致。 | Enum；selected：Boolean | today=true |
| 影片分类 | 榜单 TAB 下方第二层分类栏 | 静态展示当前分类状态 | 展示「全部／我的收藏／欧美／国产／自拍／日韩／动漫」等分类；首次进入默认显示「全部」。 | Enum／String；selected：Boolean | all=true |
| 影片列表 | 筛选与搜索结果内容区 | 上下滚动浏览；分页载入 | 展示当前条件返回的影片结果；采用两栏网格按资料顺序「左、右、左、右」逐项填入，后续项目向下延伸；每次载入 10 部影片，结果为空时显示空状态，不影响返回聊天列表。 | Array<Object>；pageSize=10；order：row-major | 第1项左／第2项右；items=10 |
| 影片卡片 | 页面内容区 2 栏卡片网格 | 点击进入 3.3 看片详情页 | 列表可同时呈现手机影片竖版与非手机影片横版卡片；依各卡片 orientation 使用对应版型向下延伸排列，单张卡片失败不影响其他卡片。 | Object：contentId、title、coverUrl、duration、tags、completionRate、viewCount、author、favoriteCount、orientation、available | orientation=portrait／landscape |
| 手机影片竖版卡片 | 影片列表 2 栏网格中的手机影片 | 点击进入 3.3 看片详情页 | 手机影片使用竖版封面比例展示；卡片下方显示影片名称、时长、标签、完播率、观看人数、作者与收藏数，不强制裁切为横版。 | orientation：portrait；Image URL | 手机影片；portrait |
| 非手机影片横版卡片 | 影片列表 2 栏网格中的非手机影片 | 点击进入 3.3 看片详情页 | 非手机影片使用横版封面比例展示；可与竖版卡片并存于同一列表，卡片下方显示影片名称、时长、标签、完播率、观看人数、作者与收藏数。 | orientation：landscape；Image URL | 非手机影片；landscape |
| 影片缩图 | 影片卡片顶部 | 加载成功展示图片；失败展示影片默认图 | 手机影片使用竖版缩图比例，非手机影片使用横版缩图比例；不强制统一裁切为 4:3，缩图失败不阻塞列表。 | Image URL；portrait／landscape | coverUrl；orientation |
| 影片时长 | 影片缩图及卡片资讯区 | 静态展示 | 展示影片总时长，并与详情页播放器及影片资讯保持一致。 | Duration：MM:SS | 19:26 |
| 影片名称 | 影片缩图下方卡片资讯区 | 静态展示；过长时截断或换行 | 展示影片标题；文字过长时依卡片宽度换行或截断，不影响其他字段。 | String | 今日榜单热门影片 |
| 影片标签 | 影片名称下方卡片资讯区 | 静态展示 | 展示影片标签；标签内容由影片资料返回，卡片内不新增未返回的标签。 | Array<String> | 制服；丝袜；御姐 |
| 完播率 | 影片卡片资讯区 | 静态展示 | 展示影片完播率；无资料时显示「--」。 | Percent | 12% |
| 观看人数 | 影片卡片资讯区 | 静态展示 | 展示影片累计观看人数；依接口返回值格式化显示。 | Integer／String | 2450 人观看 |
| 作者 | 影片卡片资讯区 | 静态展示 | 展示影片作者名称；无资料时不显示空白占位文案。 | String | UED探花 |
| 收藏数 | 影片卡片资讯区 | 静态展示 | 展示影片累计收藏数；依接口返回值格式化显示。 | Integer／String | 44 收藏 |
| 加载状态 | 列表内容区 | 请求期间显示影片骨架；资料返回后替换为卡片 | 列表请求期间显示 2×2 影片骨架，不显示 Banner 区；影片封面读取失败时改用影片默认图。 | State：loading；Skeleton；Image URL | movieSkeleton；movieDefault |
| 空状态 | 列表页面中部 | 点击「重新加载」再次请求 | 无内容时居中展示「暂无视频」与重新加载操作；收藏条件无资料时展示「暂无收藏视频」。 | State：empty；String | 暂无视频；暂无收藏视频 |
| 网络失败 | 列表内容区 | 展示失败状态并支持重新加载 | 网络异常时不影响返回聊天列表；单张封面失败仅影响对应卡片。 | State：error | 网络异常，请稍后重试 |
3.2 看片列表页｜点击操作与查询面板
以下为用户提供的列表页操作截图；仅说明点击后的 pickup 菜单、榜单／分类切换、日期 picker、热门搜索与关键词搜索等交互，页面本身字段归入 3.1。
对应 PRD（字段级）
| 呈现名称 | 位置 | 交互 | 说明 | 格式 | 范例 |
|---|---|---|---|---|---|
| 三点菜单 | 页面顶部右侧 | 点击展开 pickup 功能选单 | 展开当前列表页的功能选单；选单展开时不改变当前榜单、分类、选日、搜索与列表状态。 | Action menu：Array<Action> | •••；pickup menu |
| 重新整理 | 三点 pickup 选单 | 点击后重新请求当前列表 | 按当前榜单、分类、选日与搜索条件重新取得影片；保留当前页面条件，载入期间显示对应默认图。 | Action：refresh | refresh() |
| 复制连结 | 三点 pickup 选单 | 点击后复制当前页面连结 | 复制当前看H片列表的连结；完成后显示复制成功提示，不离开列表页。 | Action：copyLink；URL | copyLink(listUrl) |
| 以浏览器开启 | 三点 pickup 选单 | 点击后调用系统浏览器开启 | 将当前看H片列表连结交由系统浏览器开启；原生列表页状态保留。 | Action：openInBrowser；URL | openExternal(listUrl) |
| 关闭 | 三点 pickup 选单 | 点击后关闭选单 | 关闭 pickup 选单并回到当前列表；不刷新、不改变当前榜单与列表位置。 | Action：close | closeMenu() |
| 取消 | 三点 pickup 选单 | 点击后取消当前选单操作 | 取消后关闭选单并回到当前列表；不执行刷新、复制或浏览器开启。 | Action：cancel | cancelMenu() |
| 榜单筛选 | 列表顶部筛选栏 | 切换榜单并刷新列表 | 提供「今日榜／周榜单／月榜／全部／推荐」，默认选中今日榜。 | Enum | today／week／month／all／recommend |
| 选日 | 榜单筛选栏右侧日历图标 | 打开日期 picker；确认后查询对应榜单 | 默认显示当前日期；取消关闭并保留当前榜单，不改变聊天列表状态。 | Date picker；YYYY-MM-DD | 2026-09-02 |
| 选日范围 | 日期选择面板 | 选择可用日期；不可用日期不可选 | 最多可查询当前日期往前 1 年内的资料；超过 1 年不提供选择。 | Date range：最近 365 日 | 2025-09-02～2026-09-02 |
| 日期 picker 操作 | 日期选择面板底部 | 点击「清空筛选／确定」或关闭面板 | 「清空筛选」清除日期条件；「确定」提交所选日期并刷新列表；关闭或取消不改变当前条件与列表状态。 | Action：clear／confirm／cancel | clearDate()；confirmDate(date) |
| 分类筛选 | 榜单筛选栏下方 | 点击分类切换影片列表 | 按原型提供的内容分类筛选，不新增独立底部入口。 | Enum／String | 全部；欧美；国产；自拍；日韩；动漫 |
| 搜索框 | 分类栏下方 | 输入关键词并发起查询 | 支持关键词搜索与热门搜索；从详情页点击标签时，自动填入标签并立即查询。 | String | 搜索影片；关键词：制服 |
| 热门搜索 | 搜索框展开后的热门搜索面板 | 点击热门关键词带入搜索 | 展示接口返回的热门关键词；点击关键词后填入搜索框并立即发起列表查询。 | Array<String> | 热门关键词；制服 |
3.3 看片详情页
以下为用户提供的看片详情页原型；页面架构、播放器、互动操作与字段规则紧接于原型后说明。详情页 Banner 与猜你喜欢、相关推荐卡片封面统一使用 4:3；列表影片卡片比例依 3.1 的竖版／横版规则处理。
对应 PRD（字段级）
| 呈现名称 | 位置 | 交互 | 说明 | 格式 | 范例 |
|---|---|---|---|---|---|
| 页面架构 | 详情页整体 | 依页面顺序向下浏览 | 页面依序为：1.影片区；2.影片资讯（名称、完播率、观看人数／观看次数、热度、点赞、收藏、分享、评论、标签搜索）；3.猜你喜欢；4.相关推荐。 | Section[] | 影片区 → 影片资讯 → 猜你喜欢 → 相关推荐 |
| 返回按钮 | 页面顶部左侧 | 点击返回 3.1 看片列表页 | 返回后保留原榜单、分类、选日、搜索关键词与列表滚动位置。 | Navigation action | ‹；back() |
| 视频播放器 | 详情页顶部视频区域 | 进入详情自动播放；支持播放／暂停、拖动进度、切换全屏 | 进入详情后自动播放当前影片；加载期间显示影片默认图，资源失败时显示可恢复的失败状态，不影响返回详情页。 | Video URL；Boolean；State | autoplay=true；videoUrl；playing／paused／error |
| 播放区固定 | 页面上滑后的顶部影片区 | 手势上滑后冻结影片播放区 | 上滑浏览影片资讯与推荐内容时，影片播放区固定在顶部并保留当前画面与播放控制。 | Sticky region；Boolean | videoRegionFrozen=true |
| 播放进度 | 视频播放器底部 | 拖动进度条跳转播放位置 | 显示当前播放时间与总时长，进度不可超过影片总时长。 | Seconds／MM:SS | 00:01／19:26 |
| 影片时长 | 播放器进度栏与影片信息区 | 静态展示 | 展示影片总时长，并与播放器进度栏及列表卡片保持一致。 | Duration：MM:SS | 19:26 |
| 影片标题 | 播放器下方内容区 | 静态展示 | 展示影片名称，过长时按页面规则截断或换行。 | String | 出轨的老婆，单男等不及直接撕烂丝袜插了进去 |
| 影片简介 | 影片标题下方 | 静态展示；过长时换行或截断 | 展示影片内容简介及其他影片说明。 | String | 单男等不及直接撕烂丝袜插了进去 |
| 完播率 | 影片数据区 | 静态展示 | 展示用户观看至影片结束的比例；无数据时显示「--」。 | Percent | 完播率 12% |
| 观看人数／观看次数 | 影片数据区 | 静态展示 | 展示影片累计观看人数／观看次数，按接口返回值格式化显示。 | Integer／String | 观看人数 7906 |
| 热度 | 影片数据区 | 静态展示 | 展示影片热度；大于 10,000 时以「万」为单位显示。 | Integer／String | 热度 1.7 万 |
| 点赞 | 影片信息下方操作栏 | 点击切换已点赞／未点赞并更新数量 | 同一用户重复点击只切换当前状态，不得重复提交；状态返回列表后按产品规则保留。 | Boolean＋Integer | liked=true；likeCount=11 |
| 收藏 | 影片信息下方操作栏 | 点击切换已收藏／未收藏并更新状态 | 收藏成功后显示已收藏状态，并提供「前往收藏」查看入口；取消收藏需即时反馈。 | Boolean；Navigation action | favorited=true；收藏列表 |
| 分享 | 影片信息下方操作栏 | 打开群聊选择面板；确认后分享并前往该聊天室 | 未选择群聊时不可确认分享；分享成功后进入目标聊天室；取消关闭面板并返回详情页。 | Share target：groupId；Navigation action | groupId=456284；openChat(groupId) |
| 评论 | 影片信息下方操作栏 | 点击评论入口 | 当前版本暂不开放评论输入与提交，点击后提示「评论功能即将上线，暂不开放」。 | State：disabled；String | 评论功能即将上线，暂不开放 |
| 标签 | 影片信息下方标签栏 | 点击标签进入列表搜索 | 将标签文字带入 3.2 搜索框并立即发起查询，自动展示对应结果。 | String／Array<String> | 制服；丝袜；御姐 |
| 猜你喜欢 | 影片资讯下方第一推荐区（上方） | 上下滚动浏览；点击卡片进入对应详情页 | 默认展示 4 则推荐影片，按 2×2 并排排列；单张封面失败使用影片默认图，不影响其他推荐项。 | Array<Object>；4 items；封面 4:3 | H002～H005；2×2 |
| 相关推荐 | 猜你喜欢下方第二推荐区（下方） | 上下滚动浏览；点击卡片进入对应详情页 | 默认展示 4 则推荐影片，按 2×2 并排排列；单张封面失败使用影片默认图，不影响其他推荐项。 | Array<Object>；4 items；封面 4:3 | H006～H009；2×2 |
3.4 其他状态原型
以下使用用户提供的其他状态 H5 原型截图，并仅保留用户原始截图中的默认图参考；字段级 PRD 另说明默认图、页面异常、空状态、加载中与网络异常规则。
默认图参考（仅保留原始截图中的默认图）
对应 PRD（字段级）
| 呈现名称 | 位置 | 交互 | 说明 | 格式 | 范例 |
|---|---|---|---|---|---|
| Banner 默认图 | 聊天列表 Banner／看H片页 Banner | 封面无法取得时显示对应默认图 | 聊天列表入口与看H片页 Banner 分别使用各自默认图；默认图出现时入口与页面仍可继续操作。 | Image URL；4:3 | chatBannerDefault；pageBannerDefault |
| 影片封面默认图 | 影片卡片、猜你喜欢、相关推荐 | 封面无法取得时显示影片默认图 | 影片封面加载中或读取失败时显示默认图；列表卡片依手机竖版／非手机横版保留对应比例，推荐卡片仍按各自 4:3 规则处理，不阻塞列表、详情页或其他卡片。 | Image URL；依卡片版型 | movieDefault；orientation |
| 页面异常状态 | 看H片页面内容区 | 保留顶部导航、榜单筛选与返回功能 | 异常仅展示在对应内容区，不覆盖导航栏与三点 pickup 选单；用户仍可返回上一页。 | State：pageError | pageError=true |
| 空状态 | 列表／收藏内容区中部 | 点击「重新加载」再次请求 | 无影片或无收藏内容时，内容区居中显示空状态；一般列表显示「暂无视频」，收藏列表显示「暂无收藏视频」。 | State：empty；String | 暂无视频；暂无收藏视频 |
| 加载中 | 列表内容区 | 等待请求完成 | 列表请求期间显示 2×2 影片骨架，不显示 Banner 区；请求成功后替换为实际卡片，影片封面失败时使用影片默认图。 | State：loading；Skeleton；Image URL | 加载中…；movieSkeleton；movieDefault |
| 网络异常 | 页面内容区 | 点击「刷新页面」重新请求 | 网络异常时显示错误图、异常提示与刷新操作；刷新失败可继续停留在当前状态，并保留返回功能。 | State：networkError；Action | 网络异常；refreshPage() |
| 刷新页面 | 网络异常状态操作区 | 点击后重新载入当前页面数据 | 重新请求当前页面，不改变原榜单、分类、选日、搜索条件与导航返回路径。 | Action：refreshPage | 刷新页面 |
4. 风险／注意
数据来源
- 封面 URL、影片 ID 与可用状态需由可信任 API 返回，前端不自行拼接来源。
- 今日榜单 Top 1 与菜单页列表使用同一数据口径，避免 Banner 与菜单页内容不一致。
效能与稳定
- Banner 仅载入一张 Top 1 封面，使用缩图尺寸与快取，避免影响聊天列表首屏。
- 图片失败使用默认图；API 超时不阻塞聊天列表。
- 原生菜单需防止重复点击、重复 push 与返回后页面重复建立。
返回与状态
- 进入前记录聊天列表 scroll offset 与当前 Tab。
- 返回时不重新拉取整个聊天列表；若 Banner 资料已过期，可静默刷新。
- Android 返回键、手势返回与页面返回按钮需共用同一 navigation contract。
开发待确认
- 今日榜单 API 的实际 endpoint、缓存时间与时区。
- 原生看H片菜单是否沿用现有影片数据服务。
5. 验收标准
需 Android 与 iOS 各自完成以下案例；除平台外，产品规则应一致。
- 「我的小程序」中移除原 H片入口，聊天列表新增 Banner，且不遮挡现有聊天内容与底部 TAB。
- Banner 使用今日榜单 Top 1 封面，固定 4:3；封面读取失败时显示聊天列表 Banner 入口默认图且仍可点击。
- 点击 Banner 任一位置进入原生看H片列表页；列表页支持今日／周榜单／月榜／全部／推荐、分类、搜索、日历 picker、pickup 功能选单及分页加载。
- 列表两栏并排，每次加载 10 部影片；手机影片使用竖版卡片，非手机影片使用横版卡片，按各自比例展示；载入期间显示 2×2 影片骨架，影片封面读取失败时使用影片默认图。
- 点击影片卡片进入详情页并自动播放，点赞、收藏、分享可操作；评论点击后提示「评论功能即将上线，暂不开放」；点击标签后自动带入搜索并展示查询结果。
- 分享成功后前往目标聊天室；详情页依序展示「猜你喜欢」与「相关推荐」，两区各默认 4 则并按 2×2 排列。
- 详情页手势上滑后冻结影片播放区；点击返回、Android 系统返回或手势返回，均回到原聊天列表并保留 Tab、滚动位置与未读状态。
- Android 与 iOS 均完成 safe area、状态列、底部 5 TAB 与返回交互适配。
6. 设计说明
设计重点是让 H片入口融入聊天列表，同时保持原有 IM 导航和用户操作路径。
入口融入
- Banner 放在「我的小程序」左侧，承接原有浏览习惯；封面不可用时展示聊天列表 Banner 入口默认图。
- 不新增底部 TAB 或悬浮入口，避免干扰现有聊天与红包入口。
视觉承接
- 3.1 列表影片卡片区分手机影片竖版与非手机影片横版，依影片类型展示对应比例。
操作效率
- Banner 全区可点击，减少用户寻找点击区域的成本。
- 列表页提供榜单、分类、搜索、日历 picker、pickup 选单与分页；详情页提供点赞、收藏、分享与标签搜索。
看H片页面情境
- 1. 加载状态：列表显示 2×2 影片骨架；Banner 与播放器按各自默认图规则处理。
- 2. 空状态：一般列表显示「暂无视频」，收藏列表显示「暂无收藏视频」，均在页面中部居中展示。
- 3. 网络异常：列表或详情内容区展示失败状态；聊天列表入口与看H片页 Banner 分别使用对应默认图。
- 4. 影片封面：封面读取失败时使用影片默认图，不影响其他影片与列表。
版本记录
| 版本 | 日期 | 记录 |
|---|---|---|
| v1.0 | 2026-09-02 | 初版 |