打造精美的商品详情页设计与制作

活动背景

商品详情页作为产品信息的主要承载页面，也是电商业务转化的主战场。商品详情页是决定买家是否购买的关键因素，因此商品详情页面的设计规划，是电商产品设计的核心，承担着转化率。商品详情页包含哪些内容呢？如何美化详情页的视觉设计？我们跟小可一起来学习吧！

知识窗

买家在淘宝点击商品图，系统会跳转到产品的详情页。能不能继续留住客户，详情页至关重要，优秀的详情页能提高产品的转化率。

1.商品详情页包含哪些内容

详情页大小尺寸：宽为750 px，高自定义；图片格式：JPG、PNG。

商品详页的设计主要包含商品图片、商品内容介绍、商品价格信息。基于这些内容模块的商品详情页设计要点，分为消费者体验设计、用户体验设计。其中具体应该包含什么内容，如图5.2.33所示。

图5.2.33

2.详情页设计禁忌

（1）信息太杂乱无重点，用户视觉混乱。

针对商品所属性质和定位，选择相对应的核心设计功能点来展示，不必考虑所有设计都有内容，否则导致信息杂乱，造成用户混乱的视觉体验，要注意页面长度的控制，一般是3～5屏。

（2）相关商品和推荐太多，喧宾夺主。

商品详情页主要作用是展示商品属性，组合购买等不宜太多，并且最好是有价格优惠。其相关产品推荐位置不要太靠前，以免喧宾夺主，导致消费者有很强的商业感和厌恶情绪，这一点对于订单转化很不利。这个模块通过放在页末的相关度特别高、精准的“组合购买”和“猜你喜欢”来平衡其余商品导流和用户体验的问题，比较恰当。

（3）文案太多太浮夸，影响购物体验和视觉设计。

文字最无力，放在信息密集的电商上，更是如此。浮夸不务实的文案字眼更是雷区，消费者的智商不容侮辱，没有根据的文字说明毫无价值。商品属性特色用关键字抓取，商品的展示通过图片甚至视频完成，有效地提高详情页的视觉设计。

活动目标

为乐乐包袋皮具公司新品拉杆箱设计商品详情页，要求详情页中包含产品广告、产品特色、产品图片、细节图、优惠活动、售后服务等模块，提高消费者的信任。效果图如图5.2.34所示。

图5.2.34

图5.2.35

设计与制作商品详情页

活动实施

设计步骤参考如下：

（1）确定商品详情页面布局。根据公司的要求，该款拉杆箱商品详情页要包含创意海报、产品特点、产品信息、亮点剖析（细节图）、售货服务模块。

（2）收集相关素材。包括创意广告素材和商品各个角度高清图。大象、羽毛、衣橱、产品图，如图5.2.35所示。

（3）确定配色， 图文排版设计。新建文件。宽为750 px，高为4 000 px（根据内容调整画布的高度），背景填充白色。制作海报1：新建组，并命名“海报1”，使用矩形选框工具，固定大小：750 px×875 px，添加渐变背景，参数设置如图5.2.36所示；打开素材“项目5→5.2.4素材.psd”，选择奶茶和3个颜色旅行箱的素材，调整其大小，摆放合适位置，效果如图5.2.37所示；添加文案，并添加文字效果，配色使用棕黄色拉杆箱的颜色。海报1的效果如图5.2.38所示。

图5.2.36

(www.xing528.com)

图5.2.37

　　　　　　 图5.2.38

（4）按照“海报1”的模板，制作海报2、海报3、海报4、海报5。复制组“海报1”，粘贴并命名为“抗压”“轻”“容量”“颜色”，如图5.2.39所示；选择相关的素材和文案进行图文排版，素材添加阴影，增强立体效果。效果如图5.2.40—图5.2.42所示。

图5.2.39

图5.2.40

图5.2.41

图5.2.42

（5）产品信息模块制作。制作标题栏：选择“矩形选框工具”，属性栏：固定大小为750 px×150 px，制作标题栏的底色，填充颜色（#344152）；制作方框，选择“矩形选框工具”，画出选区，并点击鼠标右键进行描边，参数如图5.2.43所示；制作渐隐线条，使用画笔工具，按住“Shift”键画直线，参数设置如图5.2.44所示；接着使用橡皮擦，擦除部分线条，参数设置如图5.2.45所示；然后复制线条到右边，添加文字信息，最后标题区域制作完毕，效果如图5.2.46所示。

图5.2.43

图5.2.44

图5.2.45

图5.2.46

（6）复制标题栏模板，进行文字和图片修改，完成产品信息制作，效果如图5.2.47所示。

图5.2.47

（7）按照步骤（6）的方法，制作产品的亮点剖析，制作完毕，效果如图5.2.48所示。

图5.2.48

活动评价

活动拓展

对本活动拉杆箱产品的详情页，根据“双11”活动进行重新设计，要求必须体现“双11”活动氛围，加入“双11”的广告、店铺其他产品推荐和售后服务的模块。