Mall 电商系统

主题

前台 · 首页与商品发现 ​

覆盖页面：首页 / 分类页 / 搜索页 / 品牌推荐页 / 专题详情页 设计目标：高效分发流量，让用户"找得到、逛得爽"

一、首页（/portal/home） ​

1.1 页面定位 ​

  • 角色：商城流量分发中心，承接所有入口流量
  • 用户决策：今天逛什么？有什么优惠？有什么新品？
  • 核心指标：各楼层点击率、首页→详情页转化率、跳出率

1.2 页面结构（自上而下） ​

┌─────────────────────────────────────┐
│ ① 轮播广告 Banner（运营位）           │  3-5 张，自动轮播
├─────────────────────────────────────┤
│ ② 金刚区（快捷入口，移动端）           │  分类/品牌/优惠券/客服
├─────────────────────────────────────┤
│ ③ 品牌推荐楼层                        │  横排品牌卡片 → 品牌页
├─────────────────────────────────────┤
│ ④ 新品推荐楼层                        │  商品卡片流
├─────────────────────────────────────┤
│ ⑤ 人气推荐楼层                        │  商品卡片流
├─────────────────────────────────────┤
│ ⑥ 专题推荐楼层                        │  图文专题卡片 → 专题页
└─────────────────────────────────────┘

1.3 模块设计 ​

① 轮播广告 Banner ​

  • 内容：后台广告列表（仅展示"上线"状态，按排序值排列）
  • 交互：
    • 自动轮播，间隔 4s；手指悬停/触摸时暂停
    • 圆点指示器（当前页高亮）+ 桌面端左右箭头
    • 点击跳转配置的链接（商品/专题/外链）
  • 规则：仅 1 张时不轮播、不显示指示器；加载失败显示品牌色兜底底图

② 金刚区（移动端） ​

  • 4-8 个圆形图标入口：分类、品牌、领券、客服、我的订单、我的收藏…
  • 入口可由后台配置扩展（本期固定：分类/品牌/优惠券/帮助中心）

③ 品牌推荐楼层 ​

  • 标题："品牌推荐" + 右侧"查看更多 >"（→ /portal/brands）
  • 卡片：品牌 Logo + 品牌名，横排滚动（移动端）/ 6 列网格（桌面）
  • 数据：后台"品牌推荐"配置的上线品牌

④⑤ 新品/人气推荐楼层 ​

  • 标题："新品推荐"/"热门商品" + "查看更多 >"
  • 商品卡片（全站统一卡片组件）：
    ┌────────────┐
│  商品主图    │  1:1
├────────────┤
│ 商品名(2行)  │  超出省略
│ ¥价格  划线价 │  价格品牌色加粗
│ 已售 xxx    │  灰色小字
└────────────┘
  • 点击卡片 → 商品详情页
  • 布局：移动 2 列 / 桌面 4-5 列

⑥ 专题推荐楼层 ​

  • 卡片：封面图 + 标题 + 副标题，2 列布局
  • 点击 → 专题详情页

1.4 状态设计 ​

状态表现
首屏加载各楼层骨架屏（Banner 灰块 + 卡片灰块）
某楼层无数据整个楼层隐藏（不展示空楼层）
加载失败保留页面框架，失败楼层显示"加载失败，点击重试"

1.5 验收标准 ​

  • AC-H01：首页展示上线状态的轮播广告，自动轮播且可手动切换
  • AC-H02：品牌/新品/人气/专题楼层数据来自后台运营配置，未配置时楼层不显示
  • AC-H03：商品卡片点击可正确跳转详情页，价格格式符合规范
  • AC-H04：移动端 2 列商品流，桌面端 ≥4 列

二、分类页（/portal/category） ​

2.1 页面定位 ​

  • 角色：结构化浏览入口，服务"我想逛某类商品"的用户
  • 核心指标：分类点击率、分类→商品列表转化

2.2 页面结构 ​

移动端（经典双栏）：

