网店装修第二版教案 5.docx

网店装修第二版教案 5.docx

《网店装修第二版教案 5.docx》由会员分享，可在线阅读，更多相关《网店装修第二版教案 5.docx（38页珍藏版）》请在冰豆网上搜索。

网店装修第二版教案5

任务一店铺首页策划一

一、教学目标

1、知识目标

（1）了解店铺首页装修的基础理论知识。

（2）掌握店铺首页装修的创作方法。

2、技能目标

（1）能正确理解首页的作用。

（2）能熟悉首页每个模块的制作方法

3、情感目标

（1）培养学生美感审美的能力，美的情操。

（2）培养学生积极思考、大胆探索的能力。

（3）培养学生自主学习、协助学习的能力。

二、教学内容分析

网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。

美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。

。

教学重点：

1、电脑端首页的规范。

2、首页的主要模块。

教学难点：

1、首页的组成模块。

2、首页的布局。

三、教学过程设计

教学步骤

教师活动

学生活动

设计意图

1、创设情景引入课题

思考什么是首页？

首页的作用？

看展示的首页，思考问题。

引出首页装修的重要性。

2、新课讲解

一、一个正常营业的店铺首页主要由店招、导航、海报、产品分类、客服旺旺、产品展示、店铺页尾、店铺背景以及满返、满减、红包、购物券等营销模块。

店铺首页的标准布局图：

二、首页布局内容解析

1、店招

顾名思义是店铺的招牌，店招的尺寸为950*150PX含自定义导航部分，950*120PX其导航为系统自带。

店招一般展示的内容是店铺的名称、logo标志、口号等，详细一些的也可以展示1-2款主推的产品，还有领取优惠券的设计，收藏店铺的图标。

店招是店铺上唯一各个页面都能展示出现的模块，所以一些重点推广信息可以设计在店招上。

2、导航条

导航条可分为淘宝系统自带和自定义导航条设计，主要功能是可以快速链接到相应的指定页面。

一般内容为所有分类、首页等，丰富一些的有会员制度、购物须知、品牌故事等等，具体可根据自己店铺内容而定。

3、全屏海报或轮播海报

全屏海报主要用于店铺重大公告、折扣优惠、主打产品推荐，让客户一进入首页就能看到店铺的重点，一般全屏海报尺寸1920*600PX（建议高度在400-600PX间较好）。

轮播海报主要用于推广产品的促销内容，可以做成促销海报吸引买家。

尺寸为950*500PX（建议高度在400-500PX间较好）。

4、产品分类

产品分类方便买家根据自己的需求在店铺快速找到想要的产品。

分类主要可按价格分类，产品功能分类，产品属性分类等。

本模块尺寸可根据自己店铺规划大小来定义。

5、活动促销区

将店铺的促销活动，显示在店铺首页，可提升店铺的转化率。

在旺铺的基础模块中，可供使用的促销工具有：

满返、红包、优惠券、满减、满赠。

以上营销服务，可起到主动营销买家，提升回头客的效果。

我们所说的设计，是通过平面图片的设计展示在店铺的首页，让买家一目了然的看到。

设计尺寸950*200PX内。

6、商品展示区

是指产品通过平面图片展示设计，更能突出产品的性价比，更能融化到店铺的风格里，极大提生产品的视觉展示效果（此非淘宝系统宝贝推荐的豆腐块式的产品展示）。

本模块尺寸可根据自己店铺规划大小来定义。

7、店铺页尾

主要展示的内容如关于快递包装物流，关于售后等，尺寸950*300PX内

8、店铺背景

一个店铺的风格确立，店铺的背景占据了大部分，背景主要设计的内容店铺的背景图片，店铺手机二维码或店铺一些重要的折扣信息都可以加入到店铺背景上。

三、店铺首页案例展示

案例：

