《电商视觉营销设计》教案第7课店铺首页视觉营销设计（一）.docx

课即店铺首页视觉营销设计(一)课时2课时(90min)教学目标知识技能目标：(1)了解店铺首页的组成及其作用(2)掌握店铺首页各区域的视觉营销设计技巧素质目标：(1)培养朴素认真、爱向敬业的职业精神(2)认真完成课堂练习,提高独立思考能力,增强创新意识教学重难点教学重点：店铺首页的组成，店铺首页各区域的视觉营销设计技巧教学难点：掌握店铺首页各区域的视觉营销设计技巧教学方法案例分析法、问答法、讨论法、讲授法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，预习本节课要讲的知识【学生】完成课前任务考勤【教师】使用APP进行签到【学生】按照老师要求签到问题导入【教师】提出问题店铺首页包含哪些组成部分？各部分的作用是什么？【学生】聆听、思考、讨论、举手回答传授新知【教师】通过学生的发言，引入新的知识点，讲解认识店铺首页，以及店铺首页各区域的视觉营销设计技巧等知识一、认识店铺首页【教师】通过多媒体展示“某电子产品店铺首页”图片(详见教材)，并进行讲解店铺首页是消费者进入店铺看到的第一个页面，它包括页头、页中和页尾三个部分，其中页中又分为若干不同功能的区域，这些区域通常会根据店铺的实际需要进行设置，如图所示0(1)页头：主要包括店铺招牌和导航。(2)页中：通常分为轮播区、优惠券区、商品展示区、交互区等。(3)页尾：位于页面最下方，包括店铺声明、品牌授权认证等内容，作用是提高消费者对店铺的信任度。二、解析店铺首页各区域的视觉营销设计技巧店铺首页中不同区域的作用和特点不同,因此在进行视觉营销设计时要注意不同区域有不同的侧重点。本节将介绍店铺首页各区域的视觉营销设计技巧。(一)展示形象的店铺招牌店铺招牌代表着店铺形象和风格,它在很大程度上影响着消费者对店铺的第一印象。所以在对店铺招牌进行视觉营销设计时，既要注重其内容表现，又要注重其视觉呈现，以便给消费者留下良好的印象。店铺招牌是店铺内曝光量最大的区域，消费者无论是进入店铺首页,还是进入商品详情页，都可以看到它。因此，在对店铺招牌进行视觉营销设计时，一定要加入店铺名称、品牌标志等信息，让代表品牌形象的元素一直出现在消费者的视线内，从而加深消费者对品牌的印象。1 .常见类型根据店铺营销策略不同，店铺招牌分为品牌型店铺招牌和营销型店铺招牌两种。【教师】通过多媒体展示“品牌型店铺招牌”图片(详见教材)，并进行讲解(1)品牌型店铺招牌：以品牌形象展示为主的店铺招牌(见图)，起到推广品牌的作用。这类店铺招牌中通常包括店铺名称、品牌标志、品牌口号、经营理念等内容，以让消费者了解店铺的品质和态度；也可以加入收藏店铺按钮、搜索框等，方便消费者收藏店铺、搜索商品。【教师】通过多媒体展示“营销型店铺招牌”图片(详见教材)，并进行讲解(2)营销型店铺招牌：以商品导购或营销信息展示为主的店铺招牌(见图)，起到促进商品销售的作用。在营销型店铺招牌中，除了店铺名称等与店铺有关的信息外，还会加入促销商品、优惠券等内容，以刺激消费者购买商品。2 .设计要点在对店铺招牌进行视觉营销设计时，要注意以下两点。(1)符合店铺和商品定位.店铺招牌的主要作用是宣传品牌和商品，因此在对店铺招牌进行视觉营销设计时，要使其符合店铺和商品定位，这样才能准确传达品牌和商品信息。【教师】通过多媒体展示“某面膜店铺招牌”图片(详见教材)，并进行讲解例如，图中的店铺招牌通过文案和不同深浅的绿色体现了该店铺"天然、奢华、纯美”的品牌理念和纯天然植物护肤的商品理念。(2)画面效果简洁大方。店铺招牌的展示区域有限，因此其视觉呈现应简洁大方，这样不仅能提升店铺形象，还能方便消费者获取信息。通常，店铺招牌中的视觉关注点不要超过三个，且颜色不要过多，否则容易让消费者眼花缭乱。【教师】通过多媒体展示“某护肤品店铺招牌”图片（详见教材），井进行讲解例如，图中的店铺招牌中只有两个视觉关注点，能让消费者快速识别品牌并了解主推商品；同时“立即抢购"按钮使用红色，其他文案均使用深灰色，不仅使按钮突显出来，以引导消费者购买商品，还让整个店铺招牌显得简约大气。（二）方便购买的导航导航是店铺的“指路牌"，可以帮助消费者找到所需商品，缩短消费者的购物路径，提高消费者的购物体验。因此，在对导航进行视觉营销设计时，要规划好其内容与层级，以方便消费者操作。1 .内容安抖丐层级划分导航内容通常是由店铺中所有商品按照一定的标准进行分类而得的。例如，将某服装店铺的商品按穿着季节分类，那么导航内容就是春装、夏装、秋装和冬装；按穿着位置分类，导航内容则是上装、下装和套装。【教师】通过多媒体展示“为主推商品设置单独导航项的导航”图片（详见教材），并迸行讲解另外，导航内容的安排还与店铺营销目标有关。例如，对于店铺中销量、人气较高的主推商品，可以单独做一个商品集合页，并为其设置一个单独的导航项放在导航中（见图）,以便将消费者引入相应的推广页面中.同时，单独的导航项还可以通过独特的设计使其更加突显，如为其设置与其他导航项不同的颜色。【教师】通过多媒体展示“添加二级导航的显示效果”图片（详见教材），并进行讲解如果店铺内商品种类繁多，只设计一级导航会不方便消费者快速筛选商品，此时可添加二级导航。例如，某电子产品店铺中的商品较多，可将商品大类设置为一级导航，系列商品设置为二级导航，如图所示。通常，一级导航应直接呈现给消费者，二级导航可在点击一级导航中的导航项后再显示.小提示：需要注意的是，导航项不要有空分类，以免消费者点击进入下一个页面后发现并无商品，影响消费者对店铺的信任。2 .常见理导航通常有以下几种类型。【教师】通过多媒体展示“页头的通栏导航”图片（详见教材），并进行讲解（1）页头的通栏导航：位于店铺招牌下方,是店铺首页固定的横向导航,也是大多数消费者潜意识中认为应有的导航，所以该类导航中的分类应覆盖店铺中的所有商品，以便消费者能查找到所需商品，如图所示。通常，该类导航内容以文字显示为主，如果想让导航视觉效果更加丰富，可加入图形装饰。【教师】通过多媒体展示“侧边栏的纵向导航;”图片（详见教材），并迸行讲解（2）侧边栏的纵向导航：也称分类导航，其分类比较详细，大多设置二级导航，方便消费者更细致地查找商品，如图所示。该类导航通常作为页头通栏导航的补充，适合商品种类较多的店铺。【教师】通过多媒体展示“页中的横向导航”图片（详见教材），并进行讲解（3）页中的横向导航：可以放在轮播区以下、页尾以上的任意位置,大多只设置一级导航，且只放置热销商品类别，如图所示。需要注意的是，该类导航可以根据想要的视觉效果任意设计。【教师】通过多媒体展示“页尾的横向导肮”图片（详见教材），并进行讲解（4）页尾的横向导航：也称底部导航，其内容可以与通栏导航相同或相似，也可以只放置热销商品类,还可以根据店铺运营需要来安排，如想推广店铺，可加入“品牌故事""收藏本店”等导航项，如图4-11所示.该类导航内容也以文字显示为主，不做过多视觉设计。3.设计要点在对导航进行视觉营销设计时，要注意以下几点。（1）风格要统一。导航风格要与店铺风格统一，这样才能给消费者以和谐、统一的视觉效果。（2）内容要简洁明了.导航的长度有限，无法显示太多内容，因此导航内容应简洁明了，且导航项不要摆放得过于密集，以免不利于消费者查看和点击。（3）导航项摆放顺序要合理。消费者习惯以从左到右的顺序观看页面，因此重要类别的导航项应尽量放在靠左位置。例如，促销、新品等类别的导航项应尽量放在靠左位置,方便消费者快速了解店铺动态。【教师】随机邀请学生回答以下问题：导航有几种类型？【学生】聆听、思考、回答【教师】总结学生的回答（三）吸引目光的轮播区【教师】通过多媒体展示“首页第一屏中的轮播区”图片（详见教材），并进行讲解进入店铺首页后，在不滚动页面的情况下，屏幕所显示的页面称为首页第一屏，这一屏是消费者关注最多的区域。而在第一屏中，轮播区（见图）所占面积最大，通常会放置轮播海报，以将消费者引导至相关商品或活动页面中，进而增加商品和店铺的曝光率。因此，轮播海报的视觉效果直接关系着店铺首页的导流能力,与店铺的营销效果息息相关。轮播海报的内容会依据店铺运营要求而定。常见的轮播海报类型有商品宣传型海报和主题活动型海报两种。（1）商品宣传型海报：对单个商品形象进行塑造的海报。这类海报通常以展示商品为主，配上相关说明文案，以将商品的主要卖点传达给消费者，引导消费者点击海报进入商品详情页，深入了解商品。这类海报适合对刚上市的新品、"爆款"商品或当季主推商品等进行推广，如图所示。【教师】通过多媒体展示“商品宣传型海报”图片（详见教材），并进行讲解（2）主题活动型海报：以活动形式对多个商品进行推广的海报。这类海报通常会利用活动氛围和视觉冲击力吸引消费者注意，并借此将活动的优惠力度、时间等信息传达给消费者，引导消费者参与活动。另外，这类海报的主题还会根据活动主题进行细分，包括新品上市、店铺纪念日（如周年庆节假日（如中秋节、国庆节等平台活动（如“618""双十一"）等。【教师】通过多媒体展示“中秋节主题活动海报”图片（详见教材），并进行讲解例如，图中的海报中加入了月亮、嫦娥、玉兔等与中秋节相关的元素，且其主题文案为"中秋团圆季"，不难看出其活动主题为中秋节。小提示：除了上述常见的轮播海报类型外，还有一种轮播海报类型品牌塑造型海报，它是对品牌形象进行塑造的海报。这类海报的重点是将品牌宗旨、经营理念等信息传达给消费者，加强消费者对品牌的印象，以提高品牌的认知度和影响力。【教师】通过多媒体展示“品牌塑造型海报”图片(详见教材)，并进行讲解例如,图中的品牌塑造型海报利用店铺名称、口号等向消费者传达品牌信息和理念，强化消费者对品牌的记忆。2.设计要点在海报的视觉营销设计过程中，要注意以下几点.(1)类型明确：设计海报前，应首先根据店铺运营需要明确海报类型,这样才能确定涉及的商品数量，且更有针对性地进行视觉营销设计。例如，店铺要开展国庆节促销活动，则海报类型应为主题活动型海报。(2)定位精准：多数商品都有明确的适用人群，而这些适用人群就是商品的目标消费者。在对海报进行视觉营销设计时，要依据目标消费者的喜好进行，这样才能引起目标消费者的注意。例如，某服装品牌的目标消费者是年轻时尚的女性，这类女性性格开放、洒脱，喜欢超前的设计，那么海报的视觉呈现大胆前卫，才有可能吸引她们的目光。(3)主题突出：海报主题突出，才能将商品或活动信息准确地传达给消费者。因此，在对海报进行视觉营销设计时，要梳理好信息层级，将主题信息突出显示，这样才能让消费者一目了然。【教师】通过多媒体展示“国庆节主题海报”图片(详见教材)，并进行讲解例如，图中的海报中，"国庆大放价Xl元秒杀"主题文案突出显示，"新品专享满赠大礼包""立即进入"辅助文案弱化显示，信息的内容层级非常清晰，能让消费者快速了解海报主题。(4)效果美观。海报的色彩搭配协调、构图合理、留白适宜等，才能为海报增添视觉冲击力，从而吸引消费者注意。(四)刺激购买的优惠券优惠券一般放在店铺首页的页头或页中，是店铺常用的促销手段之一，可以为店铺带来可观的流量,还可以提高店铺的收益。1 .内容安排【教师】通过多媒体展示“优惠券”图片(详见教材)，并进行讲解一般来说，优惠券中会安排领取按钮、面额、使用范围、使用条件、使用时间、最终解释权等内容,如图标(1)优惠券的领取按钮。添加带有“立即领取""领取""领"等字样的按钮，可引导消费者点击领取优惠券。(2)优惠券的面额。优惠券的面额是优惠券价值的体现，也是吸引消费者使用优惠券的主要因素。(3)优惠券的使用范围。通常，优惠券的使用范围有全场通用和限定使用两种。其中，全场通用是指优惠券可用于购买店铺内的所有商品，限定使用是指优惠券只能用于购买店铺内的指定商品。明确优惠券的使用范围，可有针对性地对消费者进行分流。(4)优惠券的使用条件.明确优惠券的使用条件，如"满399元使用""每笔订单限用一张优惠券”等，可以在刺激消费者消费的同时最大限度地保证商家的利润空间。(5)优惠券的使用时间。明确优惠券的使用时间，可以促使消费者产生"过期就会浪费”的心理，从而提高使用率。(6)优惠券的最终解释权。明确优惠券的最终解释权，如"优惠券的最终解释权归本店所有"，在一定程度上保留了店铺的法律权利，以免后期活动执行中出现不必要的纠纷。2 .设计要点在对优惠券进行视觉营销设计时，要注意以下几点.(1)内容精简。优惠券展示的信息有限,因此在对优惠券进行视觉营销设计时，不要添加任何与优惠内容无关的信息，同时避免信息重复，以便让消费者一目了然。(2)重点突出。决定消费者是否使用优惠券的主要因素是优惠力度，因此在对优惠券进行视觉营销设计时，要突显优惠券面额，以吸引消费者注意。【教师】通过多媒体展示“使用统一模板的优惠券”图片(详见教材)，并进行讲解(3)风格统一。多张不同面额的优惠券最好使用统一的模板(见图)，以确保风格统一，同时可以使消费者的注意力集中在优惠券面额等重要信息上。(4)Jl质序合理.一般来说,多张不同面额的优惠券是根据面额大小或到期时间先后排列的。(五)营造氛围的商品展示区商品展示区是店铺首页中面积最大的区域，通常按照一定的营销策略对店铺内的商品进行展示，以方便消费者浏览和购买。1 .区峨吩商品展示区一般包括主推商品区和商品陈列区。(1)主推商品区：指在店铺首页中展示店铺当前重点推广商品的区域，这类区域的商品一般是店铺的新品或"爆款”商品，具有较强的竞争力，能够吸引消费者目光，从而为店铺引入流量、带来销量。这类区域的文案通常为营销信息或商品优势介绍，以增加商品的吸引力.(2)商品陈列区：指在店铺首页中常规展示店铺内商品的区域,通常位于主推商品区之后。这类区域的文案通常为商品的主要属性介绍，以帮助消费者了解商品。【教师】通过多媒体展示“某食品店铺的商品展示区”图片(详见教材)，并进行讲解例如，图中主推商品区采用更大、更显眼的“爆款"商品图片，文案"长柄凤爪个头更大”是对商品优势进行介绍，而商品陈列区采用多张并排展示的商品图片，文案"牛肉豆脯120g*l""去骨凤爪l()8g*r,也仅是对商品的主要属性进行介绍.小提示：商品展示区的内容没有严格要求，可根据实际需要灵活安排。例如，某家居用品店铺的主推商品区包括首推商品展示图和普通主推商品展示图，其中首推商品展示图展示店铺首要推广的商品，如图所示。【教师】通过多媒体展示“某家居用品店铺的主推商品区”图片(详见教材)，并进行讲解2 .设计要点在商品展示区的视觉营销设计过程中，要注意以下几点。(1)商品展示数量要适宜。有些商家认为，商品展示区里展示的商品越多越好，这样可以把更多的商品推荐给消费者。其实不然，商品展示过多，会使消费者眼花缭乱，无法抓住重点。但是，商品展示过少，也会使店铺显得冷清，给消费者以店铺鲜少有人光顾的感觉。因此，商品展示区展示的商品数量一定要适宜。【教师】通过多媒体展示“主推商品区商品展示数量适宜”和“商品陈列区商品展示数是适宜”图片(详见教材)，并进行讲解通常，主推商品区的商品展示数量应控制在三到十五个之间(见图)，而商品陈列区的商品展示数量通常多于主推商品区(见图)，尽量不少于六个，这样既可以让消费者抓住重点，又能多展示商品。【教师】通过多媒体展示“某小家电店铺首页”图片（详见教材），并进行讲解（2）不同区域的商品陈列方式要有所区别。如果主推商品区和商品陈列区采用同样的陈列方式，不免给消费者以疲劳感，也使区域之间的界限不明显。因此，在对商品展示区进行视觉营销设计时，应尽量对不同区域采用不同的陈列方式。例如，图中的某小家电店铺首页中主推商品区和电饭煲商品陈列区就采用不同的陈列方式，将两个区域有效区分开，方便消费者浏览。【教师】通过多媒体展示“不同商品之间界限要清晰”图片（详见教材），并进行讲解（3）不同商品之间界限要清晰.商品展示图之间也应界限清晰，以方便消费者根据需要查看和购买商品.通常，可采用留白、图片形状差异、加边框等方式对商品展示图进行界限划分。例如，图中先利用图片形状差异区分商品陈列区的不同类别，再通过加边框区分同类别下的不同商品。【教师】通过多媒体展示“精心设计单个商品展示图的商品展示区”"采用折线型陈列方式的商品展示区”和“采用随意型陈列方式的商品展示区”图片（详见教材），并进行讲解（4）视觉呈现要美观。商品展示区的视觉呈现要美观、简洁，才能既吸引消费者注意，又方便消费者查看商品。要想让商品展示区获得良好的视觉效果，通常可以采用以下两种方法：一是精心设计单个商品展示图，尤其是首推商品展示图，可使整个商品展示区给消费者带来美感和新鲜感，如图所示；二是采用富有变化的陈列方式，如折线型陈列方式（见图1随意型陈列方式（见图）等，以使整个商品展示区富有趣味性和氛围感。（5）风格要统一。（六）建立情感的交互区交互区通常包括收藏区、客服区等，主要是为店铺和消费者架起沟通的桥梁。1.收藏区视觉设计恰到好处的收藏区可以引导消费者收藏店铺，提升店铺人气，同时增加消费者再次光临的概率。收藏区通常可放置在以下三个位置。【教师】通过多媒体展示“店铺招牌中的收藏区”图片（详见教材），并进行讲解（1）页头：放置在店铺招牌或导航中的收藏区通常以按钮的形式呈现，如图所示。在对放置在该位置的收藏区进行视觉营销设计时，可加入心形、星形等图形作为装饰，以使视觉效果更加丰富。【教师】通过多媒体展示“侧边栏收藏区”图片（详见教材），并进行讲解（2）侧边栏：放置在店铺侧边栏中的收藏区通常以图片的形式呈现，如图所示。为了激发消费者对店铺的兴趣，提高店铺收藏量，在对放置在该位置的收藏区进行视觉营销设计时，可添加优惠信息，但要注意不能让优惠信息喧宾夺主.【教师】通过多媒体展示“页中的收藏区”图片（详见教材），并迸行讲解（3）页中：一些店铺首页的页尾上方会单独添加一个交互区，并在其中放置收藏店铺按钮、客服联系方式等（见图方便浏览到页面底部的消费者收藏店铺、联系客服。2.客服区【教师】通过多媒体展示“客服区”图片（详见教材），并进行讲解客服区通常以文字和图标的形式向消费者展示客户服务的时间、人员等（见图），方便消费者咨询客服时能快速得到回应，顺利地解决购物中的问题。（七）增强信任的页尾【教师】通过扫码播放“页尾的设计原则”视频（详见教材），并进行i井解当消费者浏览至店铺首页的页尾时，一般会做什么？第一种可能是咨询客服，第二种可能是返回店铺首页顶部重新浏览，第三种可能是查看浏览过程中印象深刻的某个商品页尾就是要方便消费者进行这些操作。所以，页尾通常会添加客服联系方式、返回顶部按钮、底部导航等内容，以达到方便消费者咨询、返回顶部、选购商品等目的。【教师】通过多媒体展示“店铺页尾”图片（详见教材），并进行讲解另外，还可以在店铺页尾添加买家必读、色差说明、快递说明等店铺声明，帮助消费者提前了解购物过程中可能遇到的问题，以减轻消费者的顾虑，提高消费者对店铺的信任度；也可以添加店铺二维码、收藏和分享店铺链接，方便消费者关注、收藏和分享店铺，从而留住消费者，如图所示。【学生】聆听、思考、理蟀记录课堂实践【教师】组织学生以小组为单位完成以下任务：请用简练的语言总结出店铺首页各区域的设计要点，并制成PPT。【学生】盼反思考、“维!论、曲亍C总制作PPT,由组长上台展示PpT,并曲瑞明【教师】与学生一起评价各组的表现，选出任务完成得最好的一组课堂小结【教师】简要总结本节课的要点店铺首页的组成及其作用店铺首页各区域的视觉营销设计技巧【学生】总结回顾知识点作业布置【教师】布置课后作业（1）总结本节课课堂内容，形成思维导图（2）搜集、欣赏优秀店铺首页，分析、学习其设计技巧【学生】完成课后任务教学反思