功能描述
1.查看四高产品列表
2.快速浏览产品
3.将四高产品加入购物车
4.进入产品详情页面
界面
界面元素-产品列表
名称 | 用途 | 显示 | 交互 |
---|---|---|---|
产品列表 |
展示四高系列产品 |
每行按四个产品内容排列 内容包含:产品图片+产品名称+价格 产品无库存时,不显示价格 |
1.鼠标悬停至产品,图片内容更换为产品详情并有快速浏览字段 2.点击产品图片,进入产品详情页面 |
快速浏览 | 进入快速浏览页面 | 字段:快速浏览 | 1.点击快速浏览,进入指定页面 |
界面元素-快速浏览
名称 | 用途 | 显示 | 交互 |
---|---|---|---|
产品信息 |
展示产品信息 |
产品名称,例:健知己-海豹油100粒 产品价格,例:HK$260.00 库存单位:例:1002156 |
1.点击![]() |
数量 | 填写购买数量 |
输入框,默认为1 产品无库存时,不显示 |
1.鼠标悬停至输入框, 2.输入购买数量 |
新增到购物车中 | 将产品加入购物车 |
【新增到购物车中】按钮 产品有库存时,显示 |
1.点击按钮,产品加入至购物车右侧并出现购物车插件页面 |
无库存 | 告知用户无库存 |
字段:无库存,灰色底框 产品无库存时,显示 |
无 |
浏览更多详细资料 | 查看指定产品详细资料 | 字段:浏览更多详细资料 | 1.点击字段,进入产品详情页面 |
![]() |
关闭快速浏览框 |
图标:![]() |
1.点击图标,关闭浏览框 |
界面元素-购物车
名称 | 用途 | 显示 | 交互 |
---|---|---|---|
![]() |
关闭购物车插件 | 图标:![]() |
1.悬停出现字段:关闭购物车插件 2.点击图标,关闭购物车插件 |
浏览购物车 | 进入购物车页面 | 【浏览购物车】按钮 | 1.点击按钮,进入购物车页面 |
购物车产品列表 | 展示购物车内的产品 |
纵向排列,展示产品图片,名称,价格,数量(至少为1),小计金额 当购物车没有产品,列表显示字段:购物车是空的 |
3.点击产品图片,进入产品详情页面 |