网店美工教案项目四

学科教案本惠州商贸旅游高级职业技术学校

TeachingPlan

2016年———2017年学年度一学期

The(1st/2na)SemesteroftheAcademicYearfrom2016to2017

学校（School）_____________________

学科（Subject）网店美工

年级（Grade）_____________________

教师（Teacher）_____________________

重庆大学出版社制

0

《网店美工》目录

注意：

项目四商品描述页面制作①按住Ctrl键后单击每个任务

任务一制作宝贝详情页模板即可跳转到对应的教案

②单击按钮可返回目录

③页面设置参数为：

纸张：B5

页边距左：1.5

页边距右：1.5

1

教学

任务一制作宝贝详情页模板

课题

课题课时上课

理论+实作4

类型安排时间

教

1.了解买家购物认识规律。

学

2.了解网店美工不同岗位工作内容

目

3.学习不同网店装修配色、排版知识

标

教学教学

1、23

重点难点

辅助

课件、多媒体、网络

资源

复习①你曾经上网购买过东西吗？

②哪家商品描述最吸引你吗？

引入

③你了解商品详情页各模块功能吗？

教学师生互动

教学过程

手段活动设计

一：消费行为调研报告分析阅读知识窗：

课件

二：宝贝详情页基本模块分析消费行为调

讨论

实作1、前期设计思路研报告分析

2、宝贝详情页的作用

宝贝详情页是提高转化率的入口，激发顾客的消费欲望，树立顾客对

店铺的信任感，打消顾客的消费疑虑，促使顾客下单。优化宝贝详情

对转化率有提升的作用，但是起决定性作用的还是产品本身。提问或讨论：

宝贝详情页

基本模块有

、设计详情遵循的前提

3哪些

宝贝详情页要与宝贝主图、宝贝标题相吻合，宝贝详情页必须是真实

的介绍出宝贝的属性。

假如标题或者主图里写的是韩版女装但是详情页却是的欧美风格，顾讨论：模块功

能各有什么

客一看不是自己想要的肯定会马上关闭页面。

性质特点

2

4、设计前的市场调查

课件

设计宝贝详情页之前要充分进行市场调查，同行业调查，规避同款。网络搜索：在

举例电商平台找

同时也要做好消费者调查，分析消费者人群，分析消费者的消费能力，

讨论一家你认为

消费的喜好，以及顾客购买所在意的问题等。较有代表性

①如何进行调查？的宝贝详情

描述模板

答：通过淘宝指数可以清楚地查到消费者的一切喜好以及消费能力、

课件

实作地域等等很多数据，学会利用这些数据对优化详情页很有帮助!

②如何了解消费者最在意的问题？

答：可以去宝贝评价里面找，在买家评价里面可以挖出很多有价值的

东西，

小组合作

5、调查结果及产品分析

根据市场调查结果以及自己的产品进行系统的分析总结。罗列出消费实训活动：小

组一起完成

者所在意的问题，同行的优缺点。以及自身产品的定位，挖掘自身与

宝贝详情页

众不同的卖点。设计文案

6、关于宝贝定位

根据店铺宝贝以及市场调查确定本店的消费群体。

举个例子：外出旅游住宾馆，有的小旅馆100一夜卖的就是价格，卫

生啥的都没有保障。定位于低端。有的连锁酒店200一夜卖的是性价

比，定位于中端顾客。有的大酒店400一夜卖的就是服务。还有的主

题宾馆卖的是个性等等。

7、关于挖掘宝贝卖点

针对消费群体挖掘出本店的宝贝卖点。

案例分享：一家卖键盘膜的店铺发现评价里中差评很多，大多是抱怨

键盘膜太薄，一般的掌柜可能下次直接进厚一点的货。而这家掌柜则

直接把描述里的卖点改为史上最薄的键盘膜！结果出乎意料！评分直

线上升，评价里都是关于键盘膜真的好薄之类的评语！直接引导并改

变了消费者的心理期望达到非常良好的效果。

8、开始准备设计元素点

比如：卖价格卖款式卖文化卖感觉

卖服务卖特色卖品质卖人气

你卖的是什么呢？

根据消费者分析以及自身产品卖点的提炼，根据宝贝风格的定位，开

始准备所用的设计素材。详情页所用的的文案并确立宝贝详情的用

色，字体、排版等。最后还要烘托出符合宝贝特性的氛围，例如羽绒

3

服，背景可以采用冬天的冰山效果。

要确立的六大元素：配色字体文案构图排版氛围

