京东店铺装修与设计从入门到精通教学教案.docx

京东店铺装修与设计从入门到精通教学教案.docx

《京东店铺装修与设计从入门到精通教学教案.docx》由会员分享，可在线阅读，更多相关《京东店铺装修与设计从入门到精通教学教案.docx（26页珍藏版）》请在冰豆网上搜索。

京东店铺装修与设计从入门到精通教学教案

《京东店铺装修与设计从入门到精通》

教学教案

第1讲

课时内容

京东店铺装修前的准备工作

授课时间

90分钟

课时

2

教学目标

þ认识京东平台

þ认识店铺装修

þ掌握店铺装修流程

教学重点

þ掌握京东平台的基础知识

教学难点

认识并学习如何进行店铺装修

教学设计

1、教学思路：

（1）讲解京东平台，让学员认识京东POP开放平台和认识京东商家后台；

（2）讲解店铺装修的基础知识，让学员里认识店铺装修的注意事项、店铺装修风格的设计、店铺装修与转化率的关系的相关知识；（3）讲解店铺装修流程，使学员认识店铺装修策划、素材收集与商品拍摄、图片设计与制作、图片切片、上传与管理装修图片和京东后台店铺装修操作；（4）安排实战训练、拓展延伸和课堂练习，对前面知识进行巩固。

2、教学手段：

（1）通过演示讲解基础知识，讲解结束后进行疑难提问；

（2）对于重点知识可进行举例说明。

3、教学资料及要求：

除教材中讲解的知识，还可继续对京东平台进行学习。

教学内容

讨论问题：

1、如何进行店铺装修？

2、装修过程中的注意事项有哪些？

内容大纲：

具体可结合本章的PPT课件进行配合讲解。

1.1　京东平台

1.1.1 认识京东POP开放平台

1.1.2 认识京东商家后台

1.2　店铺装修

1.2.1 店铺装修的注意事项

1.2.2 店铺装修风格的设计

1.2.3 店铺装修与转化率的关系

1.3　店铺装修流程

1.3.1 店铺装修策划

1.3.2 素材收集与商品拍摄

1.3.3 图片设计与制作

1.3.4 图片切片

1.3.5 上传与管理装修图片

1.3.6 京东后台店铺装修操作

1.4　实战训练

1.4.1 实训要求

1.4.2 实训分析

1.4.3 操作思路

1.5　拓展延伸

1.6　思考练习

小结

1、掌握京东的基础知识。

2、掌握字体的布局技巧。

思考及作业

想一想：

（1）开设京东店铺的方法？

（2）店铺装修的注意事项？

1.练一练：

（1）赏析周黑鸭京东自营旗舰店首页效果，要求对页面的设计元素、装修要点进行分析。

（2）赏析卫龙京东自营旗舰店首页效果，要求对页面的版式设计、风格和颜色展现进行分析。

第2讲

课时内容

京东店铺设计前的准备工作

授课时间

90分钟

课时

2

教学目标

þ掌握店铺视觉营销设计的相关知识

þ掌握搭配色彩突出主题的方法

þ掌握排版构图的原则和方法

þ掌握字体选择的方法

教学重点

þ掌握开始店铺前的基础知识

教学难点

掌握构图原则和色彩搭配方式

教学设计

1、教学思路：

（1）通过对店铺视觉营销设计的讲解，让学员熟悉视觉营销设计的目的和作用、店铺视觉营销3要素和视觉营销文案策划；

（2）通过对色彩的搭配的讲解，让学员认识色彩、色彩的搭配方法、主色、辅助色与点缀色；（3）通过对页面的布局的讲解，让学员认识点、线、面3大基本构图元素、店铺布局的基本原则和常见构图方式；（4）通过对字体的选择方法，让学员认识字体的选择方法、字体风格的搭配、字体的布局技巧；（5）安排实战训练、拓展延伸和课堂练习，对前面知识进行巩固。

2、教学手段：

（1）通过演示讲解基础知识，讲解结束后进行疑难提问；

（2）对于重点知识可进行举例说明。

3、教学资料及要求：

除教材中的实例外，可以介绍更多图像编辑的基本操作，让学员充分利用并进行练习。

教学内容

知识回顾：

在前面讲解京东店铺装修前的准备工作，本章将对京东店铺设计前的准备工作进行介绍。