小熊电器官方旗舰店（见图5-2），以简约大气的风格凸显产品多样、高档，排版布局合理紧凑，无需过多的文字修饰，凸显高端家电品质。

了解电脑端首页的布局

能熟悉首页主要由哪些模块构成，每个模块的内容可为哪些？

让学生先行了解电脑端首页的基本知识

让学生对首页的整体布局有系统的了解，便于后面的策划

4、学生实训

任务名称

为店铺首页进行模块策划

任务要求

根据本任务学习的知识，进行小家电店铺首页各模块进行策划。

使用Excel工具，进行模块策划。

制作规范

首页各模块策完整，能反馈出各区域的主要涉及要点，以文字及图片的形式进行表达。

首页宽：

1920像素，核心内容需要放置在页面中心950像素内。

产品资料

店招主推商品2个：

网红轻食早餐机、智能加湿器

海报商品1个：

旋钮式破壁机

店长推荐商品5个：

大容量空气炸锅、紫外线消毒柜、轻食三明治机、双盖炖煮养生壶、多功能电煮锅

新品4个：

迷你电烤箱、萌潮养生壶、双层电饭盒、便携榨汁杯

店铺资料

店名：

“小熊电器”小家电专卖店

店标：

自己设计，突出店名、主营类目，色彩搭配合理。

店铺口号：

健康生活每一天。

优惠券：

买满199减10元、买满380减20元、买满750减40元

促销活动：

秋季滋补产品特价优惠。

根据上面的知识点，完成小家电首页策划书的撰写。

（没有弄清楚的地方可参看微课）

通过此任务的完成，懂得如何撰写首页策划书

5、课后小结

本节课要掌握的重点：

1、店铺首页布局

2、店铺首页模块

明白本节课自己要掌握的知识点

任务二店标设计

一、教学目标

1、知识目标

（1）店标的定义、作用。

（2）店标的和规格尺寸。

2、技能目标

（1）根据店标的规格尺寸和类型设计店铺店标。

3、情感目标

（1）培养学生美感审美的能力，美的情操。

（2）培养学生积极思考、大胆探索的能力。

（3）培养学生自主学习、协助学习的能力。

二、教学内容分析

网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。

美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。

教学重点：

1、店标规格尺寸。

教学难点：

1、根据店标的规格尺寸和类型设计店铺店招。

三、教学过程设计

教学步骤

教师活动

学生活动

设计意图

1、创设情景引入课题

常见的店标有哪些？

思考为什么你们都能记住它？

思考回答问题

强化店标设计很重要

2、新课讲解

一、店标的定义及作用

1、店标的定义

店铺的标志，是指网店中起到识别和推广店铺作用的图案，通过店标可以让消费者记住店铺主体和品牌文化，是店铺标识的图形记号。

一个网店的店标可作为一个店铺的形象参考，给人的感觉是最直观的。

可以代表着你店铺的风格，店主的品位，产品的特性，也可起到宣传的作用。

2、店标的作用

网店店标是公众识别网店的指示器。

店标是一种“视觉语言”。

它通过一定的图案、颜色来向消费者传输商店信息，以达到识别商店、促进销售的目的。

二、店标要求

1、文件格式GIF、JPG、JPEG、PNG

2、文件大小80K以内

3、建议尺寸80PX*80PX

三、店标设计的步骤

（1）提取店名关键字，取得关键字的首字母。

（2）抽象选择可替代该行业的图案。

（3）将字母和图案结合，完成标志的设计。

聆听讲解，店标的定义、作用、规格及分类。

提升自主学习和专注听讲的能力。

4、学生实训

发布实训任务：

为小家电店铺设计店标。

参考网上电器店标，用Photoshop制作店铺店标。

利用所学知识，分析任务，讲练结合，学以致用

5、课后小结

本节课要掌握的重点：

1、店标的定义

2、店标的作用

3、店标要求

4、店标设计的步骤

明白本节课自己要掌握的知识点

任务三店招设计

