电商网站产品页列表页模板~电商平台展示主页

本篇目录一览

• 1、如何快速设计产品列表页
• 2、电商后台（商品中心）
• 3、哪些网站有直接可以复用的产品原型模板?
• 4、电商产品详情页如何设计?流程来了

如何快速设计产品列表页

1.展示基本信息

正因为商品列表页相较于其他页面会显得有些拥挤，因此更应该抱着在限制的区域范围内展现最有用的信息的心态来设计网页。正在浏览商品列表页的用户也许对商品的细节描述并不是很在意，此时的浏览模式更偏于走马观花，因此，简单扼要的图片、商品名称，以及价格说明就已经能够满足用户在该页中的需求了。

2.鼠标悬停时产生交互效果

很多网站都会忽略鼠标悬停时应该产生的交互效果，其中也不乏一些知名电商。虽然只是一个很小的效果，但它存在的意义却远不仅如此，甚至承载了一份网站与用户之间的互动和反馈。

3.出现适量的附加信息

刚才提到了商品列表页应该尽量做到简单简洁，但在此基础上适量的增加一些对用户挑选商品有帮助的附加信息可以起到锦上添花的作用。

4.始终带给用户指引

可能很多电商网站都认为，当用户在商品列表页面停留就意味着即将找到自己需要的商品。而现实却告诉我们，用户很可能在不断翻页的过程中会不知不觉的改变了之前的目标商品，因此，网站应该始终为用户提供指引，带给他们明确的方向感。

5.设置相关推荐，促成更多消费

用一种商品推动另一种商品的销售，这是电子商务网站中的惯用营销手法，但这样的方式如果运用的太过生硬用户一定不领情，网站应该试着用柔和的方式传达相同的意思。

6.扫清页面死角　

页面中的每一个区域都有它的价值和意义，可能只是用户视觉的感知程度不同而已，只要做好布局，页面死角可以变得不存在。

商品列表页的死角多见于页面侧边和底部，而京东将这两片区域使用为其他产品的推广途径，比如销量排行和商品精选等。

7.用特色商品激发购物欲　

如果你觉得特色主推性质的商品只能放在网站首页你就错了，首页首屏的确是整个网站最佳的宣传黄金位置，但所得到的效果却不一定是最理想的，根据商品的类型安排布局才能达到事半功倍的效果。

8.吸引人的商品活动尽量置后

中国有句谚语，“好戏总在后头”，这句话也同样适用于电商商品列表页的设计中。把相对吸引人或是目的性强的商品活动放在偏后一点的位置，有利于整个网站的运营。

9.减少操作步骤

在商品列表页中，力所能及的步骤减少只有从商品加入购物车开始着手。但在此之前的大前提是商品信息展现的足够全面和完整，要在小区域内表达出所有内容也的确是一件比较困难的事。

10.从众效应

从众心理是网上购物人群的普遍状态，因此，买过该商品的顾客对此做出的评价对于用户来说很有说服力，商家可以利用这一点在网页的设计上做出一些小改变。

电商后台（商品中心）

一、商品的基本概述

SKU：库存量单位，库存控制的最小可用单位。

SPU：标准化产品单位，是一组标准化信息的组合。

类目：分类树。电商常用的有两层类目：前台展示类目和后端商品类目。前台类目指的是展示给消费者看的类目，会根据季节、销售策略、活动进行变动；后台类目属于基础数据，不可随意变动，添加SKU时都需要选择后台类目，进行绑定。

属性：分为关键属性、销售属性、非关键属性。关键属性是指能够唯一确定产品的属性，是必填项。销售属性时组成SKU的特殊属性，或称为规格属性。下图为商品模块组成：

二、类目管理和品牌管理

【类目管理】

后台类目面向商家或供应链人员，商品属性、销售属性及品牌等很多数据都是在基础类目上进行管理；前台类目面向用户，方便用户查找商品，还可以随着运营需要去调整。

类目管理的作用：

（1）方便快速发布及管理商品，供应链人员或平台商家更好进行商品管理

（2）标准化商品服务，对于电商平台，品类定义基本确定平台的商品服务范围

（3）有利于仓库管理，合理地商品类目管理还能方便仓库中库位分区管理商品

（4）日常运营需要，在电商运营中，需要进行商品聚类，科学的类目管理可以减少运营管理的工作。

从渠道的维度上讲：

