产品需求文档（PRD） - 首页模块（Home Page）

一、模块名称

短剧 APP - 首页模块（Home）

---

二、功能定位

首页是用户进入 APP 后的首屏，核心目标是：

1. 快速展示热门短剧内容
2. 引导用户观看与消费
3. 增强内容分发与曝光效率

---

三、用户角色

• 普通用户（游客、注册用户）
• 会员用户

---

四、页面结构拆解

1. 顶部导航栏（Header）

元素	描述
搜索框	支持模糊搜索剧集名称（如："My Poor Husband is A Billionaire"）
礼物图标（+220）	点击后跳转签到/任务/礼包页，用于激励用户每日活跃

2. 导航 Tab（Tab Navigator）

标签名称	功能说明
精选（默认）	展示精选短剧（按推荐算法排序）
新剧	最新更新的短剧（按发布时间倒序）
排行榜	榜单分类（播放榜/充值榜/收藏榜）
分类	展示所有短剧的题材分类导航（仅展示前 10 名）
言情	展示言情类短剧
都市	展示都市类短剧
大女主	展示大女主题材短剧
修仙	展示修仙/仙侠类短剧

所有tab均由后端配置，前端根据后端配置的tab名称进行展示。

3. 剧集卡片内容组件（Content Card）

每个短剧使用卡片形式呈现，包含以下字段：

字段	类型	描述
封面图	Image	封面图片，点击可进入剧集播放页
标题	Text	剧集主标题，如：“Divorced at the Wedding Day”
子标题	Text	剧集标签或关键词，如：“Revenge”、“Secret Baby”
播放量	Icon + Text	视频播放图标 + 播放次数，如：▶️ 148M
标签	Badge	“Hot” 标签（根据热度、后台配置）

---

五、交互说明

交互点	行为	说明
点击搜索框	进入搜索页	显示历史搜索、热门剧集、输入提示
点击礼物图标	打开激励任务页	可领取金币/会员/剧集点券等
Tab切换	页面刷新内容	各类 Tab 下分别展示不同数据源
剧集卡片点击	跳转剧集播放页	播放当前剧集第一集或上次观看进度
上滑页面	内容瀑布流加载	支持懒加载或分页

---

六、数据结构设计（前端）

{
  "video_id": "vid_123456",
  "title": "Divorced at the Wedding Day",
  "tagline": "Revenge",
  "cover_image": "https://cdn.xxx.com/covers/vid_123456.jpg",
  "play_count": 148000000,
  "is_hot": true,
  "update_time": "2025-07-06T12:00:00Z"
}

---

七、API 接口建议（示例）

接口 1：获取首页热门剧集列表

• GET /api/v1/videos/popular

• 参数：

  • page：分页索引
  • size：每页数量

• 响应：

{
  "code": 200,
  "data": [
    {
      "video_id": "vid_001",
      "title": "The Bad Boy Who Ruined Me",
      "tagline": "Enemy to Lover",
      "cover_image": "...",
      "play_count": 11500000,
      "is_hot": true
    }
  ]
}

---

八、后台配置建议

• 内容运营端配置项：

  • 是否打 “Hot” 标签
  • 自定义播放量展示
  • 排序优先级
  • 卡片显示样式（竖版/横版）

---

九、UI&动效建议

• 卡片轻微悬浮动效（hover/press）
• 播放量数字动画增长（吸引注意）
• 热门内容角标动效（例如 Hot 闪烁或变色）

---

十、埋点建议（用于行为分析）

埋点名称	事件说明
home_video_click	用户点击某部剧集卡片
home_tab_switch	用户切换 Tab 的行为
home_gift_icon_click	点击右上角任务礼物图标
home_scroll_bottom	页面滚动到底部触发

---

十一、性能优化建议

• 图片懒加载 + CDN 缓存优化
• 视频播放量数字使用前端缓存，异步更新
• 首页数据接口合并请求，减少 API 数量