电商设计有哪些基本规范？

文/王棋涛 PC端页面的尺寸宽度1920px，高度尺寸按照页面所需信息来定即可，显示尺寸1920×1080px；手机端页面的尺寸宽度750px，高度尺寸按照页面所需信息来定即可。

PC端首页横幅广告尺寸为730×400px，手机端首页横幅广告尺寸为750×400px。专题活动页，主业页面宽度为1920px，高度为580—700px，最好不要超过700px，其中显示区域页面高度为1210px。产品详情页，宽度尺寸790px，高度尺寸充分展示所需信息即可。

在页面中使用的中英文字体不得多于5种，页面中出现3次以上为主要字体，其他文字作陪衬字体。在产品详情页设计中，一般主要字体为黑体。

在做横幅广告字体时要经过设计变形，没有字体设计能力的，应在原字体基础上适当做些特殊效果；字体字号大小与颜色要和背景颜色对比分明，使消费者便于预览阅读。经过设计后的文字，显得很有扩张力，很有力量感。在原来的文字基础上做了一些特效，做了一个渐变的效果，比之前的文字在活跃度上有了很明显的提升。

横幅广告字体设计风格要形成统一；字体要统一位置，达到有统一的秩序感，如果首页有5张横幅广告图，那必须要有3张达到统一风格。

规范分两类：设计风格规范、版式排版构图规范。页面颜色要求：页面中使用的颜色不得多于5种，黑白灰不算色；针对不同的主体使用合理的色系；主题颜色和辅助颜色要根据配色原理搭配。

①单色、同色系：适合产品本身颜色比较统一，通过吸取产品较近的周边颜色，再通过添加合适的辅助元素，使画面变得统一而丰富，这种色系适合单品的一个横幅广告的设计。

②相似色、邻近色系：相似色相对于单色系可变化的范畴会大很多，但也是在主色调明确的情况下辅助添加类似色，这类配色方式在横幅广告应用中还比较常见。是一种比较好掌握的配色方式，同时配色运用得当会使画面看起来很时尚。

③补色系：这里把互补色、单边补色分割、补色分割3种情况一同来说，因为三者在大范畴内上下浮动，效果也颇为相似，并无特别明显的区分，主要因为整个画面调性要活泼，加之产品都属于色彩明快的品类，色彩上的愉悦感更容易激起点击欲望。补色系的运用应注意面积搭配及颜色灰度的调整，对于补色系的运用可在今后多尝试。

④多色搭配，可把对比色、矩形分割、广场分割多颜色的搭配归为一类来说，这三种跨度较大的配色方式，相对来说应用的比较少，不是很容易掌握，一般比较适合小面积的应用起到装饰平衡的作用。

页面设计色彩要清新，布局要大方；页面设计要有整体性、一致性等。一致性包括色彩的统一、版式的统一和字体的统一等；页面布局应主次简约分明，中心突出，大小搭配，互相呼应，图文并茂，适当的空白利于消费者阅读。版式排版快速法则：

①第一招，对齐。对齐分左对齐、右对齐和居中。最常见的电商海报，基本上都采用了左右对齐排版方式。对齐是最常见也是最基础的板式排列方式，给人以稳重、力量、统一、工整的感觉。左对齐的排版方式，版面不会显得很凌乱，而会显得很统一很有秩序感。

居中的排版会给人正式、大气、高端、有品质感觉。在电商海报中居中排版经常会见到文案直接打在产品上面，文案的遮挡汇合后面的产品营造出一前一后的层次感，加上一些光效会让整张画面空间感提升许多。

②对比。无对比不设计，人们在视觉上不喜欢平淡、千篇一律的东西，喜欢看有对比的画面。使用对比的排版技巧可以最有效的增加画面的视觉效果和冲击力。

广告语要注意极限用语的应用。根据广告法，极限用语不得出现在商品列表页、商品的标题、副标题、主图、详情页以及商品包装等位置。极限用语包括如下词汇：

国家级、世界级、最高级、最佳、最大、第一、唯一、首个、首选、最好、最大、精确、顶级、最高、最低、最、最具、最便宜、最新、最先进、最大程度、最新技术、最先进科学、国家级产品、填补国内空白、绝对、独家、绝无仅有、前无古人、史无前例、万能等。

（此处已添加圈子卡片，请到今日头条客户端查看）

