网店美工教案

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

教学内容一、初步了解网店装修

二、网店装修的风格定位

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

教学要求【知识目标】

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

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

3．学会用有效的方法确定网店的装修风格。4．注意网店装修细节问题，避免客流量的流失。【技能目标】

1．能够结合实例简述网店装修的重要性。2．能够分析品牌店铺的装修风格。

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

教学重点

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

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

教学难点

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

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

教学方法讲授法、案例法

课时数3课时

教学内容

第一节初步了解网店装修

一、什么是网店装修

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

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

二、网店装修的重要性

网店经营者对于如何开网店都是在不断的摸索中前进的，大家越来越意识到网店装修的重要性。因此，需要对网店进行美化，以吸引更多的买家，而网店装修是提高网店销售额的法宝，所以一定要重视这个问题。

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

网店首先需要装修，当店铺的准备工作做到一定程度后，就可以进行宣传和推广了。在宣传和经营的过程中，再逐步地去完善。既不能一味地装修，也不能一味地宣传。网店的销售量高低直接与转化率相关，而影响转化率的主要因素包括商品的图片、买家的评价、卖家的促销活动等。在这些因素中，无疑都会涉及网店装修，可见网店装修与网店的营销推广是密不可分的。

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

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

确定店铺的风格就是将头脑中的思维具体化。想要抓住店铺的灵魂，不能只靠网店经营者或美工的个人品位，它需要一个系统的方法。

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

根据店铺销售商品的不同，对商品进行了有效的包装和设计，使各自所呈现出来的视觉效果独具特色，也因此让买家更加容易区分，形成特定的记忆，有助于自身店铺形象的树立。

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

一、装修图片的显示

一定要将装修的图片管理好，使用正规的网络存储空间网站来管理图片，并且即时在电脑上进行备份，以免图片丢失。

二、适量使用闪图和特效

在装修店铺时，要适量使用闪图和特效，因为闪图和特效非常耗费电脑空间，当买家电脑配置不是很高的情况下进入店铺，电脑运行速度会变慢，买家会感觉等待时间过长，不能带给其良好的购物体验。

三、添加音乐要有讲究

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

四、控制装修图片的色彩

巧妙地运用色彩可以使网店页面变得鲜艳、生动、富有活力，但页面的颜色不能太多、太杂，保持统一，要有一个固定的配色方案，对色彩进行规范，减少视觉干扰，最主要的是让内容具有条理性。

五、统一店铺风格

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

六、网店视频切忌过长

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

归纳与提高

通过本章的学习，我们理解了网店装修的作用和重要性，明白了网店装修与转化率的关系，学会了用有效的方法确定网店的装修风格，也要注意网店装修细节问题，避免客流量的流失。

为什么同样的商品，有的网店卖家就能把商品卖出去，并做得风生水起，而有的卖家发布的商品就如同石沉大海，无人问津，买家为什么会对相同的商品有着截然不同的态度呢？除了推广方式和营销手段外，就不得不提到网店装修的作用，即使自己的商品再好，但吸引不来买家也毫无用处。因此，网店装修对于卖家来说，是决定成败的重要因素之一。

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

教学内容一、准备图片素材

二、店铺色彩搭配

三、不拘一格的页面布局

四、准确、抢眼的文字

教学要求【知识目标】

1．掌握拍摄商品照片的基本技巧，并能根据设计风格收集装修素材。2．学会如何对网店页面进行配色，熟知常用的配色方法和技巧。

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

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

【技能目标】

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

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

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

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

教学重点1．拍摄商品照片的基本技巧。

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

3．页面布局的组成因素和布局方式。4．如何打造具有高表现力的文字造型。

教学难点1．拍摄商品照片。

2．常用的配色方法和技巧。3．利用文字营造特定的氛围。

教学方法讲授法、案例法

课时数4课时

教学内容

第一节准备图片素材

一、拍摄商品照片