常见的宝贝描述页构成框架：产品价值+消费信任=下单

详情页上半部分诉说产品价值，后半部分培养顾客的消费信任感。对

于消费信任感不光通过各种证书，品牌认证的图片来树立。使用正确

的颜色，字体，还有排版结构，这些对赢得顾客消费信任感也会起到

重要的作用。详情页每一块组成都有它的价值，都要经过仔细的推敲

和设计。

（一）分析宝贝详情页基本模块相关操作流程

1、宝贝详情页面规划的思路

2、详情页面各模块的作用

三、教学总结及反思

详情页设计完成之后需要配合分析询单率，停留时间，转化率，访问深度

等数据进行不断的优化，上面的宝贝详情页框架只是给大家提供一个参考，不同行

业要不同对待，最好的方法就是收集同行业销量前几名的描述页，分析他们的布局

文案构成，先模仿后创作。做美工的不应该只停留于技术层面，也应该有自己的思

路和想法，有和运营争论的资本，让自己有更大的提升空间。详情页优化的好坏还

与整个运营设计团队的文化素养和学识有密不可分的关系。

作业填写提交实训报告和实训表格

布置预习作业：观看下一节微课内容

教学

后记

4

学科教案本惠州商贸旅游高级职业技术学校

TeachingPlan

2016年———2017年学年度一学期

The(1st/2na)SemesteroftheAcademicYearfrom2016to2017

学校（School）_____________________

学科（Subject）网店美工

年级（Grade）_____________________

教师（Teacher）_____________________

重庆大学出版社制

5

《网店美工》目录

项目四

注意：

任务二制作服装类商品描述①按住Ctrl键后单击每个任务

活动一商品详情设计即可跳转到对应的教案

活动二尺码展示设计②单击按钮可返回目录

活动三平铺展示与产品描述设计③页面设置参数为：

活动四细节展示设计纸张：B5

活动五面料特性设计页边距左：1.5

活动六合并完整的商品描述页页边距右：1.5

6

教学

活动一商品详情设计

课题

课题课时上课

实操4

类型安排时间

教

学

掌握样式设置及图文混排

目

标

教学教学

图文混排图文混排

重点难点

辅助

课件、多媒体、电脑

资源

情景商品详情是在宝贝详情页中首先会被顾客看到的内容，对顾客喜不喜欢这件商品，是否愿意

引入将宝贝详情页看完并最终购买，起着非常重要的作用。

教学师生互动

教学过程

手段活动设计

•【活动背景】阅读知识窗：

课件剪贴蒙版的

讨论在设计商品详情这一部分内容的时候，要充分考虑到客户需求，并尽可能意义以及方

实作法

的将能反映商品特性的内容放置在这一块，吸引顾客继续查看完整的宝贝详情

页。由于是服装类商品，商品详情内容应包含商品主体、产品信息（面料、尺码提问或讨论：

还可以使用

等）内容。

什么方式可

•【活动实施】以快速进行

图文混排

1、首先，在新建画布后，在图层面板上新建一个组，组名为：分类条。

接着，在组内新建一个图层，绘制一个矩形框，并填充黑色；再新建一个图

讨论：图片裁

层，利用【直线工具】绘制一条白色的直线，并复制一份，适当调整位置；

切的方法有

最后输入：“商品详情PRODUCTDETAILS”字样。效果如图4.2-1所示：几种

7

课件

举例小组合作

讨论

图4.2-1分类条设计实训活动：实

践演示及点

2、在图层面板新建一个组，组名为：商品主体。在组内新建一个图层，评

课件

实作在分类条的下方绘制一个白色矩形，并设置其图层样式【外发光】、【投影】，

参数如图4.2-2及图4.2-3所示。

图4.2-2图层样式【外发光】

图4.2-3图层样式【投影】

3、打开素材——“商品主体.jpg”，并将其拖入到白色矩形的上方，创建剪

8

贴蒙版，并调整该图片的大小，让其适应白色矩形框的大小，效果如图4.2-4

所示。

图4.2-4商品主体图设计

4、根据产品的相关信息，见表4-2-1。在商品主体图旁边设计一个产品信

息栏如图4.2-5所示。

表4-2-1产品信息

类别：休闲牛仔

颜色：深灰色

面料：65%棉25%聚酯纤维10%再生聚酯纤维

尺码：29/30/31/32/33/34/35

厚度指数：□薄□适中■厚

弹力指数：□无弹■微弹□弹力

触感指数：□柔软■适中□偏硬