讨论问题：

1、如何对店铺进行布局？

2、如何对店铺颜色进行调整？

内容大纲：

具体可结合本章的PPT课件进行配合讲解。

2.1　店铺视觉营销设计

2.1.1 视觉营销设计的目的和作用

2.1.2 店铺视觉营销3要素

2.1.3 视觉营销文案策划

2.2　色彩的搭配

2.2.1 认识色彩

2.2.2 色彩的搭配方法

2.2.3 主色、辅助色与点缀色

2.3　页面的布局

2.3.1 认识点、线、面3大基本构图元素

2.3.2 店铺布局的基本原则

2.3.3 常见构图方式

2.4　字体的选择

2.4.1 字体的选择方法

2.4.2 字体风格的搭配

2.4.3 字体的布局技巧

2.5　实战训练

2.5.1 实训要求

2.5.2 实训分析

2.5.3 操作思路

2.6　拓展延伸

2.7　思考练习

小结

1、掌握色彩的搭配技巧

2、掌握文字的选择方法

思考及作业

想一想：

（1）文字图形化展现，增强视觉冲击力？

（2）常见色系应用场合及搭配方法？

2.练一练：

（1）赏析珀莱雅京东自营旗舰店首页效果，要求对页面的设计元素、页面的颜色搭配与字体搭配进行分析。

（2）赏析达利园京东自营旗舰店首页效果，要求对网页颜色、风格、搭配、构图方式、网页元素等进行分析。

第3讲

课时内容

商品图片的基本处理

授课时间

45分钟

课时

1

教学目标

þ掌握图片的基础调整方法

þ掌握调整图片亮度与色彩的方法

þ掌握图片背景抠取的方法

教学重点

þ掌握图片的调整方法。

þ掌握图片的抠取方式。

教学难点

套索工具和魔法棒工具的使用方法，以及调整选区的基本操作。

教学设计

1、教学思路：

（1）通过对图片的基础调整进行讲解，让学员掌握店铺常见的图片尺寸、裁剪图片中的指定部分、固定尺寸裁剪图片、调整图片的大小和矫正倾斜图片的方法；

（2）通过对调整图片的亮度与色彩进行讲解，使学员了解调整图片亮度、调整图片明暗度、调整偏色的图片的方法；（3）通过对图片背景的抠取进行讲解，使学员了解单色背景的抠取、轮廓清晰图像的抠取和复杂背景图像的抠取方法进行介绍；（4）安排实战训练、拓展延伸和课堂练习，对前面知识进行巩固。

2、教学手段：

（1）通过演示讲解基础知识，讲解结束后进行课堂练习和疑难提问；

（2）对于重点操作可以着重演示，并加强举例说明。

3、教学资料及要求：

除教材中的实例外，可通过案例的形式，对图像的处理方法进行总结，让学员在掌握知识的同时，对各个工具项进行掌握。

教学内容

知识回顾：

前面讲解了京东店铺设计前的准备工作，本章将商品图片的基本处理进行介绍。

讨论问题：

1、如何抠取复杂的图片？

2、如何对图像进行调整？

内容大纲：

具体可结合本章的PPT课件进行配合讲解。

3.1　图片的基础调整

3.1.1 店铺常见的图片尺寸

3.1.2 裁剪图片中的指定部分

3.1.3 固定尺寸裁剪图片

3.1.4 调整图片的大小

3.1.5 矫正倾斜图片

3.2　调整图片的亮度与色彩

3.2.1 调整图片亮度

3.2.2 调整图片明暗度

3.2.3 调整偏色的图片

3.3　图片背景的抠取

3.3.1 单色背景的抠取

3.3.2 轮廓清晰图像的抠取

3.3.3 复杂背景图像的抠取

3.3.4 毛发的抠取

3.4　实战训练

3.4.1 调整洁具偏色

3.4.2 替换唇膏背景

3.5　拓展延伸

3.6　思考练习

小结

1、掌握图片的调整与编辑方法

2、掌握图片的抠取方法

思考及作业

想一想：

（1）如何筛选需要调整的图片？

（2）如何快速擦除单色背景并应用其他背景？

练一练：

（1）处理一张曝光不足、色彩暗淡的咖啡杯图片，处理后色泽鲜艳、美观。

