《网店美工 第2版》电子教案

《网店美工第2版》电子教案

第1章网店装修美工设计快速入门

一、初步了解网店装修

教学内容二、网店装修的风格定位

三、网店装修中需要注意的问题

【知识目标】

1．理解网店装修的作用和重要性。

2．明白网店装修与转化率的关系。

3．学会用有效的方法确定网店的装修风格。

教学要求4．注意网店装修细节问题，避免客流量的流失。

【技能目标】

1．能够结合实例简述网店装修的重要性。

2．能够分析品牌店铺的装修风格。

3．能够分析品牌店铺在网店装修上的优势。

1．网店装修的作用和重要性。

教学重点

2．学会用有效的方法确定网店的装修风格。

1．网店装修与转化率的关系。

教学难点

2．能够确定网店的装修风格。

教学方法讲授法、案例法

课时数3课时

教学内容

第一节初步了解网店装修

一、什么是网店装修

判定一个网店的好坏，首先要看的就是店铺的装修，没有一个进行专业、恰当的装修，

1

《网店美工第2版》电子教案

哪怕店铺中的商品质量再好，也不一定能销售出去。

二、网店装修的重要性

网店经营者对于如何开网店都是在不断的摸索中前进的，大家越来越意识到网店装修

的重要性。因此，需要对网店进行美化，以吸引更多的买家，而网店装修是提高网店销售

额的法宝，所以一定要重视这个问题。

三、网店装修与转化率的关系

网店首先需要装修，当店铺的准备工作做到一定程度后，就可以进行宣传和推广了。

在宣传和经营的过程中，再逐步地去完善。既不能一味地装修，也不能一味地宣传。网店

的销售量高低直接与转化率相关，而影响转化率的主要因素包括商品的图片、买家的评价、

卖家的促销活动等。在这些因素中，无疑都会涉及网店装修，可见网店装修与网店的营销

推广是密不可分的。

第二节网店装修的风格定位

一、如何确定网店装修的风格

确定店铺的风格就是将头脑中的思维具体化。想要抓住店铺的灵魂，不能只靠网店经

营者或美工的个人品位，它需要一个系统的方法。

二、不同行业的网店装修风格

根据店铺销售商品的不同，对商品进行了有效的包装和设计，使各自所呈现出来的视

觉效果独具特色，也因此让买家更加容易区分，形成特定的记忆，有助于自身店铺形象的

树立。

第三节网店装修中需要注意的问题

一、装修图片的显示

一定要将装修的图片管理好，使用正规的网络存储空间网站来管理图片，并且即时在

电脑上进行备份，以免图片丢失。

二、适量使用闪图和特效

在装修店铺时，要适量使用闪图和特效，因为闪图和特效非常耗费电脑空间，当买家

电脑配置不是很高的情况下进入店铺，电脑运行速度会变慢，买家会感觉等待时间过长，

不能带给其良好的购物体验。

三、添加音乐要有讲究

在店铺中添加音乐时一定要深思熟虑，讲究方式与方法。

四、控制装修图片的色彩

巧妙地运用色彩可以使网店页面变得鲜艳、生动、富有活力，但页面的颜色不能太多、

太杂，保持统一，要有一个固定的配色方案，对色彩进行规范，减少视觉干扰，最主要的

是让内容具有条理性。

五、统一店铺风格

在把握店铺整体风格的同时，还要考虑其稳定性和可更改性。

2

《网店美工第2版》电子教案

六、网店视频切忌过长

卖家为了在激烈的竞争中占据优势，的确需要紧跟这一视频热潮，但要注意控制视频

的时间。

通过本章的学习，我们理解了网店装修的作用和重要性，明白了网店装修

与转化率的关系，学会了用有效的方法确定网店的装修风格，也要注意网店装

修细节问题，避免客流量的流失。

归纳与为什么同样的商品，有的网店卖家就能把商品卖出去，并做得风生水起，

提高而有的卖家发布的商品就如同石沉大海，无人问津，买家为什么会对相同的商

品有着截然不同的态度呢？除了推广方式和营销手段外，就不得不提到网店装

修的作用，即使自己的商品再好，但吸引不来买家也毫无用处。因此，网店装

修对于卖家来说，是决定成败的重要因素之一。

第2章网店装修四大要点：图片、配色、布局与文字

一、准备图片素材

二、店铺色彩搭配

教学内容

三、不拘一格的页面布局

四、准确、抢眼的文字

【知识目标】

1．掌握拍摄商品照片的基本技巧，并能根据设计风格收集装修素材。

2．学会如何对网店页面进行配色，熟知常用的配色方法和技巧。

3．了解页面布局的组成因素和布局方式，学会使用布局来突出画面的层次

感和主次感。

4．能够对段落文字进行合理排列，打造具有高表现力的文字造型，并能利

教学要求

用文字营造特定的氛围。

【技能目标】

1．能够拍摄商品照片，并能根据设计风格收集装修素材。

2．能够对网店页面进行配色。

3．能够了解页面布局的组成因素和布局方式。

4．能够利用文字营造特定的氛围。

3

《网店美工第2版》电子教案

1．拍摄商品照片的基本技巧。

2．常用的配色方法和技巧。

教学重点

3．页面布局的组成因素和布局方式。

4．如何打造具有高表现力的文字造型。

1．拍摄商品照片。

教学难点2．常用的配色方法和技巧。

3．利用文字营造特定的氛围。

教学方法讲授法、案例法