一、教学目标

1、知识目标

（1）店招的定义、作用。

（2）店招的和规格尺寸。

2、技能目标

（1）根据店招的规格尺寸和类型设计店铺店标。

3、情感目标

（1）培养学生美感审美的能力，美的情操。

（2）培养学生积极思考、大胆探索的能力。

（3）培养学生自主学习、协助学习的能力。

二、教学内容分析

网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。

美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。

教学重点：

1、店招规格尺寸。

教学难点：

1、根据店招的规格尺寸和类型设计店铺店招。

三、教学过程设计

教学步骤

教师活动

学生活动

设计意图

1、创设情景引入课题

常见的店标有哪些？

思考为什么你们都能记住它？

思考回答问题

强化店标设计很重要

2、新课讲解

一、店招的定义及作用

1、店招的定义

店招就是商店的招牌，有的地方叫“招子”。

古人称为“幌子”、“望子”。

近年来随着网络交易平台的发展，店招也延伸到网店中，即虚拟店铺的招牌。

网店的招牌相当于传统商铺的“门头”一样，具有同样的含义。

2、店招的作用

（1）店招可以表明商店所售物品或服务项目的标志；

（2）可以传递商店的经营理念以及品牌优势等；

（3）可以展示出店铺的优势产品及服务。

二、店招的大小

店招尺寸990/950x120PX，C店和商城的店招尺寸是有区别的，如图所示：

三、店招的分类

以店招的主要功能进行分类的话，店招主要分为下面三大类：

1、以品牌宣传为目的的店招

这类店招首先要考虑的内容是店铺名、店铺logo、店铺口号因为这是品牌宣传的最基本的内容；其次是关注按钮、关注人数、收藏按钮、店铺资质，可以侧面反映店铺实力；再次是搜索框、第二导航条等方便用户体验的内容。

2、以活动促销为目的的店招

这类店铺的特点是店铺活动、流量集中增加，有别于店铺正常运营。

所以店招首要考虑的因素是活动信息/时间/倒计时、优惠券、促销产品等活动或者促销信息；其次是搜索框、旺旺、第二导航条等方便用户体验的内容；再次才是店铺名、店铺logo、店铺口号等品牌宣传为主的内容。

3、以产品推广为目的的店招

表现突出、对店铺有贡献。

店铺特点是有主推产品、想要主推一款或几款产品。

在店招上，这类店铺要主打促销产品、促销信息、优惠券、活动信息等促销信息；其次是店铺名、店铺logo、店铺口号等品牌宣传为主的内容；再次是搜索框、第二导航条等方便用户体验的内容。

四、制作店招要注意的事项

1、首先视觉重点不宜过多，有1-2个就够了，太多了导致店招没有核心。

2、其次根据店铺现阶段的情况来分析，如果现阶段是做大促，可以着重突出促销信息，但是品牌性也不能忽略，反之则刚好相反。

3、店招一定要凸显品牌的特性，让客户很容易就清楚你是卖什么的，包括风格，品牌文化等等。

这些元素需要我们对自己的品牌有一定的理解之后，方可以应用至店招中，避免对自己的品牌定位出现偏差。

4、颜色不要复杂，颜色一定要保持整洁性，不要使用过多的颜色，店铺本来需要表达的信息量就不大，不需要把店招作得太花哨，给买家造成视觉疲劳很可能就会流失了客户的关注度，尽量只使用1-3种颜色，减少使用过于刺激的颜色。

聆听讲解，听取老师讲解，正确回答出店招包含的元素。

以学习者为中心，突出学生主体地位，教师的引导。

4、学生实训

发布实训任务：

为小家电店铺设计店招。

参考网上电器店招，用Photoshop制作店铺店招。

利用所学知识，分析任务，讲练结合，学以致用

5、课后小结

本节课要掌握的重点：

1、店招的定义及作用

2、店招的大小

3、店招的分类