┌──────────┬──────────────────────────┐
│ 一级分类   │  当前分类下的二级分类        │
│ (左侧栏)  │  ┌────┐ ┌────┐ ┌────┐  │
│ ▸手机     │  │图标 │ │图标 │ │图标 │  │
│  家电     │  │分类A│ │分类B│ │分类C│  │
│  服饰     │  └────┘ └────┘ └────┘  │
│  ...      │  (宫格，每项=图标+名称)     │
└──────────┴──────────────────────────┘

桌面端：左侧一级分类列表 + 右侧二级/三级分类面板

2.3 交互规则 ​

  • 左侧一级分类选中态：品牌色文字 + 左侧色条指示
  • 切换一级分类，右侧刷新对应二级分类（含图标）
  • 点击二级分类 → 搜索页（带分类筛选条件）
  • 分类层级：最多三级（一级→二级→三级），三级分类在二级面板内平铺

2.4 状态设计 ​

  • 无子分类：右侧显示"该分类下暂无子分类"
  • 分类图标缺失：显示分类名首字圆形兜底

2.5 验收标准 ​

  • AC-C01：分类树正确展示三级结构，层级关系正确
  • AC-C02：点击子分类跳转搜索页并自动应用分类筛选
  • AC-C03：移动端双栏布局，左侧可滚动，右侧独立滚动

3.1 页面定位 ​

  • 角色：目的性购买的核心通道，转化率最高的流量入口
  • 用户决策：搜到的商品哪个最符合我要的？
  • 核心指标：搜索→点击率、搜索→下单转化率、无结果率

3.2 页面结构 ​

┌─────────────────────────────────────┐
│ 筛选栏：综合 | 销量 | 价格↑↓  [筛选]   │
├─────────────────────────────────────┤
│ 商品卡片流（与首页卡片一致）            │
│ ...                                 │
│ [上拉加载更多 / 分页]                  │
└─────────────────────────────────────┘

3.3 功能模块 ​

搜索触发 ​

  • 顶部栏搜索框输入关键词，回车/点击搜索按钮进入
  • URL 携带 ?keyword=xxx，支持直接分享搜索结果链接

排序栏 ​

选项逻辑
综合（默认）相关度 + 上架时间加权
销量按 sale 降序
价格点击切换升序/降序（箭头指示当前方向）

筛选（抽屉） ​

  • 分类筛选、品牌筛选、价格区间（最低价-最高价）
  • 移动端从右侧滑出抽屉，桌面端侧边面板

结果列表 ​

  • 商品卡片流，移动 2 列 / 桌面 4 列
  • 移动端上拉无限加载，桌面端分页

3.4 业务规则 ​

  • 仅搜索"上架"状态商品，下架商品不出现
  • 搜索为空/纯空格：提示"请输入搜索关键词"
  • 关键词高亮：商品名中命中的关键词标红（可选增强）

3.5 状态设计 ​

状态表现
无结果插画 + "没有找到「xx」相关商品" + 建议："换个关键词试试" + 推荐热门商品
加载中骨架屏
加载失败"搜索失败，点击重试"

3.6 验收标准 ​

  • AC-S01：关键词搜索返回上架商品，支持综合/销量/价格排序
  • AC-S02：价格排序可切换升降序，界面有方向指示
  • AC-S03：无结果时展示引导文案与推荐商品，不展示空白
  • AC-S04：筛选条件（分类/品牌/价格区间）生效且可组合

四、品牌推荐页（/portal/brands） ​

4.1 页面定位 ​

  • 角色：品牌心智聚合页，服务"认品牌"的用户
  • 核心指标：品牌点击率、品牌页→商品转化

4.2 页面结构 ​

┌─────────────────────────────────────┐
│ 品牌网格                              │
│ ┌──────┐ ┌──────┐ ┌──────┐         │
│ │ Logo │ │ Logo │ │ Logo │         │
│ │品牌名 │ │品牌名 │ │品牌名 │         │
│ │商品数 │ │商品数 │ │商品数 │         │
│ └──────┘ └──────┘ └──────┘         │
│ [分页]                               │
└─────────────────────────────────────┘

4.3 交互规则 ​

  • 品牌卡片：Logo + 品牌名 + 在售商品数
  • 点击品牌卡片 → 搜索页（带品牌筛选），展示该品牌全部在售商品
  • 仅展示后台配置为"品牌推荐"且上线的品牌
  • 布局：移动 3 列 / 桌面 6 列，分页加载