（1）前台类目可支持不同客户端的设置.。PC/H5/APP端等渠道由于用户全体有所差异，可分别设置前台类目，独立运营。

（2）支持平台商家自定义店铺前台类目。每个商家的产品和定位不同，有不同的类目运营需求。

从前台类目定义的维度上来讲：

（1）前台类目对应后台类目，可一对一、一对多、多对多，自由组合，动态调整。

（2）前台类目直接对应品牌、商品，适合商品较少的小商家

（3）前台类目对应后台的叶子类目和某项属性的组合

前台类目不同于固定的后台类目，编辑很灵活、可重叠、可删除、可随时变动、定时生效

【品牌管理】

品牌管理流程：

需要注意的是以下两点

（1）新建品牌，其相关字段一般有：Logo、中文名、英文名、产地、备注、状态（可用、不可用）

（2）将品牌关联到类目上，关系也是一对一、一对多、多对一。

品牌关联类目的好处在于：提升发布商品的便捷性，避免出错；品牌管理标准化；在搜索筛选商品时更加快捷。

三、属性管理

（1）关键属性：能够确认唯一“产品”的属性。关键属性可以是一个属性，也可以是多个属性的组合。

（2）销售属性：也称为规格属性，其是组成SKU的特殊属性，它会影响买家的购买和卖家的库存管理。

（3）非关键属性：除关键属性、销售属性外的其他属性。

属性的定义对于良好的消费体验有着至关重要的意义，对于搜索、索引、筛选都能起到至关重要的作用。商品搜索能力，处理标题、类目，很大程度依赖于商品属性，条件筛选1的基础数据也是商品属性和规格属性。完善商品属性对于现实良好用户体验至关重要。

属性包括属性名、属性值，一般懂事挂载具体类目下，设置为必填或非必填。

【商品属性系统的设计】

属性编辑：

属性编辑主要是定义当前分类的商品具有哪些属性。在属性管理上，有两个产品方法可以使用，属性分组和属性继承。

四、SKU与SPU

SKU与SPU关系示例：

还有一个比较特殊的概念：组合SKU，主要是解决出售组合商品的问题。组合SKU的属性都继承主SKU。组合SKU不同于套装促销。套装促销在订单中会展示多个商品，而组合SKU在前台是一个商品。组合SKU的应用场景主要是添加赠品、组合售卖，与前台的商品套餐有所区别。在订单解析成发货单时，组合SKU需解析成单一SKU，方便仓库发货，更新库存。

【编码问题】

在电商系统中流转的是系统生成的SPU编码和SKU编码。

在仓库的条码方案以下有两种。在编辑商品时，一般会有个条形码字段需要填写，就是系统中的SKU对应69码，这个条形码主要在采购、出入库时使用。

（1）全部自建条码。采用自己的SKU编码管理商品，需要入库前重贴标，成本较高

（2）有69码的商品沿用69码，无69码的商品以及无法指定到单一的有码商品重新贴SKU编码。在仓库管理时做相应的条码映射。

五、商品编辑

在添加商品时，通过销售属性去关联SPU与SKU，同一SPU在前台显示时可以共用同一商品详情，只是通过规格属性映射到具体的SKU上。通过供应商去关联采购，进而影响仓库中SKU的库存。供应商在添加SKU时也不可选择，可以在采购系统中添加关联。真多商品的关键属性和属性值，可以在采购系统中添加关联。针对商品的关键属性和属性值，可以在商品搜索和筛选时用上，良好的属性定义对于顾客决策树的缩短有着至关重要的作用。

SKU组成：

用户平常购物接触最多的就是商品显示页，商品列表页、商品详情页的基础信息都是从商品中心获取。电商网站的商品产品结构大同小异，淘宝、天猫网站的商品以SPU形态显示，京东上以SKU形态显示，两种处理方式各有优劣势（淘宝切换规格时商品详情不变，京东切换规格时标题及详情页会改变）。

后台在编辑商品信息时，设置存储的也是这些内容：类目、标题、品牌、商品属性、规格、价格、库存、SKU信息，商品图、商品详情描述、物流信息。

【规格、价格信息】

