学习情境四 打造高转化的详情页

学习情境四打造高转化的详情页PAGE8任务一详情页策划（一） 一、教学目标1.知识目标（1）了解网店详情页的基础理论知识。（2）明白网店详情页的模块组成。2.技能目标（1）能正确理解详情页的作用。（2）能熟悉详情页每个模块的制作方法3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析商品详情页是对商品的详细介绍，使用文字、图片、视频等对商品进行进一步描述，从而让消费者对商品有更全面地了解。详情页的设计是否真实有吸引力，是决定能否买单下单的一个重要因素，所以这是美工的一个重要内容。教学重点：1、详情页规范。2、详情页的主要模块。3、详情页的模块排序。教学难点：1、详情页的组成模块。2、详情页的布局。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示马克杯两个不同详情图，看了这之后，你会买哪个？为什么？看展示的详情图，角色为买家，会买哪个？由对比反差引出详情的重要性2.新课讲解一、在发布宝贝时，淘宝对详情页的规范。二、详情页的主要模块（一）关联营销关联营销是指在一个详情页里放入其他产品的促销信息、搭配推荐或店铺优惠信息等。关联营销可以提升其他商品浏览量和提升客单价，也可降低买家的跳失率。关联营销主要有以下3种类型：（1）网店促销活动（2）热销产品推荐（3）搭配推荐（二）商品焦点图商品焦点图主要以海报形式展示商品的特色意境、热销盛况、产品升级、买家痛点、商品促销信息，能够引发消费者的购买冲动。（三）使用场景图使用场景图就是商品的使用场景、使用效果的展示，让消费者了解商品有什么用处、是否适合自己。（四）商品实拍图商品实拍图以突出商品为主，通过简单的背景对商品多角度进行摆拍展示，通常正面图、反面图、侧面图至少各一张，比较适合家居、数码、鞋、包等小件物品。如果商品有多个颜色时，以主推颜色为主，其他颜色为辅，少量展示，保持整体风格统一。（五）商品基本信息商品基本信息又称宝贝规格参数，主要包含型号、品牌名、产地、颜色、材质、规格、重量等。不同类目的商品，有不同的基本信息，但必须放消费者关注的内容，才能有效地减轻客服工作量的负担。（六）商品细节图商品细节图是放大商品某处细节，展示其卖点，通过细节实拍图和简短的文字，清晰、富有质感地展示商品的材质、图案、做工、功能等各细小部分的图片。好的细节展示能使消费者直观感受到商品，从而提高转化率。（七）同类商品对比图以贬低别人商品来提升自己商品的PK方式属于违规操作，可以以升级商品的方式，与自己店铺的普通商品进行对比，或采用材质及技术的对比，强化商品卖点，证明自己的商品优势。（八）买家反馈信息买家反馈信息包括商品好评的相关截图和买家秀展示。虽然很多时候消费者会更愿意自己去看评价，但如果把买家的评论、买家秀直接放在详情页，就能让消费者更方便能获取重要信息。（九）品牌说明品牌说明是通过一系列的理念、品牌介绍、资质证书等，让消费者觉得品牌质量可靠，烘托出品牌实力，有些网店还会做成视频形式放在详情页顶部展示。品牌说明主要有以下3种类型：（1）品牌介绍（2）媒体推荐（3）资质证书（十一）使用说明使用说明也称温馨提示、注意事项、常见问题等，包括商品的使用方法、安装方法、保养维护等信息。（十二）购物须知购物须知也称物流问题、售后问题等，包括邮费、发货、退换货等信息的说明。这部分内容表述具体可以有效减轻客服的工作量。如果商品存在物流问题，比如易碎或可能液体泄漏等，还需提前在此提醒买家，以免收到货物后给网店带来不好的评分。（十三）商详视频商详视频是展示在商品详情页上的短视频内容，提供差异化、多样化的视频展示渠道，可以让消费者对产品、网店、品牌、营销、使用等方面进行更加深入地了解。了解详情页的规范能熟悉详情页主要由哪些模块构成，每个模块的内容可为哪些？让学生先行了解详情页的基本知识让学生对详情页的整体组成模块有系统的了解，便于后面的策划3.小试身手登录淘宝网搜索小家电的详情页，并把设计效果好的商品焦点图、使用场景图、商品基本信息、商品细节图和品牌说明各保存一张作为案例图，分析该图片的优点和需要优化的地方查找宝贝详情页通过对各个网店的同类产品的详情页对比，得出优秀的详情页优在哪里4.课后小结本节课要掌握的重点：详情页的主要模块明白本节课自己要掌握的知识点学习情境四打造高转化的详情页PAGE8任务一详情页策划（二） 一、教学目标1.知识目标（1）掌握网店详情页的设计流程。（2）掌握网店详情页的策划。2.技能目标（1）能正确制作出详情页策划思维导图。（2）能根据详情页策划思维导图制作布局图。3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析商品详情页是对商品的详细介绍，使用文字、图片、视频等对商品进行进一步描述，从而让消费者对商品有更全面地了解。详情页的设计是否真实有吸引力，是决定买单下单的一个重要因素，所以这是美工的一个重要内容。教学重点：1、详情页的策划流程。教学难点：1、详情页策划的布局图制作。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题根据《天下网商》做的调查显示，仅有20%的买家会在详情页停留2分钟以上。明白详情页的设计是有流程，不是随意设计强化详情的前期设计很重要2.新课讲解一、详情页调研与框架（一）详情页的调研分析在详情页设计前，我们要根据商品特点和市场需求，开展相关的调研。运用头脑风暴法从市场分析、买家定位和产品定位进行分析，把调研结果与网店运营目标相结合，制作成详情页策划的思维导图，最终确定设计框架和视觉定位。1.市场分析对产品所在的市场进行PEST分析和SWOT分析，然后再选择销量较好的同类产品进行竞品分析。2.买家定位我们可通过生意参谋的“市场洞察”、360趋势、百度指数和宝贝评价等查询数据，分析消费者的性别、年龄、地域、消费能力、职业特征等。3.产品定位要挖掘产品卖点，对产品的档次、风格等方面进行定位。熟悉详情页的调研分析让学生学会设计详细的流程，而不是拿到产品就开始乱做3.小试身手使用在线思维导图工具（亿图脑图MindMaster、博思白板BoardMix、百度脑图等），参考图4-19制作详情页策划思维导图框架。制作思维导图学会使用工具制作思维导图4.新课讲解（二）详情页的逻辑框架详情页就像推销员，能够引导买家达成交易。我们可以根据消费心理的成交五部曲，一步步地引导买家进行购买活动，主次分明地对各个模块进行排序。1.引发兴趣2.激发需求3.产生信任4.信赖到占有5.打消顾虑成交详情页的模块排序建议：（三）详情页策划的流程熟悉详情页的设计流程，要懂得每一步的作用和内容让学生学会设计详细的流程5.学生实训任务名称：小家电详情页的策划任务要求：任务一：小熊电器旗舰店需要上新一款小熊蒸煮饭盒，请你根据商品资料，使用分析工具百度指数、360趋势等，对蒸煮饭盒进行市场分析、买家定位和产品定位，对分析结果进行提炼与归纳，制作成思维导图任务二：根据任务一制作的思维导图，使用Photoshop软件制作小熊蒸煮饭盒详情页的设计框架，宽度为750px根据上面的知识点，完成小家电的详情页策划。（没有弄清楚的地方可参看微课）通过此任务的完成，懂得如何策划详情页6.课后小结本节课要掌握的重点：1.详情页的策划流程2.详情页的设计框架的制作明白本节课自己要掌握的知识点