（2）打开素材文件“杯子.jpg”素材文件，使用钢笔工具抠图，将抠取的杯子拖动到详情页中。

第4讲

课时内容

商品图片的特殊处理

授课时间

90

课时

2

教学目标

þ掌握快速还原图片实际效果的方法

þ掌握图片瑕疵修复的方法

þ掌握水印的制作与图片的合成方法

þ掌握文字与形状的使用方法

教学重点

þ掌握图片的调整方法

þ掌握水印的制作方法

教学难点

掌握图片的修饰方法

教学设计

1、教学思路：

（1）通过对快速还原图片实际效果进行讲解，让学员掌握图片的处理方法；

（2）通过对图片的瑕疵修复进行讲解，让学员掌握瑕疵的修复方法；（3）通过对水印的制作与图片的合成进行讲解，让学员掌握水印和合成的基础知识；（4）通过对文字的讲解，让学员掌握文字的添加与设置方法；（5）安排实战训练、拓展延伸和课堂练习，对前面知识进行巩固。

2、教学手段：

（1）通过演示讲解基础知识，讲解结束后进行课堂练习和疑难提问；

（2）对于重点操作可以着重演示，并加强举例说明。

3、教学资料及要求：

除教材中的实例外，可以给出命题，让学员根据所学知识进行图像的制作。

教学内容

知识回顾：

在前面讲解了商品图片的基本处理，下面对商品图片的特殊处理进行讲解。

讨论问题：

1、快速对图像进行处理？

2、如何合成图片？

内容大纲：

具体可结合本章的PPT课件进行配合讲解。

4.1　快速还原图片实际效果

4.1.1 调整曝光不足的图片

4.1.2 调整曝光过度的图片

4.1.3 调整有色差的图片

4.1.4 调整模糊的图片

4.2　图片的瑕疵修复

4.2.1 去除图片中多余的图像

4.2.2 处理商品图片中的污点

4.2.3 消除人物的眼袋与皱纹

4.2.4 制作景深效果

4.3　水印的制作与图片的合成

4.3.1 水印的制作与添加

4.3.2 商品图片的合成处理

4.4　丰富商品图片内容

4.4.1 文字的添加与设置

4.4.2 为商品图片添加形状

4.5　实战训练

4.5.1 恢复玻璃杯真实效果

4.5.2 完善与美化水果图片

4.6　拓展延伸

4.7　思考练习

小结

1、掌握不同图片的处理技巧

2、掌握修饰图像的方法

思考及作业

想一想：

（1）商品图片处理时需要注意哪些问题？

（2）图片失真的处理策略有哪些？

（3）京东商品图片选择与展示的基础要求有哪些？

练一练：

（1）打开“羽绒服.jpg”素材文件，去除羽绒服上的部分褶皱，提高羽绒服亮度并让羽绒服显示效果更清晰，以达到美化羽绒服的目的。

（2）打开“装生菜的盘子.jpg”素材文件，使用污点修复画笔工具和修补工具对污点进行修复，并进行调色，使其更加鲜嫩。

第5讲

课时内容

京东店铺装修基础

授课时间

90分钟

课时

2

教学目标

þ掌握京东店铺装修分类的相关知识

þ掌握图片管理的相关知识

þ掌握媒体资源管理与分析的方法

þ掌握店铺基本页面的装修方法

教学重点

þ掌握京东装修技巧

教学难点

京东基本页面的相关知识

教学设计

1、教学思路：

（1）通过京东店铺装修的分类，让学员掌握京东的基础知识；

（2）通过对图片管理进行讲解，让学员认识图片管理的基础知识；（3）通过对媒体资源管理与分析进行讲解，让学员掌握媒体的相关操作；（4）通过认识京东店铺装修页面，让学员认识电脑端和移动端的装修页面；（5）通过使用模板装修京东店铺，让学员掌握详情页的装修方式；（5）安排实战训练、拓展延伸和课堂练习，对前面知识进行巩固。

2、教学手段：

（1）通过演示讲解基础知识，讲解结束后进行上机练习和疑难提问；

（2）对于重点操作可以着重演示，并加强举例说明。

3、教学资料及要求：

除教材中的讲解的知识外，还需对京东的装修页面进行浏览，使装修更加快速。

教学内容

知识回顾：

