网店装修（第二版）学习情境五 教案

任务一店铺首页策划一

一、教学目标

1、知识目标

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

(2)掌握店铺首页装修的创作方法。

2,技能目标

(1)能正确理解首页的作用。

(2)能熟悉首页每个模块的制作方法

3、情感目标

(1)培养学生美感审美的能力，美的情操。

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

(3)培养学生自主学习、协助学习的能力。

二、教学内容分析

网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系

到顾客能否在店铺下单购物。美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览

店铺的商品，增加顾客下单的概率。。

教学重点：1、电脑端首页的规范。

2、首页的主要模块。

教学难点：1、首页的组成模块。

2、首页的布局。

三、教学过程设计

教学步

教师活动学生活动设计意图

骤

1、创设思考什么是首页？首页的作用？看展示的引出首页装

情景引首页，思考修的重要

入课题问题。性。

一、一个正常营业的店铺首页主要由店招、导航、海报、产品了解电脑让学生先行

分类、客服旺旺、产品展示、店铺页尾、店铺背景以及满返、端首页的了解电脑端

布局首页的基本

满减、红包、购物券等营销模块。

知识

店铺首页的标准布局图：

2、新课

讲解

教学步

教师活动学生活动设计意图

骤

让学生对首

悉首

能熟

页的整体布

主

由

要

页

局有系统的

些

块

模

哪

了解，便于

成

今

每

构

后面的策划

内

的

模

块

哪

容

为

可

些

？

二、首页布局内容解析

1、店招

顾名思义是店铺的招牌，店招的尺寸为950*150PX含自

定义导航部分，950*120PX其导航为系统自带。店招一般展示

的内容是店铺的名称、log。标志、口号等，详细一些的也可

以展示1-2款主推的产品，还有领取优惠券的设计，收藏店铺

的图标。店招是店铺上唯一各个页面都能展示出现的模块，所

以一些重点推广信息可以设计在店招上。

2、导航条

导航条可分为淘宝系统自带和自定义导航条设计，主要功

能是可以快速链接到相应的指定页面。一般内容为所有分类、

首页等，丰富一些的有会员制度、购物须知、品牌故事等等,

具体可根据自己店铺内容而定。

3、全屏海报或轮播海报

全屏海报主要用于店铺重大公告、折扣优惠、主打产品推

荐，让客户一进入首页就能看到店铺的重点，一般全屏海报尺

寸1920*600PX（建议高度在400-600PX间较好）。

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

报吸引买家。尺寸为950*500PX（建议高度在400-500PX间

较好）。

4、产品分类

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

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

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

5、活动促销区

教学步

教师活动学生活动设计意图

骤

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

率。在旺铺的基础模块中，可供使用的促销工具有：满返、红

包、优惠券、满减、满赠。以上营销服务，可起到主动营销买

家，提升回头客的效果。我们所说的设计，是通过平面图片的

设计展示在店铺的首页，让买家一目了然的看到。设计尺寸

950*200PX内。

6、商品展示区

是指产品通过平面图片展示设计，更能突出产品的性价

比，更能融化到店铺的风格里，极大提生产品的视觉展示效果

（此非淘宝系统宝贝推荐的豆腐块式的产品展示）。本模块尺

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

7、店铺页尾

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

950*300PX内

8、店铺背景

一个店铺的风格确立，店铺的背景占据了大部分，背景主

要设计的内容店铺的背景图片，店铺手机二维码或店铺一些重

要的折扣信息都可以加入到店铺背景上。

三、店铺首页案例展示

案例：小熊电器官方旗舰店（见图5-2）,以简约大气的风

格凸显产品多样、高档，排版布局合理紧凑，无需过多的文字

修饰，凸显高端家电品质。

教学步

教师活动学生活动设计意图

骤

促悄活动

店长推荐专区

京甜筋炒烙金雄

分体ifl计舄清洗

♦TH臂N*

分类推荐专区

根

上面

据通过此任务

的

叫

加

“的完成，懂

完

家

任务名称为店铺首页进行模块策划小

成得如何撰写

电

策

页

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

划

撰

的

书

任务要求页各模块进行策划。写

弄

有

。

使用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、创设常见的店标有哪些？思考为什么你们都能记住它？思考回答问强化店标

情景引题设计很重

入课题要

一、店标的定义及作用聆听讲解，提升自主

1、店标的定义店标的定学习和专

义、作用、注听讲的

店铺的标志，是指网店中起到识别和推广店铺作用的图案，通过店标

规格及分能力。

可以让消费者记住店铺主体和品牌文化，是店铺标识的图形记号。一个网

o

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

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

2、店标的作用

2、新课网店店标是公众识别网店的指示器。店标是一种“视觉语言”。它通过

讲解

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

的目的。

二、店标要求

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

2、文件大小80K以内

3、建议尺寸80PX*80Px

三、店标设计的步骤

教学步

教师活动学生活动设计意图

骤

(1)提取店名关键字，取得关键字的首字母。

(2)抽象选择可替代该行业的图案。

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

发布实训任务：为小家电店铺设计店标。参考网上电利用所学

器店标，用知识，分析

4、学生

Photoshop任务，讲练

实训

制作店铺店结合，学以

标。致用

本节课要掌握的重点：明白本节课

1、店标的定义自己要掌握

5、课后

、店标的作用的知识点

小结2

3、店标要求

4、店标设计的步骤

任务三店招设计

一、教学目标

1、知识目标

