《电子商务视觉设计PPT课件（共8章）第6章 电商网店详情页视觉设计》由会员分享，可在线阅读，更多相关《电子商务视觉设计PPT课件（共8章）第6章 电商网店详情页视觉设计（32页珍藏版）》请在金锄头文库上搜索。
1、电商网店详情页视觉设计知识目标和技能目标知识目标： 了解和认知电商网店详情页 掌握商品主图视觉设计方法 掌握关联营销图视觉设计方法 掌握商品细节图视觉设计方法 掌握商品功能图视觉设计方法 掌握商品展示设计方法技能目标： 能够运用Photoshop软件相关操作与命令制作网店店铺详情页 能够完成电商网店详情页装修学习重点和难点学习重点： 电商网店详情页视觉设计方法学习难点： 电商网店详情页视觉设计制作第一节 电商网店详情页认知1.1 详情页意义 电商网店详情页是展示商品信息的页面，通常消费者注意到感兴趣的首页后，最想浏览的就是详情页，它直接决定了电商网店能否留住消费者，达成交易。1.2 详情页营销
2、流程 电商网店的整个销售过程没有实体店的交流与互动，完全处于静态。因此，在产品详情页的装修中要注意阐述逻辑这个关键点，让文字和图片活起来。详情页的基本营销思路是首先介绍商品详情，其次描述商品细节，进行商品展示，再次说服消费者产生购买欲望，最后达成购买事实。1.3 详情页尺寸 一般情况下，电商网店详情页中的商品描述图的宽度是750像素，高度没有固定限制，要根据商品的具体内容来定义。合理地处理图片，才能让电商网店看起来正规可信，并且更加专业。1.4 详情页设计要点 要根据产品定位和用户定位来排版详情页。根据消费者对产品的关注点来安排内容，比如产品的性能、价格、亮点和使用效果等。第一节 电商网店详情
3、页认知1.5 详情页设计类型 （一）功能型：功能型的详情页主要介绍产品的功能。例如，在制作床品店铺的详情页时，需要考虑的是消费者除关注花色和尺寸外，还关注床品的材质、洗涤方法等。 （二）符号型：符号型详情页以商品为载体，主要突出商品的形状和色彩等信息。花语名称的价值就是该商品的独特之处，在特定情况下要比鲜花本身更重要。第一节 电商网店详情页认知1.5 详情页设计类型 （三）感觉型：感觉型详情页主要给浏览者身临其境的感觉，例如，商品是沙滩长裙，在拍摄详情页图片时让穿着长裙的模特走在沙滩上，海风吹过，给消费者海边度假的感觉，吸引消费者眼球。 （四）服务型：详情页中保修费用全免、送货上门、无忧退换等
4、有保障的售后服务虽然不计入商品价值，却深受消费者喜爱。 （五）附加型：有时可以通过详情页中体现的附加价值来提高店铺的销量和消费者的黏性。该类型详情页虽然是老客户的服务通道及专属的优惠力度，但是新客户也会有相应的礼品。第二节 商品主图视觉设计2.1 商品主图认知 当消费者在电商平台进行商品搜索时，显示在搜索结果页面中的商品图片就是商品主图，如下图所示。商品主图是消费者对商品的第一印象，尺寸为220像素220像素。显示在商品详情页中的主图也叫商品橱窗照。常用尺寸有300像素300像素和400像素400像素两种。在淘宝店铺中，若上传的图片大于700像素700像素，则商品详情页自动提供放大镜功能，消费
5、者可以使用放大镜功能查看商品主图细节。而天猫商城的规定则是主图尺寸大于800像素800像素会自动出现放大镜功能。为了网页浏览的顺畅，多数网站要求的商品主图的文件大小不能大于500KB，图片格式可以是JPG、PNG和GIF格式。第二节 商品主图视觉设计2.2 商品主图设计形式 （一）摆拍设计商品主图的基本要求是可以清晰地展示商品全貌。商品摆拍可以使用纯白背景或简洁背景，这种设计的优点是直接、干净，可以让消费者快速了解商品的外观与颜色，最能直观地表现商品特点和属性。 （二）场景设计场景设计是指通过模特进行商品展示，或者根据产品特点和用途搭建生活化、场景化的环境。这种设计在展示商品的同时，还可以起到
6、烘托商品氛围的作用。场景设计通常需要较高的成本和一定的拍摄技巧运用不当会适得其反。第二节 商品主图视觉设计2.3 提高商品主图点击率的方法 （一）添加徽标：对于已经拥有良好形象和广泛市场的成熟品牌商品，在商品主图的一角放置品牌标志，可以有效地让消费者快速识别品牌，唤醒老客户的消费记忆，吸引更多新客户的关注和购买。小众品牌的标志虽然没有大的影响力，但是标志的添加可以增加商品的正规感，也能使消费者在重复浏览中注意并逐步记住这个品牌。第二节 商品主图视觉设计2.3 提高商品主图点击率的方法 （二）添加文案：充分利用主图画面空间，在合适位置添加一些描述商品核心卖点、特色、打折信息等刺激消费者购买欲望的
7、文案，如“买赠”“包邮”“正品”等，进一步吸引消费者点击主图。需要注意的是，文案内容一定要简洁明了，有引导购买的诱惑力，且不能遮挡商品主体。第二节 商品主图视觉设计2.4 商品主图视觉设计案例八分裤商品主图 案例准备：启动软件，新建一个400像素400像素的文件，背景选择白色，文件名称为八分裤主图；打开资源库素材文件中的“八分裤”图片，选择“快速选择工具”，删除“八分裤”图片背景。第二节 商品主图视觉设计2.4 商品主图视觉设计案例八分裤商品主图 案例操作：选择“矩形工具”绘制填充颜色为白色,描边颜色设置#a43b37,描边宽度为“2点,描边样式为实线的矩形；选择“横排文字工具”中输入文本，黑
8、体，文本颜色为#a43b37；继续输入文本，黑体，文本颜色设置为#a43b37和#3b44ef色；选择“椭圆工具”填充颜色设置为线性渐变色，起点颜色设置为#a372f9，终点颜色设置为#00ffb4，描边颜色设置为无，按Shift键绘制正圆形；复制正圆形填充颜色更改为无，描边颜色更改为#FFFFFF，描边宽度更改为“2点”，描边样式更改为虚线。第二节 商品主图视觉设计2.4 商品主图视觉设计案例八分裤商品主图 案例效果：选择“横排文字工具“输入文本“活动促销价 158元”，字体设置为黑体，颜色设置为白色，完成效果如下。第三节 关联营销图视觉设计3.1 关联营销图视觉设计认知 电商网店关联营销图
9、是指一个产品页同时放了其他同类、同品牌等可搭配的有关联产品，由此达到让客户由此及彼的浏览，以便提高点击率，提高购买率，增加产品销售量，是一种建立在双方互利互益基础上的营销方式。关联营销图因具有快速提高购买率，让更多的人来购买；缩短购物路径，将浏览者变为购买者；增加用户关注、提高店铺忠诚度；提高客单价，让消费者一次买更多；提高店内产品曝光率等优势，成为电商网店装修详情页必不可少的内容。3.2 关联营销图视觉设计原则 （一）基于需求：关联产品的选择要基于用户的需求，不能有强加感，在图片表现上要注意商品色调的一致性和商品风格的统一性 （二）保障利润：为了让消费者感受到搭配销售的实惠，同时保障自己的利
10、润，关联产品尽量选择高定价产品，在关联营销图上形成直观的对比。第三节 关联营销图视觉设计3.3 关联营销图视觉设计表现形式 （一）互补关联：互补关联强调搭配的商品和主推商品有直接的相关性。若主推商品为补水原液，则可以搭配面膜、面霜等同场景产品。 第三节 关联营销图视觉设计3.3 关联营销图视觉设计表现形式 （二）替代关联：替代关联指主推商品和关联商品可以完全替代。若主推商品为皮质男鞋，则关联商品可以是网布男鞋，也可以是休闲男鞋等。 （三）潜在关联：潜在关联重点强调潜在互补关系，这种搭配方式一般不推荐，但是多类目店铺可以考虑。若主推商品为泳衣，则潜在关联的商品可以为防晒霜，两种产品毫无关系，但是
11、在潜在意义上，买泳装的人可能要在户外游泳，因此防晒霜也是必要的。第四节 产品细节图视觉设计4.1 产品细节图表现方法 （一）细节放大方法：要凸显商品本身的主要特点，可以放大商品重点部位的细节，犹如拥有一个可以移动的放大镜，消费者在看到完整商品的同时，还可以直观地了解商品的材质、纹理等细节信息。细节放大方法多应用线条和箭头等元素将细节图与商品图连接起来，或者用简单的说明性语言来描述商品细节。这种表现方法既有宏观的整图，又有深入人心的细节展示，非常适合外形特大的商品细节展示或体积较小、部件较多的商品展示。第四节 产品细节图视觉设计4.1 产品细节图表现方法 （二）元素图解方法通过元素图解的方法表现
12、商品部分元素含量，并利用简短的文字告知消费者关心的信息，这种表现方法比细节放大方法更为简单，无须进行连接指示。如右图所示，设计者将男包的拉链等元素放大，并通过文字对该部分细节进行说明，尽管没有指示各部分细节位于商品的哪个位置，但浏览者很容易判断出来。第四节 产品细节图视觉设计4.1 产品细节图表现方法 （三）尺寸展示方法：经常有消费者购买商品后要求退货，其中很大一部分原因是虽然注意到商品本身细节，但是商品尺寸和预期的相差太多。这说明电商网店商品详情页的图片有时不能完全反映商品的真实情况，因为在拍摄图片时没有参照物，即便有参照物作为对比，也没有具体的宽度和高度概念，所以具体尺寸展示成为重要的商品
13、细节表现方法，有商品标注和文字阐述两种形式。第四节 产品细节图视觉设计4.2 商品细节图设计方法 （一）使用文字对细节直接说明：在展示商品细节时，只放置图片，而缺少必要的文字说明，内容会显得很单一，并且不能完整、准确地展示商品整体形象和特点。产品细节图通常使用标题文字和段落文字组合的方式对产品细节进行说明，也可根据需要进行并列信息或商品参数的逐一介绍。第四节 产品细节图视觉设计4.2 商品细节图设计方法 （二）添加素材对细节直观说明：添加素材不仅能让商品图片之间产生一定联系，还能对画面的布局进行规范，因此在设计产品细节图时必不可少。常用的素材有箭头、聊天气泡、规则几何图形。如图所示，矩形作为说
14、明文字边框，使文字工整地显示在固定的区域内，对画面起了很好的规范作用。第四节 产品细节图视觉设计4.3 商品细节图视觉设计案例品牌女鞋 案例准备：启动软件，打开资源库素材文件中的“女鞋”图片。第四节 产品细节图视觉设计4.3 商品细节图视觉设计案例品牌女鞋 案例操作：选择“椭圆选区工具“绘制正圆选区填充蓝色，描边设置为2像素，描边颜色设置为#0102fe；选择“横排文字工具”输入文本，字体设置为黑体，颜色为#9968ef，大小分别为18点和11点，文本行间距设置为12点，对齐方式设置为左对齐；同样方法完成其他细节放大图制作。第四节 产品细节图视觉设计4.3 商品细节图视觉设计案例品牌女鞋 案例
15、效果：选择“直线工具”，性栏中将填充颜色设置为黑色，描边颜色设置为无，描边宽度设置为1像素，然后绘制指示连接线，完成最终效果图。第五节 商品功能图视觉设计5.1 商品功能图认知 如下图所示商品功能图对商品的功能或作用进行翔实、透彻的分析和说明。在整个商品详情页中商品功能图的位置相对靠后，能坚持浏览到这里的消费者说明已经对商品产生了很大兴趣。因此，商品功能图视觉设计的好坏，直接影响消费者对商品的持续认可，进而影响消费者下单。第五节 商品功能图视觉设计5.2 商品功能图设计规范 （一）尺寸：因为产品功能图是电商网店详情页的一部分，所以其设计宽度受商品详情页宽度的影响，而高度上则没有限制。例如，天猫
16、商城新版页面宽度为790像素，京东统一要求详情页布局宽度不超过740像素。 （二）文字：产品功能图主要阐述商品的作用和功能，这些信息若平铺直叙，则会显得单调枯燥，让消费者失去阅读的热情，从而降低购买率。因此，产品功能图的视觉设计重点就是对描述高品作用和功能的文字进行归纳和总结，并通过色彩和装饰元素进行艺术化处理，从而提升文字的可读性。 （三）装饰：将直观、形象的装饰元素应用到商品功能图视觉设计中，可以起到代替文字或突出文字的作用，让没有生气的文字变得具象化和生动化，在给消费者带来美好视觉享受的同时，也有助于消费者深入了解商品的功效。第六节 商品展示设计6.1 商品展示设计认知 电商网店详情页中浏览量最大的区域就是商品展示区，该区域的视觉设计会影响店铺的销售，商品展示的设计效果好商品销售量也高。商品展示设计看似简单，但是需要在有限的空间内尽可能传递更多的有效信息，因此商品展示需要聚焦用户关注点和痛点，让浏览者产生满足感和惊喜感，从而提升点击率和交易量。第六节 商品展示设计6.2 商品展示设计内容 如图所,电商网店详情页中商品展示区域可以向消费者展示商品的各种颜色，还可以从多个角度展示商品