前面讲解了商品图片的特殊处理；下面对京东店铺装修基础进行讲解。

讨论问题：

如何对首页和详情页进行装修？

内容大纲：

具体可结合本章的PPT课件进行配合讲解。

5.1　京东店铺装修的分类

5.1.1 京东常规店铺

5.1.2 1号店

5.1.3 小程序

5.2　图片管理

5.2.1 分类管理

5.2.2 上传图片

5.2.3 移动图片

5.2.4 删除图片

5.3　媒体资源管理与分析

5.3.1 媒体资源的类型

5.3.2 上传媒体资源

5.3.3 媒体资源的关联与审核

5.3.4 删除媒体资源

5.3.5 分析媒体资源情况

5.4　认识京东店铺装修页面

5.4.1 认识电脑端装修页面

5.4.2 认识移动端装修页面

5.5　使用模板装修京东店铺

5.5.1 使用“京东装修市场”装修京东店铺首页

5.5.2 使用“装吧”装修详情页

5.6 实战训练

5.6.1 上传图片到图片管理

5.6.2 使用模板装修详情页

5.7　拓展延伸

5.8　思考练习

小结

1、掌握店铺的装修方式

2、掌握图片的管理方式

思考及作业

想一想：

1、视频被驳回时怎么进行重新申请？

2、自定义页面使用场景假设与建议有哪些？

练一练：

（1）在图片空间中新建文件夹，并将文件夹命名为“休闲鞋首页”，完成后将图片上传到该文件夹中，查看上传图片的图片信息。

（2）熟悉商品主图视频的上传规范并进行上传操作，完成上传、转码后进行视频与商品的关联。

第6讲

课时内容

电脑端首页设计

授课时间

90分钟

课时

2

教学目标

þ掌握店铺首页的基础知识

þ掌握店铺店招的设计与制作方法

þ掌握店铺导航的设计与制作方法

þ掌握商品分类的设计与制作方法

þ掌握图片轮播的设计与制作方法

þ掌握商品推荐的设计与制作方法

教学重点

þ掌握首页的制作方法

教学难点

掌握首页各个板块的制作方法

教学设计

1、教学思路：

（1）通过对店铺首页进行讲解，让学员对首页的基础知识进行介绍；

（2）通过对店铺店招的设计与制作，让学员掌握店招的设计方法；（3）通过对店铺导航条的设计与制作，让学员掌握导航条的设计方法；（4）通过对商品分类的设计与制作，让学员掌握商品分类的设计方法；（5）通过对图片轮播的设计与制作，让学员掌握图片轮播的设计方法；（6）通过对商品推荐的设计与制作，让学员掌握商品推荐的设计方法；（7）安排实战训练、拓展延伸和课堂练习，对前面知识进行巩固。

2、教学手段：

（1）通过演示讲解基础知识，讲解结束后进行上机练习和疑难提问；

（2）对于重点操作可以着重演示，并加强举例说明。

3、教学资料及要求：

除教材中的实例外，还可对其他店铺首页进行制作。

教学内容

知识回顾：

前面的章节中讲解了京东店铺装修基础，下面对电脑端首页设计进行介绍。

讨论问题：

如何进行店铺的装修？

内容大纲：

具体可结合本章的PPT课件进行配合讲解。

6.1　店铺首页

6.1.1 店铺首页设计的注意事项

6.1.2 店铺首页布局的要点

6.2　店铺店招的设计与制作

6.2.1 店招的设计原则

6.2.2 确定店招风格

6.2.3 制作店铺Logo

6.2.4 制作店招

6.3　店铺导航条的设计与制作

6.3.1 基础导航条的设置方法

6.3.2 自定义导航条的设计要点

6.3.3 制作导航

6.4　商品分类的设计与制作

6.4.1 优惠券的设计要点

6.4.2 商品分类的设计要点

6.4.3 制作商品分类图

6.5　图片轮播的设计与制作

6.5.1 图片轮播的设计要点

6.5.2 制作首张图片轮播图

6.5.3 制作第2张图片轮播图

6.6　商品推荐的设计与制作

6.6.1 商品推荐的设计要点

6.6.2 制作商品推荐图

6.7　实战训练

6.7.1 实训要求

6.7.2 实训分析

6.7.3 操作思路

