电商设计电子课件

第6章商品详情页设计本章介绍：商品详情页设计是电商设计任务中的综合型工作任务，通过精心设计的商品详情页能够提升用户对商品的购买欲望。本章针对商品详情页的基本概念和设计模块等基础知识进行系统讲解，并针对流行风格与典型行业的商品详情页进行设计演练。通过本章的学习，读者可以对商品详情页的设计有一个系统的认识，并快速掌握商品详情页的设计规范和制作方法，成功制作出具有购买欲望的商品详情页。了解商品详情页的基本概念明确商品详情页的模块结构学习目标6.1商品详情页的基本概述商品详情页即店铺向消费者展示商品详细信息，令消费者产生消费的页面，电商详情页具有展现产品内容、达成产品转化的功能作用。由于消费者在虚拟网络中，只能通过详情页了解到商品，因此详情页的质量对商品的销售量有着决定性作用。6.2商品海报设计商品海报的基本概念商品海报的设计规则课堂案例-中秋月饼商品海报设计商品海报即详情页中的商品Banner，通常位于详情页中商品描述信息下方，类似于店铺首页的轮播海报，主要用于令详情页中的商品更加吸引消费者，更好地展示商品优势。优秀的商品海报会起到场景代入、体现真实的作用。6.2.1商品海报的基本概念商业海报效果图商品焦点图可以根据平台分为两类，一类以淘宝为代表，宽750像素的焦点图，另一类以京东和天猫为代表的，宽790像素的焦点图，两者高度不限，通常建议为950像素。在进行这两主标题字号建议在60-70像素，副标题字号建议在40-50像素，文字叙述字号建议在25-30像素。6.2.2商品海报的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具绘制基本形状，使用“添加图层样式”命令为图形添加效果。6.2.3课堂案例-中秋月饼商品海报设计效果图6.3卖点提炼设计卖点提炼的基本概念卖点提炼的设计规则课堂案例-中秋月饼卖点提炼设计6.3.1卖点提炼的基本概念卖点提炼即商品特点和消费者痛点的提炼，通常位于商品焦点图下方或同商品焦点图组合，主要用于向消费者展示商品独特之处，令其产生购买欲望。卖点提炼的精准会起到展示产品卖点、挖掘用户需求的作用。卖点展示图卖点提炼中的文本简短且应具有说服力，建议使用30-40像素的黑体类型。图标醒目且应和卖点呼应。6.3.2卖点提炼的设计规则

使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具、“椭圆”工具绘制基本形状，使用“创建新的填充或调整图层”命令为图像校色。6.3.3

课堂案例-中秋月饼卖点提炼设计效果图6.4商品展示设计商品展示的基本概念商品展示的设计规则课堂案例-中秋月饼商品展示设计商品展示即展示商品的内容，通常位于卖点提炼下方，通常是3-5张图片组成，实现一屏一卖点，进一步起到展示产品优势、呈现产品功能的作用。6.4.1商品展示的基本概念商品展示

商品展示的设计要点可以参考商品焦点图的设计要点进行。需要注意的是，因为商品展示这一模块通常有3-5张图片，所以商品的角度和背景既要统一又要有角度等区别，以免给消费者带来视觉疲劳。6.4.2商品展示的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具、“椭圆”工具绘制基本形状，使用创建剪贴蒙版命令实现中秋月饼商品展示。6.4.3课堂案例-中秋月饼商品展示设计效果图6.5

细节展示设计细节展示的基本概念细节展示的设计规则课堂案例-中秋月饼细节展示设计

细节展示通常位于卖点提炼或商品展示下方，是可以让消费者深入了解商品的重要模块。下面对细节展示的设计知识内容进行详细地讲解。6.5细节展示设计

细节展示即商品的细节放大图，通常位于卖点提炼或商品展示下方，将商品细节进行最大限度的展示，可以使消费者更加信任商品。优秀的细节展示可以起到剖析商品特点、深入了解商品的作用。6.5.1细节展示的基本概念细节展示效果图细节展示在设计时不易太过复杂，整体应呈现简洁效果。如果商品带有背景，建议为浅色，可以保证细节图的展示。6.5.2细节展示的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具绘制基本形状，使用“创建新的填充或调整图层”命令为图像校色，使用创建剪贴蒙版命令实现中秋月饼细节展示。6.5.3课堂案例-中秋月饼细节展示设计效果图6.6商品信息设计商品信息的基本概念商品信息的设计规则课堂案例-中秋月饼商品信息设计商品信息即商品的真实数据，通常位于卖点提炼或细节展示下方。网店美工人员需要将商品的尺寸、颜色等内容充分展示给消费者，以起到全面介绍商品、引导消费者了解的作用。6.6.1商品信息的基本概念商品信息展示

商品信息在设计时需要将大量的数据归类整理，以图表的形式表现出来，令消费者可以直观的了解到商品信息。6.6.2商品信息的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字，使用“矩形”工具、“圆角矩形”工具、“直线”工具绘制基本形状。6.6.3课堂案例-中秋月饼商品信息设计切图优化6.7其他模块设计其他模块的基本概念其他模块的设计规则课堂案例-中秋月饼其他模块设计需要网店美工人员重点设计的除了以上几个模块之外，还有包括质量保证、品牌实力和快递售后等其他模块。这些模块通常位于详情页底部，在最后时刻完成着促成购买的艰巨任务。下面对其他模块的设计知识内容进行详细地讲解。6.7其他模块设计

质量保证、品牌实力和快递售后等其他模块通常位于详情页底部，这些模块都在不同程度上为消费者购买商品打消疑虑、加强信心。质量保证即展示商品的相关证书，起到承诺产品质量、增强消费者信赖的作用。6.7.1其他模块的基本概念其他模块其他模块在设计时由于整个页面接近于尾声，消费者观看时多少会产生视觉疲惫感，因此在设计时一定要突出该模块的重点，以简洁醒目为主，不然容易让消费者产生不耐烦的负面情绪。6.7.2其他模块的设计规则使用“新建参考线版面”命令建立参考线，使用“置入嵌入对象”命令置入图片，使用“横排文字”工具添加文字