2.5.1 网页框架

网页框架分为网页顶部（包含公司Logo、顶部Banner、注册/登录功能、商品搜索功能、国际化切换、关键网页导航）和网页尾部（包含联系地址、网站地图、备案号等），每个功能的设计说明如下：

1.商品搜索功能：用户输入关键字并单击搜索按钮，网站将进行数据查询处理，将符合条件的商品在商品列表页展示；如果没有输入关键字的情况下单击搜索按钮，网站直接访问商品列表页并展示所有的商品信息。

2.国际化切换功能：提供下拉的语言切换选项，选择不同的语言，整个网站的语言都完成切换

3.网站导航：设有首页、所有商品、购物车和个人中心的地址链接，每个链接分别对应网站首页、商品列表页、购物车页面和个人中心页面。

4.网站尾部：这是每个网站的基本架构，用于说明网站的基本信息，如备案信息、售后服务联系群组、常用的辅助链接等。

2.5.2 网站首页

网站首页包括：大屏广告轮播、热销商品橱窗、右侧联系方式，每个功能的设计说明如下：

1.大屏广告轮播：以图片形式展示，用于主打商品的广告宣传。

2.热销商品：在所有商品中获取前十名销量最高的商品进行排序

3.固定在右侧的客服：通常使用即时通信、email、电话等联系方式

这个页面通过分页的方式展现当前上架的所有商品，包括：分类筛选、按条件排序、商品展示、分页

1.分类筛选：提供下拉选项，用户可以选择关注的商品类型，例如衣服、鞋子、奶瓶等

2.按条件排序：可根据综合、销量、价格排序。也可以选择价格区间进行筛选

3.商品展示：使用卡片的方式展示商品，包括主图展示和价格信息

4.分页：由于上架的商品很多，不可能一次性展示所有的商品，通过分页方式，每次获取固定数量的商品

点击单个商品就会进入商品的详情页面，包括：轮播图展示、商品简要参数、用户操作区、商品详情、询单

1.轮播图展示：展示该商品的多个不同角度的拍摄照片，便于用户尽可能的了解商品样式

2.商品简要参数：主要是商品名称或者描述、规格、价格

3.用户操作区：提供购买数量、收藏、家购物车、立即购买的操作按钮

4.商品详情：通过图文形式展示商品的具体细节，例如规格介绍、材质、竞品对比、使用方法等信息

5.询单：对于电商，尤其是面向海外的电商，客户都有大量购买某些商品的可能性，在购买之前都希望尽可能的了解一些商品细节。由于国内小商家的语言不通，时差不同，为客户提供询单的方式有助于获得更多客户

商品详情页面需要商家进行比较多的维护编排工作，因此要提供比较容易使用的后台维护页面。和展示给用户的页面对应，包括关联商品、上传轮播图片和编辑图文详情页面。

1.关联商品：商品的基础信息可以在默认的管理后台中维护，轮播图片和图文详情需要单独编排，此处提供关联选择

2.上传轮播图片：便于商家批量上传用于轮播展示的图片，可点击预览大图、快速删除替换

3.图文编排商品详情：提供markdown编辑器，便于商家插入文字和图片，按照喜欢的样式进行编排，所见即所得