4、制作店招要注意的事项

明白本节课自己要掌握的知识点

任务四海报设计

一、教学目标

1、知识目标

（1）海报的大小。

（2）海报的类型。

2、技能目标

（1）海报设计共同标准。

（2）海报整体构图。

3、情感目标

（1）培养学生美感审美的能力，美的情操。

（2）培养学生积极思考、大胆探索的能力。

（3）培养学生自主学习、协助学习的能力。

二、教学内容分析

网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。

美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。

教学重点：

1、海报整体构图。

教学难点：

1、海报设计共同标准。

三、教学过程设计

教学步骤

教师活动

学生活动

设计意图

1、创设情景引入课题

对比两个店铺，思考哪一个流量会更多？

思考回答问题

强化全屏海报很重要

2、新课讲解

一、海报的大小

全屏海报尺寸：

宽1920px

中间部分950px（C店）990px（天猫）

高400-540px

二、海报的类型

1、产品型海报主要展现产品卖点的海报

2、促销型海报主要展现促销信息的海报

三、海报设计共同标准

1、主题突出

2、目标明确

3、形式美观

四、海报整体构图

1、左图右字型（左右构图）

2、右图左字型（左右构图）

3、两边图中间字型（居中构图）

聆听讲解，听取老师讲解，正确回答出海报的尺寸、类型。

以学习者为中心，突出学生主体地位，教师的引导。

4、学生实训

发布实训任务：

为小家电店铺设计全屏海报。

参考网上电器全屏海报，用Photoshop制作店铺店招。

利用所学知识，分析任务，讲练结合，学以致用

5、课后小结

本节课要掌握的重点：

1、海报的大小

2、海报的类型

3、海报设计共同标准

4、海报整体构图

明白本节课自己要掌握的知识点

任务五促销区设计

一、教学目标

1、知识目标

（1）促销区的类型。

（2）促销区设计要点。

2、技能目标

（1）促销区设计四步骤

3、情感目标

（1）培养学生美感审美的能力，美的情操。

（2）培养学生积极思考、大胆探索的能力。

（3）培养学生自主学习、协助学习的能力。

二、教学内容分析

网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。

美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。

教学重点：

1、促销区设计要点。

教学难点：

1、促销区设计四步骤。

三、教学过程设计

教学步骤

教师活动

学生活动

设计意图

1、创设情景引入课题

思考优惠券的好处？

思考回答问题

强化促销区设计很重要

2、新课讲解

一、常见的网店促销区

1、优惠券

2、促销活动：

折扣活动、会员活动、抽奖活动、满赠活动

二、促销区设计要点

（1）促销活动,罗列清晰

（2）区域划分,明确独立

（3）核心内容,突出显示

（4）颜色鲜艳,吸引眼球

三、促销区设计四步骤

（1）梳理优惠规则：

时间、优惠价格

（2）确定元素组合形式：

中英文、数字

（3）确定构图和配色：

上下/左右构图、主辅色调

（4）选合适平台和软件：

ps工具、智能工具

聆听讲解，听取老师讲解，正确回答出促销区类型、促销区设计要点等。

以学习者为中心，突出学生主体地位，教师的引导。

4、学生实训

发布实训任务：

为小家电店铺设计促销区。

参考网上电器促销区，用Photoshop制作店铺店招。

利用所学知识，分析任务，讲练结合，学以致用

5、课后小结

本节课要掌握的重点：

1、常见的网店促销区

2、促销区设计要点

3、促销区设计四步骤

明白本节课自己要掌握的知识点

任务六产品分类导航设计

一、教学目标

1、知识目标

（1）产品分类导航的定义及作用。

（2）产品的分类标准。

2、技能目标

（1）产品分类导航的种类。

3、情感目标

（1）培养学生美感审美的能力，美的情操。

（2）培养学生积极思考、大胆探索的能力。