任务二详情页设计（一） 一、教学目标1.知识目标（1）了解网店详情页的基础理论知识。（2）明白网店详情页的视觉风格。2.技能目标（1）能正确理解详情页不同视觉风格的特点及意义。（2）能够根据不同类目详情页选择合适的视觉风格3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析商品详情页的视觉设计风格有很多种类型，不同的视觉设计有着不同的视觉营销点，运用得好可以更好地展示商品，大大提高店铺的转化率。教学重点：1、详情页视觉设计特点。2、详情页视觉设计意义。教学难点：1、不同类目详情页的视觉风格。2、详情页视觉风格的选择。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示不同类型宝贝详情页的视觉设计风格，思考什么样的产品适合什么样的视觉设计？看展示的详情图，思考问题？引发学生学习兴趣2.新课讲解一、详情页的视觉风格（一）极致简约风（1）设计特点：简约化、扁平化、轻量化，颜色和字体少，画面大量留白。（2）设计意义：极致简约风可以突出信息和产品重点，避免买家视觉疲劳，加强品牌质感。（3）常用类目：数码产品、电器、家居和服饰等。（二）场景合成风（1）设计特点：通过素材的融合和光影透视的绘制，为产品制造一个创意的场景。（2）设计意义：通过创意又真实的场景吸引买家眼球，使买家有场景代入感。（3）常用类目：食品、家装、家电、母婴和美妆等大品类。（三）三维风（1）设计特点：通过C4D建模或AI工具实现三维视觉效果，三维风视觉表现力强。（2）设计意义：三维的效果增加了画面的质感和深度，使画面更加饱满和更有冲击力，可迅速在买家的脑海中形成商品的立体效果。（3）常用类目：数码产品、家电和美妆等产品。（四）插画风（1）设计特点：手绘插画或AdobeIllustrator设计的插画，新颖有趣，轻松简单。（2）设计意义：插画能渲染气氛，拉近买家距离，给人留下深刻印象，增加品牌感。（3）常用类目：食品、美妆、家居和工艺品等。（五）复古国潮风（1）设计特点：通过低饱和度色调、斑驳的纹理、怀旧的字体、拼音装饰和历史代表性装饰元素等，烘托传统文化的厚重感。（2）设计意义：国潮风和复古风设计既能引起老一辈买家的情感共鸣，也是现今年轻买家追捧的时尚。（3）常用类目：茶和酒等中国传统文化相关商品，国潮美妆和国风服饰等。（六）新视觉混搭风（1）设计特点：使用夸张的高饱和度色彩和线条波点等几何元素，各种风格混搭，比如波普、孟菲斯、蒸汽波、故障艺术、杂志风和拼贴风等风格。（2）设计意义：突破传统，形成反差，视觉感强，具有新奇性、多元性和创造性。（3）常用类目：服饰、运动用品、儿童用品和食品等。了解详情页的视觉风格，能区分不同详情页视觉风格的特点、意义以及常用类目让学生先行了解详情页的视觉风格，让学生对详情页的视觉风格有系统的了解，便于后面的设计4.小试身手在网络上搜索三张不同视觉风格的详情页焦点图，说出这三张焦点图分别是什么视觉风格，并分析该图片的视觉设计特点。分析详情页视觉设计风格通过对各个网店的详情页对比，得出不同设计风格的详情页视觉设计特点5.课后小结本节课要掌握的重点：1.详情页的视觉设计风格明白本节课自己要掌握的知识点学习情境四打造高转化的详情页PAGE8任务二详情页设计（二） 一、教学目标1.知识目标（1）掌握网店详情页的设计技巧。（2）掌握网店详情页的设计流程。2.技能目标（1）能够对详情页合理地排版布局。（2）能够完成详情页的整体设计。3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析商品详情页的布局排版合理，符合设计要求，可以更好地展示商品，避免买家审美疲劳，大大提高店铺的转化率，减少跳失率。教学重点：1、详情页的设计流程。教学难点：1、制作符合设计要求的详情页。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题展示对比两张详情页的焦点图的排版，思考其优缺点。看展示的详情图，思考问题？引发学生学习兴趣2.新课讲解一、详情页的排版布局（一）详情页排版结构为符合手机竖屏浏览习惯，详情页每屏布局应使用竖向排版，多用上下排版，少用左右排版。（二）详情页整体排版详情页屏与屏之间的过渡要有节奏，详情页整体排版要遵循一定的原则。二、详情页的设计技巧（一）一屏一个主题，一屏一个卖点画面信息越多，指向性越弱，传播力度越弱，所以每个细节要模块化，突出主题，分屏展示，避免卖点堆砌。（二）文字清晰，字数精简保留重点文字，删减非重点文字。中文文字不小于30号字，字体不超3种，让人一目了然。（三）避免使用过多的点和线元素，造成信息碎片化严重可将零碎的点进行合并，重新组成一个面。（四）卖点可视化通过巧用参照物、量化表达、场景还原和夸张表现等方法，让抽象的文案也能被直观感知。比如：用代表专业元素来体现商品的成分。（五）关联营销很重要热销商品推荐是一个把其他商品推荐给买家的入口，在详情页上方放入优惠券，可以增加买家购买欲。熟悉详情页的排版布局与设计技巧让学生学会排版布局与设计技巧，而不是拿到产品就开始乱做3.小试身手在淘宝等网络购物平台搜索一个小家电的详情页，分析该详情页存在哪些设计问题。分析详情页存在的设计问题通过搜索网店的详情页，更好地理解详情页设计技巧4.新课讲解三、详情页设计的流程熟悉详情页的设计流程，要懂得每一步的作用和内容让学生学会设计详细的流程5.学生实训任务名称：小家电详情页的设计任务要求：小熊电器旗舰店需要上新一款小熊蒸煮饭盒，请你根据产品资料，确定视觉风格，并在设计框架的基础上，使用Photoshop完成详情页设计。根据上面的知识点，完成小家电的详情页设计。通过此任务的完成，懂得如何设计详情页6.课后小结本节课要掌握的重点：1.详情页的排版布局2.详情页的设计技巧明白本节课自己要掌握的知识点

任务三详情页上传 一、教学目标1.知识目标（1）掌握网店详情页的切片技巧。（2）掌握网店详情页的上传流程。2.技能目标（1）能够对详情页进行切片。（2）能够完成详情页的上传。3.情感目标（1）培养学生分析和处理、使用数据的能力。（2）培养学生积极思考、大胆探索，从数据中挖掘信息的能力。（3）培养学生自主学习、协助学习的能力。二、教学内容分析一般来说，制作好的详情页需要上传到网店，上传之前都要对图片进行切片处理。同时详情页上传方式很多，我们要按需求选择合适的上传方式。教学重点：1、详情页的上传方式。教学难点：1、完成详情页的切片与上传。三、教学过程设计教学步骤教师活动学生活动设计意图1.创设情景引入课题对比两张详情页，思考详情页是不是越长越好。看展示的详情图，思考问题？引发学生学习兴趣2.新课讲解一、详情页切片一般来说，制作好的详情页上传到网店前都要对图片进行切片处理。对详情页切片可以解决图片过长而加载过慢、单张图片大小过大和高度过高而无法上传的问题。淘宝网建议详情页图片不宜超过25张，宽度控制在750px，高度控制在1500px以内，而且单张图片大小不宜超过300KB。另外，要把每