课时数4课时

教学内容

第一节准备图片素材

一、拍摄商品照片

在网店装修之前，首先需要拍摄足够的商品照片。由于网上购物的特殊性，消费者无

法接触到商品的实物，所以商品的所有信息只得以图片的形式传达。

二、收集装修素材

在进行网店装修之前，要根据店铺的设计风格以及商品特点，为网店装修准备所需的

修饰素材。

第二节店铺色彩搭配

一、常见的配色方法

在网店装修设计中，常用的配色方法主要有同一色相的配色、类似色相配色、相反色

相配色、补色色相配色、渐变效果配色和重色调配色。

（一）同一色相配色

以单一颜色为对象，调整其明度和彩度，使其呈现出不同的特色。这种配色在表现一

种秩序井然的感觉时比较适用，可以传达出一种安静之美。

（二）类似色相配色

将色环上相连的颜色进行配色，或者将相连色进行明度和彩度上的微调后进行配色，

色相之间和谐、协调的特征明显，适合表现温馨、甜美、浪漫的视觉效果。

（三）相反色相配色

4

《网店美工第2版》电子教案

使用色环上相反方向对应的颜色进行配色，给人一种强势和生动的感觉。由于色相之

间差异较大，更容易营造出一种动态、华丽的视觉效果。

（四）渐变效果配色

这是将所配色的明度、彩度和色相等逐层给予适当的变化之后，再组合起来的一种配

色方案，通常用于表现一种和谐、自然的视觉效果。

（五）重色调配色

这是在相对单调的配色氛围中，通过使用其对照色相与色调，从而起到强调效果的一

种配色方式。这样的配色会打破之前平淡、枯燥的页面效果，更加引人关注。

二、色彩与市场营销

色彩对于网店营销而言是一个极其重要的影响因素。虽然有些消费者对于网店首页以

及商品页面的颜色搭配并不是太在意，但真正让买家最先感知的是视觉，颜色从人的视觉

开始传输和渗透，对买家的心理与思维会产生重大的影响。

三、不同色调的展示页面

根据配色方案的不同，商品页面给人的感觉和氛围也有很多种。分析商品的特征，选

择一种合适的颜色，能够将商品特征有效地传递给买家，这一点在商品页面的制作上至关

重要。

（一）浅色调页面

单纯形象的儿童用品，纯洁礼服等需要体现出清纯感觉的商品，可以使用浅色调进行

配色，让页面中的商品形象干净、整洁。

（二）清新色调页面

表现文静、平和感的商品可以使用清新的色调来进行配色，这种高明度和高纯度的颜

色可以增加页面的柔和感，营造出高档的氛围。

（三）蓝色调页面

蓝色本身散发着清新、凉爽之感，适合表现夏季商品、电子商品、清洁用品等，并且

蓝色具有稳定感，容易让买家产生踏实向上的感觉。

（四）绿色调页面

绿色调适用于环保型的用品，利用绿色对画面进行配色，可以营造出一种干净、整洁

的氛围，提高买家在商品使用安全性方面的信赖度，表现出亲近之感。

第三节不拘一格的页面布局

一、页面布局的组成要素

为了把商品信息最大限度、有效、正确地传达给买家，就需要进行合理的页面布局。

页面布局的组成要素如下：

背景：为了更有效地营造出和商品或活动主题相统一的页面氛围，可以对背景进行设

计，其中可以使用图案、纯色和图像等元素。

图像：网店装修布局中的图像主要指商品照片、模特照片和用于修饰页面的形状、符

号和插画等，这些图像本身就包含一定的信息，对商品或者辅助商品进行展示，并为页面

营造一种特定的氛围。

文字：主要对商品信息进行说明，是布局元素中最重要的组成部分之一，其设计风格

要与商品的风格一致。文字除了用于传递商品信息以外，还可作为修饰元素放在页面中，

达到平衡布局的效果。

5

《网店美工第2版》电子教案

留白：指布局好商品、文字与修饰元素之后，余下的空白部分空间。如果在布局中不

注意留白，将页面填充得满满当当，反而会给人带来一种沉闷的感觉，造成视觉疲劳。

二、常用的商品详情页面布局

买家在浏览商品详情页面时，通常情况下会将图像视为一个整体，然后才将视线定位

到比较突出或者抢眼的其他位置，所以在排列商品图像或者展示模特照片时，为了突出商

品的特征，可以将一些希望强调的图像放大并布局于显眼的位置，效果会更加理想。

下面将介绍几种较为常用的商品页面的布局方式。

（一）中间对齐模式的页面布局

通常情况下，可以调整一些图像的尺寸，将留白部分的特色发挥出来，从而清除沉闷、

狭窄等弊端，产生安静、稳定的感觉。

（二）对角线排列的页面布局

无论是怎样的自由式布局，都要以指引线为准进行图片和文字的设计和布置。

（三）棋盘式的页面布局

优点就是将众多的图像集合为视觉上的一个整体，形成一种统一感，将浏览者的视线

集中到一处。

（四）左对齐模式的页面布局

这种页面布局会吸引更多的视线，适合用在表现那些有顺序之分的内容上。

6

《网店美工第2版》电子教案

（五）对称型的页面布局

在页面布局中，即使两侧的组成要素不是按照完全相同的尺寸和排列方式来进行，只

要两侧的空间宽度和重量感相同，就可以体现出对称的布局效果，这种布局能够营造出一

种文静、安定的整体氛围。