在网店装修之前，首先需要拍摄足够的商品照片。由于网上购物的特殊性，消费者无法接触到商品的实物，所以商品的所有信息只得以图片的形式传达。

二、收集装修素材

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

第二节店铺色彩搭配

一、常见的配色方法

在网店装修设计中，常用的配色方法主要有同一色相的配色、类似色相配色、相反色相配色、补色色相配色、渐变效果配色和重色调配色。

（一）同一色相配色

以单一颜色为对象，调整其明度和彩度，使其呈现出不同的特色。这种配色在表现一种秩序井然的感觉时比较适用，可以传达出一种安静之美。

（二）类似色相配色

将色环上相连的颜色进行配色，或者将相连色进行明度和彩度上的微调后进行配色，色相之间和谐、协调的特征明显，适合表现温馨、甜美、浪漫的视觉效果。

（三）相反色相配色

使用色环上相反方向对应的颜色进行配色，给人一种强势和生动的感觉。由于色相之间差异较大，更容易营造出一种动态、华丽的视觉效果。

（四）渐变效果配色

这是将所配色的明度、彩度和色相等逐层给予适当的变化之后，再组合起来的一种配色方案，通常用于表现一种和谐、自然的视觉效果。

（五）重色调配色

这是在相对单调的配色氛围中，通过使用其对照色相与色调，从而起到强调效果的一种配色方式。这样的配色会打破之前平淡、枯燥的页面效果，更加引人关注。

二、色彩与市场营销

色彩对于网店营销而言是一个极其重要的影响因素。虽然有些消费者对于网店首页以及商品页面的颜色搭配并不是太在意，但真正让买家最先感知的是视觉，颜色从人的视觉开始传输和渗透，对买家的心理与思维会产生重大的影响。

三、不同色调的展示页面

根据配色方案的不同，商品页面给人的感觉和氛围也有很多种。分析商品的特征，选择一种合适的颜色，能够将商品特征有效地传递给买家，这一点在商品页面的制作上至关重要。

（一）浅色调页面

单纯形象的儿童用品，纯洁礼服等需要体现出清纯感觉的商品，可以使用浅色调进行配色，让页面中的商品形象干净、整洁。

（二）清新色调页面

表现文静、平和感的商品可以使用清新的色调来进行配色，这种高明度和高纯度的颜色可以增加页面的柔和感，营造出高档的氛围。

（三）蓝色调页面

蓝色本身散发着清新、凉爽之感，适合表现夏季商品、电子商品、清洁用品等，并且蓝色具有稳定感，容易让买家产生踏实向上的感觉。

（四）绿色调页面

绿色调适用于环保型的用品，利用绿色对画面进行配色，可以营造出一种干净、整洁的氛围，提高买家在商品使用安全性方面的信赖度，表现出亲近之感。

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

一、页面布局的组成要素

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

背景：为了更有效地营造出和商品或活动主题相统一的页面氛围，可以对背景进行设计，其中可以使用图案、纯色和图像等元素。

图像：网店装修布局中的图像主要指商品照片、模特照片和用于修饰页面的形状、符号和插画等，这些图像本身就包含一定的信息，对商品或者辅助商品进行展示，并为页面营造一种特定的氛围。

文字：主要对商品信息进行说明，是布局元素中最重要的组成部分之一，其设计风格要与商品的风格一致。文字除了用于传递商品信息以外，还可作为修饰元素放在页面中，达到平衡布局的效果。

留白：指布局好商品、文字与修饰元素之后，余下的空白部分空间。如果在布局中不注意留白，将页面填充得满满当当，反而会给人带来一种沉闷的感觉，造成视觉疲劳。

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

买家在浏览商品详情页面时，通常情况下会将图像视为一个整体，然后才将视线定位到比较突出或者抢眼的其他位置，所以在排列商品图像或者展示模特照片时，为了突出商品的特征，可以将一些希望强调的图像放大并布局于显眼的位置，效果会更加理想。

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

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

