模块二 任务二详情页设计与制作（课件） -《网店运营（活页教材）》（人大版）同步精品课堂

任务二 详情页设计与制作 网店运营（活页教材） 同步精品课堂 （人大版） 1 学习目标 1.熟悉商品主图、详情页的概念和内容及作用。 2.能够说出商品详情页的框架布局和组成元素。 3.能够说出商品主图的概念和展示位置。 4.掌握商品主图的设计原则。 学习目录 1.商品详情页构成 2.商品图片设计 3.商品详情描述设计 4.商品详情页文案 问题探究 小白已经完成了“乡里人家”店铺的Logo、店招和 Banner 以及店铺首页设计。最近店铺准备上架一批农产品进行售卖，小白准备从商品主图和商品详情页两方面进行精心设计，提高店铺的点击率和转化率。 他该如何完成以上工作呢？ 温故知新 1.店标设计原则有哪些？ 2.店招设计思路有哪些？ 新知学习 一、商品详情页构成 新知学习 商品详情页主要包括 一、商品详情页构成 商品图片 商品视频 商品参数信息 商品详情描述 新知学习 1.商品图片 商品图片的展示数量因平台的不同而略有不同。目前淘宝平台提供5个商品图片展示位置(第1张称为首图，其他4张称为辅图)。速卖通平台提供6个商品图片展示 位置，且卖家后台将所有图片统称为主图。亚马逊平台则采用1张主图、8张辅图的组 合。 一、商品详情页构成 新知学习 1.商品图片 商品图片的展示数量因平台的不同而略有不同。目前淘宝平台提供5个商品图片展示位置(第1张称为首图，其他4张称为辅图)。速卖通平台提供6个商品图片展示 位置，且卖家后台将所有图片统称为主图。亚马逊平台则采用1张主图、8张辅图的组 合。 一、商品详情页构成 新知学习 2.商品视频 详情页的商品视频分为主图视频和详情页视频。主图视频可以是产品宣传的一个小视频；详情页视频可以是产品细节、卖点介绍或者是产品使用方法 介绍。 一、商品详情页构成 新知学习 3.商品参数信息 商品参数信息包括商品价格、规格、颜色、尺寸、库存等。商品参数便于买家 对商品进行全面了解，是商品详情页中必须包含的重要信息。 一、商品详情页构成 新知学习 4.商品详情描述 商品详情描述就是在商品详情页中通过图片、文字等形式阐述商品的功能和特性， 向消费者介绍商品。 一、商品详情页构成 新知学习 1.商品图片的概念及作用 主图即商品发布时放在第一位置以及在商品发布以后，买家在搜索列表结果中看到的第一张图片。 商品图片一般会在两个位置展现， 一是在搜索结果页；二是在商品详情页，通常出现在商品详情页的左上方。商品图片和标题的好坏是店铺经营成功与否的关键。 二、商品图片设计 新知学习 1.商品图片的概念及作用 二、商品图片设计 新知学习 2.商品图片的效果、特点与规范 (1)商品图片的效果：展示商品的款式、颜色、品牌等。 (2)商品图片的特点：在电商平台首页脱颖而出，迅速地刺激消费者眼球，突出差异化，增加点击率。 (3)商品图片的规范：商品图片必须为实物拍摄图，图片大小要求800×800像素以上(自动拥有放大镜功能),其中主图必须为白底，展示正面的实物图。商品图片不允许出现拼接、水印，不得包含促销、夸大描述等文字说明，该文字说明包括但不限 于秒杀、限时折扣等文字。 二、商品图片设计 新知学习 3.商品图片的设计形式 (1)展示全貌：商品图片的第一张主图用来展示商品的整体全貌，让买家看到商品的整体情况，一般建议采用白底。 二、商品图片设计 新知学习 3.商品图片的设计形式 (2)场景设计：商品图片还可以通过模特展示商品并搭配商品使用场景，建立消费者心理上的映射关系，增加商品的吸引力，同时也可根据商品 的用途和特点搭建场景化环境。 二、商品图片设计 新知学习 3.商品图片的设计形式 (3)拼接设计：商品是组合套件、多种款式或多种颜色，可 以对商品进行拼接和组合摆放及设计，让买家直观对比、一目了然。 二、商品图片设计 新知学习 3.商品图片的设计形式 (4)突出卖点：商品的主图要突出核心卖点，吸引买家的注意力，提高商品点击率和转化率。 二、商品图片设计 新知学习 4.商品图片的效果、特点与规范 (1)Logo: 可将品牌Logo放置于主图的左上角，大小为主图的1/10。 (2)产品：占据整张图片的70%。 (3)背景：主图以白色为主。 (4)其他信息：价格及其他合规信息。 二、商品图片设计 新知学习 5.商品图片的构图方法 二、商品图片设计 直线式构图 三角形构图 对角线构图 扇线构图 新知学习 5.商品图片的构图方法 (1)直线式构图： 一组同类商品摆成一条直线，共同展示商品的不同颜色或者类型，便于买家了解和掌握商品的不同属性，挑选心仪的商品。 二、商品图片设计 新知学习 5.商品图片的构图方法 (2)三角形构图： 一组商品摆成三角形形状，便于展示商品的各个角度，同时三角形构图也是充满美感的一种 方法，能够增加主图的吸引力。 二、商品图片设计 新知学习 5.商品图片的构图方法 (3)对角线构图： 一件或者一组产品摆成左下到右上，或者 左上到右下的形状，形成动感的形状，吸引买家的眼球。 二、商品图片设计 新知学习 5.商品图片的构图方法 (4)扇形构图： 一组产品呈扇形分布，能更好地展示产品的 相同和不同之处。一组扇形构成的产品，有相同之处也有不同之处，形成美的形态。 二、商品图片设计 新知学习 6.商品图片的设计原则 二、商品图片设计 投射效应 风格统一 简洁 新知学习 7.商品图片的视觉营销要点 二、商品图片设计 卖点清晰、有创意 商品的大小适中 宜简不宜繁 丰富细节 新知学习 议一议 如何根据商品特点选择合适的构图方法和设计原则？ 二、商品图片设计 新知学习 1.商品详情描述的基本概念和作用 商品详情描述，是介绍商品的“主战场”。详情页是流量进入的第一入口，担负着 流量进来后，是否留得住、是否有转化、是否能引起买家购物欲望的重要任务。其作用主要有： 三、商品详情描述设计 增加消费者对商品的了解 方便消费者了解商品的功效 取得消费者的信任和好感 引导消费者下单购买 新知学习 2.详情页的设计目标 三、商品详情描述设计 整体风格设计协调统一 设计逻辑可以说服客户 营造视觉场景 新知学习 3.详情页的内容组成 (1)详情页首焦海报设计(焦点图)。 焦点图一般位于商品描述的最上方， 焦点图中可以展示商品的卖点、促销活动和优惠特价等促销信息，品牌形象以及设计理念。 三、商品详情描述设计 新知学习 3.详情页的内容组成 (2)基本信息模块设计。 三、商品详情描述设计 SKU属性 产品介绍 使用说明 新知学习 3.详情页的内容组成 (3)卖点和细节展示模块设计。 1)卖点。商品卖点是基于交易对象的需求点展开的。商品卖点的设计应围绕顾客 为什么购买(宣传优点、避免缺点)进行设计，要放大产品的优点，一般是工艺、材质 等细节说明，让顾客多了解产品的特性。 三、商品详情描述设计 新知学习 3.详情页的内容组成 (3)卖点和细节展示模块设计。 2)细节。放大细节来展示商品的质量、工艺等，突出商品的优势。 三、商品详情描述设计 新知学习 3.详情页的内容组成 (4)其他模块设计。 1)商品包装展示。对包装有特殊要求的商品一般建议展示，如特殊定制商品、家具、家电等，主要展示商品使用的保障材料、包装方法等。 2)店铺/商品资格证书。通过展示店铺或商品的认证资质，可以提升消费者的信任度。 三、商品详情描述设计 新知学习 3.详情页的内容组成 (5)快递与售后。 通过预先提示售后可能出现的问题及店铺提供的售后保障服务等，打消买家的顾 虑，提升买家信任。 三、商品详情描述设计 新知学习 3.详情页的内容组成 (6)温馨提示。 温馨提示主要用于解答买家的问题 三、商品详情描述设计 新知学习 四、商品详情页文案 新知学习 详情页文案类型 1.普通型文案： 从商品的卖点出发，通过文案将产品的核心属性用文字表达出 来。该类文案要求商品简介描述真实，文字风格平实稳重，字体设计多以方正规整为主。 四、商品详情页文案 新知学习 2.解决痛点型文案： 从消费者的利益出发，抓住消费者的痛点，以解决痛点来 突显商品价值。这类文案能很快打动目标消费群体，因为卖家卖点和买家需求可以第一时间很好地对接。 四、商品详情页文案 新知学习 3.故事型文案： 故事即文案，商家可以从讲好故事的角度来增加商品的附加 值。故事型文案实际上是为消费者营造了一个情境，或是充满温情，或是活泼风趣， 甚至是具有悬念，语言生动，激发买家购买欲望。 四、商品详情页文案 拓展提升 请结合素材，完成图书品类店铺的商品图片和详情页的设计与制作。 注：图片素材请登录中国人民大学出版社官网(www.crup.com.cn)下载。 练一练 商品详情页的商品视频分为主图视频和（ ）。 答案： 详情页视频 练一练 商品详情页中商品图片必须为实物拍摄图，且主图必须为白底。（ ） 答案：正确 解析：商品图片必须为实物拍摄图，其中主图必须为白底，展示正面的实物图。 练一练 商品详情页主要包括四大模块，以下哪个不属于这四大模块？（） A. 商品图片 B. 商品评价 C. 商品参数信息 D. 商品详情描述 答案：B 解析：商品详情页主要包括商品图片、商品视频、商品参数信息、商品详情描述四大模块。 练一练 淘宝平台主图视频的视频时长要求是？（） A.90 秒以内 B.60 秒以内 C.120 秒以内 D.30 秒以内 答案：B 解析：店铺视觉风格的定位可根据店铺和产品定位选择最适合的风格，一般会从店铺专属 VI、色彩、字体三个方面来进行设计。 练一练 店商品图片的第一张主图一般建议采用什么颜色的底？（） A. 黑色 B. 红色 C. 蓝色 D. 白底 答案：D 解析：商品图片的第一张主图用来展示商品的整体全貌，一般建议采用白底。 练一练 以下哪种构图方式不是商品图片常用的构图方式？（） A. 圆形构图 B. 直线式构图 C. 三角形构图 D. 对角线构图 答案：A 解析：商品图片常用的构图方式有直线式构图、三角形构图、对角线构图、扇形构图等。 练一练 (多选)商品详情页的作用包括以下哪些？（） A. 增加消费者对商品的了解 B. 方便消费者了解商品的功效 C. 取得消费者的信任和好感 D. 降低商品成本 答案：ABC 解析：商品详情页的作用主要包括增加消费者对商品的了解、方便消费者了解商品的功效、取得消费者的信任和好感、引导消费者下单购买。 练一练 (多选)商品详情页文案类型有哪些？（） A. 普通型文案 B. 解决痛点型文案 C. 夸张型文案 D. 故事型文案 答案：ABD 解析：详情页文案类型有普通型文案、解决痛点型文案、故事型文案。 练一练 简述商品详情描述的作用？ 答案：商品详情描述的作用主要有四个方面。一是增加消费者对商品的了解，详情页可以更好地展示商品的组成、内容、功能等，让消费者对商品了解得更加全面、立体。二是方便消费者了解商品的功效，卖家将买家的问题在详情页里面进行释疑和解答，能更好地提高商品详情页转化率。三是取得消费者的信任和好感，通过场景营造，文案、图片等设计进一步赢得买家的好感。四是引导消费者下单购买，通过详情描述页商家可以制造热销、受欢迎度高等产品氛围，打消消费者心中的疑虑，成功引导消费者购买。 练一练 简述商品详情页的设计目标？ 答案：商品详情页的设计目标有三个。一是整体风格设计协调统一，风格统一、色调和谐、图片大小一致、文字规范会给买家留下良好的印象。二是设计逻辑可以说服客户，商品详情页是一个通过产品价值论证来说服客户的过程，要站在客户的角度来考虑页面设计。三是营造视觉场景，将产品优势和卖点转化成消费者的利益，并通过场景化的方式呈现出来，让买家在网购过程能有延伸的多方面感受。 总结思考 本堂课主要讲述网店店铺详情页设计与制作，需掌握商品主图、详情页的概念和内容及作用、商品详情页的框架布局和组成元素、商品主图的概念和展示位置，理解商品主图的设计原则，能进行商品详情页文案设计，能熟练运用理论进行网店详情页制作。 作业布置 1.简述商品详情页的构成。 2.简述商品图片的作用。 3.简述商品图片的构图方法。 4.简述商品详情页的设计目标。 5.简述商品详情页的文案类型。 感谢观看 $$