第四节准确、抢眼的文字

一、网店页面段落文字的排列方式

（一）自由对齐

这种对齐方式排列的文字表现形式较为自由，给人以活泼、自然的感觉，能够表现出

不拘一格的效果。

（二）左对齐

左对齐排列通常能够呈现出一种整齐、利落的感觉，并且具有很强的协调感。如果合

理调整文字的大小，就可以轻松地制作出层次感。

7

《网店美工第2版》电子教案

（三）居中对齐

这种对齐方式可以将视线集中起来，减少周围元素对文字的影响，也是段落文字编排

中常用的一种对齐方式。

（四）右对齐

这种对齐方式可以让买家的视觉集中到文字的右侧，并且利用每行文字的长短不一在

左侧形成一定的波形，从而产生流动感。

二、打造具有高表现力的文字造型

（一）连笔

连笔的设计是指字体的前后笔画一笔紧连着一笔，呈现出紧密相连的状态，使同一字

体或者不同字体的笔画之间流畅、自然地衔接起来。连笔的运用，讲究的是字体书写节奏

的流畅，使信息更为突出和鲜明，并产生有效地传达。

（二）省略

8

《网店美工第2版》电子教案

字体形态的省略设计，需要对字体的基本结构有全面的掌握，在设计时要充分发挥联

想，既要使字体呈现出独特的个性，又要使文字具有可读性，易于区分其字体形态。

（三）装饰

为了让文字的表现更加具象化，或者增强店铺商品的传播力度，在设计某些文字的过

程中，可以在不改变文本整体效果的情况下，在文字的适当位置添加一些修饰元素。

三、利用文字营造特定的氛围

网店的装修设计除了要符合店铺风格以外，大部分的情况下会随着节气、节日的变化

而发生相应的改变。而利用文字这一简单的元素，通过字体形状的变化、修饰元素的添加

和色彩的巧妙搭配可以营造出以下特定的氛围。

通过本章的学习，我们掌握了拍摄商品照片的基本技巧，并能根据设计

风格收集装修素材。学会了如何对网店页面进行配色，熟知常用的配色方法

和技巧。了解了页面布局的组成因素和布局方式，学会了使用布局来突出画

面的层次感和主次感。能够对段落文字进行合理排列，打造具有高表现力的

归纳与

文字造型，并能利用文字营造特定的氛围。

提高

买家进入网店，第一眼体验到的便是视觉上的感受，如果视觉体验不好，

就更不用说去看店铺中的商品了，所以一定不能忽视最基本的店铺装修环节。

本章主要从图片、配色、布局与文字四个方面介绍如何进行网店装修才能吸

引买家眼球，提升转化率。

第3章网店装修六大技能修炼

一、裁图——对照片进行裁剪并纠正角度

二、抠图——选取商品替换背景

三、修图——完美展现商品细节

教学内容

四、调色——校正有色差的商品图片

五、编辑——美化与修饰商品图像

六、文字——商品信息辅助说明

9

《网店美工第2版》电子教案

【知识目标】

1．掌握如何对商品照片的尺寸、构图进行调整，对商品外形进行校正。

2．掌握去除水印、局部擦除、美化处理、调整模特身形、锐化图像的方法。

3．能够根据网店装修设计的需要，抠出商品图像并替换背景。

4．掌握调整图片亮度、校正照片白平衡、调整照片色调的方法与技巧。

教学要求

5．能够制作颇具创意感的标题文字，能对段落文字进行艺术化编排。

【技能目标】

1．能够为海报去除水印。

2．能够对商品图像进行抠图处理。

3．能够将商品模特图片进行校正调色，使其恢复正常色调。

1．如何对商品照片的尺寸、构图进行调整。

2．去除水印、局部擦除、美化处理、调整模特身形、锐化图像的方法。

教学重点3．抠出商品图像并替换背景的方法。

4．调整图片亮度、校正照片白平衡、调整照片色调的方法与技巧。

5．段落文字进行艺术化编排的方法。

1．如何对商品外形进行校正。

教学难点2．熟练掌握Photoshop的使用方法。

3．段落文字进行艺术化编排的方法。

教学方法讲授法、案例法

课时数6课时

教学内容

10

《网店美工第2版》电子教案

第一节裁图——对照片进行裁剪并纠正角度

一、调整图片大小

网店平台通常会对装修图片的大小有一定的限制，这是为了让图片能够在网上快速地

传输和显示，所以在拿到商品照片素材之后，大多数情况下都需要对商品照片的大小进行

重新设置，使其符合网店平台的要求。

二、裁剪商品照片中多余的图像

摄影师在拍摄商品照片时，为了将商品全部囊括到画面中，有时可能会忽略照片的构

图，或者将不需要的对象也纳入画面中，此时可以使用Photoshop中的裁剪工具或“裁剪”

命令来快速裁剪照片中多余的图像，以达到重新定义照片构图的目的。

三、对商品外形进行校正

在拍摄商品图片时，由于拍摄角度等问题有可能造成照片中的商品外形出现畸形，这

会影响买家对于商品外形的判断和理解，此时就需要对商品的外形进行校正。

第二节抠图——选取商品替换背景

一、快速抠取单色背景图片

在商品照片中，如果背景为纯色，且商品的颜色与背景的颜色差异很大，可以使用

Photoshop中的快速选择工具和魔棒工具将商品图像快速地抠取出来。

二、抠取规则的商品图片