通常情况下，可以调整一些图像的尺寸，将留白部分的特色发挥出来，从而清除沉闷、狭窄等弊端，产生安静、稳定的感觉。

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

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

（三）棋盘式的页面布局

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

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

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

（五）对称型的页面布局

在页面布局中，即使两侧的组成要素不是按照完全相同的尺寸和排列方式来进行，只要两侧的空间宽度和重量感相同，就可以体现出对称的布局效果，这种布局能够营造出一种文静、安定的整体氛围。

第四节准确、抢眼的文字

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

（一）自由对齐

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

（二）左对齐

左对齐排列通常能够呈现出一种整齐、利落的感觉，并且具有很强的协调感。如果合理调整文字的大小，就可以轻松地制作出层次感。

（三）居中对齐

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

（四）右对齐

这种对齐方式可以让买家的视觉集中到文字的右侧，并且利用每行文字的长短不一在左侧形成一定的波形，从而产生流动感。

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

（一）连笔

连笔的设计是指字体的前后笔画一笔紧连着一笔，呈现出紧密相连的状态，使同一字体或者不同字体的笔画之间流畅、自然地衔接起来。连笔的运用，讲究的是字体书写节奏的流畅，使信息更为突出和鲜明，并产生有效地传达。

（二）省略

字体形态的省略设计，需要对字体的基本结构有全面的掌握，在设计时要充分发挥联想，既要使字体呈现出独特的个性，又要使文字具有可读性，易于区分其字体形态。

（三）装饰

为了让文字的表现更加具象化，或者增强店铺商品的传播力度，在设计某些文字的过程中，可以在不改变文本整体效果的情况下，在文字的适当位置添加一些修饰元素。

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

网店的装修设计除了要符合店铺风格以外，大部分的情况下会随着节气、节日的变化而发生相应的改变。而利用文字这一简单的元素，通过字体形状的变化、修饰元素的添加和色彩的巧妙搭配可以营造出以下特定的氛围。

归纳与 提高

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

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

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

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

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

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

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

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

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

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

教学内容

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

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

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

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

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

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

教学要求【知识目标】

1．掌握如何对商品照片的尺寸、构图进行调整，对商品外形进行校正。2．掌握去除水印、局部擦除、美化处理、调整模特身形、锐化图像的方法。

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

4．掌握调整图片亮度、校正照片白平衡、调整照片色调的方法与技巧。5．能够制作颇具创意感的标题文字，能对段落文字进行艺术化编排。【技能目标】

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

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

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

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

2．去除水印、局部擦除、美化处理、调整模特身形、锐化图像的方法。3．抠出商品图像并替换背景的方法。

4．调整图片亮度、校正照片白平衡、调整照片色调的方法与技巧。5．段落文字进行艺术化编排的方法。

教学难点1．如何对商品外形进行校正。2．熟练掌握Photoshop的使用方法。3．段落文字进行艺术化编排的方法。

教学方法讲授法、案例法

课时数6课时

教学内容

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

一、调整图片大小

网店平台通常会对装修图片的大小有一定的限制，这是为了让图片能够在网上快速地传输和显示，所以在拿到商品照片素材之后，大多数情况下都需要对商品照片的大小进行重新设置，使其符合网店平台的要求。

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

摄影师在拍摄商品照片时，为了将商品全部囊括到画面中，有时可能会忽略照片的构图，或者将不需要的对象也纳入画面中，此时可以使用Photoshop中的裁剪工具或“裁剪”命令来快速裁剪照片中多余的图像，以达到重新定义照片构图的目的。

三、对商品外形进行校正

在拍摄商品图片时，由于拍摄角度等问题有可能造成照片中的商品外形出现畸形，这会影响买家对于商品外形的判断和理解，此时就需要对商品的外形进行校正。

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

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

在商品照片中，如果背景为纯色，且商品的颜色与背景的颜色差异很大，可以使用Photoshop中的快速选择工具和魔棒工具将商品图像快速地抠取出来。

二、抠取规则的商品图片