（3）培养学生自主学习、协助学习的能力。

二、教学内容分析

网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。

美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。

教学重点：

1、产品的分类标准。

教学难点：

1、分类导航的设计。

三、教学过程设计

教学步骤

教师活动

学生活动

设计意图

1、创设情景引入课题

对比两个导航，思考哪一个点击量会更多？

思考回答问题

强化分类导航很重要

2、新课讲解

一、产品分类导航的定义及作用

定义：

淘宝店铺的分类导航是指引顾客更快找到自己购买物品位置的指向灯，相当于超市中标明各类商品位置的指示牌，其重要性不言而喻。

作用：

1、引导顾客快速的找到所需要购买的商品，起到了路径的作用。

2、还可以提高顾客在店铺里的访问深度，增加浏览流量。

3、有助于顾客对整个店铺的商品全面了解，提高客单价。

二、产品的分类标准

1、按商品类目

2、按商品价位

3、按商品上架时间

4、按店铺促销活动

三、产品分类导航的种类

1、店招导航

2、页中分类导航

3、左侧分类导航

4、页尾导航

聆听讲解，听取老师讲解，正确回答出促销区类型、促销区设计要点等。

以学习者为中心，突出学生主体地位，教师的引导。

4、学生实训

发布实训任务：

为小家电店铺设计分类导航。

参考网上分类导航，用Photoshop制作店铺店招。

利用所学知识，分析任务，讲练结合，学以致用

5、课后小结

本节课要掌握的重点：

1、产品分类导航的定义及作用

2、产品的分类标准

3、产品分类导航的种类

明白本节课自己要掌握的知识点

任务七商品陈列区设计

一、教学目标

1、知识目标

（1）商品陈列区定义。

（2）传统超市和电商商品陈列对比。

2、技能目标

（1）如何进行商品陈列。

3、情感目标

（1）培养学生美感审美的能力，美的情操。

（2）培养学生积极思考、大胆探索的能力。

（3）培养学生自主学习、协助学习的能力。

二、教学内容分析

网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾客能否在店铺下单购物。

美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺的商品，增加顾客下单的概率。

教学重点：

1、商品陈列区定义。

教学难点：

1、如何进行商品陈列。

三、教学过程设计

教学步骤

教师活动

学生活动

设计意图

1、创设情景引入课题

对比两个导航，思考哪一个点击量会更多？

思考回答问题

强化分类导航很重要

2、新课讲解

一、商品陈列区定义

将产品按销售者的经营思想及要求，有规律地摆设、展示、以方便顾客购买，提高销售效率的重要的宣传手段，是销售产业广告的主要形式。

二、传统超市和电商商品陈列对比

超市商品陈列

电商商品陈列

位置

内容

位置

内容

入口处

吸引顾客进店，配置主题型季节促销区（特别是标准超市）

首屏焦点海报

电商主题大促

主题区

放在卖场深处，吸引顾客向卖场纵深

分类商品陈列区

电商引导性标识

端架区

高毛利商品，低价优质商品，强化价格形象，激发购买欲望

大促商品陈列区

电商新热促暴点

排面促销区

活化陈列，吸引顾客向货架深处行进

首页商品分类列表

电商分类运营手段

特殊陈列

包柱子海报宣传

首页背景设置

电商特别主题装饰渲染气氛

三、商品陈列的重要性

陈列是零售业的一个重要环节，有规矩摆设、展示商品，以便顾客购买。

同时不仅美化购物环境，还可以刺激销售，提高商品销量。

可以说，陈列直接影响着销售量。

四、如何进行商品陈列

电商行业，消费者浏览习惯都是从上到下，从左到右。

陈列原则有：

1、重点突出

2、整齐统一

3、色彩对比

4、关联有序

聆听讲解，听取老师讲解，正确回答出促销区类型、促销区设计要点等。

以学习者为中心，突出学生主体地位，教师的引导。

4、学生实训