(1)店招的定义、作用。

(2)店招的和规格尺寸。

2,技能目标

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

3、情感目标

(1)培养学生美感审美的能力，美的情操。

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

(3)培养学生自主学习、协助学习的能力。

二、教学内容分析

网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾

客能否在店铺下单购物。美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺

的商品，增加顾客下单的概率。

教学重点：1、店招规格尺寸。

教学难点：1、根据店招的规格尺寸和类型设计店铺店招。

三、教学过程设计

教学步

教师活动学生活动设计意图

骤

1、创设常见的店标有哪些？思考为什么你们都能记住它？思考回答问强化店标

情景引题设计很重

入课题要

一、店招的定义及作用聆听讲解，以学习者

听取老师讲为中心，突

1、店招的定义

解，正确回出学生主

店招就是商店的招牌，有的地方叫‘‘招子"。古人称为“幌子”、“望子”。

答出店招包体地位，

近年来随着网络交易平台的发展，店招也延伸到网店中，即虚拟店铺的招含的元素。教师的引

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

2、新课2、店招的作用

讲解(1)店招可以表明商店所售物品或服务项目的标志；

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

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

二、店招的大小

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

所示：

教学步

教师活动学生活动设计意图

骤

店招尺寸比例图

c店：950px

商城：990px

三、店招的分类

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

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

这类店招首先要考虑的内容是店铺名、店铺logo、店铺口号因为这是

品牌宣传的最基本的内容；其次是关注按钮、关注人数、收藏按钮、店铺

资质，可以侧面反映店铺实力；再次是搜索框、第二导航条等方便用户体

验的内容。

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

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

所以店招首要考虑的因素是活动信息/时间/倒计时、优惠券、促销产品等

活动或者促销信息；其次是搜索框、旺旺、第二导航条等方便用户体验的

内容：再次才是店铺名、店铺log。、店铺口号等品牌宣传为主的内容。

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

表现突出、对店铺有贡献.店铺特点是有主推产品、想要主推一款或

几款产品。在店招上，这类店铺要主打促销产品、促销信息、优惠券、活

动信息等促销信息；其次是店铺名、店铺log。、店铺口号等品牌宣传为主

的内容；再次是搜索框、第二导航条等方便用户体验的内容。

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

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、创设对比两个店铺，思考哪一个流量会更多？思考回答问强化全屏

情景引题海报很重

入课题要

一、海报的大小聆听讲解，以学习者

听取老师讲为中心，突

全屏海报尺寸：宽1920px

解，正确回出学生主

中间部分950px(C店)990px(天猫)

答出海报的体地位，

高400-540px尺寸、类型。教师的引

导。

二、海报的类型

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

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

教学步

教师活动学生活动设计意图

骤

三、海报设计共同标准

1、主题突出

2、目标明确

3、形式美观

四、海报整体构图

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

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

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

发布实训任务：为小家电店铺设计全屏海报。参考网上电利用所学

器全屏海知识，分析

4、学生报，用任务，讲练

实训Photoshop结合，学以

制作店铺店致用

招。

本节课要掌握的重点：明白本节课

1、海报的大小自己要掌握

5、课后

、海报的类型的知识点

小结2

3、海报设计共同标准

4、海报整体构图

任务五促销区设计

一、教学目标

1、知识目标

(1)促销区的类型。

(2)促销区设计要点。

2,技能目标

(1)促销区设计四步骤

3、情感目标

(1)培养学生美感审美的能力，美的情操。

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

(3)培养学生自主学习、协助学习的能力。

二、教学内容分析

网店首页的美观程度，直接决定进店顾客的主观感受，可以延长顾客进店停留时间，关系到顾

客能否在店铺下单购物。美观的店铺装修会给客户好的第一印象，顾客会更愿意多花时间浏览店铺

的商品，增加顾客下单的概率。

教学重点：1、促销区设计要点。

教学难点：1、促销区设计四步骤。

三、教学过程设计

教学步

教师活动学生活动设计意图

骤

1、创设思考优惠券的好处？思考回答问强化促销

情景引题区设计很

入课题重要

一、常见的网店促销区聆听讲解，以学习者

听取老师讲为中心，突

1、优惠券解，正确回出学生主

2、促销活动：折扣活动、会员活动、抽奖活动、满赠活动答出促销区体地位，

类型、促销教师的引

二、促销区设计要点区设计要点导。

等。

(1)促销活动，罗列清晰

2、新课

(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、创设对比两个导航，思考哪一个点击量会更多？思考回答问强化分类

情景引题导航很重

入课题要

一、产品分类导航的定义及作用聆听讲解，以学习者

定义：淘宝店铺的分类导航是指引顾客更快找到自己购买物品位置的听取老师讲为中心，突

解，正确回出学生主

指向灯，相当于超市中标明各类商品位置的指示牌，其重要性不言而喻。

答出促销区体地位，

作用：1、引导顾客快速的找到所需要购买的商品，起到了路径的作用。类型、促销教师的引

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

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

二、产品的分类标准

2、新课1、按商品类目

讲解

2、按商品价位

3、按商品上架时间

4、按店铺促销活动

三、产品分类导航的种类

1、店招导航

2、页中分类导航

3、左侧分类导航

4、页尾导航

教学步

教师活动学生活动设计意图

骤

发布实训任务：为小家电店铺设计分类导航。参考网上分利用所学

类导航，用知识，分析

4、学生

Photoshop任务，讲练

实训

制作店铺店结合，学以