对于一些外形较为规则、轮廓较为清晰的商品，如外形轮廓为矩形或圆形的商品，可以使用Photoshop中的矩形选框工具和椭圆选框工具进行快速选取。使用这两个工具创建的选区边缘更加平滑，能够更加准确地抠取商品的边缘。

三、抠取多边形对象

有的商品形状并不是规则图形，此时矩形选框工具和椭圆选框工具就不适用了。如果商品的外形为多边形，并且具有非常明显的棱角，使用多边形套索工具可以快速完成商品对象的抠取。

四、抠取轮廓清晰的图片

对于一些边缘轮廓清晰但不规则的商品来说，使用磁性套索工具更容易抠取，但商品与背景之间最好在颜色或明暗上存在较大的反差，否则抠取效果不会太理想。

五、精细抠取图像

如果商品图像的边缘不规整但对于抠图质量又有较高要求的情况下，使用钢笔工具抠取图像会更加精细，让合成的画面更加精致。

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

在网店装修过程中，还会遇到一些抠取起来比较麻烦的图像，如模特杂乱的发丝、半透明的玻璃等，这些图像的抠取就不能依靠单一的工具了，还要用到一些特殊的命令或面板，进行一些较为复杂的操作才能完成。

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

使用Photoshop选区工具创建选区并抠取商品图像的过程中，可以看到这些工具的选项栏中都有一个“调整边缘”按钮。

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

一、去除多余的水印

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

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

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

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

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

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

二、局部去除多余内容

在网店装修的过程中，有时不需要商品广告中的某些内容，或者想使商品照片的背景更加纯粹，这时可以通过局部去除的方法来将多余的内容进行清除，主要使用的是画笔工具。

三、对模特进行美化处理

如果模特的妆面存在瑕疵，就会影响商品的表现，此时就有必要对模特进行“妆面美容”，其中包括祛斑、磨皮、加深妆容色彩等。

四、调整模特身形

有时因为模特自身条件、拍摄角度等原因，会导致展示效果不够理想，这时就需要对模特的身形进行调修，最常进行的就是瘦身处理。

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

为了让商品的细节更加清晰，需要在Photoshop中对商品图像进行锐化处理，方法有两种：一是使用“USM锐化”滤镜进行快速锐化，二是使用“高反差保留”滤镜进行无杂色锐化。

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

一、调整图片的亮度

在商品图片的后期处理中，要先观察照片的整体明暗效果，对于曝光不准确的照片，首先应对全图的明暗进行调整，通过提高亮度和增强暗调，可以让照片的曝光趋于正常。在Photoshop中可以通过“曝光度”“色阶”“曲线”等命令调整商品照片的亮度，让其快速恢复正常。

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

Photoshop中的“曝光度”命令是用于控制照片明暗的有力工具，它的工作原理是模拟数码相机内部的曝光程序对照片进行二次曝光处理，一般用于调整曝光不足或者曝光过度的照片。

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

在Photoshop中打开商品照片后，单击“图像”|“调整”|“色阶”命令，在弹出的“色阶”对话框中可以看到直方图，改变直方图的形状即可改变照片中像素的分布，从而改变商品照片的曝光和层次。

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

“曲线”命令和“色阶”命令一样，都是用于调整图像整体明暗的，不同的是“色阶”命令只能调整亮部、暗部和中间灰度的明暗，而“曲线”命令是应用不同的曲线形态来控制图像的明暗对比效果的，它可以通过控制曲线中任意一点的位置，在较小的范围内调整图像的明暗。

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

在后期处理中必须要对商品照片进行色彩校正，让商品图像恢复其真实的色彩。使用Photoshop中的“色彩平衡”命令可以校正照片的白平衡，让商品图像的色彩更加真实、自然。

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

在商品照片的后期处理中，为了突显店铺的风格，可以适当调整照片的色调，让其色彩表现更独特、更符合商品特质。

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

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