① 官方头条号：设计智造 顶级创意设计师必备

② 本篇为 设计智造www.cocoo.top 编辑整理，版权归原作者所有，转载请注明出处！

淘宝——宝贝详情页尺寸与制作技巧

?

宝贝详情页是可以给人们带来想要的产品信息，宝贝详情页的制作尤为重要，人类是视觉动物，若详情页的展示能够美观，又能有文案在理，一定能迎来广大用户的追捧。前面我们说过制作详情页的文案以及思路，那么实际动手起来，我们还得需要知道详情页的尺寸和制作技巧。

封面设计丨Sweety 责编丨花花

第63篇丨每日一篇好文：1938字丨5分钟阅读

其实详情页如果用一个问答式的顺序来表现会很用的。比如，这个用起来是什么样的？我合适吗？其他买家怎么说的？买家秀怎么样？会是正品么？别家的比你便宜好多呢？近期会降价么？为什么要我今天就买？为什么我不应该到别家去买？宝贝的细节是什么样子的？有现货么或预售多久？发什么快递呢？一般多久能收到？如果不喜欢退换货有保障么？

一、详情页图片大小

大小：一张图片150-200KB之间比较好，有利于加载，提高浏览体验

尺寸：淘宝手机端显示宽是750像素，尽量把高度控制在960像素左右，使之更符合买家们的屏幕尺寸

二、详情页制作细节技巧

1.提前提炼卖点

2.想办法在正式内容的前三屏打动一个买家，（不算小海报和关联模块）

统计的数据，浏览3屏以上的不会超过50%，浏览超过10屏的不会超过15%，大多数人浏览了前3屏就关闭页面离开了。

3.以卖点为中心，制作整个详情页

后期根据成交热词来调整，成交热词是买家对你的产品价格特点的归类选择，详情页一定要对这些词，加大篇幅去深入体现，让买家们通过这些成交热词进入宝贝后可以清楚地看到他们所想要知道的，提升转化率。

4.不要超过五个字宝贝核心的卖点

太长就没那么容易并让人在三秒秒内接受并理解。

5.把握15到30秒，控制在8至10屏

一个买家决不决定在你这里购买，开始的15到30秒最为重要，也是决定她是否愿意继续浏览你家详情的关键，我们就要研究买家打开宝贝的最初的想法了，想这个合不合适自己，这个价格是不是合理的，其他买过的人是怎么评价的，在这家店铺购买放不放心，售后如何……只要解决好这些问题，她自然愿意留下来继续看后面的详情，并和在其他家浏览的宝贝对比，直到收藏或购买，就算最后仍然离开没有购买，这增加的停留时长对宝贝的权重也是有益的。

6.不要想着做个所有人都喜欢看的详情页

你的宝贝价格和款式，点击的关键词就锁定了它的目标客户群，你要做的讨好这个客户群，做出他们喜欢看的页面，营造出他们愿意购买的场景。

7.详情页要有购物感

不要文艺的让人看三遍都不明白你是要卖东西还是卖情怀。对于大多数店铺来说，用卖东西的风格来打造详情页，把晦涩难懂的文案都扔掉，简单明了告诉买家我这个宝贝怎么样，就是好东西，你不买就是错过。

8．适当顶端加文字，可以增加买家对宝贝的了解和延长停留时长

图片毕竟没有文字小，顶端放些文字，用户网速不好的时候也能看到我们的描述。

9．敢把宝贝本身存在的无法解决的问题在详情页用文字说清楚

比如：气味，颜色，是为了让愿意购买的有心理准备，不至于收到后才来吹毛求疵（这个也要看类目，不是每个类目或价位都可以这样做的）。

10.不着急报价

详情页，不会在开头就告诉顾客自己的产品卖多少钱。首先需要传递给顾客的是商品的价值，因为价值会决定消费者愿意为此支付的价格，只有不断的提高价值感，才能减少在成交环节的价格障碍。

特别注意

1.手机端详情越简洁，只描述重要的东西，往往转化率越高。要打消买家顾虑，解决买家最关心的问题，坚定买家购买决心

2.一定要检查字体是否够大

3.先模仿后创造，把整个图片往高端路线上引，主要优化无线端详情和活动图上。