6.8　拓展延伸

6.9　思考练习

小结

首页的装修与制作方法。

思考及作业

想一想：

（1）怎么选择Logo素材？

（2）京东店铺首页的设计技巧有哪些？

练一练：

（1）制作洗衣机店铺的海报。

洗衣机店铺的商品海报应该展示不同洗衣机的性能，通过性价比吸引消费者。

在制作时为了体现简约性和实用性，不用添加过多的装饰。

（2）制作商品促销展示模块。

商品促销展示模块是首页中的一个板块，主要用于介绍12月新品。

在制作该板块时，先要制作横幅海报，再在海报的下方分别展示新品洗衣机。

第7讲

课时内容

电脑端详情页设计

授课时间

90分钟

课时

2

教学目标

þ掌握商品详情页的基础知识

þ掌握焦点图的制作方法

þ掌握商品卖点图的制作方法

þ掌握商品细节图的制作方法

教学重点

þ掌握详情页各个板块的制作方法。

教学难点

如何快速进行详情页的制作。

教学设计

1、教学思路：

（1）认识商品详情页，使学员认识详情页的设计要点、准备工作和原则进行介绍；

（2）讲解焦点图的制作，让学员掌握焦点图的制作方法；（3）讲解商品卖点图的制作，让学员掌握商品卖点图的制作方法；（4）讲解商品信息展示图的制作，让学员掌握商品信息展示图的制作方法；（5）讲解商品细节图的制作，让学员掌握商品细节图的制作方法；（6）安排实战训练、拓展延伸和课堂练习，对前面知识进行巩固。

2、教学手段：

（1）通过演示讲解基础知识，讲解结束后进行上机练习和疑难提问；

（2）对于重点操作可以着重演示，并加强举例说明。

3、教学资料及要求：

除教材中的实例外，可通过布置详情页的作业，并进行制作。

教学内容

知识回顾：

在前面讲解了电脑端首页设计的相关知识，下面将对电脑端详情页设计方法进行介绍。

讨论问题：

如何快速对详情页进行制作？

内容大纲：

具体可结合本章的PPT课件进行配合讲解。

7.1 商品详情页

7.1.1 商品详情页的设计要点

7.1.2 商品详情页的设计思路与准备工作

7.1.3 商品详情页应遵循的原则

7.2 焦点图的制作

7.2.1 焦点图的设计要点

7.2.2 制作焦点图

7.3 商品卖点图的制作

7.3.1 卖点的特征

7.3.2 卖点提炼的原则与方法

7.3.3 制作卖点图

7.4 商品信息展示图的制作

7.4.1 商品参数的常用表达方式

7.4.2 制作信息展示图

7.5 商品细节图的制作

7.5.1 细节图的展示方法

7.5.2 制作细节图

7.6 实战训练

7.6.1 实训要求

7.6.2 实训分析

7.6.3 操作思路

7.7 拓展延伸

7.8 思考练习

小结

掌握详情页的制作与编辑方法。

思考及作业

想一想：

（1）如何抓住详情页设计的重点？

（2）消费者流失原因有哪些？

练一练：

（1）利用收集的素材制作登山包的详情页。

根据登山包的风格，将橄榄色和深绿色作为店铺的颜色，给人以户外登山的清新感，在设计上主要体现旅行包的功能性和实用性。

（2）利用收集的素材制作灯具详情页。

根据灯具的风格，将咖啡色和白色作为店铺的颜色，给人以简约、时尚感。

在制作上，采用了焦点图、场景展示、商品情景、适用风格、信息展示、细节展示等展现方法。

第8讲

课时内容

电脑端其他页面的设计

授课时间

90分钟

课时

2

教学目标

þ掌握专题页的设计与制作方法

þ掌握活动页的制作方法

þ掌握品牌介绍页的制作方法

教学重点

þ掌握其他页面的制作方法

教学难点

如何对专题页面进行制作和设计

教学设计

1、教学思路：

（1）通过专题页的制作，让学员掌握专题页的制作方法；

（2）通过活动页的制作，使学员掌握活动页的绘制方法；（3）通过品牌介绍页的制作，使学员掌握品牌介绍页的绘制方法；（4）安排实战训练、拓展延伸和课堂练习，对前面知识进行巩固。

2、教学手段：