发布实训任务：

为小家电店铺设计商品陈列区。

参考网上商品陈列区，用Photoshop制作店铺店招。

利用所学知识，分析任务，讲练结合，学以致用

5、课后小结

本节课要掌握的重点：

1、商品陈列区定义

2、传统超市和电商商品陈列对比

3、商品陈列的重要性

4、如何进行商品陈列

明白本节课自己要掌握的知识点

任务八电脑端首页上传

一、教学目标

1、知识目标

（1）掌握电脑端首页的上传方法。

（2）掌握网店首页包含的模块。

2、技能目标

（1）能上传电脑端首页。

（2）模块装修。

3、情感目标

（1）培养学生美感审美的能力，美的情操。

（2）培养学生积极思考、大胆探索的能力。

（3）培养学生自主学习、协助学习的能力。

二、教学内容分析

无线购物时代，手机端详情是美工的一个重要内容，手机端详情页的设计是否真实有吸引力，是决定买单下单的一个重要因素，所以这是美工的一个重内容。

教学重点：

1、电脑端首页上传方法。

教学难点：

1、使用DW上传店招的方法

三、教学过程设计

教学步骤

教师活动

学生活动

设计意图

1、创设情景引入课题

图片热点链接和切片链接有什么不同？

思考回答问题。

先思考，提出问题，可通过后面的课程重点讲解。

2、新课讲解

一、首页上传方法

1、模块上传

使用智能版旺铺的装修模块，完成首页中的对应模块的上传，在上传过程中，需要分别完成各模块图片的设计。

2、代码上传

将首页设计为一张完整的图片，利用PS软件进行切片，保存为HTML网页文件，并DW软件修改图片目标链接，可通过添加全屏代码实现全屏首页的整体上传。

3、第三方工具上传

可使用一些第三方工具，智能化的完成首页的上传。

目前比较受欢迎的有“稿定设计”等工具，这些工具更新频率较快，可关注最新的第三方工具。

二、网店首页包含的模块：

淘宝旺铺的智能版包括了基础模块和设计师模块两大类。

1、基础模块

可以分为以下几类：

店铺招牌

宝贝推荐类：

宝贝推荐、宝贝排行、自定义区

分类导航类：

默认分类、个性分类、悬浮导航、宝贝搜索

图片展示类：

图片轮播、全屏宽图、全屏轮播

营销类：

满返、红包、购物券、满减

其他类：

友情链接、客服中心、生意参谋、无线二维码、充值中心、公益广告、小黄条

2、设计师模块

（1）特价专区

（2）宝贝排行

（3）宝贝分类

3、

三、模块装修

1、店招

使用“店铺招牌”模块来完成。

2、导航条

默认情况下，店铺提供高30PX的导航条，如果想设计的更加精美，可与店招设计在一起，发挥设计水平的空间会更大一些。

3、全屏海报

需要使用“全屏宽图”模块完成。

4、产品促销轮播海报

需要使用到“图片轮播”模块完成。

5、优惠券

优惠劵可使用“购物券”模块来完成。

6、活动区

需要使用到基础模块中的“营销类”模块完成。

7、产品展示区

默认的主图展示，可通过“宝贝推荐”完成，但自定义的主图展示则需要使用“自定义区”模块完成。

四、使用DW上传店招的方法：

使用DW热点工具，完成店铺页头部分的上传

能熟悉电脑端首页上传的三种方法。

让学生理解电脑端首页上传的三种方法。

4、学生实训

发布实训任务：

把上节课制作的电脑端首页进行切片并使用三种方法中的一种进行上传。

根据上面的知识点，完成电脑端首页上传。

通过此任务的完成，懂得如何上传电脑端首页。

5、课后小结

本节课要掌握的重点：

1、首页上传方法

2、网店首页包含的模块

3、模块装修

4、使用DW上传店招的方法

明白本节课自己要掌握的知识点