对于一些外形较为规则、轮廓较为清晰的商品，如外形轮廓为矩形或圆形的商品，可

以使用Photoshop中的矩形选框工具和椭圆选框工具进行快速选取。使用这两个工具创建的

选区边缘更加平滑，能够更加准确地抠取商品的边缘。

三、抠取多边形对象

有的商品形状并不是规则图形，此时矩形选框工具和椭圆选框工具就不适用了。如果

商品的外形为多边形，并且具有非常明显的棱角，使用多边形套索工具可以快速完成商品

对象的抠取。

四、抠取轮廓清晰的图片

对于一些边缘轮廓清晰但不规则的商品来说，使用磁性套索工具更容易抠取，但商品

与背景之间最好在颜色或明暗上存在较大的反差，否则抠取效果不会太理想。

五、精细抠取图像

如果商品图像的边缘不规整但对于抠图质量又有较高要求的情况下，使用钢笔工具抠

取图像会更加精细，让合成的画面更加精致。

六、抠取复杂或半透明图像

在网店装修过程中，还会遇到一些抠取起来比较麻烦的图像，如模特杂乱的发丝、半

透明的玻璃等，这些图像的抠取就不能依靠单一的工具了，还要用到一些特殊的命令或面

板，进行一些较为复杂的操作才能完成。

11

《网店美工第2版》电子教案

七、调整抠取的商品图像边缘

使用Photoshop选区工具创建选区并抠取商品图像的过程中，可以看到这些工具的选项

栏中都有一个“调整边缘”按钮。

第三节修图——完美展现商品细节

一、去除多余的水印

（一）使用仿制图章工具去除水印

使用仿制图章工具去除水印是比较常用的方法。

（二）使用修补工具去除水印

如果商品图像的背景颜色或图案比较一致，使用修补工具去除水印就比较方便。

（三）使用修复画笔工具去除水印

使用修复画笔工具去除水印的方法与使用仿制图章工具相似。

二、局部去除多余内容

在网店装修的过程中，有时不需要商品广告中的某些内容，或者想使商品照片的背景

更加纯粹，这时可以通过局部去除的方法来将多余的内容进行清除，主要使用的是画笔工

具。

三、对模特进行美化处理

如果模特的妆面存在瑕疵，就会影响商品的表现，此时就有必要对模特进行“妆面美

容”，其中包括祛斑、磨皮、加深妆容色彩等。

四、调整模特身形

有时因为模特自身条件、拍摄角度等原因，会导致展示效果不够理想，这时就需要对

模特的身形进行调修，最常进行的就是瘦身处理。

五、对商品图像进行锐化处理

为了让商品的细节更加清晰，需要在Photoshop中对商品图像进行锐化处理，方法有两

种：一是使用“USM锐化”滤镜进行快速锐化，二是使用“高反差保留”滤镜进行无杂色

锐化。

第四节调色——校正有色差的商品图片

一、调整图片的亮度

在商品图片的后期处理中，要先观察照片的整体明暗效果，对于曝光不准确的照片，

首先应对全图的明暗进行调整，通过提高亮度和增强暗调，可以让照片的曝光趋于正常。

在Photoshop中可以通过“曝光度”“色阶”“曲线”等命令调整商品照片的亮度，让其快速

恢复正常。

（一）用“曝光度”命令进行二次曝光处理

Photoshop中的“曝光度”命令是用于控制照片明暗的有力工具，它的工作原理是模拟

数码相机内部的曝光程序对照片进行二次曝光处理，一般用于调整曝光不足或者曝光过度

的照片。

（二）用“色阶”命令调整商品照片的曝光和层次

12

《网店美工第2版》电子教案

在Photoshop中打开商品照片后，单击“图像”|“调整”|“色阶”命令，在弹出的“色

阶”对话框中可以看到直方图，改变直方图的形状即可改变照片中像素的分布，从而改变

商品照片的曝光和层次。

（三）用“曲线”命令调整不同明暗区域的亮度

“曲线”命令和“色阶”命令一样，都是用于调整图像整体明暗的，不同的是“色阶”

命令只能调整亮部、暗部和中间灰度的明暗，而“曲线”命令是应用不同的曲线形态来控

制图像的明暗对比效果的，它可以通过控制曲线中任意一点的位置，在较小的范围内调整

图像的明暗。

二、校正商品照片白平衡，恢复其真实色彩

在后期处理中必须要对商品照片进行色彩校正，让商品图像恢复其真实的色彩。使用

Photoshop中的“色彩平衡”命令可以校正照片的白平衡，让商品图像的色彩更加真实、自然。

三、调整商品照片色调，营造特殊氛围

在商品照片的后期处理中，为了突显店铺的风格，可以适当调整照片的色调，让其色

彩表现更独特、更符合商品特质。

第五节编辑——美化与修饰商品图像

一、利用图层样式增强特效感

Photoshop提供了各种图层样式，如阴影、发光和斜面等，用于更改图层内容的外观。图

层样式与图层内容相链接，当移动或编辑图层的内容时，修改的内容中会应用相同的样式。

二、利用图层混合模式制作特殊效果

通过调整图层混合模式可以对图像的颜色进行相加或相减，从而制作出各种特殊的效

果。在Photoshop中包含了多种类型的图层混合模式，分别为组合型、加深型、减淡型、对

比型、比较型和色彩型。根据不同的视觉需要，可以应用不同的混合模式。

三、利用蒙版控制图像显示效果

