1.2　常见电商设计图

电商需要的图片类型很多，除了店铺内的主图、详情页、首页，还有一些用来推广、引流的图片。以下介绍电商设计图片的常见类型。

1.2.1　主图

电商主图有电脑（pc）端和手机端之分，图1-1是电脑端主图的效果展示，图1-2是手机端主图的效果展示。

主图常用的尺寸一般分为1:1、16:9、3:4三种，1:1要求大于700×700，大小不超过3MB，一般选择800×800（这个尺寸既满足要求，又不会使图片太大），图片一般要求大小不能超过500kB。3:4这个比例现在比较常用，而且可以在手机淘宝的界面有更好的视觉享受，一般推荐750×1000，大小建议不超过1MB。

以淘宝平台为例（图1-1），主图通常由5张图片组成，第一张主图用来展示产品形象，吸引用户点击，后面几张通常是对产品的详细介绍。拼多多可以上传10张图片，另外，不同的平台，图片尺寸规格稍有不同。

1.2.2　详情页

详情页，简称为详情，是产品的介绍页面。产品详情页是非常重要的，它是提升转化率的有效途径。买家能通过产品详情页来详细了解产品的信息和特点，从而产生购买欲望。不同类目的详情页，版块内容稍有不同，常见的详情页设计版块有首屏海报、场景图、卖点图、细节图、详细参数、售后保障等。淘宝店铺的详情页的宽度是750px，天猫店详情页的宽度是790px。这个尺寸也可用于京东和拼多多。图1-3是详情页设计范例。

1.2.3　Banner

Banner是通过网页、媒体等电子设备媒介传播的一种广告海报。Banner又可细分为：钻石展位、开屏、弹窗等。在电商领域有很多不同位置的推广图片，每个位置的图片尺寸都不一样。设计师在接到需求的时候，上传图片的后台都会有具体的图片尺寸要求，根据要求来设定画面尺寸就可以了。Banner会通过不同的媒介以及点击、曝光、投放等方式来实现产品的宣传。

随着媒体形式的多样化，Banner不再仅限于电商购物平台的一些展示途径，例如我们常看到的公众号封面、APP的首页海报，甚至一些推文的头图、电梯里的轮播海报，都可以称之为Banner（见图1-4Banner的设计实例）。

1.2.4　直通车图

想要了解直通车图的重要性，就要先了解什么是直通车。淘宝直通车是为专职淘宝和天猫卖家量身定制的，按点击付费的营销工具，可以为卖家实现商品的精准推广。直白一点讲，就是用竞价的方式，让你的产品图片出现在消费者面前。

作为设计师，我们需要了解的是由于这是一种竞价方式的图片推广，所以设计的图片好坏，会影响到这张图片的点击率，而点击率的好坏又会带来一系列的影响，比如更低的出价获得更好的展现位置，更低的投入获得更高的回报。

电商运营者通过花费一定的费用，做SEO（搜索优化）推广，并通过关键字设置，可以使消费者在输入搜索词汇时优先找到自己的产品或者店铺。图1-5是800×800的蜂蜜直通车图设计范例。图1-6是750×1000的拖鞋直通车图设计范例。

1.2.5　首页

首页也叫店铺主页，相当于实体店的门面+产品陈列。首页是将品牌的风格调性在网上呈现的重要载体。作为承接流量的载体，首页的功能越来越被弱化，大部分流量进入的都是产品的详情页。但对于一些有品牌力的品牌，首页是视觉形象和完整品牌形象不可或缺的一部分。

图1-7是两个不同品类店铺的首页实例（部分）。

电脑端首页通屏尺寸宽度为1920px，主要内容集中在中间1100px部分，因为人们浏览网页的习惯是集中观看，太靠近边缘的内容容易被忽略，所以在设计电脑端页面的时候，重要内容尽可能向中间集中。而手机端屏幕较小，内容展示比较集中，手机端首页按照竖屏浏览的习惯设计，字体不宜过小。

1.2.6　活动页/专题页

活动页/专题页指各种主题营销活动的页面，活动页和专题页用于店铺的促销场景，常见于各大电商平台的各种节日促销，也有一些品牌力比较强的店铺会有自己的店铺节日，比如周年店庆、粉丝节等。

活动页/专题页常出现在店铺首页和各大活动会场的承接页。

图1-8、图1-9分别是奶粉活动页和七夕节专题页的页面设计效果范例>。