电商详情页设计的基础心得分享，聊聊详情页设计的四大关键要点

电商详情页对于品牌店铺提升转化率而言，是极为关键的要素之一。出色的设计能够唤起用户的消费冲动，协助用户建立对店铺产品的信赖，消除顾客的消费顾虑，进而推动用户下单。对产品详情页加以优化，能够显著提高转化率。详情页需要与产品主图以及产品标题相互适配，并且必须如实呈现产品的属性。

下面一同来了解各大电商平台的详情页尺寸

淘宝：宽度为 750px，高度无限制；

天猫：宽度 790px，高度无限制；

京东：宽度 990px，高度无限制；

一号店：宽度 750px，高度无限制；

唯品会：宽度 990px，高度无限制；

蘑菇街：宽度 720px，高度无限制；

Tips：虽说高度不受约束，但最好将总长度和高度控制在 2 万 px 以内，单张的切片高度保持在 1500px 以内。倘若店铺同时在天猫和淘宝开设，应当先制作天猫的详情页，随后把 790px 的图片按照相同比例缩小至 750px 即可。此外，在 PC 端设计时，使用的最小字体像素不能低于 14px，移动端则不能小于 20px，务必留意图片素材和字体的运用，特别是要关注是否存在版权问题，对于具有一定知名度的店铺，这种潜在风险极大，严禁使用未经授权的素材。

一、详情页卖点图

卖点图在整个详情页中占据着核心地位，不少商家感觉自家有详情页但转化率依旧不高，或许是因为在卖点的研究与撰写方面没有理清思路。

那么，什么是卖点呢？首先要明晰消费者的兴趣点所在，是注重品质、价格，还是口碑，这些皆为卖点。而您的卖点需要精心提炼与修剪，突显自身优势，切不可随意编造不存在的功能、用途、性能等。倘若与描述不符，消费者便不敢下单，这也会对后续店铺的运营产生不良影响。通过阿里指数的大数据，梳理出几个常见的卖点：

1、低价引流

这堪称吸引消费者最为直接的手段，也是众多商家惯用的卖点，比如采取打折、低价、包邮、赠品等方式。

2、款式的吸引

并非所有人看到降价就会购买商品，总有部分人是基于自身需求进行购买。此时，您商品的款式便成为了另一个卖点，它会凭借款式、外观来吸引流量，造型美观、独特的产品在同类产品中更能吸引消费者的目光。

3、功能材料

功能材料的含义大家都明白，正如字面所示。倘若商家能够长期吸引客户回购，那么这款产品无疑是非常成功的。您的产品功能性出色，材料耐用，自然能够确保消费者的忠诚度。

4、文化卖点

我们发现当下许多国外产品进入中国后并非都有市场，或许是由于未考虑到中国或亚洲的文化特色。所以，要融入当地的环境情感等因素。

5、品质创意图

利用创意特色来吸引消费者的方式越来越多，大家都期望自身的产品比同行更具特色，从而形成差异化。除了质量之外，首先能够吸引他人的便是您的创意图设计，凭借一张图实现转化率已屡见不鲜。例如：您的图片均为用手机拍摄的低像素图片，而同行的包装和创意图、文案等都精心安排，您觉得在两者之间消费者会选择您的产品吗？

二、详情页设计要点

1、首屏创意海报

需要明确的一点是，详情页的页面通常较长，部分消费者可能缺乏足够的耐心全部浏览完。抓住这一特点，我们要通过第一屏的创意设计来吸引消费者，引导他们继续向下浏览。

2、整体页面协调

每一款详情页对应一款产品和主题，不同的主题风格与产品相匹配，每种风格给人带来的感觉和气质都有所差异。比如：

高贵气质：通常表现为简洁且有质感，或者营造出奢华、华丽的氛围。

文艺特色：这类页面所运用的色彩往往以清新淡雅为主，给人一种柔和、宁静的感受。

年轻时尚感：页面常常设计得棱角分明，色彩亮丽，通常会用亮色加以点缀。

科技感：往往以深色、蓝色调为主进行设计，或者融入一些机械零件等元素，或者采用棱角矩形之类的形状。

3、布局设计规划

左右布局：因其屏幕占比率较大，这种布局主要在 PC 端较为常见，如今大部分流量已转向移动端，所以现在已不太常见，大家了解即可。

1 字型布局：这种布局会给人一种厚重硬性的感觉，必须使用一些质量极高的模特大图来制作，否则难以达到理想效果。

S 型布局：相比常见的平铺直叙类型，这类布局更具趣味性，常用于儿童用品类或女性物品。

Z 字型布局：与 S 型作用相似，这种布局更多地应用在男性产品或科技类产品中。

楼层式布局：这类页面简洁且易于把握，通常设计节奏在背景方面按照由深-浅-深-浅的布局进行，方便我们预览阅读。

自由布局：这种设计没有过多固定模式，排版被分割成众多小块，页面看似简洁，但对于设计人员而言，排版的要求颇高。这种设计非常适合走高端路线的时尚服饰类，不建议新手尝试。

三、详情页细节

1、内容装饰

装饰性内容在详情页中发挥着让内容更为丰富充实的作用，为使详情页更具美观性，很多人喜欢添加一些英文字母进行点缀。需要注意的是，英文在此处属于装饰元素，切记不要做得过大或者颜色过深而抢占了主要内容的风头。

2、用色原则

鉴于我们详情页的长度，在色彩运用上不宜采用大面积的色彩背景，例如使用一些低明度色彩：灰色、黑色、白色等作为背景效果较好，彩色的颜色用于一些标题或卖点图上作为点缀即可。

3、统一调性

制作详情页时一定要确保色彩、标题、布局和风格气质的统一，否则整个页面会显得杂乱无章，让人难以阅读。

四、总结

详情页的作用不仅是让消费者了解产品，更为重要的是能够为商家提升销量。一张出色的详情页设计，设计师首先要做的并非设计，而是思考并确定整体页面的方向。一张详情页的完成，一半的时间用于思考制作方向，另一半的时间才用于实际设计。进行设计时，我们一定要学会先思考，而后动手操作，这样才能逐渐增进自己对设计的理解，从而更上一层楼。