蒙版用于控制图层的显示区域，但并不参与图层的操作，蒙版与图层两者之间是息息

相关的。在Photoshop中进行网店装修设计时，使用蒙版可以保持画面局部的图像不变，对

处理区域的图像进行单独的色调和影调的编辑，被蒙版遮盖起来的部分不会发生改变，通

常用于对商品图片进行抠取、编辑局部颜色和影调等操作。

四、制作GIF动态闪图

为了使店铺商品能够全方位地进行展示，达到吸引消费者眼球的目的，一些店铺往往

会添加一些动态闪图，也就是GIF格式的动态图像。

第六节文字——商品信息辅助说明

一、添加文字并设置格式

在网店装修的文字编辑工作中，为处理好的商品照片添加文字是第一个步骤。添加文

字后，还可对文字的字体、字号、字间距和颜色等进行调整，使文字的外形和色彩符合当

13

《网店美工第2版》电子教案

前页面的风格，能够准确地传达出商品的信息。

二、制作创意标题文字

（一）使用“图层样式”对文字进行修饰

使用图层样式对文字图层进行修饰，可以随时调整其参数，且不会影响文字图层本身

的属性。

（二）文字外观的艺术化设计

文字外观的艺术化设计是指通过使用矢量图形工具重新绘制文字、在文字上添加修饰

形状等方式来制作标题文字。

三、对段落文字进行艺术化编排

为了更好地调动买家的阅读兴趣，除了让文字的内容更加凝练外，还可以对不得不出

现的大段文字进行艺术化的编排设计，以增强文字信息的视觉传达效果。

通过本章的学习，我们掌握了外形进行校正，去除水印、局部擦除、美

化处理、调整模特身形、锐化图像的方法。能够根据网店装修设计的需要，

抠出商品图像并替换背景。掌握了调整图片亮度、校正照片白平衡、调整照

片色调的方法与技巧。能够制作颇具创意感的标题文字，能对段落文字进行

归纳与

艺术化编排。

提高

由于拍摄环境、拍摄器材以及摄影水平等条件的限制，网店装修的准备

阶段拍摄到的商品照片往往是不能直接使用的，需要对照片的尺寸、构图、

水印、色差、影调等进行调整和编辑。在完成这些基本操作后，还要根据实

际的设计需要进行抠图、添加文字等工作。

第4章店招与导航的设计

一、了解网店店招与导航

二、实操案例：婴幼儿商品网店店招与导航设计

教学内容三、实操案例：女装网店店招与导航设计

四、综合实训

五、技能拓展

【知识目标】

1．了解网店店招与导航的作用与设计思路。

2．能够通过添加修饰元素、图层样式等方式对店招进行修饰。

教学要求

3．根据店铺商品图片及图片风格来确定店铺店招和导航的风格及配色。

【技能目标】

1．能够设计网店的店招与导航，其中包含网店名称、收藏提示和导航。

14

《网店美工第2版》电子教案

2．通过学习案例掌握店招与导航的设计方法。

教学重点设计网店的店招与导航。

教学难点设计网店的店招与导航。

教学方法讲授法、案例法

课时数5课时

教学内容

第一节了解网店店招与导航

一、认识店招与导航

店招和导航位于网店的最顶端，成功的店招通常采用标准的颜色和字体、简洁的设计

版面。此外，店招包含精炼，吸引力强的广告语，画面还要具备强烈的视觉冲击力，清晰

地告诉买家我们在卖什么，而且通过店招也可以对店铺的装修风格进行定位。

二、店招与导航的设计思路

店招好比一个店铺的脸面，对店铺的宣传起着非常重要的作用。在设计店招时，要更

多地从留住消费者的角度来考虑。

第二节实操案例：婴幼儿商品网店店招与导航设计

掌握其设计理念、技术要点，并能够进行实操演练。

第三节实操案例：婴幼儿商品网店店招与导航设计

掌握其设计理念、技术要点，并能够进行实操演练。

第四节综合实训

利用提供的素材为食材店铺设计店招和导航，选择淡雅的颜色进行色彩搭配，并采用

偏中国风的设计风格。

第五节技能拓展

略。

通过本章的学习，我们了解了网店店招与导航的作用与设计思路，能够

归纳与

通过添加修饰元素、图层样式等方式对店招进行修饰，根据店铺商品图片及

提高

图片风格来确定店铺店招和导航的风格及配色。

15

《网店美工第2版》电子教案

店招与导航位于网店首页的最顶端，是消费者进入店铺首页后看到的第

一个模块，因此是网店首页设计的重中之重。它们的主要作用是向买家展示

店铺的店名、所销售商品等，并提供访问店铺各个功能模块的快速通道。

第5章首焦轮播区的设计

一、首焦轮播区及其设计思路

二、实操案例：节日主题的首焦轮播区设计

教学内容三、实操案例：新品上架的首焦轮播区设计

四、综合实训

五、技能扩展

【知识目标】

1．了解网店首焦轮播区的作用与设计思路。

2．学会根据店铺推广内容确认首焦轮播区的风格、布局、配色、文字和图片。

教学要求

3．学会根据不同的节日氛围制作出合适的首焦轮播区。

【技能目标】

能够设计店铺首页轮播区模块。

1．学会首焦轮播区的风格、布局、配色、文字和图片。

教学重点

2．学会设计店铺首页轮播区模块。

教学难点学会设计店铺首页轮播区模块。

教学方法讲授法、案例法

课时数5课时