Photoshop提供了各种图层样式，如阴影、发光和斜面等，用于更改图层内容的外观。图层样式与图层内容相链接，当移动或编辑图层的内容时，修改的内容中会应用相同的样式。

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

通过调整图层混合模式可以对图像的颜色进行相加或相减，从而制作出各种特殊的效果。在Photoshop中包含了多种类型的图层混合模式，分别为组合型、加深型、减淡型、对比型、比较型和色彩型。根据不同的视觉需要，可以应用不同的混合模式。

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

蒙版用于控制图层的显示区域，但并不参与图层的操作，蒙版与图层两者之间是息息相关的。在Photoshop中进行网店装修设计时，使用蒙版可以保持画面局部的图像不变，对处理区域的图像进行单独的色调和影调的编辑，被蒙版遮盖起来的部分不会发生改变，通常用于对商品图片进行抠取、编辑局部颜色和影调等操作。

四、制作GIF动态闪图

为了使店铺商品能够全方位地进行展示，达到吸引消费者眼球的目的，一些店铺往往会添加一些动态闪图，也就是GIF格式的动态图像。

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

一、添加文字并设置格式

在网店装修的文字编辑工作中，为处理好的商品照片添加文字是第一个步骤。添加文字后，还可对文字的字体、字号、字间距和颜色等进行调整，使文字的外形和色彩符合当前页面的风格，能够准确地传达出商品的信息。

二、制作创意标题文字

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

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

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

文字外观的艺术化设计是指通过使用矢量图形工具重新绘制文字、在文字上添加修饰形状等方式来制作标题文字。

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

为了更好地调动买家的阅读兴趣，除了让文字的内容更加凝练外，还可以对不得不出现的大段文字进行艺术化的编排设计，以增强文字信息的视觉传达效果。

归纳与提高

通过本章的学习，我们掌握了外形进行校正，去除水印、局部擦除、美化处理、调整模特身形、锐化图像的方法。能够根据网店装修设计的需要，抠出商品图像并替换背景。掌握了调整图片亮度、校正照片白平衡、调整照片色调的方法与技巧。能够制作颇具创意感的标题文字，能对段落文字进行艺术化编排。

由于拍摄环境、拍摄器材以及摄影水平等条件的限制，网店装修的准备阶段拍摄到的商品照片往往是不能直接使用的，需要对照片的尺寸、构图、水印、色差、影调等进行调整和编辑。在完成这些基本操作后，还要根据实际的设计需要进行抠图、添加文字等工作。

第4章店招与导航的设计

教学内容一、了解网店店招与导航

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

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

四、综合实训

五、技能拓展

教学要求【知识目标】

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

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

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

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

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

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

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

教学方法讲授法、案例法

课时数5课时

教学内容

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

一、认识店招与导航

店招和导航位于网店的最顶端，成功的店招通常采用标准的颜色和字体、简洁的设计版面。此外，店招包含精炼，吸引力强的广告语，画面还要具备强烈的视觉冲击力，清晰地告诉买家我们在卖什么，而且通过店招也可以对店铺的装修风格进行定位。

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

店招好比一个店铺的脸面，对店铺的宣传起着非常重要的作用。在设计店招时，要更多地从留住消费者的角度来考虑。

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

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

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

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

第四节综合实训

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

第五节技能拓展

略。

归纳与提高

通过本章的学习，我们了解了网店店招与导航的作用与设计思路，能够通过添加修饰元素、图层样式等方式对店招进行修饰，根据店铺商品图片及图片风格来确定店铺店招和导航的风格及配色。

店招与导航位于网店首页的最顶端，是消费者进入店铺首页后看到的第一个模块，因此是网店首页设计的重中之重。它们的主要作用是向买家展示店铺的店名、所销售商品等，并提供访问店铺各个功能模块的快速通道。

第5章首焦轮播区的设计

教学内容一、首焦轮播区及其设计思路

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

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

四、综合实训

五、技能扩展

教学要求【知识目标】

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

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

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

【技能目标】

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