版型指数：□宽松■修身□紧身

9

图4.2-5商品详情完成效果图

5、商品详情部分设计完成后，根据实际需要，利用【裁切工具】对页面的

高度进行裁切，保存源文件，同时生成一个jpg格式的成品文件待用。

作业填写提交实训报告和实训表格

布置预习作业：观看下一节微课内容

教学

后记

10

教学

活动二尺码展示设计

课题

课题课时上课

理论+实操2

类型安排时间

教

学

做好excel表格到ps中的转换、编辑

目

标

教学教学

展示商品表格尺码表的展示

重点难点

辅助

课件、多媒体、网络

资源

情景

作为服装类商品，尺码的说明非常重要，它关乎顾客能否买到合身的服装。

引入

教学师生互动

教学过程

手段活动设计

【活动实施】阅读要点提

课件

示：

讨论1、首先还是先新建一个750像素×1000像素的画布，在设计过程中再根据

实作

需要进行画布裁切或者增加画布高度。

2、在上一个活动中，Alice已经设计好了一个分类条，现在只需要从上一活提问或讨论：

ps中如何直

动中将“分类条”组拖动到新的画布中，进行位置的调整及文字的更改，如图接绘制表格

4.2-6所示。

讨论：

图4.2-6

11

课件

举例3、根据产品的尺码信息，见表4-2-2；打开MicrosoftOffice系列的Excel表

讨论格工具，根据参考表4-2-2进行格式的排版设计。

表4-2-2尺码表小组合作

实训活动：实

课件尺码29303132333435践演示及点

实作腰围76788082848688评

臀围9698100102104106108

前档1919.519.520.520.52121

大腿565860616262.564

脚围35.535.53636373737.5

内长8282.582.5838383.583.5

规格165/74170/76170/78175/82175/84180/86180/88

4、将在Excel中经过排版的表格选中并复制，在Photoshop中进行粘贴，生

成一个新的图层，打开素材文件——“测量参考图.jpg”文件，调整图与表格的位

置。由于服装的测量通常是手工测量，数据可能存在一定的偏差，在设计图上需

要加以说明。完成效果如图4.2-7所示。

图4.2-7尺码表格展示

5、尺码展示部分设计完成后，根据实际需要，利用【裁切工具】对页面的高度

进行裁切，保存源文件，同时生成一个jpg格式的成品文件待用。

作业填写提交实训报告和实训表格

布置预习作业：观看下一节微课内容

教学

后记

12

教学

活动三平铺展示与产品描述设计

课题

课题课时上课

理论+实作2

类型安排时间

教

学

掌握制作设计模板的方法

目

标

教学教学

制作设计模板制作设计模板

重点难点

辅助

课件、多媒体、网络

资源

情景利用商品详情吸引了顾客的注意之后，我们还需要进一步展示商品的相关内容，以便刺激顾客

引入的购买欲望。

教学师生互动

教学过程

手段活动设计

阅读知识窗：

【活动实施】

课件

图片样式设

讨论

1、首先还是先新建一个750像素×1000像素的画布，在设计过程中再根据

实作置

需要进行画布裁切或者增加画布高度。

提问或讨论：

2、中选择了2张正反面图片，为了说明该图片为实物拍摄，还需要加个

详情页需要

实物拍摄说明，添加说明的时候需要注意图文的合理排列，这里可以重点突出哪些内容

“100%”这一文字。对两张平铺图片添加图层样式：【外发光】（混合模式：正常；

颜色：黑色；大小：10像素）、【投影】（不透明度：30%；角度：135度；距

离：像素；大小：像素），并适当旋转张图片，完成效果如图所

10024.2-8

示。

小组合作

实训活动：实

践演示及点

评

课件

13

举例

讨论

课件

实作

图4.2-8平铺展示效果图

3、对服装产品的描述主要是针对服装的细节进行总体描述，吸引顾客接着

往下查看产品细节大图展示，因此对产品描述需要首先归纳其主要细节有几部

分，再进行布局设计。根据本实例商品的实际情况，可以将细节归纳为6部分，

因此在进行产品总体描述的时候可以用2行3列的布局格式来进行描述。确定

布局之后，Alice首先绘制了一个草图，确定产品描述的大致分布，见图4.2-9。

图4.2-9产品描述草图

4、确定了产品描述草图后，Alice开始进行“产品描述”部分的设计，显然当前

画布1000像素的高度已经不足以放下所有的内容，因此Alice需要先调整画布的

14

