网店装修（第二版）全书电子教案

任务一店铺风格定位

一、教学目标

1、知识目标

(1)了解店铺视觉规范的基础理论知识

(2)掌握店铺风格定位的方法。

2、技能目标

(1)能正确理解店铺视觉规范。

(2)能熟悉店铺风格定位的方法

3、情感目标

(1)培养学生观察与分析、使用数据的能力。

(2)培养学生积极思考、大胆探索，从网络信息中挖掘信息的能力。

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

二、教学内容分析

在网络购物时，店铺装修给顾客的第一印象，就决定了其对店铺的直观感受。虽然品牌、价格

等因素也是店铺定位的重要条件，但是排在首位的还是视觉印象。因此，店铺的视觉定位几乎就等

于店铺的定位。所以店铺风格是一个重内容。

教学重点：1、店铺风格规范的知识。

2、店铺风格定位的方法。

教学难点：1、店铺风格定位方法。

2、店铺风格定位的原则。

三、教学过程设计

教学步

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

骤

展示两家化妆品店铺的首页，看了这后，你会喜欢那个的看展示家化由对比反差

1、创设店铺风格？为什么？妆品店铺的引出店铺风

情景引1.教师分析首页，角色为格定位的重

入课题买家,会喜欢要性

哪个？

一、店铺风格的定义了解电脑端让学生先行

店铺风格是指网店给访客的直观感受。就像一个人，留什店铺首页描了解店铺风

么样的发型，穿什么款式的衣服，甚至言行举止，都在向述规范。格定位的方

别人传递着许多信息，而这些信息会给人留下或好或坏的法。

印象。店铺风格主要体现在网店主营商品类型、网店装修

风格、网店商品价位、网店促销方式、网店顾客服务等方

2、新课面。

讲解

二、店铺风格定位的原则

店铺风格定位需要遵循以下几个原则：

(1)要有依据，不能仅凭个人喜好或猜测就给店铺做风

格定位，要做到有理有据。

(2)色彩搭配有主次、有对比，不能整个店铺通篇都是

教学步

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

骤

一种颜色，给人很单调、压抑能熟悉店铺让学生对店

的感觉。风格定位的铺规范知识

方法。有系统的了

(3)色系不宜过多，太多会让人觉得乱，应控制在三种

解，便于后面

以内。的配色

(4)少用鲜艳色，尽量采用中间色。鲜艳色比较刺眼，

可能喧宾夺主，会抢商品的风

头。任何店铺，其真正的主角都是商品而不是装修，装修

只是一个衬托。中间色比较温和，不张扬。

三、店铺风格定位的方法

1.行业特性

根据行业特有的性质来确定店铺风格。例如：户外运

动(见图1—3)的关键词：动感、大自然、健康、活力；

推荐色系：蓝、绿、橙、红。

孕婴用品(见图1—4)的关键词：温馨、希望、洁净、

成长；推荐色系：浅粉、浅玫瑰、浅绿、浅蓝。

2.商品特性

(1)价格水平

我们就可以从商品的档次上来定位装修风格,要显得精美、

有档次。

(2)消费群体

可以从消费者的性别、年龄、职业、文化水平、收入水平

等方面找出消费群体的特性和共性。

(3)文化内涵

根据商品不同的特性，可以在装修时选择具有不同文化内

涵的主题，如茶具、茶叶、保健品等可以选用具有中国风、

