背景与问题
- 现况:聊天页「我的小程序」点击 H片后前往内嵌 H5。
- 问题:H片与其他小程序入口混排,入口辨识度低;内嵌 H5 造成页面承接与返回体验不一致。
- 机会:利用聊天列表高频曝光区,以今日榜单 Top 1 封面建立更直觉的内容入口。
将「看H片」从「我的小程序」入口移除,改为聊天列表内的原生 Banner 入口。Banner 显示今日榜单 Top 1 封面,固定 4:3 比例;点击 Banner 进入原生看H片菜单页,返回后回到原聊天列表。
本次聚焦入口、列表与详情承接;影片播放仅记录详情页必要交互规则,不延伸内容管理规则。
入口、承接与返回均在 IM 原生容器内完成。
3.1—3.3 展示用户提供的页面原型;3.4 补充可读的其他状态示意原型。每段原型后紧接字段表,加载、空状态、失败与默认图规则写入对应页面。
Banner 只使用今日榜单 Top 1 封面;封面比例固定为 4:3。
使用用户提供的最新入口与列表页截图,说明原生看片列表页面本身的结构、影片卡片与页面状态;点击后的筛选、picker、搜索与下拉刷新操作统一放在 3.2。

| 呈现名称 | 位置 | 交互 | 说明 | 展示格式 | 范例 |
|---|---|---|---|---|---|
| 原「我的小程序」H片入口 | 聊天列表/我的小程序区 | 上线后不再呈现或响应点击 | 移除原有小程序区中的 H片 icon、H片名称与原 H5 跳转;不新增底部 TAB 或悬浮入口。 | 不展示/不响应 | H片入口隐藏 |
| Banner 入口 | 聊天列表,「我的小程序」左侧 | 点击整块进入 3.1 看片列表页 | 替代已移除的原 H片小程序入口,整块 Banner 均可点击。 | 整块可点击入口 | 今日榜单 Top 1 |
| Banner 封面 | Banner 左侧封面容器 | 加载中显示默认图;成功后替换为 Top 1 封面 | 1 秒内未返回、读取失败或内容不可用时,使用聊天列表 Banner 入口默认图;入口仍可点击。 | 图片;4:3 封面 | Top 1 封面;默认图 |
| Banner 更新 | Banner 数据层 | 按周期重新取得最新数据 | 每 15 分钟更新一次;更新失败保留当前 Banner 或入口默认图,不阻塞聊天列表。 | 定时更新提示;原图保留 | 每 15 分钟更新 |
| 页面标题 | 页面顶部导航栏中间 | 静态展示 | 显示当前原生页面名称,保持 Android/iOS 原生导航样式。 | 顶部居中文字 | 看H片 |
| 返回按钮 | 页面顶部左侧 | 点击返回聊天列表 | 回到进入前的聊天列表,并保留聊天 Tab、滚动位置与未读状态。 | 顶部左侧返回图标 | ‹;返回聊天列表 |
| 榜单 TAB | 页面标题下方第一层筛选栏 | 静态展示当前选中状态 | 展示「今日榜/周榜单/月榜/全部/推荐」;首次进入默认选中「今日榜」,当前列表结果与默认榜单一致。 | 横向 TAB;选中态 | 今日榜选中 |
| 影片分类 | 榜单 TAB 下方第二层分类栏 | 静态展示当前分类状态 |
| 横向分类栏;选中态 | 全部选中、麻豆糖心 |
| 影片列表 | 搜索框以下列表内容区 | 上下滚动浏览(滚动范围:搜索框以下);分页载入 |
| 双栏影片网格;向下延伸 | 第1项左/第2项右;每次 10 部 |
| 置顶按钮 | 列表滚动范围右下侧 | 点击回到默认列表顶部 |
| 右下角置顶按钮 | 回到列表顶部;恢复默认筛选 |
| 影片卡片 | 页面内容区 2 栏卡片网格 | 点击进入 3.3 看片详情页 |
| 双栏卡片;竖版/横版混排 | 手机竖版卡片;非手机横版卡片 |
| 手机影片竖版卡片 | 影片列表 2 栏网格中的手机影片 | 点击进入 3.3 看片详情页 |
| 竖版封面卡片 | 手机影片;竖版比例 |
| 非手机影片横版卡片 | 影片列表 2 栏网格中的非手机影片 | 点击进入 3.3 看片详情页 |
| 横版封面卡片 | 非手机影片;横版比例 |
| 影片缩图 | 影片卡片顶部 | 加载成功展示图片;失败展示影片默认图 |
| 竖版/横版封面;默认图 | 影片原图;影片默认图 |
| 影片时长 | 影片缩图及卡片资讯区 | 静态展示 | 展示影片总时长,并与详情页播放器及影片资讯保持一致。 | 封面角标+卡片信息 | 19:26 |
| 影片名称 | 影片缩图下方卡片资讯区 | 静态展示;过长时截断或换行 | 展示影片标题;文字过长时依卡片宽度换行或截断,不影响其他字段。 | 标题文字;截断/换行 | 今日榜单热门影片 |
| 影片标签 | 影片名称下方卡片资讯区 | 静态展示;点击标签带入搜索并查询 |
| 标签文字;最多 3 个 | 大长腿;美少女;小萝莉 |
| 完播率 | 影片卡片资讯区 | 静态展示 | 展示影片完播率;无资料时显示「--」。 | 百分比文字 | 12% |
| 观看人数 | 影片卡片资讯区 | 静态展示 |
| 完整数值/0.0万 | 9,999 人观看;1.0万 人观看 |
| 作者 | 影片卡片资讯区 | 静态展示 | 展示影片作者名称;无资料时不显示空白占位文案。 | 作者头像/名称 | UED探花 |
| 收藏数 | 影片卡片资讯区 | 静态展示 |
| 完整数值/0.0万 | 9,999 收藏;1.0万 收藏 |
| 加载状态 | 列表内容区 | 请求期间显示影片骨架;资料返回后替换为卡片 | 列表请求期间显示 2×2 影片骨架,不显示 Banner 区;影片封面读取失败时改用影片默认图。 | 2×2 骨架卡片 | 骨架卡片;影片默认图 |
| 空状态 | 列表页面中部 | 点击「重新加载」再次请求 | 无内容时居中展示「暂无视频」与重新加载操作;收藏条件无资料时展示「暂无收藏视频」。 | 居中空状态文案+按钮 | 暂无视频;重新加载 |
| 网络失败 | 列表内容区 | 展示失败状态并支持重新加载 | 网络异常时不影响返回聊天列表;单张封面失败仅影响对应卡片。 | 内容区错误状态+重载按钮 | 网络异常;重新加载 |
以下为用户提供的列表页操作截图;仅说明榜单/分类切换、日历 icon 下方日期小窗口、热门搜索、关键词搜索与下拉刷新等交互,页面本身字段归入 3.1。本次补充搜索展开、收藏空状态、关键词搜索结果、下拉刷新与选日 Popover 原型。
热门搜索展开/收藏空状态/关键词搜索结果
选日 Popover:近 30 天,单次显示今日~3 天前
下拉刷新
| 呈现名称 | 位置 | 交互 | 说明 | 展示格式 | 范例 |
|---|---|---|---|---|---|
| 榜单筛选 | 列表顶部筛选栏 | 切换榜单并刷新列表 | 提供「今日榜/周榜单/月榜/全部/推荐」,默认选中今日榜。 | 横向筛选 TAB;选中态 | 今日榜选中 |
| 滚动范围 | 搜索框以下列表内容区 | 上下滑动浏览完整列表;回到顶部后可下拉刷新 | 滚动区域从搜索框下方开始,向下延伸至列表底部;上方导航、榜单/分类筛选栏与搜索框不随列表内容滚动,列表回到顶部后才可触发下拉刷新。 | 列表内容区可滚动 | 从搜索框下方至列表底部 |
| 选日 | 榜单筛选栏右侧日历 icon | 点击后在 icon 下方展开日期小窗口;选中日期并点击「确定」刷新影片列表 | 小窗口以 Popover 局部呈现并锚定在日历 icon 下方,不遮挡整页;默认高亮当前日期,确认后按所选日期刷新列表影片。 | 日历图标+日期 Popover | 选中日期;确认刷新列表 |
| 选日范围 | 日历 icon 下方日期小窗口 | 选择近 30 天内的可用日期;单次显示今日至 3 天前范围 | 支持当前日期起向前 30 天(含当前日)的日期筛选;小窗口一次显示当前日期至 3 天前的连续范围,示意画面为今日、昨天、2 天前、3 天前;更早日期可在近 30 天范围内继续查看。 | 近 30 天日期列表;单选 | 今日~3 天前;更早日期继续查看 |
| 日期小窗口操作 | 日期小窗口底部 | 点击「取消/确定」、关闭 icon 或窗口外 | 「确定」提交选中的单一日期并刷新影片列表;点击「取消」、关闭 icon 或窗口外不改变当前日期条件与列表状态。 | Popover 底部取消/确定按钮 | 取消;确定 |
| 下拉刷新 | 搜索框以下列表内容区顶部 | 列表位于顶部时向下拖曳;达到门槛后释放刷新 |
| 下拉指示器;释放刷新;加载中 | 释放刷新;刷新中 |
| 分类筛选 | 榜单筛选栏下方 | 点击分类切换影片列表 | 按原型提供的内容分类筛选,不新增独立底部入口。 | 横向分类栏;选中态 | 全部、我的收藏、欧美、国产、自拍、日韩、动漫、酒店偷拍、反差萝莉、色情小说、伦理、麻豆糖心、新闻吃瓜 |
| 搜索框 | 分类栏下方 | 输入关键词并发起查询 | 支持关键词搜索与热门搜索;从详情页点击标签时,自动填入标签并立即查询。 | 输入框+搜索按钮 | 搜索影片;关键词:制服 |
| 热门搜索 | 搜索框展开后的热门搜索面板 | 点击热门关键词带入搜索并查询 |
| 两栏关键词列表;前 4 项醒目红字 | 热门关键词 1~12;前 4 项醒目红字 |
| 搜索结果 | 搜索框下方列表内容区 | 输入关键词后展示匹配影片 |
| 双栏影片卡片网格/空状态 | 关键词:极品;影片结果/空状态 |
以下为同一组影片详情流程原型,四张页面在宽屏下同排展示:
① 图 1:影片详情。
② 图 2:影片详情手势上滑;上滑时冻结顶部影片播放区,影片名称以下的简介、互动与推荐内容继续滚动。
③ 图 3:分享影片;点击分享后开启分享选择窗口。
④ 图 4:分享至群聊;用于说明分享流程示意,不代表实际群聊页面最终视觉。
| 呈现名称 | 位置 | 交互 | 说明 | 展示格式 | 范例 |
|---|---|---|---|---|---|
| 页面架构 | 详情页整体 | 依页面顺序向下浏览 | 页面依序为:1.影片区;2.影片资讯(名称、完播率、观看人数/观看次数、热度、点赞、收藏、分享、评论、标签搜索);3.猜你喜欢;4.相关推荐。 | 纵向页面区块 | 影片区 → 影片资讯 → 猜你喜欢 → 相关推荐 |
| 返回按钮 | 页面顶部左侧 | 点击返回 3.1 看片列表页 | 返回后保留原榜单、分类、选日、搜索关键词与列表滚动位置。 | 顶部左侧返回图标 | ‹;返回列表 |
| 视频播放器 | 详情页顶部视频区域 | 进入详情自动播放;支持播放/暂停、拖动进度 | 进入详情后自动播放当前影片;加载期间显示影片默认图,资源失败时显示可恢复的失败状态,不影响返回详情页。 | 视频画面+播放控件 | 自动播放;播放/暂停;失败提示 |
| 全萤幕播放 | 视频播放器控制区 | 点击全萤幕按钮进入全萤幕播放;再次点击退出 | 点击全萤幕按钮后,影片进入全萤幕播放;退出全萤幕后回到详情页原播放状态,并保持当前播放进度。 | 全萤幕播放控件 | 进入全萤幕;退出全萤幕 |
| 播放区固定 | 页面上滑后的顶部影片区 | 手势上滑后冻结影片播放区 | 上滑浏览影片资讯与推荐内容时,影片播放区固定在顶部并保留当前画面与播放控制。 | 顶部固定播放区 | 上滑后播放器固定 |
| 播放进度 | 视频播放器底部 | 拖动进度条跳转播放位置 | 显示当前播放时间与总时长,进度不可超过影片总时长。 | 进度条+时间文字 | 00:01/19:26 |
| 影片时长 | 播放器进度栏与影片信息区 | 静态展示 | 展示影片总时长,并与播放器进度栏及列表卡片保持一致。 | 播放器时间+资讯文字 | 19:26 |
| 影片标题 | 播放器下方内容区 | 静态展示 | 展示影片名称,过长时按页面规则截断或换行。 | 标题文字 | 影片标题;超长截断/换行 |
| 影片简介 | 影片标题下方 | 静态展示;过长时换行或截断 | 展示影片内容简介及其他影片说明。 | 简介文字;换行/截断 | 影片内容简介 |
| 完播率 | 影片数据区 | 静态展示 | 展示用户观看至影片结束的比例;无数据时显示「--」。 | 百分比文字 | 完播率 12% |
| 观看人数/观看次数 | 影片数据区 | 静态展示 |
| 完整数值/0.0万 | 观看人数 9,999;观看人数 1.0万 |
| 热度 | 影片数据区 | 静态展示 | 展示影片热度;大于 10,000 时以「万」为单位显示。 | 热度数值;万单位 | 热度 1.7 万 |
| 点赞 | 影片信息下方操作栏 | 点击切换已点赞/未点赞并更新数量 | 同一用户重复点击只切换当前状态,不得重复提交;状态返回列表后按产品规则保留。 | 点赞图标+数量+选中态 | 已点赞;11 |
| 收藏 | 影片信息下方操作栏 | 点击切换已收藏/未收藏并更新状态 | 收藏成功后显示已收藏状态,并提供「前往收藏」查看入口;取消收藏需即时反馈。 | 收藏图标+选中态/入口 | 已收藏;前往收藏 |
| 分享至群聊 | 影片信息下方操作栏 | 点击分享后以原生样式打开群聊选择面板;确认后发送影片分享卡片并进入目标聊天室 |
| 原生群聊选择面板;取消/分享按钮 | 选择群聊;分享成功后进入聊天室 |
| 群聊影片分享卡片 | 目标聊天室内容区 | 点击聊天室影片区,以原生方式前往该影片详情播放页;点击返回回到来源群聊 |
| 原生影片消息卡片 | 影片来源+封面+标题+发送时间 |
| 评论 | 影片信息下方操作栏 | 点击评论入口 | 当前版本暂不开放评论输入与提交,点击后提示「评论功能即将上线,暂不开放」。 | 评论入口+禁用提示 toast | 评论功能即将上线,暂不开放 |
| 标签 | 影片信息下方标签栏 | 点击标签进入列表搜索 |
| 标签文字;最多 3 个 | 大长腿;美少女;小萝莉 |
| 猜你喜欢 | 影片资讯下方第一推荐区(上方) | 上下滚动浏览;点击卡片进入对应详情页 | 默认展示 4 则推荐影片,按 2×2 并排排列;单张封面失败使用影片默认图,不影响其他推荐项。 | 4:3 推荐卡片;2×2 | 4 则影片;2×2 |
| 相关推荐 | 猜你喜欢下方第二推荐区(下方) | 上下滚动浏览;点击卡片进入对应详情页 | 默认展示 4 则推荐影片,按 2×2 并排排列;单张封面失败使用影片默认图,不影响其他推荐项。 | 4:3 推荐卡片;2×2 | 4 则影片;2×2 |
| 小窗口 | 影片播放及返回列表/群聊流程 | 播放影片;返回列表或群聊 |
| 不展示 | 无小窗口/无悬浮播放器 |
以下使用用户提供的其他状态 H5 原型截图,并仅保留用户原始截图中的默认图参考;字段级 PRD 另说明默认图、页面异常、空状态、加载中与网络异常规则。