高度（Ctrl+Alt+C打开画布大小对话框），如图4.2-10所示。接下来在原有组的

基础上新建一个“产品描述”组，组内添加一个说明图标和文字。根据草图，制作产

品描述框，由于6个描述框是相同的，可以通过新建组的方式进行制作：新建一

个“描述框”组，绘制一个白色矩形，添加“描边”图层样式（大小：1像素，不透明

度：50%，颜色：黑色）。复制该白色矩形，修改该矩形的大小，取消“描边”图层

样式，添加“颜色叠加”图层样式（白色以外的颜色均可），添加产品描述文字说明

（用“****”代替），如图4.2-11所示。

图4.2-10调整画布大小

图4.2-11绘制描述框

5、将完成好的“描述框”组复制5份，参考草图进行位置调整，打开素材“产

品描述1.jpg”…“产品描述6.jpg”，将各图片分别利用“创建剪贴蒙版”的方式嵌入

到“白色矩形副本”层（将图片拖移到“白色矩形副本”层的上方，按着Alt键，在

15

两个图层之间单击），调整各描述图的大小及位置；修改每个产品描述图的文字说

明内容。效果如图4.2-12所示。

4-2-12产品描述效果图

6、产品描述部分设计完成后，根据实际需要，利用【裁切工具】对页面的

高度进行裁切，保存源文件，同时生成一个jpg格式的成品文件待用。

作业填写提交实训报告和实训表格

布置预习作业：观看下一节微课内容

教学

后记

16

教学

活动四细节展示设计

课题

课题课时上课

理论+实作4

类型安排时间

教

学

掌握展示商品细节的方法，能够做到统一布局，不杂乱

目

标

教学教学

设置细节展示模板设置细节展示模板

重点难点

辅助

课件、多媒体、网络

资源

情景通过对商品的平铺展示以及产品描述，成功吸引顾客的注意之后，考虑到顾客可能对商品的

细节有更高的要求，还需要再增加一个细节展示内容的设计，通过大图的方式，完整地展示出产

引入

品的细节，供顾客参考并做出选择。

教学师生互动

教学过程

手段活动设计

阅读知识窗：

【活动实施】

课件

图像菜单的

讨论

1、首先还是先新建一个750像素×1000像素的画布，在设计过程中再根据

实作介绍

需要进行画布裁切或者增加画布高度。

2、将第一个活动中Alice设计好的“分类条”组拖动到新的画布中，进行位置

提问或讨论：

的调整及文字的更改。细节展示部分主要是需要展示商品的高清细节，因此可以色差调整中

主要涉及哪

直接用尺寸相等的大图进行展示即可。Alice挑选了6张设计师拍摄的高清大

些方面？

图，还是以创建组的方式进行单个细节展示设计，然后通过复制组的方式完成其

他高清细节展示。

3、首先在新建的“细节展示1”组内新建一个图层，绘制一个680像素×450

像素的矩形（颜色任意选择），再加上文字说明，如图4.2-13所示。

课件

17

举例小组合作

讨论

实训活动：比

一比谁点缀

的又快又好

课件

实作

图4.2-13细节展示组设计

4、将完成好的“细节展示1”组复制5份，由上往下排列，打开素材“细节图

1.jpg”…“细节图6.jpg”，将各图片分别利用“创建剪贴蒙版”的方式嵌入到组内的矩

形图中（将图片拖移到矩形层的上方，按着Alt键，在两个图层之间单击），调

整各细节图的大小及位置；修改每个细节图的文字说明内容。效果如图4.2-14所

示。

图4.2-14细节展示设计效果图

5、细节展示部分设计完成后，根据实际需要，利用【裁切工具】对页面的

高度进行裁切，保存源文件，同时生成一个jpg格式的成品文件待用。

18

作业填写提交实训报告和实训表格

布置预习作业：观看下一节微课内容

教学

后记

19

教学

活动五面料特性设计

课题

课题课时上课

理论+实作4

类型安排时间

教

学掌握图文混排方法，了解面料处理技巧。

目

标

教学教学

图文混排图文混排

重点难点

辅助

课件、多媒体、网络

资源

对服装商品进行了详细的展示及说明之后，在商品描述页的最后，可以对服装所采用的面

情景

料进行进一步的说明，使得顾客在了解服装的设计风格、细节的基础上，还可以对面料有一定

引入

的了解。

教学师生互动

教学过程

手段活动设计

阅读知识窗：

【活动实施】

课件

详情页的意

讨论

1、首先还是先新建一个750像素×1000像素的画布，在设计过程中再根据