水墨复古的装修风格，(

3.时节特性

有时候还需要根据季节的不同，选择不同的店铺装修风格。

春天春回大地，选择绿色为主色调来装修，秋冬季节，以

橙色、红色等暖色进行装修。不同的节日，还可以更换不

同的风格。

四、通过对任务的分析及店铺风格定位的学习，制订店铺

风格定位计划如下：

分析店铺主营商品特征

1

V

分析店铺目标消费群体

定位店铺风格

(1)YIMI伊米生活用品店主营项目为水杯、毛巾、拖

鞋等现代日用百货商品，此类商品注重实用又兼具美观。

(2)分析店铺目标消费群体

教学步

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

骤

(3)本店的主要消费群体为18~49岁的时尚女性，一

般在企事业单位工作，收入较高，工作稳定，消费特点为

精打细算，在购物方面追求美观与实用性。因此，店铺的

装修就要符合女性的审美习惯，要求重点突出功能、设计、

性价比等。

三、定位店铺风格

店铺风格主要有时尚、简约、古典、非主流、酷炫、

可爱、小清新、欧美、中国风、奢华、手绘、甜美、商务

等。

通过参考优秀日用百货网店的设计风格，分析行业特

性，目标群体的爱好、特点，找出店铺想要表达的概念，

明确体验关键词为简洁、时尚，以获得目标消费群体的信

任和关注。

五、店铺定位方法：

方法一：参考同行业店铺，确定大致的范围。

在淘宝店铺搜索“家居日用品”，把这个行业里经营得比较

好的店铺找出来，进行参考、比较或部分模仿。

方法二：根据确定的店铺风格，到淘宝网卖家服务装修市

场，或者设计网站，如：90设计-、干图网等找到合适的店

铺模板，进行参考、比较或部分模仿。

一、在淘宝网上去查找不同的店铺首页设计，至少10款，1.查找店铺通过对各个

挑出最能你最喜欢的，并说明为什么？规范网店的同类

二、发布任务：五一劳动节快到了，小熊电器店想重新装产品的店铺

4、学生

对比，得出优

实训修店铺，以配合劳动节大促，请你定位店铺装修风格。

秀的店铺优

2.查找店铺点在哪里

风格

本节课要掌握的重点：明白本节课回顾所学知

5、课后1.店铺风格规范的知识自己要掌握识

小结2、店铺风格定位的方法的知识点

吸引眼球的海报设计

任务二配色方案确定

一、教学目标

1、知识目标

(1)掌握配色方案的概念与知识。

(2)掌握配色方案的设计方法。

2、技能目标

(1)能正确使用配色方案。

(2)色彩搭配的原理。

3、情感目标

(1)培养学生观察与分析的能力。

(2)培养学生积极思考、大胆探索，从数据中挖掘信息的能力。

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

二、教学内容分析

配色是店铺视觉规范的一个重要内容，网店整体配色，一定要给人统一和谐的感觉，是决定买

单下单的一个重要因素，所以这是店铺视觉规范的一个重要内容。

教学重点：1、色彩搭配的原理要素。

教学难点：1、色彩搭配的技巧与方法。

三、教学过程设计

教学步

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

骤

通俗地明白强化店铺

生活中，爱美的女性常常讨论，什么颜色的上衣搭配什么颜色的裙子，配色的概配色设计

配什么颜色的包，戴什么颜色的项链或手链，才会好看，这其实就是在讨念，重要性。

论配色方案。如下图网店。

■AXNiMaMM

1、创设二，自

情景引

入课题“-"-

5010382-50

副—

4

色相

教学步

学生活动设计意图

骤I：）

熟悉配色方让学生多

明度案的知识与观察，并结

设计技巧，合所学的

掌握设计原知识进行

◎(|l)理与设计的设计方案。

技巧。

饱和度=

■*^^^>.

I色相

I；)

明度

饱和度