4.判断一个详情页做的好不好，除了停留时长和跳失率，还应该关注静默转化率，只要你把客户可能咨询的问题都在详情页里解释清楚了，相信转化率特别是静默转化率不会低。

关注“花花电商记”带你快速了解互联网

每天分享互联网知识技能与技巧

希望在以后的日子里大家共同学习，共同进步

走捷径，不撞南墙 ！

淘宝电商：一个合格的详情页应该是这样的

一个合格的详情页应该是这样的

关键词：详情页

适用类目：淘宝全类目

适用店铺：全行业大中小类目

淘宝产品上架详情页是一个十分重要的东西，这个是关乎产品转化的重要因素，产品的中后期是产品不断优化的一个过程，主要是图片的优化，一般都不会大改，所以详情页是很重要的。

一、详情页的作用

1、减少跳失率

跳失率指的是消费者进入详情页没有产生，其他的任何点击之后就离开了，这个就算做跳失率。

2、增加停留时长

详情页越吸引消费者消费者的停留时间会越来越长，这可以说明消费者对你的详情页内容是十分感兴趣的，他希望能够多看你的详情页来斟酌自己是否可以放心购买，所以说详情页优秀停留时间就越长。也更容易让消费者购买你的产品。

3、增加收藏加购

详情页优秀消费者进行收藏加购，也会增加你的转化机会。收藏加购数据也是很重要的。

4、促进转化

详情页是产品的内功，能够促进转化

二、详情页规范

1、电脑端要求

1.1图片宽度<=750，宽度没有限制，但是现在大家都是无线端浏览淘宝，考虑到网速要求，1.2图片不要太长，以免消费者打开速度过慢影响消费体验。

1.3图片大小<=3M，支持格式有jpg,jpeg,png

1.4文字字数不大于25000字

1.5需要使用的图片在编辑页面“上传图片”，或者选择已经在图片空间上传之后的图片

2、手机端要求

2.1图片宽度不小于480，但是也建议大家都上传750，和电脑端同步，整版页面高度不得2.2高于2500

2.3图片不大于10M

2.4文字字数不大于5000字

2.5如有音频仅支持Mp3格式，而且不大于200k

三、详情页设计

1、消费者喜欢什么样的详情

模特好看的

产品图精细的

营销文案抓住痛点的

排版美观大方

信息完善

2、最简单的设计方法

可以看同行优秀详情页也可以分析竞品店铺的详情页设计。

3、详情页版块细分

3.1细节图

产品一定要有合适的细节展示图，针对不同的产品对其做工，工艺镶边等细节图进行放大，突出产品的小心机设计。

3.2尺码图

特别是衣服，一定要有完整的尺码图，最好是展示一张模特图，表明模特身材信息提供给消费者参考。 （文章后有惊喜哦）

3.3营销图

这里就是卖点图，店铺可以豪礼相送的一些赠品图，或者参加了什么活动能搭配优惠，或者限时特价甩卖等信息都可以作营销图展示，这是十分重要的板块，基本每个产品的详情页都不能缺少营销文案。

3.4展示图

主要是模特的展示图，俗话说得好，现在是衣靠人装不是人靠衣装，在线上平台购物，主要还是为了满足消费者的各种潜在需求，拿衣服举例，如果是同一件衣服，一个在好看的模特身上展示过一个在一个相对平庸的模特身上展示过，那么你绝对会选择模特好看的那家，因为你希望穿起来能够像模特一样美，所以在这种地方放一些明星同款效果会更好，追求美的心，人人都有。

3.5温馨提示图

就像平时你去逛汉堡店，所有的产品是图片仅供参考是因为有一定的误差，提前给消费者打预防针，而在淘宝上各种产品都有卖，难免会有一些产品存在些许瑕疵，比如瓷器，比如衣服色差。所以在这里放一张温馨提示图体现的是一种服务态度。

四、结论

中小卖家的详情页，首先要保证不要直接去盗用别人的图，一旦被举报商品可能会被下架，所以说使用厂家图的需要征得厂家的同意，并且在此基础上对厂家修改素材进行同质化处理。尽量让自己的图片和别人不一样，一个好的详情页需要卖家多花点心思去研究消费者心理，分析优秀同行特点，这是一个长期的过程。随着消费者喜好的变动。我们的详情页也要迎合。所以在店铺发展中后期，对详情页有一个不断完善的过程。