4.4 验收标准 ​

  • AC-B01：展示推荐品牌列表，含 Logo、名称、商品数
  • AC-B02：点击品牌进入该品牌商品列表（搜索页带品牌筛选）

五、专题详情页（/portal/subject/:id） ​

5.1 页面定位 ​

  • 角色：内容化导购页，用"主题故事"包装商品组合（如"开学季数码清单"）
  • 用户决策：这个主题下的商品是否打动我？
  • 核心指标：专题页停留时长、专题内商品点击率

5.2 页面结构 ​

┌─────────────────────────────────────┐
│ 专题封面大图                           │
│ 专题标题                              │
│ 专题描述（副标题）                     │
├─────────────────────────────────────┤
│ 富文本正文（图文内容）                  │
├─────────────────────────────────────┤
│ 关联商品列表（商品卡片流）              │
└─────────────────────────────────────┘

5.3 功能模块 ​

  • 头部：封面图（16:9）+ 标题 + 描述
  • 正文：渲染后台配置的富文本内容（HTML），图片自适应宽度
  • 关联商品：专题绑定的商品，复用全站商品卡片，点击进详情
  • 浏览量：进入页面阅读数 +1（后端统计）

5.4 状态设计 ​

  • 专题不存在/已下线：显示"该专题不存在或已下线" + 返回首页按钮
  • 无关联商品：正文后不展示商品区

5.5 验收标准 ​

  • AC-T01：正确渲染专题封面、标题、富文本正文
  • AC-T02：关联商品可点击跳转详情
  • AC-T03：专题下线后访问给出友好提示

六、本章通用组件 ​

商品卡片（ProductCard）—— 全站唯一标准 ​

元素规格
主图1:1，圆角 8px，懒加载
商品名14px，最多 2 行，超出省略
价格16px 加粗品牌色，格式 ¥1,299.00
划线价12px 灰色删除线（原价>现价时显示）
销量12px 灰色，"已售 1.2k"（过万显示 k/w）
点击整卡可点，跳转商品详情

首页楼层、搜索页、品牌页、专题页的商品展示必须复用此卡片，禁止各页面自定义商品卡片样式。

七、体验优化（用户视角） ​

按优先级排列。P0=影响转化必须做，P1=显著提升体验，P2=锦上添花。

搜索体验（最高优先级，搜索是转化最高的入口） ​

优先级优化点说明
P0搜索历史点击搜索框未输入时，展示"历史搜索"（最近 10 条，可一键清空），减少重复输入
P0热门搜索搜索框下方展示"热门搜索"标签云（后台可配），引导无目的用户
P1搜索联想输入时实时下拉联想（300ms 防抖），展示匹配关键词与对应商品数
P1关键词高亮结果列表中命中的关键词标红，帮助用户快速确认相关性
P2拼写纠错"你是不是想搜：xxx"，降低无结果率

首页体验 ​

优先级优化点说明
P1个性化推荐推荐楼层结合浏览/收藏行为排序（本期可用销量+上架时间，预留个性化接口）
P1返回顶部滚动超过一屏后右下角出现返回顶部按钮（移动端上滑隐藏下滑出现）
P2下拉刷新移动端首页下拉刷新全部楼层，给予"刷新成功"反馈
P2楼层不感兴趣楼层右上角"不感兴趣"，减少同类推荐（需登录）

分类/品牌/专题体验 ​

优先级优化点说明
P1分类页热门入口分类页顶部展示"热门分类"快捷入口，减少层级点击
P2品牌页首字母索引品牌多时提供 A-Z 字母快速定位
P2专题分享专题页支持分享，内容导购裂变

设计要点：

  • 搜索联想/历史/热门是电商搜索标配，直接决定搜索转化率，优先实现
  • 所有推荐位商品复用全站商品卡片，保证体验一致
  • 返回顶部按钮不得遮挡 TabBar 与内容（右下角留安全边距）

Mall 电商系统知识库

Copyright © 2025 Mall Project