| 呈现名称 | 位置 | 交互 | 说明 | 展示格式 | 范例 |
|---|---|---|---|---|---|
| Banner 默认图 | 聊天列表 Banner/看H片页 Banner | 封面无法取得时显示对应默认图 | 聊天列表入口与看H片页 Banner 分别使用各自默认图;默认图出现时入口与页面仍可继续操作。 | 4:3 Banner 默认图 | 聊天列表默认图;页面默认图 |
| 影片封面默认图 | 影片卡片、猜你喜欢、相关推荐 | 封面无法取得时显示影片默认图 | 影片封面加载中或读取失败时显示默认图;列表卡片依手机竖版/非手机横版保留对应比例,推荐卡片仍按各自 4:3 规则处理,不阻塞列表、详情页或其他卡片。 | 竖版/横版默认图 | 手机影片默认图;非手机影片默认图 |
| 页面异常状态 | 看H片页面内容区 | 保留顶部导航、榜单筛选与返回功能 | 异常仅展示在对应内容区,不覆盖导航栏与筛选控件;用户仍可返回上一页。 | 错误插图+提示+刷新按钮 | 网络异常;刷新页面 |
| 空状态 | 列表/收藏内容区中部 | 点击「重新加载」再次请求 | 无影片或无收藏内容时,内容区居中显示空状态;一般列表显示「暂无视频」,收藏列表显示「暂无收藏视频」。 | 居中插图+文案+重新加载 | 暂无视频;暂无收藏视频 |
| 加载中 | 列表内容区 | 等待请求完成 | 列表请求期间显示 2×2 影片骨架,不显示 Banner 区;请求成功后替换为实际卡片,影片封面失败时使用影片默认图。 | 2×2 骨架卡片+加载文案 | 加载中…;影片默认图 |
| 网络异常 | 页面内容区 | 点击「刷新页面」重新请求 | 网络异常时显示错误图、异常提示与刷新操作;刷新失败可继续停留在当前状态,并保留返回功能。 | 错误插图+提示+刷新按钮 | 网络异常;刷新页面 |
| 刷新页面 | 网络异常状态操作区 | 点击后重新载入当前页面数据 | 重新请求当前页面,不改变原榜单、分类、选日、搜索条件与导航返回路径。 | 刷新按钮 | 刷新页面 |
需 Android 与 iOS 各自完成以下案例;除平台外,产品规则应一致。
设计重点是让 H片入口融入聊天列表,同时保持原有 IM 导航和用户操作路径。
| 版本 | 日期 | 记录 |
|---|---|---|
| v1.2 | 2026-09-04 |
|
| v1.1 | 2026-09-04 |
|
| v1.0 | 2026-09-02 | 初版 |