教学内容

16

《网店美工第2版》电子教案

第一节首焦轮播区及其设计思路

一、认识首焦轮播区

网店的首焦轮播区主要用于告知买家店铺某个时间段的广告商品或者促销活动，位于

网店导航条的下方位置。它的主要作用就是告知买家店铺在某个特定时间段的一些动态信

息，帮助买家快速了解店铺的活动或者商品信息。

二、首焦轮播区的设计思路

首焦轮播区犹如卖家的外在形象一样，在设计时用于搭配的图片不能太复杂，这样才

能突出主题。同时，要采用符合店铺商品形象的文字，以避免产生凌乱的感觉。

第二节实操案例：节日主题的首焦轮播区设计

掌握其设计理念、技术要点，并能够进行实操演练。

第三节实操案例：新品上架的首焦轮播区设计

掌握其设计理念、技术要点，并能够进行实操演练。

第四节综合实训

以提供的图片为素材，为某男装店铺设计“新品上架”的首焦轮播区。

通过本章的学习，我们了解了网店首焦轮播区的作用与设计思路，学会了

根据店铺推广内容确认首焦轮播区的风格、布局、配色、文字和图片和根据不

归纳与同的节日氛围制作出合适的首焦轮播区。

提高首焦轮播区模块占据的面积较大，也是整个网店首页中最醒目、最具有视

觉冲击力的部分。如果首焦轮播区做得非常吸引眼球，就会给网店带来很多的

流量；如果首焦轮播区设计得很普通，就给网店的转化率造成很大的影响。

第6章首页设计——服饰店铺

一、实操案例：清新女装店铺首页设计

教学内容二、实操案例：可爱童装店铺首页设计

三、综合实训

【知识目标】

教学要求1．能够根据服装的类型、色彩和消费群体等来设计首页的配色。

2．能够通过合理的布局来突显广告商品，展示出服饰的特点。

17

《网店美工第2版》电子教案

3．能够根据服饰的风格与特点制作出独具特色的店铺首页。

4．掌握服饰店铺首页设计中的各种技术要点和操作技巧。

【技能目标】

1．能够设计首页的配色。

2．能够突显广告商品，展示出服饰的特点。

3．能够制作出独具特色的店铺首页。

1．根据服装的类型、色彩和消费群体等来设计首页的配色。

教学重点2．根据服饰的风格与特点制作出独具特色的店铺首页。

3．服饰店铺首页设计中的各种技术要点和操作技巧。

教学难点根据服饰的风格与特点制作出独具特色的店铺首页。

教学方法讲授法、案例法

课时数3课时

教学内容

第一节实操案例：清新女装店铺首页设计

掌握其设计理念、技术要点，并能够进行实操演练。

第二节实操案例：可爱童装店铺首页设计

掌握其设计理念、技术要点，并能够进行实操演练。

第三节综合实训

以女装店铺商品模特照片为素材，设计店铺首页。要求设计的首页要能完美展示出店

铺的主推商品以及店铺促销活动信息，能够清晰地反映商品的特色，页面色彩简洁而统一，

突出夏季、自然等特征。

通过本章的学习，我们能够根据服装的类型、色彩和消费群体等来设计首

归纳与

页的配色，能够通过合理的布局来突显广告商品，展示出服饰的特点，根据服

提高

饰的风格与特点制作出独具特色的店铺首页，掌握了服饰店铺首页设计中的各

18

《网店美工第2版》电子教案

种技术要点和操作技巧。

网店首页代表的是店铺的整体形象，其装修效果影响着买家对店铺的第一

印象。本章主要以两个服饰店铺的首页设计案例为例，针对不同的人群，从不

同的设计角度出发，打造出风格和布局都各具特色的装修效果。

第7章首页设计——箱包店铺

一、实操案例：时尚拉杆箱店铺首页设计

教学内容二、实操案例：女式箱包店铺首页设计

三、综合实训

【知识目标】

1．根据商品特点对店铺首页的设计元素和风格进行定位，突显出广告商品。

2．延长买家在店铺中的停留时间，提高成交率。

3．根据箱包的受众群和外形特点，对店铺首页的色彩、布局等进行定位。

教学要求4．掌握箱包店铺首页设计中的各种技术要点和操作技巧。

【技能目标】

1．能够根据商品特点对店铺首页的设计元素和风格进行定位。

2．能够根据箱包的受众群和外形特点，对店铺首页的色彩、布局等进行定位。

3．能够掌握箱包店铺首页设计中的各种技术要点和操作技巧。

1．能够根据箱包的受众群和外形特点，对店铺首页的色彩、布局等进行定位。

教学重点

2．能够掌握箱包店铺首页设计中的各种技术要点和操作技巧。

教学难点能够根据箱包的受众群和外形特点，对店铺首页的色彩、布局等进行定位。

教学方法讲授法、案例法

课时数3课时

教学内容

19

《网店美工第2版》电子教案

第一节实操案例：时尚拉杆箱店铺首页设计

掌握其设计理念、技术要点，并能够进行实操演练。

第二节实操案例：女式箱包店铺首页设计

掌握其设计理念、技术要点，并能够进行实操演练。

第三节综合实训

以拉杠箱包店铺商品照片为素材，设计店铺首页，制作出店招、导航条、首焦轮播区

和广告商品区，要求页面效果高端大气、精致简约。

通过本章的学习，我们能够根据商品特点对店铺首页的设计元素和风格进

