Skip to content

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无数据时对应楼层自动隐藏,不出现空白区域

Mall 电商系统知识库