主题
01 首页门户
版本:v3.0
所属端:前台商城
文档状态:已交付
1. 概述
1.1 背景与目标
首页是消费者进入商城的第一个触点,承担"流量分发"和"购物引导"两大职能。用户打开商城后,需要在最短时间内感知到平台的核心价值——有哪些商品、哪些品牌、哪些活动值得关注。
本模块的设计目标:
- 通过运营位(轮播广告)传递平台当期重点活动和品牌信息
- 通过分类导航帮助用户按品类快速定位目标商品
- 通过多维推荐(新品、人气、品牌、专题)激发用户的浏览和购买兴趣
- 所有内容均由后台运营人员配置驱动,无需开发介入即可调整展示
1.2 目标用户
| 角色 | 使用场景 |
|---|---|
| 游客(未登录) | 浏览首页全部内容,了解平台商品和活动 |
| 会员(已登录) | 浏览首页全部内容,点击商品后可直接加购 |
首页所有模块对游客和会员均可见,无权限差异。
1.3 功能范围
| 功能模块 | 说明 | 优先级 |
|---|---|---|
| 轮播广告 | 顶部全宽轮播图,展示运营活动 | P0 |
| 分类导航 | 按商品品类提供快捷入口 | P0 |
| 新品推荐 | 展示平台新上架的精选商品 | P0 |
| 人气推荐 | 展示销量或热度较高的商品 | P0 |
| 品牌推荐 | 展示平台重点合作品牌 | P1 |
| 专题推荐 | 展示运营策划的主题内容 | P1 |
2. 功能详细设计
2.1 轮播广告
页面结构
首页最顶部为全宽轮播图区域,固定高度。轮播图下方或上方叠加搜索栏入口。轮播区域包含:广告图片、底部圆点指示器、左右切换箭头(PC端)。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-HOME-01 | 仅展示当前终端类型适配的广告(PC端展示PC广告,移动端展示移动端广告) |
| BR-HOME-02 | 仅展示处于"上线"状态的广告 |
| BR-HOME-03 | 仅展示在投放有效期内的广告(当前时间介于开始时间和结束时间之间) |
| BR-HOME-04 | 多条广告按运营人员设定的排序值从高到低展示 |
| BR-HOME-05 | 每条广告配置一个跳转链接,点击后跳转至对应页面(商品详情、品牌页、活动页或外部链接) |
交互说明
| 用户操作 | 系统反馈 |
|---|---|
| 进入首页 | 自动播放轮播,间隔3~5秒切换下一张 |
| 点击圆点指示器 | 切换至对应广告 |
| 点击广告图片 | 跳转至广告配置的链接地址 |
| 鼠标悬停(PC端) | 暂停自动播放,显示左右箭头 |
| 手动滑动/点击箭头 | 切换广告,重置自动播放计时 |
边界与异常
| 场景 | 处理方式 |
|---|---|
| 无有效广告 | 隐藏整个轮播区域,不占位 |
| 广告图片加载失败 | 展示默认占位图 |
| 广告链接无效或已失效 | 点击无响应,不产生报错 |
| 仅有1条广告 | 正常展示,隐藏指示器和箭头 |
2.2 分类导航
页面结构
轮播图下方为分类导航区域。一级分类以横向Tab形式排列(如:服装、手机数码、家用电器、家具家装、汽车用品),点击一级分类后展开对应的二级分类网格(图标+名称形式)。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-HOME-10 | 仅展示"显示"状态且"导航启用"的商品分类 |
| BR-HOME-11 | 一级分类为顶层分类,二级分类为其直接子分类 |
| BR-HOME-12 | 分类按后台设定的排序值展示 |
交互说明
| 用户操作 | 系统反馈 |
|---|---|
| 点击一级分类Tab | 展开该分类下的二级分类网格 |
| 点击二级分类 | 跳转至该分类下的商品列表页 |
边界与异常
| 场景 | 处理方式 |
|---|---|
| 某一级分类下无二级分类 | 点击后直接跳转该分类的商品列表 |
| 分类数据为空 | 隐藏分类导航区域 |
2.3 新品推荐(新鲜好物)
页面结构
独立楼层,包含区域标题"新鲜好物"和"查看更多"入口。下方为商品卡片网格,每张卡片展示:商品主图、商品名称、商品价格。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-HOME-20 | 展示后台标记为"推荐"状态的新品 |
| BR-HOME-21 | 按运营设定的排序值从高到低展示 |
| BR-HOME-22 | 仅展示处于上架状态的商品(已下架商品自动过滤) |
交互说明
| 用户操作 | 系统反馈 |
|---|---|
| 点击商品卡片 | 跳转至商品详情页 |
| 点击"查看更多" | 跳转至新品推荐专题列表页 |
2.4 人气推荐(热门商品)
页面结构
与新品推荐结构一致,区域标题为"人气推荐"。商品卡片展示:商品主图、商品名称、商品价格。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-HOME-30 | 展示后台标记为"推荐"状态的人气商品 |
| BR-HOME-31 | 按运营设定的排序值从高到低展示 |
| BR-HOME-32 | 仅展示处于上架状态的商品 |
交互说明
| 用户操作 | 系统反馈 |
|---|---|
| 点击商品卡片 | 跳转至商品详情页 |
| 点击"查看更多" | 跳转至人气推荐专题列表页 |
2.5 品牌推荐
页面结构
独立楼层,区域标题"品牌推荐"。以品牌卡片网格展示,每张卡片包含:品牌Logo、品牌名称。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-HOME-40 | 展示后台标记为"推荐"状态的品牌 |
| BR-HOME-41 | 按运营设定的排序值从高到低展示 |
交互说明
| 用户操作 | 系统反馈 |
|---|---|
| 点击品牌卡片 | 跳转至品牌详情页(展示品牌故事、Logo大图、品牌下商品) |
| 点击"查看更多" | 跳转至品牌推荐列表页 |
2.6 专题推荐
页面结构
独立楼层,区域标题"专题推荐"。以专题卡片列表展示,每张卡片包含:专题封面图、专题标题、专题简述。
业务规则
| 编号 | 规则描述 |
|---|---|
| BR-HOME-50 | 展示后台标记为"推荐"状态的专题 |
| BR-HOME-51 | 按运营设定的排序值从高到低展示 |
交互说明
| 用户操作 | 系统反馈 |
|---|---|
| 点击专题卡片 | 跳转至专题详情页(展示专题关联的商品集合) |
3. 接口能力
本模块涉及以下系统能力:
| 能力名称 | 说明 | 是否需登录 |
|---|---|---|
| 首页内容聚合 | 一次性返回首页全部展示数据,包括:广告列表、分类导航、新品推荐、人气推荐、品牌推荐、专题推荐 | 否 |
输入:当前终端类型(用于筛选适配的广告)。
输出:
- 广告列表:每条包含广告名称、图片、跳转链接、排序
- 分类导航:一级分类及其下属二级分类(名称、图标)
- 新品推荐列表:商品名称、主图、价格
- 人气推荐列表:商品名称、主图、价格
- 品牌推荐列表:品牌名称、Logo
- 专题推荐列表:专题名称、封面图、简述
4. 核心数据实体
| 实体 | 业务含义 | 关键属性 |
|---|---|---|
| 轮播广告 | 首页顶部运营位 | 名称、图片、跳转链接、投放终端、有效期、上下线状态、排序 |
| 新品推荐位 | 首页新品楼层的配置记录 | 关联商品、推荐状态、排序 |
| 人气推荐位 | 首页人气楼层的配置记录 | 关联商品、推荐状态、排序 |
| 品牌推荐位 | 首页品牌楼层的配置记录 | 关联品牌、推荐状态、排序 |
| 专题推荐位 | 首页专题楼层的配置记录 | 关联专题、推荐状态、排序 |
| 商品分类 | 商品的品类归属 | 名称、层级、父分类、图标、显示状态、导航状态、排序 |
实体关系:各推荐位实体分别关联「商品」「品牌」「专题」主体,由后台运营人员配置后驱动前台展示。
5. 验收标准
| 编号 | 验收条件 |
|---|---|
| AC-HOME-01 | 轮播广告正确展示图片,点击可跳转至配置的目标页面 |
| AC-HOME-02 | 轮播自动播放,间隔3~5秒,支持手动切换 |
| AC-HOME-03 | 过期广告和下线广告不在前台展示 |
| AC-HOME-04 | 分类导航正确展示一级和二级分类,点击可跳转商品列表 |
| AC-HOME-05 | 新品推荐楼层正确展示后台配置的推荐商品 |
| AC-HOME-06 | 人气推荐楼层正确展示后台配置的推荐商品 |
| AC-HOME-07 | 品牌推荐楼层正确展示品牌Logo和名称 |
| AC-HOME-08 | 专题推荐楼层正确展示专题封面和标题 |
| AC-HOME-09 | 后台修改推荐配置(排序、状态)后,前台刷新即可生效 |
| AC-HOME-10 | 已下架商品不出现在任何推荐楼层中 |
| AC-HOME-11 | 无数据时对应楼层自动隐藏,不出现空白区域 |