归纳与行定位，突显出广告商品，延长买家在店铺中的停留时间，提高成交率，根据

提高箱包的受众群和外形特点，对店铺首页的色彩、布局等进行定位，掌握了箱包

店铺首页设计中的各种技术要点和操作技巧。

第8章商品详情页的设计

一、商品详情页及其设计思路

二、实操案例：手表网店商品详情页设计

教学内容三、实操案例：女鞋网店商品详情页设计

四、综合实训

五、技能扩展

【知识目标】

1．了解商品详情页设计的重要性。

2．了解商品详情页的设计思路。

教学要求

3．能够抓住不同商品的特点设计出别具一格的商品详情页。

【技能目标】

能够设计店铺的商品详情页，要求能够全面展示出商品的细节特点。

1．商品详情页设计的重要性和设计思路。

教学重点

2．能够抓住不同商品的特点设计出别具一格的商品详情页。

20

《网店美工第2版》电子教案

1．了解商品详情页的设计思路。

教学难点

2．能够抓住不同商品的特点设计出别具一格的商品详情页。

教学方法讲授法、案例法

课时数5课时

教学内容

第一节商品详情页及其设计思路

一、认识商品详情页

商品详情页是所有店铺营销的落地点。消费者在通过搜索进入店铺后，首先进入的就

是商品详情页，在所有页面中有且仅有详情页承担着下订单购买的职责。

二、商品详情页的设计思路

是否能让买家下订单，要看商品详情页面设计得是否具有足够的吸引力，是否深入人

心。实拍商品照片是最基本的要求，这能让买家明白这是商家的直销商品，质量是完全可

以信赖的。

对于单个商品页面的设计，商品信息的编辑与设计尤为重要。再好的商品，如果没有

精彩的文案与精致的设计，都无法打动买家的心。商品图像和商品信息通过精心的设计排

版，能使商品详情页面更加美观，从而更具吸引力。

除了展示商品本身的外观、性能等各种细节外，还可以让买家在商品详情页中更加直

观地查看店铺内的优惠打折信息，如“包邮”“买一送一”“搭配促销”等，如图8-3所示。

适当地添加一些附加信息可以让店铺和商品的展示更加真实和完整，提升页面转化率。

在商品详情页中，为了让买家真实地体验到商品的实际效果，通常需要设计“使用感

受”“尺码标示”和“商品细节”等内容。由于对商品的不同描述需要在同一个页面中展示，

所以在设计中要注意把握好页面的整体风格。在有必要的情况下，可以使用风格一致的标

题栏对每组信息进行分类显示，让买家能够一目了然地浏览到自己所需要了解的信息。

商品的规格、颜色、尺寸、库存等虽然很容易介绍清楚，但如果设计不好会显得非常

死板。从一件商品的描述，可以看出整个店铺的营销水平。对于商品的描述，第一部分写

什么，第二部分写什么，什么时候添加文字，什么时候进行插图，都是需要经过设计者认

真研究与分析的。

第二节实操案例：手表网店商品详情页设计

掌握其设计理念、技术要点，并能够进行实操演练。

第三节实操案例：女鞋网店商品详情页设计

掌握其设计理念、技术要点，并能够进行实操演练。

21

《网店美工第2版》电子教案

第四节综合实训

以某店铺家纺四件套照片为素材，设计店铺商品详情页，要求完美地展示商品细节，

商品信息要精炼，能够清晰地反映商品的特点，页面设计与色彩搭配要突显出清新、大气

的感觉。

第五节技能扩展

略。

通过本章的学习，我们了解商品详情页设计的重要性和商品详情页的设计

思路，能够抓住不同商品的特点设计出别具一格的商品详情页。

归纳与

商品详情页是整个店铺的亮点和聚焦点，没有一个买家在网购时不看商品

提高

详情页就直接下订单购买的。一个充满设计感的商品详情页能够刺激买家的消

费欲望，促使其快速下订单购买，由此可见商品详情页设计的重要性与必要性。

第9章网店视频的制作

一、实操案例：网店主图视频制作

教学内容

二、互联网活动海报文案的写作

【知识目标】

1．掌握视频转场效果的制作方法。

2．掌握添加标题文字并设置动画效果的方法。

3．掌握添加背景音乐的方式，以及如何导出视频。

4．掌握使用格式工厂转换视频文件的方法。

教学要求5．掌握制作覆叠动画效果的方法。

【技能目标】

1．能够掌握视频转场效果的制作方法。

2．能够添加标题文字并设置动画效果。

3．添加背景音乐的方式，并导出视频。

4．制作覆叠动画效果。

22

《网店美工第2版》电子教案

1．制作视频转场效果。

2．添加标题文字并设置动画效果。

教学重点

3．添加背景音乐的方式，并导出视频。

4．制作覆叠动画效果。

1．制作视频转场效果。

教学难点

2．制作覆叠动画效果。

教学方法讲授法、案例法

课时数2课时

教学内容

第一节实操案例：网店主图视频制作

一、设置视频项目属性并导入素材

二、制作视频转场效果

三、添加标题文字

四、添加背景音乐并导出视频

五、按电商平台要求转换视频文件

第二节实操案例：商品详情页广告视频制作

掌握其设计理念、技术要点，并能够进行实操演练。

通过本章的学习，我们掌握了视频转场效果的制作方法，添加标题文字并

设置动画效果的方法，添加背景音乐的方式，如何导出视频，使用格式工厂转

