4.4.2商品详情页设计(课件）-《网店运营》同步教学（高教版）

商品详情页设计 CONTENT 01 了解商品详情页 目录/CONTENT 商品详情页焦点图设计 02 建议搭配模块设计 03 04 商品亮点卖点设计 商品信息展示图设计 05 商品细节图设计 06 无线端详情页制作 07 0 1 章节PART 了解商品详情页 1 了解商品详情页的模块 详情页模块 左侧模块 搜索模块 商品分类模块 商品排行模块 收藏模块 商品推荐模块 右侧模块 商品基础信息模块 商品描述信息模块 自定义模块 商品展示模块 商品细节模块 商品规格模块 功能展示模块 搭配建议模块 包装展示模块 证书保证模块 1 了解商品详情页的模块 自定义模块主要包括以下几种类型 促销活动模块 关联营销模块 会员营销模块 买家须知模块 1 商品详情页的内容分析与设计要点 商品详情页页面设计需要根据商品的特征来进行制作。商品详情页的内容要引发消费者的兴趣，在设计模块时需要把握以下3点。 引发兴趣、激发潜在需求 赢得消费者信任 替顾客做决定 1 实战：商品详情页布局 下面将搭建女鞋店铺商品详情页自定义模块的结构框架，在搭建时以常规的商品详情页模块为出发点进行商品详情页的规划，主要分为7个部分，包括焦点图、建议搭配、卖点分析、商品参数、尺码对照展示、商品全方位展示和商品细节展示，其具体操作如下。 1 搭建商品详情页自定义模块的框架 2 进入商品详情页 7 0 2 章节PART 商品详情页焦点图设计 2 商品详情页焦点图设计要点 设计商品详情页焦点图一般有两个目的：明确主题、突出商品卖点；承上启下，做好商品信息的过渡。一般来说，消费者进入商品详情页大都是通过点击主图进入的，因此商品详情页焦点图中展示的卖点要与主图衔接，让商品信息的过渡变得自然。 9 0 3 章节PART 建议搭配模块设计 3 建议搭配模块设计要点 不同商品有不同的搭配组合方式，网店美工在设计该模块时应根据商品特征选择适合的搭配组合方式。现在淘宝网中的搭配建议模块大多以3种方式呈现。 使用单品进行陈列展示 模特与单品的组合陈列 使用模特进行展示 0 4 章节PART 商品亮点卖点设计 4 商品卖点的特征 卖点独特 长期传播的价值及品牌辨识度 有足够的说服力 4 商品卖点提炼的原则与方法 FABE法则 “F”是特性(Features); “A”是优势(Advantages) ; “B”是利益(Benefits); “E”是证据(Evidence)。 通过四个关键环节，极为巧妙地处理好了买家所关心的问题，从而顺利地实现产品的销售。 买家在购物的过程中关心的问题： 1.这个产品有没有我想要的功能？ 2.和别人比它有什么优势？ 3.买完这个产品我能得到什么好处？ 4.凭什么相信你，万一产品有问题怎么办？ FABE法则 4 商品卖点提炼的原则与方法 FABE法则 F是特征 要解决的是买家最关心的问题，那就是：“这个产品有没有我想要的功能？” 详情页第一屏都会有一张核心大图海报，展示产品的几个核心特征。 比如，服装一定是展示模特上身效果的完整大图，因为服装最重要的是款式；电子秤类的产品功能点会比较多，比如精准度、数据支持、充电方式、外观等，因此大家的第一张海报往往是除了展示产品大图外，同时会有差异化的核心卖点。 4 商品卖点提炼的原则与方法 FABE法则 A是优势 优势可以是产品技术的优势，价格的优势，品牌的优势，或者企业服务能力的优势等，找一个买家最关心或能在这里获得巨大利益的优势进行阐述。比如，很多宝贝详情页面中都有这样的一个版块：“为什么选择我们？” 像刚才举例的体重秤产品，它就是用的这个设计：都是体重秤，为什么选择我们？然后说，我们更精准、显示更清晰、价格更实惠等等。这是说服买家下单的杀手锏，要解决的是“为什么要买我们的产品，而不是别人的产品”的问题。 4 商品卖点提炼的原则与方法 FABE法则 B是利益 要告诉买家，购买我们的产品后能收获什么好处，解决哪些问题、哪些痛点。比如，南极人的一款电热毯的详情页就做的非常好，尤其是在对理想场景的描述上。它在详情页写到，我们这款产品有断电保护，出差或者睡觉的时候忘关了，它会在连续开12个小时的时候自动断电，同时这款产品还可以防水阻燃，万一宝宝尿床了也不会有任何的危险。 4 商品卖点提炼的原则与方法 FABE法则 E是证据 要增加买家对于我们产品的信息的信服度，比如，我们可以在这里放置其他买家的好评记录、官方的授权书、专利证书、质检报告、品牌线下专柜的图片等等，让买家能够在下单前更加地放心。 4 商品卖点提炼的原则与方法 FABE法则总结 FABE作为经典的销售法则，也是可以用于详情页的策划上的，具体方法就是，首先通过展示产品的关键特征和卖点，吸引买家继续往下浏览；其次通过展示差异化的优势，进一步让买家对我们的产品产生兴趣；紧接着要展示产品能够解决的问题和能够实现的功能、场景，让买家对于产品有更加直观化的印象；最后通过提供证明，比如售后承诺、证书等，打消买家的下单顾虑。 0 5 章节PART 商品信息展示图设计 5 商品参数的常用表达方式 商品参数的直接输入 商品参数与商品图片的自由组合 通栏排参数 参数与商品两栏排 5 商品参数的常用表达方式 1.商品参数的直接输入 直接将产品背部的信息输入在详情页商品信息模块内。 5 商品参数的常用表达方式 2.参数与商品两栏排 参数与商品两栏排：产品在左侧或右侧，参数信息则在产品另一侧。 5 商品参数的常用表达方式 3.通栏排参数 不将商品放入图产品参数中，将参数信息采用一行或两行方式展现，更直观展现。 5 商品参数的常用表达方式 4.商品参数与商品图片的自由组合 商品参数与产品图片自由组合，根据产品或排版进行自由设计，如：产品在中间参数在两侧；产品在上方参数在下方；产品在下方参数在上方等。 5 对比图的展示 在网店中，对比图除了被用于展示商品的大小、容量外，还经常被用于展示商品的效果、功能等方面的优势。需要注意的是，在制作对比图时，切记不要将自己的商品与他人的商品进行对比，这种贬低其他经营者的商品或服务的行为将违反新广告法中的规定。 5 商品信息的展示方式 商品信息的展示方式多种多样，除了基本参数外，商家通常还需要对商品的颜色和角度进行展示，如图所示为展示保温杯和长袜的不同颜色。 0 6 章节PART 商品细节图设计 6.1 商品细节图设计要点 网店美工在选择商品的细节图片时，要注意商品图片的颜色要符合商品本身的颜色，不要有色差，对于图片的质量也需要特别注意，不要因为放大细节部分图片就变得模糊不清。商品细节图的样式一般分为以下两种。 29 一般包括款式细节（领口、门襟、袖口、裙摆、褶皱、腰带、帽子等）、做工细节（走线、针距、线粗、内衬锁边、褶皱、裁剪方式、熨烫平整等）、面料细节（面料材质、颜色、面料纹路、面料花纹等）、辅料细节（里料、拉链、纽扣、订珠、蕾丝等）。 服装类目细节图 一般包括款式细节（袋口、包扣、拉链、肩带、褶皱等）、做工细节（滚边、走线、铆接等）、材质细节（微距拍摄面料、颜色、花纹、厚薄，以及里料）、配件细节（拉链、包扣、肩带、铆钉、质感五金等） 箱包类目细节图 一般包括款式细节（全貌、帮面、后帮、鞋跟、鞋底等）、材质细节（材质、纹路、花色等）、辅料细节（拉链、配件、流行元素、洗唛等）。 鞋子类目细节图 6.1 商品细节图设计要点 不同类目的商品的细节图内容也有所不同，商家可根据商品本身的特点、卖点和优势进行细节展示。 30 0 7 章节PART 无线端详情页制作 7.1 无线端装修要点 从整体内容上看，无线淘宝店铺首页必须承载8大内容，包括店招、会员分享、宝贝、分类、活动、形象、优惠券和微淘。 7.1 无线端装修要点 店招 店铺标题模块 焦点图模块 优惠券模块 套餐搭配模块 文本模块 宝贝模块 底部自定义导航模块 左文右图模块 微淘 7.1 无线端装修要点 注重感官的习惯性与舒适性 合理控制页面的长度 页面整体内容的把握 与电脑端的视觉统一 7.1 无线端装修要点 尺寸更小 卖点应该更加精炼 场景更加丰富 页面切换不便 页面文件的容量更小 7.2 “淘宝神笔”模板制作 下面使用“淘宝神笔”制作女包的详情页，制作时将使用到编辑模块的一些操作，如替换模块的图片，更改文本、添加模块、删除模块、移动模块等，模板与模板应用效果如图所示。 7.2 “淘宝神笔”模板制作 1.使用神笔模板编辑 2.购买新模板 7.2 “淘宝神笔”模板制作 3.选择模板 4.使用模板 7.2 “淘宝神笔”模板制作 5.查看模板的各个模块 6.制作符合模板要求的焦点图 7.2 “淘宝神笔”模板制作 7.替换模板中图片 8.修改文本 7.2 “淘宝神笔”模板制作 9.替换模板中图片 10.添加模块 7.2 “淘宝神笔”模板制作 随机对淘宝店铺的详情页无线端与电脑端效果进行分析，通过对比优化前后的效果，进一步明白在装修详情页时需要注意的问题，并根据分析结果制作电脑端详情页的无线端效果，要求优化后的详情页卖点清晰、信息精炼，图片占用空间小。 7.2 “淘宝神笔”入口 “淘宝神笔”入口： 在千牛工作台上方搜索“神笔”下发出现推荐，点击即可进入。 网址：https://qianniu.xiangqing.taobao.com/index.html?spm=a2o1b.7514002.a31h4.1.159a4f64Pa3nCH 谢 谢！ THANK YOU $$