（1）通过演示讲解基础知识，讲解结束后进行上机练习和疑难提问；

（2）对于重点操作可以着重演示，并加强举例说明。

3、教学资料及要求：

对其他店铺的专题页、活动页和品牌介绍页进行制作，展现店铺的活动内容。

教学内容

知识回顾：

在前面讲解了电脑端详情页设计的基础知识，下面对电脑端其他页面的设计进行讲解。

讨论问题：

1、如何快速对活动页进行制作？

2、如何快速对介绍页进行制作？

内容大纲：

具体可结合本章的PPT课件进行配合讲解。

8.1 专题页的制作

8.1.1 专题页的作用

8.1.2 专题页的分类

8.1.3 设计与制作专题页

8.2 活动页的制作

8.2.1 活动页的设计要点

8.2.2 设计与制作活动页

8.3 品牌介绍页的制作

8.4 实战训练

8.4.1 实训要求

8.4.2 实训分析

8.4.3 操作思路

8.5 拓展延伸

8.6 思考练习

小结

1、掌握专题页的制作方法。

2、掌握活动页的制作方法。

3、掌握品牌介绍页的制作方法。

思考及作业

想一想：

1、如何确定活动目的？

2、如何确定活动风格？

练一练：

利用收集的素材制作旅行箱上新页面。

在制作时，先制作上新海报，再根据商品内容制作上新页面。

第9讲

课时内容

切片与装修店铺各个板块

授课时间

90分钟

课时

2

教学目标

þ掌握Photoshop切片的方法

þ掌握使用系统模块快速装修店铺的方法

þ掌握使用代码自定义装修店铺的方法。

教学重点

þ掌握切片技巧。

þ熟悉装修店铺的方法。

教学难点

掌握使用模块装修店铺的方法。

教学设计

1、教学思路：

（1）通过Photoshop切片的使用，让学员掌握切片的使用方法；

（2）通过使用系统模块快速装修店铺，让学员掌握使用模块装修店铺的方法；（3）通过使用代码自定义装修店铺，让学员掌握使用代码自定义装修店铺的方法；（4）安排实战训练、拓展延伸和课堂练习，对前面知识进行巩固。

2、教学手段：

（1）通过演示讲解基础知识，讲解结束后进行上机练习和疑难提问；

（2）对于重点操作可以着重演示，并加强举例说明。

3、教学资料及要求：

对其他店铺进行装修，并在其中掌握各种装修方法。

教学内容

知识回顾：

前面讲解了电脑端其他页面的设计方法；下面对切片与装修店铺各个板块进行讲解。

讨论问题：

1、如何对首页进行快速装修？

2、如何对详情页进行装修？

内容大纲：

具体可结合本章的PPT课件进行配合讲解。

9.1 Photoshop切片的使用

9.1.1 切片的作用

9.1.2 切片的技巧

9.1.3 切片与保存图片

9.2 使用系统模块快速装修店铺

9.2.1 认识系统模块的类型

9.2.2 使用系统模块装修店招

9.2.3 使用系统模块装修店铺轮播图

9.2.4 使用系统模块装修店铺其他版面

9.3 使用代码自定义装修店铺

9.4 实战训练

9.4.1 实训要求

9.4.2 实训分析

9.4.3 操作思路

9.5 拓展延伸

9.6 思考练习

小结

1、掌握切片的操作方法

2、掌握使用系统模块快速装修店铺

3、掌握自定义店铺的装修方法

思考及作业

想一想：

1、如何备份装修效果？

2、如何使用备份图像？

练一练：

（1）打开“休闲鞋.psd”素材文件，对其中的图片进行切片，查看切片后的效果，并保存为“HTML和图像”格式。

（2）在图片空间中新建文件夹，并将其命名为“休闲鞋首页”。

完成后将图片上传到该文件夹，打开店铺装修页面，利用切片后的图片进行店铺装修。

第10讲

课时内容

移动端店铺的装修

授课时间

135分钟

课时

3

教学目标

þ掌握移动端店铺装修的基础知识

þ掌握移动端店铺页面的设计与制作方法

þ掌握移动端店铺装修的后台操作

教学重点

þ掌握移动端店铺装修的重要性。

þ掌握移动端店铺详情页设计的要点和装修方法。

教学难点

如何进行移动端的装修