180%|[60%][40%

图1-13色彩三要素

2、新课

讲解

(1)色相(H)即色彩可呈现出来的质的与相貌，如红、橙、黄、绿、青、

蓝、紫等。

(2)就器度⑸即纯度，是各色彩中包含的单种标准色成分的多少。饱和

度用来表现色彩的鲜艳和深浅。

(3)明度(B),又称为色彩的亮度，即色彩的明暗差别，也即深浅差别。

二、色彩心理

优秀的颜色搭配可以延长顾客在店铺逗留的时间，顾客在店铺浏览的

时间越长，下单的机会就越大。所以，选对颜色对店铺装修有着非常重要

的作用。要选对颜色，必须了解不同颜色会给人带来什么不一样的感觉。

(1)暖色色调(见图1-18)：包含红、橙、黄及这三种颜色的混合，

是让人觉得温暖、愉悦、热情、激动的颜色。适合促销、女性、儿童、家

居、食品等主题。

■■■IZnHHM

图1-18暖色色调调色卡

(2)冷色色调(见图1-19)：包含绿色、蓝色和紫色。是让人觉得清

爽、稳重、舒缓、冷静的颜色。适合男性、户外、电器、数码、夏天、春

天等主题。

■■■■■■■■■

5

吸引眼球的海报设计

教学步

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

骤

图1-19冷色色调色卡

(3)暗色色调(见图1-20)：纯色加黑得到暗色系。是让人觉得成熟、

高贵、尊贵、气势、高雅的颜色，体现能力感和高格调文化。适合男性、

汽车、电器、数码、商务、奢侈品等主题。

■■■■■■■■■■■

图1-20暗色色调色卡

(4)明色色调(见图1-21)：纯色加白色得到。是让人觉得时尚、活

泼的颜色。适合时尚、运动、年轻等主题。

■■■■■■■■■

图1-21明色色调色卡

(5)淡色色调(见图1-22)：明色加白色得到。是让人觉得清新、温

柔的颜色，适合少女、幼儿主题。

■■■

图1-22淡色色调色卡

三、色彩搭配

1、单一色彩配色：选择单一色彩，然后调整明度或者饱和度，将色彩变淡

或加深，使得单一色彩页面也有丰富的画面变化和美感。

Hi丝-

二h

上工・一—场

图1-23单一色页面

2、两种对比色彩配色

先选定一种色彩，然后选择它的对比色，这个对比色就是第二种颜色。

6

吸引眼球的海报设计

7

吸引眼球的海报设计

教学步

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

骤

六：任务实施

方法一：根据色相环确定配色方案。

(1)设计决策确定了主色为蓝色，确定颜色明度与饱和度

(2)根据邻近色原则，蓝色的邻近色是绿色或者紫色，可以确定辅色为紫

色。

(3)根据对比色原则，蓝色的对比色是黄色、红色、橙色，可以确定突出

色为橙色。

(4)得出配色方案，(见图1-24)。

图1-27配色方案1

方法二：从成功网店借鉴配色方案。

对于新手来说，很难马上将这些色彩知识应用到自己的网店中，最便

捷快速的方法就是学习借鉴其他成功网店中的配色方案。除了网店外，还

可以借鉴网页，甚至世界名画。

先找到一个借鉴的网店，(见图1-28)。

8

吸引眼球的海报设计

教学步

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

骤

国庆节快到了，“飞利浦”小家电电器店铺重新装修店铺，以配合国庆节根据上面的通过此任

大促。请你根据店铺资料的消费群体与系列产品特征设计店铺的配色方案。知识点，完务的完成，

成小家电的掌握配色

1、店铺名称：飞利浦小家电器店

设计。方案的设

4、学生2、产品服务与特色：实用小家电电器，系列产品包括吹风机、剃须刀、挂（没有弄清计。

实训烫机、电动牙刷、空气净化器、电子美容仪、吸尘器等品类。公司网址：楚的地方可

/参看微课）

3、消费群体:年轻群体

4、品牌形象类型：实用小家电

本节课要掌握的重点：明白本节课回顾所学

自己要掌握知识

5、课后1、色彩搭配的原理要素。

的知识点

小结2、色彩搭配的技巧与方法。

9

吸引眼球的海报设计

任务三字体的规范

一、教学目标

1、知识目标

(1)了解店铺字体规范基础理论知识

(2)掌握店铺字体风格的分类。

2、技能目标

(1)能正确理解店铺字体应用的规范。

(2)能熟悉字体设计的风格。

3、情感目标

(1)培养学生观察与分析、使用数据的能力。

(2)培养学生积极思考、大胆探索，从网络信息中挖掘信息的能力。

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

二、教学内容分析

在网络购物时，设计师在创作中，什么情况下适合哪种字体，哪种风格适合哪些字体，都直接

影响这个设计内容的视觉传达，值得设计师思考。如果在设计中应用了不合适的字体，不仅会使传

递的信息大打折扣，严重的还会使其成为无效信息，影响转化率。因此，选对字体对我们的设计有

着不可或缺的作用。

教学重点：1、店铺字体规范的知识。

2、店铺规范字体的分类。

教学难点：1、店铺规范字体的使用。

2、店铺规范字体的分类。

三、教学过程设计

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

人搜索字体的相关知识，比较分析，思考不同字体应用不同消思考不同字体引出店铺

创应用不同消费字体规范

设费者有哪些区别？包含哪些内容

者有哪些区的重要性

情

另限观看不同

景

的字体。

引

入

课

题

生先

让学

一、字体的理论知识了解店铺字体

店

解

行

2了

,的应用规范。

应

体

(1)字体是有态度、有性格的。字体如同模特的一张脸，代表铺

新

字

规

内

用

课着一种风格，比如淘宝网上的知名店铺韩都衣舍、茵曼、七格格

供

范

讲女装、裂帛、天使之城、阿芙、御泥坊……它们都有很多特别及

。

解有个性的字体，很多字体还是比较难找的，就是为了保证唯一性

和独特性。

10

吸引眼球的海报设计

教

学

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

骤

（2）字体的使用

在店铺设计字体中，不是所以字体都可以免费使用的。很多新手

设计师可能会忽视字体版权问题，以为所有字体就可以免费应用

到设计图上，虽然有些字体是免费的，但用于商业宣传还是有风

险的，所以我们需尽量使用免费的商用字体。

能熟悉店铺字

思源真黑思源柔黑

体设计风格定

位的方法。让学生对

店铺字体

站酷酷需站酷高端需规范知识

有系统的

免费商用字体了解，便

于后面的

图1-32免费商用字体1字体风格

的应用。

方正书宋方正黑体

方正楷体方正书宋

免费商用字体

图1-33免费商用字体2

一般店铺中常用字体：中文字体不超过两种，一种用于标题,

另一种用于宝贝描述；数字字体一种，英文字体一种，特殊字体

一种（只在特定活动时用于渲染气氛）。同时，在选择字体的时

学生了解字体

候，还要根据自己的受众、媒介和行业来定。

设计的常用方

法

图1-34手工感强字体图1-35动感强的字体

二、字体的应用

（1）适合男性产品使用的字体

男性产品就是消费和使用人群主要为男性的产品，如：体育

运动类用品、车、剃须刀、游戏设备等。

11

吸引眼球的海报设计

教

学

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

骤

学生理解各种学生通过

产品使用字体对比的方

的方法。法了解字

体适用方

法

图1-36适合男性产品使用的字体

(2)适合女性产品使用的字体

女性产品就是消费和使用人群主要为女性的产品，如：女装、

鲜花、珠宝配饰、护肤品、化妆品等。

图1-37适合女性产品使用的字体

(3)适合中性产品使用的字体

中性产品就是消费和使用人群男性和女性都有的产品，如:

数码产品、大家电、小家电、家装、厨卫产品等。

GORLDE佳德

科勒旗下不镌钢专家

绿色厨卫原创典范

敏髓4008822823

图1-38适合中性产品使用的字体

(4)适合促销类产品使用的字体

因为促销类产品通常需要给用户传递非常亢奋而激烈的情

绪，而这种情绪恰好与男性特征中激烈冲动且亢奋的特点相吻

合，所以在促销和抢购等活动类设计中，男性化字体被普遍使用。

12

吸引眼球的海报设计

教

学

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

骤

图1-39促销类产品使用的字体学生学会辨别

（5）适合孩童产品、童趣产品使用的字体不同种类使用

孩童产品就是使用人群主要为幼儿和儿童的产品，如：婴幼的方法。

产品、零食、玩具等。童趣产品就是那些有卡通人物设计、造型

可爱的产品。

1

图1-40适合孩童产品、童趣产品使用的字体

（6）适合小清新、文艺、复古产品使用的字体

小清新、文艺产品就是消费和使用人群主要为文艺青年的产

品，如：文艺风服饰（茵曼、无印良品）、手工首饰、家居用品

等。

通过不同字体

设计效果展示

不同字体应用

的范围。

图1-41适合小清新、文艺、复古产品使用的字体

（7）适合高端昂贵产品、奢侈品使用的字体

高端昂贵产品、奢侈品就是消费和使用人群主要为商务精

英、企业家、商人和社会名流的产品，如：名表、名贵首饰、高

端包袋、高端服饰、香水、名酒等。

图1-42高端昂贵产品、奢侈品使用的字体

（8）适合中国传统相关产品使用的字体

中国传统相关产品是指酒、茶、特产、旅游地等具有中国传

统文化特质的产品。基于这类产品一般具有古典优雅、中国风、

霸气、历史底蕴等特征，我们可以总结出文艺文字特征：书法字

体、霸气洒脱、流畅等。

13

吸引眼球的海报设计

教

学

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

骤

图1-43适合中国传统相关产品使用的字体

（9）自主设计字体

淘宝店铺装修设计中，为了提升文字的整体感与空间感，个别字

体会使用的一些自主设计的字体。自主设计字体主要有黑体拉

长、横笔相连、化点为圆、方形圆弧化等四种方法.

黑体拉长横笔相连

但a省更算“

化圆为点方形圆弧化

跚通路人

图144设计字体的常用方法

图1-46字体相连效果

在设计过程中，也会遇到文字效果欠佳,可以添加文字效果。

飞

fc

lw

图147描边效果

14

吸引眼球的海报设计

教

学

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

骤

@锻喇场：

rm&C.

MM*»*«»»*__

陶&出含靛死

图1-48斜面浮雕效果

图1-49渐变效果

金场包邮就霸蹒

一「4"一，；"'

图1-50画笔笔刷效果

三、设计计划

通过对任务的分析及字体规范的学习，制订字体设计的计划如

下：

四、设计决策

YIMI伊米生活用品店主要销售家居日用品，属于消费和

使用人群男性和女性都有的中性产品。基于中性干净、简洁、中

性美、精致、平静等特征，我们可以总结出中性化文字特征：性

别属性不强、并不需要很强烈的情感特征、偏中立、兼具男性字

体和女性字体的特征，到字由/下载合

适的免费商用的字体。

15

吸引眼球的海报设计

教

学

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

骤

（1）字体下载网址有：

PS家园网:/pssc/fontxz/

字由网址:/

⑵字体安装:第一步:输入网址:https:〃/,

点击客户端下载（见图1-51）。

字由•设计师必备字体利器

•*»*•*•MUM

图1-51客户端下载界面

第二步：解压下载好的压缩包，进行安装，安装后出现可以

选择的免费商用的字体。

第三步：打开photoshopcs6软件，快速应用字体，无需下

载字体，点击商用免费字体预览区，点击激活字体，然后再选中

设计软件中的字体，点击“文字工具”，就可以在下拉面板选择

相应字体。（见［图1-53）。

小

RJ

jh

ib■m：；

UI酎…

Hu

出欣迎

山

山

6!QHKE葡

山

!

图1-53增加字体样式

1.查找店铺字

人新店开张，需要为九阳厨房小家电电器店设计店铺的字体搭配。体设计规范。

学

生请你根据店铺资料的消费群体与系列产品特征选择店铺的字体让学生主

实动学习，

搭配。

训

2.查找店铺字查找资料

体风格。

5>本节课要掌握的重点：明白本节课自回顾所学

课

己要掌握的知知识

后1、店铺字体规范的知识。

识点

小2、店铺规范字体的分类。

结

任务一海报文案

一、教学目标

16

吸引眼球的海报设计

1、知识目标

(1)了解海报文案的基础理论知识。

(2)明白海报文案的模块组成。

2、技能目标

(1)能正确理解海报文案的作用。

(2)能熟悉海报文案的制作方法

3、情感目标

(1)培养学生分析和处理、使用数据的能力。

(2)培养学生积极思考、大胆探索，从数据中挖掘信息的能力。

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

二、教学内容分析

海报是美工的一个重要内容，海报的设计是否真实有吸引力，是吸引用户是否决定进店铺的一

个重要因素，所以这是美工的一个重要内容。

教学重点：1、海报尺寸的规范。

2、海报的主题分类。

3、海报文案的结构。

教学难点：1、海报文案的编写。

2,海报文案主题定位。

三、教学过程设计

教学步

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

骤

展示两个不同海报图，看了这后，哪张海报文字内容会吸看展示的海由对比反差

1、创设

引你？为什么？报图,角色为引出海报的

情景引

买家,会头哪重要性

入课题

个？

一、海报的常见尺寸了解电脑端让学生先行

1、首页全屏海报宝贝描述规了解电脑端

宽：1440px/1680px/1920px,高：300Px〜700px范详情的基本

2、自定义页面普通海报知识

宽：C店950Px(B店990px)、高:400Px〜600px

3、宝贝详情页中的海报

宽:C店750Px(B店790px)、高：200Px〜400Px

能熟悉海报让学生对海

二、海报的主题

主要由哪些报的整体组

1、店铺宣传

模块构成，每成模块有系

2、新课

店铺宣传海报是以宣传店铺品牌为主的海报设计，旨个模块的内统的了解，便

讲解

在提升店铺形象、优化店铺结构等。容可为哪于后面的策

些？划

「刎去扣品牌日.

2、商品宣传

商品宣传海报指的是以某件或多件商品为主的海报

设计，又可分为新品型海报、热卖型海报、促销型海报。

17

吸引眼球的海报设计

教学步

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

骤

■HAVE।

n▲好的叫

龙两金与SSTSS.

2Mf-T-

3、品牌宣传

品牌宣传海报旨在宣传品牌，提升品牌形象。

♦Q@

&MIHKSBB®?

犍州如Ue晒,

4、会员宣传

会员宣传主要有会员换购、会员日等。

三、海报的文案能熟练分清学生通过案

哪个属于分例分析出层

1、文案的设计过程一般要经过4个层级：

案的层级和级和海报文

战略层、感受层、内容层、表达层文案分类案分类

全网通

小米Note新品首发¥2099

8月3日中午12点晚上8点开fl!•

0.■

通过海报了解哪个内容属于这四类层级。

2、海报中的文案可分：

主标题、副标题、正文

通过海报可以看出主标题：全网通

标题：小米NOTE新品首发2099

正文：同时支持联通、联通、电信4G网站

8月3日中午12点，晚上8点开售。

通过对各个

网店的同类

4、学生在淘宝网上去查找随手杯的海报，至少10款，写出海报内查找海报海报对比，得

实训1文案的层级和文案分类。出优秀的海

报文案在哪

里

本节课要掌握的重点：