归纳与换视频文件的方法，制作覆叠动画效果的方法。

提高在目前大多数电商平台的网店页面中，视频主要应用于商品详情页的主图

视频和广告视频中，而从2017年开始，淘宝的主图视频就从9秒放开到60

秒了，网店视频的重要性不言而喻。

第10章移动端店铺装修美工设计

23

《网店美工第2版》电子教案

一、移动端店铺页面结构分析

教学内容

二、移动端店铺装修快速入门

【知识目标】

1．了解移动端店铺页面的框架结构。

2．了解移动端店铺对图片发布的尺寸要求。

教学要求3．掌握移动端店铺装修设计的基本方法。

【技能目标】

1．能够了解移动端店铺页面的框架结构安排。

2．能够设计移动端店铺。

1．掌握移动端店铺页面的框架结构。

教学重点

2．移动端店铺装修设计的基本方法。

1．移动端店铺页面的框架结构。

教学难点

2．移动端店铺装修设计的基本方法。

教学方法讲授法、案例法

课时数2课时

教学内容

第一节移动端店铺页面结构分析

一、移动端店铺页面的框架结构

移动端店铺和PC端店铺一样，也存在着页面之间的跳转以及页面结构层级关系的安排

与布置，而这里所说的页面不再是指店铺的各级网页页面，而是指存在于淘宝App客户端

中的店铺各级界面。

二、移动端店铺图片发布尺寸要求

手机淘宝对图片的发布尺寸做出了非常明确的要求，具体如下：

店招规格尺寸为750像素×254像素；

在图片上添加文字时，中文字号≥30；英文和阿拉伯数字字号≥20；

24

《网店美工第2版》电子教案

图片高度≤960像素（建议高度不超过600像素）；支持JPG、GIF、PNG图片格式；

首页和详情页图片宽度为480像素~620像素（建议不超608像素）。

第二节移动端店铺装修快速入门

一、保持店铺设计风格的一致性

移动端店铺整体的装修与设计要做到风格一致、首尾呼应，否则就不利于店铺整体设

计风格的塑造。不同于PC端店铺，手机移动端属于狭窄视觉展示，如果不依据店铺品牌基

调保持设计风格的一致性，店铺形象的不鲜明感就会带来视觉的混乱体验，也无法让消费

者对店铺形成视觉记忆。

二、采用简单且便于操作的设计方式

智能手机让人们通过指尖便能轻松地与手机进行亲密的接触与互动，操控变得更加随

心所欲，而这一特色也不免影响着依附于智能手机的移动端店铺装修设计。

三、店铺色彩的设计与选择

由于手机屏幕的尺寸有限，所以移动端店铺的浏览面积也相对较小，消费者的视觉也

会受到限制。这时，除了需要对文字进行精简以外，在整体色彩上也要具有鲜明感。

四、合理控制店铺图片与信息的加载时间

大多数消费者选择在手机移动端店铺进行网购，是因为它能带来随时随地购物的便捷

感，所以要合理控制店铺图片与信息的加载时间。

五、店铺信息的精简化处理

由于移动端店铺受手机载体的限制，其显示尺寸有限，店铺信息的呈现也会受限，如

果信息量过多且不做取舍，就会导致信息无法清晰、明确地加载与显示，消费者很难快速

找到自己想要看到的信息，就很有可能会选择离开。因此，对店铺信息进行必要的精简化

处理是让消费者快速浏览与接收信息的关键。

六、保持店铺常换常新

对于移动端店铺的装修设计而言，要保持常换常新的状态，不仅能够满足这部分消费

者对新奇事物的追求，也不会让店铺看起来像是一个无人看管的空店。当然，这一切也需

要建立在店铺品牌设计风格不变的基础上。

通过本章的学习，我们了解了移动端店铺页面的框架结构，移动端店铺对

图片发布的尺寸要求，掌握了移动端店铺装修设计的基本方法。

移动端店铺可以看作是PC端店铺的延续，在进行装修设计时要把握“用

归纳与户体验”这一关键点。毕竟移动端店铺主要是依附于智能手机平台的，而智能

提高手机又让人与机器之间有了更亲密的接触与互动，因此与手机移动端中其他应

用软件或App一样，在设计移动端店铺页面时，要结合智能手机平台的特色，

设计出更加注重交互体验与友好度的页面，只有这样才能博得消费者的欢心，

从而提升转化率。

25

《网店美工第2版》电子教案

第11章移动端店铺首页与详情页装修设计

一、移动端店铺首页装修设计

教学内容

二、移动端店铺详情页装修设计

【知识目标】

1．掌握店招的装修设计方法。

2．掌握轮播图片的装修设计方法。

3．掌握优惠券的装修设计方法。

4．掌握商品分类导航及分类展示的装修设计方法。

教学要求5．了解店铺详情页设计的FABE原则。

6．掌握手机淘宝店铺详情页的设计方法。

【技能目标】

1．能够分析店铺首页设计的优势。

2．能够举例说明FABE原则在移动端店铺详情页设计中的具体应用。

3．能够设计移动端店铺设计详情页。

1．店招的装修设计方法。

2．轮播图片的装修设计方法。

3．优惠券的装修设计方法。

教学重点

4．商品分类导航及分类展示的装修设计方法。

5．店铺详情页设计的FABE原则。

6．手机淘宝店铺详情页的设计方法。

1．优惠券的装修设计方法。

教学难点

2．商品分类导航及分类展示的装修设计方法。