实作义

需要进行画布裁切或者增加画布高度。

2、面料特性部分主要是让顾客了解自己所选购的服装是由什么材质制作的，

因此面料特性设计部分需要详细描述其选用的材料来源、优势所在。首先Alice

提问或讨论：

需要跟文案师沟通，获得面料的相关资料，接下来再从摄影师那里挑选了一些如何更好的

展示服装面

与面料相关的图片，然后就可以开始设计了。打开素材：“棉花图.jpg”、“普通棉

料

纤维图.jpg”、“自然棉纤维图.jpg”，对其做适当的大小变形及排版，添加文案资

料；最后再添加一个“剪裁图.jpg”，完成效果如图4.2-15所示。

讨论：

网络搜索：

20

课件

举例

讨论

小组合作

课件实训活动：比

实作一比谁的定

位最准确

图4.2-15面料特性设计效果图

3、面料特性部分设计完成后，根据实际需要，利用【裁切工具】对页面的

高度进行裁切，保存源文件，同时生成一个jpg格式的成品文件待用。

作业填写提交实训报告和实训表格

布置预习作业：观看下一节微课内容

教学

后记

21

教学

活动六合并完整的商品描述页

课题

课题课时上课

理论+实作2

类型安排时间

教

学合并详情页

目

标

教学教学

尺寸剪裁尺寸剪裁

重点难点

辅助

课件、多媒体、网络

资源

通过前面的5个活动，Alice已经完成了服装类商品描述页包含的内容：1、商品详情；2、

情景

尺码展示；3、平铺展示与产品描述；4、细节展示；5、面料特性。接下来她需要将设计好的5

引入

个子页面合并成一张完整的商品描述页提交给运营部。

教学师生互动

教学过程

手段活动设计

阅读知识窗：

【活动实施】

课件

讨论首先打开前5个活动中已完成的JPG格式设计图。通过查看各设计图的图

实作

像大小，计算完整页面需要用到的高度，并新建一个相应高度，宽度为750像素

的页面；接着用【移动工具】将各设计图拖动到新建的页面中，排列整齐；最后

提问或讨论：

将页面保存为格式的商品描述页。的第一个商品描述页的设计就完成

JPGAlice

好了，见图4.2-16。

讨论：

网络搜索：

小组合作

22

课件实训活动：

举例

讨论

课件

实作

图4.2-16完整商品描述页效果图

作业填写提交实训报告和实训表格

布置预习作业：观看下一节微课内容

教学

后记

23

学科教案本重庆市×××职业中学

TeachingPlan

20年———20年学年度学期

The(1st/2na)SemesteroftheAcademicYearfrom20to20

学校（School）_____________________

学科（Subject）网店美工

年级（Grade）_____________________

教师（Teacher）_____________________

重庆大学出版社制

24

《网店美工》目录

项目四

注意：

任务三制作电子类商品描述①按住Ctrl键后单击每个任务

活动一产品展示设计即可跳转到对应的教案

活动二细节展示设计②单击按钮可返回目录

活动三详情介绍设计③页面设置参数为：

活动四合并完整的商品描述页纸张：B5

页边距左：1.5

页边距右：1.5

25

教学

活动一产品展示设计

课题

课题课时上课

理论+实作3

类型安排时间

教

1.了解商品描述页需要包含哪些内容

学

2.掌握图片合成方法

目

3.掌握矩形框、图层样式使用

标

教学教学

1、23

重点难点

辅助

课件、多媒体、网络

资源

复习①你淘宝买过东西吗？

引入②网上店铺的产品是如何展示的？

教学师生互动

教学过程

手段活动设计

1.产品展示前期准备

课件阅读知识窗：

Alice挑选了4张摄影师拍摄的平板电脑的图片，分别用于整体展示、

讨论ps贴入、移

实作

功能说明、视频界面展示、游戏工作界面展示。动、图片变换

2、整体展示图合成

在“平板电脑1.jpg”中，用【魔棒工具】选中平板电脑中心的灰色部提问或讨论：

贴入图片技

分，切换到“合成素材1.jpg”中，【CTRL+A】（全选），【CTRL+C】（复

巧

制），再切换回“平板电脑1.jpg”中，执行菜单【编辑】→【选择性粘

贴】→【贴入】，对贴入的图层进行自由变换【CTRL+T】，参考平板电

讨论：图片可

以进行哪些

脑摆放的角度，对图片进行【缩放】、【透视】等操作，完成将彩色素材