教学重点

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

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

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

教学方法讲授法、案例法

课时数5课时

教学内容

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

一、认识首焦轮播区

网店的首焦轮播区主要用于告知买家店铺某个时间段的广告商品或者促销活动，位于网店导航条的下方位置。它的主要作用就是告知买家店铺在某个特定时间段的一些动态信息，帮助买家快速了解店铺的活动或者商品信息。

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

首焦轮播区犹如卖家的外在形象一样，在设计时用于搭配的图片不能太复杂，这样才能突出主题。同时，要采用符合店铺商品形象的文字，以避免产生凌乱的感觉。

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

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

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

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

第四节综合实训

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

归纳与提高

通过本章的学习，我们了解了网店首焦轮播区的作用与设计思路，学会了根据店铺推广内容确认首焦轮播区的风格、布局、配色、文字和图片和根据不同的节日氛围制作出合适的首焦轮播区。

首焦轮播区模块占据的面积较大，也是整个网店首页中最醒目、最具有视觉冲击力的部分。如果首焦轮播区做得非常吸引眼球，就会给网店带来很多的流量；如果首焦轮播区设计得很普通，就给网店的转化率造成很大的影响。

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

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

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

三、综合实训

教学要求【知识目标】

1．能够根据服装的类型、色彩和消费群体等来设计首页的配色。2．能够通过合理的布局来突显广告商品，展示出服饰的特点。

3．能够根据服饰的风格与特点制作出独具特色的店铺首页。4．掌握服饰店铺首页设计中的各种技术要点和操作技巧。【技能目标】

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

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

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

教学重点1．根据服装的类型、色彩和消费群体等来设计首页的配色。2．根据服饰的风格与特点制作出独具特色的店铺首页。3．服饰店铺首页设计中的各种技术要点和操作技巧。

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

教学方法讲授法、案例法

课时数3课时

教学内容

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

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

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

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

第三节综合实训

以女装店铺商品模特照片为素材，设计店铺首页。要求设计的首页要能完美展示出店铺的主推商品以及店铺促销活动信息，能够清晰地反映商品的特色，页面色彩简洁而统一，突出夏季、自然等特征。

归纳与提高

通过本章的学习，我们能够根据服装的类型、色彩和消费群体等来设计首页的配色，能够通过合理的布局来突显广告商品，展示出服饰的特点，根据服饰的风格与特点制作出独具特色的店铺首页，掌握了服饰店铺首页设计

中的各种技术要点和操作技巧。

网店首页代表的是店铺的整体形象，其装修效果影响着买家对店铺的第一印象。本章主要以两个服饰店铺的首页设计案例为例，针对不同的人群，从不同的设计角度出发，打造出风格和布局都各具特色的装修效果。

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

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

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

三、综合实训

教学要求【知识目标】

1．根据商品特点对店铺首页的设计元素和风格进行定位，突显出广告商品。2．延长买家在店铺中的停留时间，提高成交率。

3．根据箱包的受众群和外形特点，对店铺首页的色彩、布局等进行定位。4．掌握箱包店铺首页设计中的各种技术要点和操作技巧。

【技能目标】

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

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

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

教学重点

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

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

教学难点

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

教学方法讲授法、案例法

课时数3课时

教学内容

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

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

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

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

第三节综合实训

以拉杠箱包店铺商品照片为素材，设计店铺首页，制作出店招、导航条、首焦轮播区和广告商品区，要求页面效果高端大气、精致简约。

归纳与提高

通过本章的学习，我们能够根据商品特点对店铺首页的设计元素和风格进行定位，突显出广告商品，延长买家在店铺中的停留时间，提高成交率，根据箱包的受众群和外形特点，对店铺首页的色彩、布局等进行定位，掌握了箱包店铺首页设计中的各种技术要点和操作技巧。

第8章商品详情页的设计

教学内容一、商品详情页及其设计思路

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

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

四、综合实训

五、技能扩展

教学要求【知识目标】

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

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

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