需要注意的是，在设置规格时，主要包括颜色、尺寸。为了支持多样化的用户需求，选择之后可以编辑规格。规格一对一确定之后。可单独设置价格。规格一对一确定之后，可单独设置价格、库存、商家SKU，淘宝或天猫也可添加条形码，也可设置统一价，统一库存。填写商家SKU主要是为了方便对应到具体的SKU。对于自营电商，这里填写的就是SKU编码，库存无法设置，直接同步仓库中的SKU库存。系统中的SKU名称和商品名称是由区别的，SKU名称是方便在系统中进行管理流转，而商品名称是有一定得营销性质。

平台上会针对商品设置平台价和市场价。平台价主要是当商品具有不同规格、价格时，出现在搜索、筛选列表中只显示一个价格，相当于商品的均价。毛重、长宽高等数据主要是为了物流而设置的，自建仓库的自营电商一般在SKU数据层就会录入这些数据，直接调用。货号即商品编码，在商城购物时会扫描的条形码就是货号。货号不等同于SKU编码，同一商品编码的商品可能是不同SKU，有着不同的规格，所以不能直接拿货号来管理SKU

【商品图、商品详情描述、物流信息】

除了不同规格对应的商品缩略图，商品图还包括商品主图，一般要求图片质量较高，包括整体图和细节图。商品主图是吸引顾客眼球的必要利器，不论是列表页还是活动页，顾客除了关注价格，主要就是商品主图，运营上架时需谨慎选择商品主图。

商品详情页现在一般会区分电脑版和手机版，由于两者的使用场景和设备不同，侧重点页不相同。为了更好的展示产品特点，可提供不同的产品详情页模板，也可支持富文本编辑。

选择运费服务时，要选择对应的物流模板，在订单处理方面是按照具体的物流模板计算运费。

哪些网站有直接可以复用的产品原型模板?

摹客，要啥有啥。没有的跟客服说一声，马上安排。

发几个我喜欢用的：

1.社区类原型-简书

包括首页-推荐、首页-专题、首页-连载、关注、简书钻、消息、搜索页面、我的等。

2.旅游类原型-Gogobot

包括启动页面、登录注册页面、欢迎页面、城市列表页面、主页、详情页面、搜索页面、活动页面、个人信息页面等。

3.后台管理系统原型-CRM

包括数据展示、工作任务管理、发票管理、即时通信和工作报告等页面。

4.企业官网原型-IKEA

包括首页、新产品、售后服务页面。

摹客的模板涵盖的行业比较多，可以满足不同行业的基础需求。

电商产品详情页如何设计?流程来了

确定页面风格

页面风格主要是根据产品本身来定的，如产品的属性、产品功能等。如果产品没有特定的风格属性，可以根据目标销售人群、季节、节日或主题活动来定。

产品和素材搜集

前期实拍素材，进行整理和分类。我们也要在设计的过程中要学会整理搜集自己的素材库，做好备份。

构架布局框架

根据文案内容，结合实际产品，进行有效的布局建立,可以从下面八个方面入手操作：

产品海报 -- 引起注意。

产品属性功能 -- 提升兴趣，了解产品。

产品全景 -- 提升兴趣。

产品细节展示 -- 提升兴趣，了解产品。

痛点挖掘 -- 拉近客户。

检测报告 -- 建立信任。

卖点优势 -- 体现产品价值。

好评分享展示 -- 进一步加强购买欲望。

确定配色方案

已有店铺视觉规范的可以直接延续使用。如果没有，可以从产品本身提取，或者从Logo中提取或从产品联想属性提取。在配色过程中，无论用几种颜色来组合，首先要考虑用什么颜色作为主色调。

选择合适字体类型

字体相当于一个桥梁，相当重要。主要用来对产品进行解释说明，方便顾客阅读，同时，也是起重要信息的引导作用，可通过大小字体搭配进行重点显示某项内容。字体使用时一般不超过3种字体并选择符合产品定位的字体;在重点部分内容进行加粗突出显示，以加深买家对该信息的印象程度。

整个详情页排版

怎么对图片和文案内容进行排版设置，要考验我们平时积累下来的设计的水平。越是简约大气的页面，元素务必不要太多，清爽舒适的页面多留白，参考优秀案例，多多借鉴和学习。学习是没有止境的，同样，详情页的设计排版也是。多学习，多总结，扩展想法，拓展思维，建立自己的设计风格。

关于电商产品详情页设计流程，青藤小编就和您分享到这里了。如果您对页面排版、网站设计、图形处理等有浓厚的兴趣，希望这篇文章可以对您有所帮助。如果您还想了解更多关于平面设计的素材及技巧等内容，可以点击本站的其他文章进行学习。