一、详情页UI设计基础规范

商品详情页主要分为两部分：主图和产品详情页

1）主图就相当于人的脸面，详情页的图片、文字、媒体等就是这款商品的简历，整个详情页就如同一个商铺。

2）详情页由：产品基本规格参数、场景海报大图、产品引导软文、产品功能/卖点、产品细节说明、产品工艺、产品规格说明、产品全方位展示、品牌文化介绍、使用说明/温馨提示、设计师署名这十一大流程构成。为了让设计师更好的发挥自己的主观能动性和创造力，产品更加贴近用户，提高用户的满意度。所以在制作产品详情页的设计中必须遵守以下标准：主图标准、流程标准、切图标准。

1、主图标准

尺寸边距：主图尺寸800px*800px，白色主图边距120px*4

张数要求：产品正视图、俯视图、场景图、细节特写图等。

图片要求：产品图片应完整、保持清晰、无噪点、无遮挡、无虚边 、无水印、曝光不应该过度，大小不超过500k。 

2、流程标准                             

①产品基本规格参数

②头图海报大图

虚线边距：上边距40px，左右边距25px

标题与内容间距：130px

标题字边距：30px

标题字体要求：28px，微软雅黑，Light，Windows LCD，#808080

内容字体要求：28px，微软雅黑，Light，Windows LCD，#333333

商品参数表与头图海报间距：40px

③产品软文描述

产品软文：软文是隐形广告，软文需要自己产品的关键词，设计师的软文是否          能打动客户，让客户知道你做什么产品，让客户对你的人品和产品认同。

④产品功能/卖点

产品“卖点”，商品具备了前所未有、别出心裁或与众不同的特色、特点。设计师在制作过程中一定要把产品的功能和卖点展示完整。

⑤产品细节介绍

细节设计常常在产品设计中有画龙点睛的作用。产品无论多么的复杂，当分析和观察的时候，就会发现它是有很多细节组成的。

优秀的产品设计将产品的细节、外观和功能融为一体，体现了产品设计的各方面的高度一致。

设计师在进行细节设计的时候，将平面因素更多的融合，将会使设计更加的丰满，使产品具有更强的生命力。

⑥产品工艺介绍

产品的生产工艺，就是指产品生产的工序和技艺。

其中，“工序”的意思是：生产过程中的各个阶段、环节，也指各个加工阶段（环节）的先后次序。

“技艺”的意思是：包含有手工操作的生产过程中应该具有的技巧和艺术造诣。

只有把工艺介绍全了才可以使顾客更加对产品了解，更加信任我们的产

品。

⑦产品规格介绍

产品规格：使产品在规格上适合顾客的需要，加深顾客对本产品的了解，让顾客可以买的放心，满足顾客追求美观等心理需求。

⑧产品全方位展示

产品展示：指对客户的产品进行详细展示，包括包装、产品的款式颜色等所有产品详细的信息。

做到让网站的产品展示能让顾客更直观的去了解所展示的产品，让顾客在看到产品的同时对产品的每一个信息都有一定的了解。

⑨品牌介绍

品牌信任：品牌概念是指能够吸引消费者，并且建立品牌忠诚度进而客户再次购买此品牌产品。

⑩温馨提示

温馨提示：你的一个小小建议，会让客户感觉到温馨，拉近客户与产品的距离，体现出我们的细心和用心。

⑪设计师署名

设计师署名：每张详情页都有设计师的名片，通过名片记录你们每天的设计作品，看着自己的格言时刻督促自己同时也是为你们做宣传。

3、切片标准切片：详情页切片不可超过20张，每张切片大小不可超过500KB，切片线应选取白色区域，不可选在图片和文字上，如有视为出错。

二、淘宝、天猫、京东主图及详情页尺寸

1.1淘宝：

淘宝主图：800 x 800，可白底、可背景，五张必须有一张白底哦！

详  情  页：（单张不能超过500k）

PC端750px（首次上传PC端详情页可直接生成移动端，不用二次修改尺寸也可直接使用）、移动端640px

1.2淘宝：

PC端首页宽度默认是950px，侧边栏750px、150px选项

全屏通栏是1920px

店招尺寸为1920*120px（也可以1920*150px）

详情页宽度默认为750px

手机端首页宽度为640px，每一个小方格是80px

店招尺寸为750*254px

手机端详情页宽度尺寸480-620px，每张高度不得高于960px

2.1天猫：

天猫主图：800 x 800，需要一张透明的800 x 800px/PNG透明产品图做平台推广用

详  情  页：（单张不能超过500k）

PC端790px（单张图高度1250px）首次上传的PC详情页可直接生成移动端不用二次修改尺寸也可直接使用、移动端750px

2.2天猫：

PC端首页宽度默认是990px

侧边栏790px、150px选项

全屏通栏是1920px

店招尺寸为1920*120px（也可以1920*150px）

详情页宽度默认为790px

手机端首页宽度为640px，每一个小方格是80px

店招尺寸为750*254px

手机端详情页宽度尺寸480-620px，每张高度不得高于960px

淘宝天猫主图都是5张

3.1京东：

京东主图：800 x 800px，最多6张，

详  情  页：PC端750px，移动端640px

1）满足规范标准且含有模块，按品类筛选参考「京东行业运营标准」

2）每张宽度建议640Px，所有图片宽度一致

3）每张高度小于等于960Px

4）每张图片容量应小于等于100Kb；图片总容量应小于等于3000Kb

5）图片格式为JPG/GIF/PNG

6）图片总张数建议大于5张，但不超过30张

7）为了更好地视觉呈现，图片上的文字字号建议不小于20号

3.2京东：

PC端首页宽度默认是990px，侧边栏790px、150px选项

全屏通栏是1920px

店招尺寸为1920*120px（也可以1920*150px）

详情页宽度默认为990px，也可以做成750px和790px（以前是这个尺寸）

手机端首页宽度为640px，每一个小方格是85px

店招尺寸为640*200px

手机端详情页尺寸可以和PC端详情页一样。

以上所述：移动端，三大电商都在根据当下最流行的移动端设备尺寸修改后台，具体尺寸还是要根据后台的指示制作，千万不要任性！各位老心！关注公众号，别扎铁！

                              长按