《网店美工（第4版）》-教案 第1--11章 网店装修美工设计快速入门---移动端网店首页与详情页装修设计

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

一、初步了解网店装修

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

三、网店装修中需要注意的问题【学习目标】

1.理解网店装修的重要性

2.明白网店装修与转化率的关系3・学会用有效的方法确定网店装修的风格教学要求

4.注意网店装修细节问题，避免客流量的流失【素养目标】

1.切实体会“打铁还需自身硬”的道理，培养求真务实的职业素养

2.培养一丝不苟、精益求精的工匠精神

1.网店装修的重要性教学重点

2.网店装修的风格定位

1.网店装修与转化率的关系教学难点

2.网店装修的风格定位教学方法讲授法、案例法课时数3课时教学内容第一节初步了解网店装修一什么是网店装修网店装修通过图形图像软件对商品图片进行修饰，利用美学设计对素材、文字和图片进行组合，给人以舒适、直观的视觉感受，让买家从设计好的网店中了解到更多的商品信息和网店信息买家对商品外形的判断和理解，此时需要对商品的外形进行校正使用透视裁剪工具可以校正商品外形的透视角度，还可以在裁剪图像的同时变换图像的透视方式，更加准确地校正商品图片的透视效果，让商品图片恢复正常的透视效果第二节抠图一选取商品替换背景

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

1.快速选择工具使用快速选择工具可以像使用画笔工具绘画一样快速绘制选区，选区会随着鼠标指针的拖动向外扩展，并自动查找和跟随图像的边缘

2.魔棒工具魔棒工具用于选择图像中像素颜色相似的不规则区域，主要通过图像的色调、饱和度和亮度等信息来决定选取的图像范围魔棒工具的选取操作比应用快速选择工具更加便捷，只需在要选取的位置单击即可创建选区二抠取规则的商品图片对一些外形较为规则、轮廓较为清晰的商品，如外形轮廓为矩形或圆形的商品，可以使用Photoshop中的矩形选框工具和椭圆选框工具进行快速选取使用这两个工具创建的选区边缘更加平滑，能够更加准确地抠取商品的边缘

1.用矩形选框工具抠取矩形商品矩形选框工具主要是通过单击并拖动鼠标指针来创建矩形或正方形的选区当商品的外形为矩形或正方形时，使用该工具可以快速地将商品框选出来

2.用椭圆选框工具抠取圆形商品椭圆选框工具的使用方法与矩形选框工具相同，都是通过单击并拖动鼠标指针来创建选区，不同的是椭圆选框工具创建的是椭圆或正圆形的选区该工具同样可以在拖动鼠标指针的同时按住【Shift】键来创建正圆形选区

三、抠取多边形对象如果商品的外形为多边形，并且有非常明显的棱角，使用多边形套索工具可以快速完成对商品图像的抠取

四、抠取轮廓清晰的图片对于一些边缘轮廓清晰色彩但不规则的商品来说，使用磁性套索工具更容易抠取，但商品与背景之间最好在色彩或明暗上存在较大的反差，否则抠取效果不会太理想磁性套索工具特别适合快速选择与背景对比强烈且边缘复杂的图像五精细抠取图像如果商品图像的边缘不规则但对抠图质量又有较高的要求,那么就可以使用钢笔工具抠取图像，钢笔工具不仅可以精细地抠取图像，还能让合成的画面更加精致钢笔工具通过在图像的边缘绘制矢量路径来完成抠图操作

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

1.用“通道”面板抠取复杂图像对一些轮廓较为复杂的图像，可以通过复制通道的方式进行精细抠图先在“通道”面板中复制对比度较为强烈的颜色通道，然后使用画笔工具对通道中的图像进行编辑，接着将通道中的图像创建为选区，并对选区中的图像进行复制，即可完成抠图操作

2.用“色彩范围”命令抠取半透明图像对一些半透明的商品图像，使用“色彩范围”命令可以快速地将其抠取出来七调整抠取的商品图像边缘在使用Photoshop选区工具创建选区并抠取商品图像的过程中，这些工具的选项栏中都有一个“选择并遮住”按钮单击该按钮，或者单击“选择”I选择并遮住”命令，即可打开“选择并遮住”工作区其中包含多个选项，可以对选区边缘的羽化、对比度等参数进行调整，让创建的选区更加准确第三节修图一完美展现商品细节一去除多余的水印

1.使用仿制图章工具去除水印使用仿制图章工具可以在同一图像的同一图层中或不同图层之间进行仿制，也可以在当前打开的且具有相同颜色模式的多个图像文件之间进行仿制，它对复制图像或去除图像中的缺陷很有用

2.使用修补工具去除水印如果商品图片的背景颜色或图案比较一致，使用修补工具去除水印就比较方便修补工具具有自动匹配颜色的功能，其复制效果与周围的色彩融合得较好，这是仿制图章工具所不具备的此外，修补工具会将样本像素的纹理、光照和阴影与源像素进行匹配

3.使用修复画笔工具去除水印选择修复画笔工具，按住【Alt】键的同时在无水印区域单击相似的色彩或图案进行采样,然后在水印区域拖动鼠标指针复制采样图像以覆盖水印修复画笔工具与修补工具一样,也具有自动匹配颜色的功能二局部去除多余内容选择画笔工具，将鼠标指针移至图片背景位置，按住【Alt】键的同时单击，将取样颜色作为前景色，再使用画笔工具在要去除的内容上进行涂抹，用提取的前景色将其覆盖重复上述操作，直到把图片中多余的内容全部覆盖，只保留商品图像三对模特进行美化处理

1.祛斑通过污点修复画笔工具可以快速移除图片中的污点和其他不理想的部分,它使用图像或图案中的样本像素进行绘画，并将样本像素的纹理、光照、透明度和阴影与要修复的像素相匹配直接使用污点修复画笔工具在斑点位置进行涂抹，松开鼠标后，Photoshop会自动对斑点进行清除

2.磨皮在使用“表面模糊”滤镜进行磨皮处理时，可以先在“表面模糊”对话框中设置较小的参数进行尝试，再根据预览效果逐渐调大参数在编辑图层蒙版时，要随时调整画笔工具的笔触大小，以便更准确地涂抹不同面积大小的皮肤除了“表面模糊”滤镜外，使用“高斯模糊”滤镜也可以实现同样的磨皮效果

3.加深妆容色彩如果想让模特的妆容更艳丽，可以使用“色相/饱和度”调整图层打开模特图片，单击“调整”面板中的“色相/饱和度”按钮创建调整图层，在“属性”面板中调整各项参数即可四调整模特身形在Photoshop中可以使用“液化”滤镜对模特的身形进行瘦身打开需要做瘦身处理的模特图片，单击“滤镜”I“液化”命令，弹出“液化”对话框，在左侧工具箱中选择冻结蒙版工具，在不需要变形的位置进行涂抹（涂抹的位置显示为红色）再选择向前变形工具,通过单击并拖动鼠标的方式调整腰部的线条即可五对商品图像进行锐化处理

1.用“USM锐化”滤镜快速锐化商品图像利用“USM锐化”滤镜可以调整图像边缘细节的对比度，并在图像边缘的每侧生成一条亮线和一条暗线，使图像整体看上去更加清晰打开素材图片，单击“滤镜锐化”|USM锐化”命令，在弹出的“USM锐化”对话框中适当调整各项参数，然后单击“确定”按钮

2.用“高反差保留”滤镜无杂色锐化商品图像对商品图像应用“高反差保留”滤镜，结合“图层”面板中的“线性光”图层混合模式就能对商第四节调色校正有色差的商品图片品图像的细节进行无杂色锐化，避免由于锐化过度而产生影响画质的多余杂色

一、调整图片的亮度

1.用“曝光度”命令进行二次曝光处理打开商品图片，单击“图像”|“调整”|“曝光度”命令，在弹出的“曝光度”对话框中设置“曝光度”“位移”“灰度系数校正”等参数，然后单击“确定”按钮，即可看到原本有些暗淡的商品图片变得鲜亮起来

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

3.用“曲线”命令调整不同明暗区域的亮度“曲线”命令是应用不同的曲线形状来控制图像的明暗对比效果的，它可以通过控制曲线中任意一点的位置，在较小的范围内调整图像的明暗，如高光、1/4色调、中间调、3/4色调或暗部打开曝光不足的商品图片，单击“图像”|“调整”|“曲线”命令，在弹出的“曲线”对话框中可以通过拖动鼠标指针来调整曲线的形状，即可改变图像的亮度二校正商品图片的白平衡在后期处理中必须对商品图片进行色彩校正，让商品图片恢复真实色彩使用Photosh叩中的“色彩平衡”命令可以校正图片的白平衡，让商品图片的色彩更加真实、自然打开偏色的商品图片，单击“图像”I“调整”I“色彩平衡”命令，在弹出的“色彩平衡”对话框中进行参数设置，然后单击“确定”按钮即可

三、调整商品图片的色调在商品图片的后期处理中，为了凸显网店的风格，可以适当调整图片的色调，让其色彩表现更独特、更符合商品特质使用“照片滤镜”命令可以模拟相机镜头上安装彩色滤镜的拍摄效果，消除色偏或对图片应用指定的色调打开商品图片，单击“图像”I“调整”I“照片滤镜”命令，在弹出的“照片滤镜”对话框中选择滤镜，并设置“密度”，然后单击“确定”按钮即可第五节编辑一美化与修饰商品图像

一、利用图层样式增强特效感Photoshop提供了各种图层样式，如阴影、发光和斜面等，用来更改图层内容的外观图层样式与图层内容相链接，当移动或编辑图层内容时，修改的内容中会应用相同的样式通过“图层样式”对话框可以创建或设置图层样式，添加的图层样式会出现在图层的下方在“图层样式”对话框中可以编辑应用于图层的样式，或者创建新样式，为同一个图层应用一个或多个图层样式二利用图层混合模式制作特殊效果通过调整图层混合模式可以对图像的颜色进行相加或相减，从而制作出特殊效果Photoshop中包含了多种类型的图层混合模式，包括组合型混合模式、加深型混合模式、减淡型混合模式、对比型混合模式、比较型混合模式和色彩型混合模式根据不同的视觉需要,可以应用不同的混合模式单击“图层”面板中图层混合模式下拉列表框右侧的；按钮，在弹出的菜单中即可选择需要的图层混合模式三利用蒙版控制图像显示效果在Photoshop中进行网店装修时，使用蒙版可以保持画面局部的图像不变，对处理区域的图像进行单独的色调和影调的编辑，被蒙版遮盖起来的部分则不会发生改变，蒙版通常用于对商品图片进行抠取、编辑局部色调和影调等操作使用选区工具在商品图片上创建选区后，单击“添加图层蒙版”按钮，即可在图层蒙版中看到创建的选区，而所创建的图层蒙版与选区的范围有关“蒙版”属性面板中显示了当前蒙版的“密度”“羽化”等选项，可以对这些选项进行设置并同时应用到蒙版中除了创建选区后添加图层蒙版外，还可以使用绘图工具（如画笔工具和渐变工具）对蒙版的效果进行调整四制作动态闪图GIF为了能够全方位地展示网店商品，达到吸引买家注意的目的，一些网店往往会添加一些动态闪图，也就是GIF格式的动态图像制作步骤略第六节文字——商品信息辅助说明一添加文字并设置格式在网店装修的文字编辑工作中，为处理好的商品图片添加文字是第一个步骤添加文字后，还需要对文字的字体、字号、字间距和颜色等进行调整，使文字的外形和色彩符合当前页面的风格，能够准确地传达出商品的信息除了使用横排文字工具为页面添加横排文字以外，还可以使用直排文字工具添加竖排文字创建文字后，“图层”面板中会自动添加相应的文字图层，可以随时对文本图层中的文字进行编辑修改，也可以对文本图层应用图层相关的命令二制作创意标题文字

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

2.文字外观的艺术化设计文字外观的艺术化设计是指通过使用矢量图形工具重新绘制文字、在文字上添加修饰形状等方式来制作文字三对段落文字进行艺术化编排为了更好地调动买家的阅读兴趣，除了让文字的内容更加凝练外，还可以对大段文字进行艺术化的编排设计，以增强文字信息的视觉传达效果由于拍摄环境、拍摄器材及摄影水平等条件的限制，网店装修准备阶段拍摄的商品图片往往是不能直接使用的，需要对图片的尺寸、构图、水印、色差、影调等进行调整和编辑在完成这些基本操作后，还要根据实际的设计需要进行抠图、添加文字等操作归纳与提图通过本章的学习，我们掌握了对商品图片的尺寸、构图进行调整和对商品外形进行校正的方法，能够根据网店装修的需要抠出商品图像并替换背景，还掌握了去除水印、局部擦除、美化处理、调整模特身形、锐化图像的方法，以及调整图片亮度、校正图片白平衡、调整图片色调的方法与技巧，能够制作具有创意感的标题文字，并对段落文字进行艺术化编排第章店标与店招设计4

一、网店店标的设计

二、课堂案例水果网店店标设计

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

四、课堂案例母婴网店店招与导航设计

五、综合实训

六、技能拓展【学习目标】

1.了解网店店标的设计形态及店招的设计思路

2.能够通过添加修饰元素、图层样式等方式对店招进行修饰教学要求

3.能够根据网店商品图片及网店风格来确定店标和店招的风格及配色【素养目标】培养保护知识产权的意识，严格遵守职业规范和职业道德

1.设计网店店标教学重点

2.设计网店店招与导航

1.设计网店店标教学难点

2.设计网店店招与导航教学方法讲授法、案例法课时数5课时教学内容第一节网店店标的设计一店标的设计形态

1.中文型店标中文型店标主要由文字单独构成，适用于多种传播方式，最大的优点是一目了然，买家对中文的接受度最高，好辨识也好记忆

2.非中文型店标英文和字母会给人一种很酷的感觉，能够给人留下深刻的印象如果选择非中文型店标，特别要注意网店所售商品的范围和风格是否和店标的感觉贴近同样，因为英文标志不好理解，所以应该以简单和强烈的视觉冲击力为主

3.图文结合型店标图文结合型店标就是图形与文字相结合的店标形式这种店标既具有图形化的视觉冲击力，又能清楚地传达网店品牌信息，所以应用得非常广泛二不同行业的店标设计在设计店标时，不同的行业和类目，针对不同的消费者和不同的营销目的，会有一些设计上的共性和个性

1.柔美型店标针对女性的行业和类目的店标为了突出柔美、温柔的女人味，在字体上可以选择能体现圆润感觉的圆角字体，或者能够体现女性身段的纤细、高挑感觉的字体此外，把字体做一些变形处理，可以让线条的弧度显得比较女性化颜色的选择也以女性化颜色为主，如粉色、红色、紫色

2.阳刚型店标针对男性的行业和类目的店标在字体风格上要更加刚硬一些，字的棱角也要硬一些，体现出力量感阳刚型店标在颜色上多以黑、白、灰为主，也有用深蓝色的

3.可爱型店标针对婴幼儿类目的店标，在图形的设计上会偏向于简单的线条和明快的色彩线条，小动物元素用得较多第二节课堂案例水果网店店标设计设计理念—x•经过分析和构思，想到用水果的图形来设计，所以第一步就是去素材库找一些卡通水果的素材图形•整体以橘色为主，橘色在暖色中明度高，有着较强的视觉吸引力，并且具有美味和欢乐的寓意•使用绿色作为点缀，象征着健康、安全、无污染二技术要点•使用形状工具和钢笔工具绘制店标中的主体部分•通过添加水果和绿叶素材来突出网店风格•使用圆润的字体作为店标文字

三、实操演练略第三节了解网店店招与导航

一、认识店招与导航店招和导航位于网店的顶端，成功的店招通常采用标准的颜色和字体、简洁的设计版面为了让店招有特点且便于记忆，在设计过程中都会采用简短、醒目的广告语等辅助内容，并通过适当的配图来增强网店的辨识度店招所包含的主要内容包括网店Logo、网店名称、简短的广告语和广告商品等

二、店招与导航的设计思路在设计店招时，要更多地从留住买家的角度来考虑设计者在对店招的设计中，可以使用与网店商品风格一致的色彩和图片，同时添加具有吸引力的广告信息和收藏信息来吸引买家的注意力第四节课堂案例母婴网店店招与导航设计

一、设计理念•以粉绿色为主，使用明度较高的几种色彩来修饰画面，让网店形象更加活泼、可爱•使用浅色的云朵图案作为店招背景，营造出漂亮、灵动的视觉效果•利用分布得当的文字对促销内容进行点缀，使整个画面风格更加统一二技术要点•使用素材制作店招中所需的背景和修饰元素，通过图层蒙版和不透明度来调整编辑的效果•利用“创建文字变形”按钮对文字进行变形，使其与彩带素材完美结合•使用自动形状工具中的“搜索”形状来添加搜索框中的图形三实操演练略第五节综合实训利用提供的素材为女鞋网店设计店招与导航，参照网店所售的女鞋风格进行配色，以营造时尚、甜美的氛围第六节技能拓展在不同的电商平台上，网店的店招与导航设计的内容都是相似的在京东上也可以自由地设计网店的店招和导航在京东上对店招进行装修，可以通过添加模块来操作，对店招与导航的尺寸进行自由定制，将模块布局编辑完成后，再根据布局中模块的尺寸来设计对象店标与店招位于网店首页的最顶端，是买家进入网店首页后看到的第一个模块，归纳与所以是网店首页设计的重中之重它们的主要作用是向买家展示网店的店名、所售的商品等，并提供访问网店各个功能模块的快速通道提高通过本章的学习，我们了解了网店店标的设计形态及店招的设计思路，能够通过添加修饰元素、图层样式等方式对店招进行修饰，还能根据网店商品图片及网店风格来确定店标和店招的风格及配色第章首焦轮播区和商品陈列区设计5

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

二、课堂案例节日主题的首焦轮播区设计

三、商品陈列区视觉设计教学内容

四、课堂案例当季热卖商品陈列区设计

五、综合实训

六、技能拓展【学习目标】

1.了解网店首焦轮播区和商品陈列区的作用与设计思路

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

3.学会根据不同的节日氛围制作合适的首焦轮播区和商品陈列区教学要求【素养目标】

1.培养正确的价值观，自觉传播“正能量”

2.激发设计活力和创新意识

1.设计首焦轮播区教学重点

2.设计商品陈列区

1.设计首焦轮播区教学难点

2.设计商品陈列区教学方法讲授法、案例法课时数5课时教学内容第一节首焦轮播区及其设计思路

一、认识首焦轮播区网店的首焦轮播区主要用于告知买家网店在某个时间段有广告商品或促销活动，其位于网店导航的下方位置，其主要作用就是告知买家网店在某个特定时间段的一些动态信息，帮助买家快速了解网店的活动或商品信息首焦轮播区根据设计的内容可以分为新品上架、网店动态、活动促销等，不同的内容其设计的重点是不同的另外，在首焦轮播区中通常情况下会使用字号较大的文字来突出主要信息,同时搭配字号较小的文字来进行补充说明，并利用文字之间的组合编排来突出艺术感

二、首焦轮播区的设计思路首焦轮播区在设计时用来搭配的图片不能太复杂，这样才能突出主题同时，要采用符合网店商品形象的文字，以避免产生凌乱的感觉第二节课堂案例节日主题的首焦轮播区设计

一、设计理念•在色彩搭配上，使用不同明度的绿色和黄色，展现出一种浪漫的感觉•使用月亮、月饼的形象来营造中秋节的氛围，传递出思念故乡、思念亲人的情感，由此准确地表达出活动的主题•使用外形较小的文字来说明活动的内容，深化活动的主题

二、技术要点•设置“叠加”图层混合模式、“亮度/对比度”调整图层修饰首焦轮播图主题•输入并对文字进行排版，使其更有设计感

三、实操演练略第三节商品陈列区视觉设计

一、营造视觉动线在进行商品展示图片的排列设计时，首先要使用整洁的排列让买家获得轻松感，图片不宜过多，横排图片最好不超过5张，因为过多的图片容易让买家感到浏览压力并产生疲倦感除此之外，通过灵活多变的排列方式形成图片组合的视觉动线也能减少死板的排列组合带来的枯燥与乏味感在示例中，商品陈列区的布局打破了横排图片以固定的数量单一摆放的形式，灵活的排列组合形成了视觉浏览动线，不仅能够缓解买家在浏览时的枯燥感,让买家可以更多地注意到所展示的商品图片，还能让商品的展示有了主次的层级关系

二、商品布局艺术化商品图片的布局是影响商品陈列区整个版式的关键，也是确立整个首页风格的关键为了吸引买家的注意力，可以根据商品的功能、外形特点、设计风格来对商品陈列区布局进行精心的规划与设计，将网店中的商品艺术化地展现出来美观、大气、恰如其分的网店装修可以延长买家在网店中的停留时间，使买家在浏览网页时不易出现视觉疲劳，自然会细心浏览网店，从而实现提高网店销售额的目标

二、网店装修的重要性决定买家是否购买商品的因素主要有首页装修、商品图片、描述专业度、描述可信度、服务保障、质量保证、商品参数、使用情况、优惠力度、客服态度等，其中大部分都是需要依靠网店装修来解决的首页是一个网店的门面，需要用心策划和布局商品图片如果没有经过后期的美化与修饰，是很难让买家产生兴趣的利用图形、广告画和活动文字等元素对首页进行装修，使商品品质感更强，这样更容易被买家接受，无形之中为网店增添了可信任度和关注度网店装修是提高网店销售额的法宝，因此卖家需要对网店进行美化，以吸引更多的买家

三、网店装修与转化率的关系想要新品在上架后得到更多的关注，商品图片的修饰、商品详情页的制作、新品上架广告的制作等都需要依靠网店装修来完成，因此网店装修的好看与否直接决定浏览量的高低网店的销量高低直接与转化率相关，而影响转化率的主要因素包括商品的图片、买家的评价、卖家的促销活动等这些因素都涉及网店装修，可见网店装修与网店的转化率是密不可分的只有经过深思熟虑、精心装修的网店才能引起买家的消费兴趣，进而提高网店的转化率第二节网店装修的风格定位

一、如何确定网店装修的风格网店装修的风格一般体现在网店的整体色彩、色调及图片的拍摄风格上交易平台网站上有多种网店风格，卖家可以选择这些固定的网店模板来进行装修，也可以根据网店内商品的特点和风格重新设计，使网店独具特色，更符合网店的定位确定网店装修风格的方法如下图所示在确定网店风格时，首先需要做的就是通过综合用户研究结果、品牌营销策略，采用内部讨论等方式明确关键词，如“清爽”“专业”“有趣”“活力”等然后邀请用户、网店美工设计人员等参与素材的收集工作，使用图片展示风格、情感接下来分析选择图片的原因,挖掘更多背后的故事和细节最后，将素材图片按照关键词进行分类，提取色彩、配色方案、机埋材质等特征，作为最后的视觉风格产出物

二、不同行业的网店装修风格根据网店销售商品的不同，对商品进行有效的包装和设计，使商品和网店所呈现出来的视觉效果独具特色，在买家心中形成特定的印象，有助于自身网店形象的树立常见的商品陈列区布局方式有3种，包括方块式布局，以及下面将要介绍的折线型布局与随意型布局

1.折线型布局折线型布局就是将商品图片按照错位的方式进行排列在这种布局中，买家的视线会沿着商品图片做折线运动这样的设计可以给人一种清爽、利落的感觉，具有韵律感

2.随意型布局随意型布局就是将商品图片随意地放置在页面中这种随意往往需要营造出一种特定的氛围和感觉，让这些商品之间产生一种联系，否则画面中的商品会由于缺乏联系而显得突兀随意型布局在女装搭配、组合销售中使用得较多，是一种灵活性较强的布局方式第四节课堂案例当季热卖商品陈列区设计

一、设计理念•在色彩搭配上，颜色对比要强烈，以增强视觉冲击力画面主色调采用鲜艳的红色和蓝色进行对比，营造出明亮、大气的视觉效果，这样的颜色设计很容易吸引买家的注意力•使用蓝色矩形图案进行修饰，使画面看起来更加和谐•使用同色系的价格标签作为点缀，增强画面的设计感二技术要点•使用剪贴蒙版来控制图像的显示部分•使用矩形工具绘制图像的背景及修饰形状，并应用图层样式进行修饰三实操演练略第五节综合实训以提供的图片为素材，为某男装网店设计新品上架的首焦轮播区画面中要包含简要的上新内容说明，色彩要大气，具有抖音独特风格，要能营造出强烈的时尚氛围第六节技能拓展淘宝网店首页的首焦轮播区相当于京东自营网店中的“轮播图”在京东网店后台中完成网店布局的设置后，就可以通过设置轮播图的操作来完成网店首页主要区域的装饰在“轮播图”模块中可以添加多种图像，使其轮流播放首焦轮播区和商品陈列区模块占据的面积较大，也是整个网店首页中非常醒目、非常具有视觉冲击力的部分如果首焦轮播区和商品陈列区做得非常有吸引力，就会给网店带来很多流量；如果设计得很普通，就会给网店的转化率造成很大的影响归纳与通过本章的学习，我们了解了网店首焦轮播区和商品陈列区的作用与设计思路，学会了提高根据网店推广内容确认首焦轮播区的风格、布局、配色、文字和图片，还学会了根据不同的节日氛围制作合适的首焦轮播区和商品陈列区■第章首页设计——服饰店6

一、课堂案例甜美女装网店首页设计

一、课堂案例可爱童装网店首页设计

三、教学内容综合实训【学习目标】

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

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

3.能够根据服饰的风格与特点制作出独具特色的网店首页教学要求

4.掌握服饰网店首页设计中的各种技术要点和操作技巧【素养目标】

1.坚持理论联系实践，在实践中深化对理论的认识

2.培养审美能力，形成高尚的审美观

1.服饰网店首页的色彩搭配教学重点

2.服饰网店首页的设计与制作

1.服饰网店首页的色彩搭配教学难点

2.服饰网店首页的设计与制作教学方法课时数讲授法、案例法4课时教学内容第一节课堂案例甜美女装网店首页设计

一、设计理念•在色彩搭配上，使用粉绿色作为页面的主色调，搭配粉色、白色和蓝色的纯色背景,给人一种甜美、大气、简约的感觉•利用分布得当的文字对页面内容进行点缀，起到画龙点睛的作用•页面布局从上到下按照由疏到密的版式进行设计，使页面内容主次得当，由此带来的视觉缓冲可以延长买家的停留时间，激发买家的购买欲望

二、技术要点•利用自定形状工具绘制出首页中所需的修饰形状•利用图层样式对图像进行修饰•利用剪贴蒙版对图像的显示进行控制三实操演练略第二节课堂案例可爱童装网店首页设计

一、设计理念•在色彩搭配上，以紫色和黄色为主，增强了色彩的层次感•页面布局层次分明，黄白相间的色彩结合给人一种纯净、舒适的感觉，使商品的表现力更加突出•主要以圆角矩形作为修饰元素，对商品进行合理的归类和描述，使整个页面内容一目了然，既简单又大气

二、技术要点•使用横排文字工具添加文字，利用“字符”面板对文字的字体、字号、颜色等文字属性进行设置•使用图层蒙版对图像的显示进行控制•使用圆角矩形工具和矩形工具绘制修饰图形三实操演练略第三节综合实训以女装网店商品模特图片为素材、设计网店首页要求设计的首页能完美展示出网店的主推商品及网店的促销活动信息，能够清晰地反映商品的特色，页面色彩简洁、统一，突出夏季、自然等特征网店首页代表的是网店的整体形象，其装修效果影响着买家对网店的第一印象本章主要以两个服饰网店的首页设计案例为例，针对不同的消费群体，从不同的设计角度出发，打造风格和布局各具特色的网店装修效果归纳与通过本章的学习，我们能够根据服装的类型、色彩和消费群体等来设计首页的配色，提高能够通过合理的布局来凸显广告商品，展示出服饰商品的特点，能够根据服饰的风格与特点制作出独具特色的网店首页，还掌握了服饰网店首页设计中的各种技术要点和操作技巧第章首页设计---------箱包网店7・、课堂案例时尚拉杆箱网店首页设计

二、课堂案例女式箱包网店首页设计

三、教学内容综合实训【学习目标】

1.根据商品特点对网店首页的设计元素和风格进行定位，凸显出广告商品，延长买家在网店中的停留时间，提高成交率教学要求

2.根据箱包的消费群体和外形特点对网店首页的色彩、布局等进行搭配

3.掌握箱包网店首页设计中的各种技术要点和操作技巧【素养目标】提升动手实践能力，用图像技术讲好中国故事教学重点

1.箱包网店首页的色彩搭配

2.箱包网店首页的设计与制作

1.箱包网店首页的色彩搭配教学难点

2.箱包网店首页的设计与制作教学方法讲授法、案例法课时数4课时教学内容第一节课堂案例时尚拉杆箱网店首页设计

一、设计理念•在首焦轮播区以几何图形作为背景，让图片显得协调而统一，搭配颇具设计感的标题文字布局，更好地突出网店的主题信息•在商品陈列区，先使用6个广告图对重点商品进行展示，再对其他商品进行展示，使页面布局看上去更加灵活，并具有一定的设计感•搭配黑色的文字来说明商品信息，整齐划一，简洁大气

二、技术要点•为图片创建图层蒙版，对图像的显示进行控制•利用“动感模糊”滤镜为图片添加模糊效果•使用“羽化”命令羽化选区，制作商品投影效果•使用形状工具绘制各种修饰形状三实操演练略第二节课堂案例女式箱包网店首页设计

一、设计理念•在配色上使用黄色作为页面背景色，使用橙色作为点缀色鲜亮的配色给人以纯粹的感觉，将商品时尚、复古的特质展现得恰到好处•首焦轮播区通过颇具设计感的标题文字布局吸引买家的视线，搭配简约的女包商品图像，让买家一眼就能看到网店销售的主要商品，从而充分地传递出网店信息•商品陈列区通过不同的商品布局让页面显得协调而不单一，激发买家进一步深入了解商品的欲望

二、技术要点•使用钢笔工具绘制不规则形状作为修饰元素•创建剪贴蒙版，控制图像的显示区域•使用自定形状工具绘制心形形状和五角星形状

三、实操演练略第三节综合实训以精品女包网店商品图片为素材，设计网店首页，制作店招、导航、首焦轮播区、优惠券、商品分类区和爆款推荐区，要求页面效果大气、精致、简约网店销售的商品不同，首页的设计风格也会有所区别本章我们主要以设计箱包网店首页为例，详细介绍如何为时尚拉杆箱网店和女士箱包网店打造出非同凡响的首页效果归纳与提高通过本章的学习，我们根据商品特点对网店首页的设计元素和风格进行定位，凸显出广告商品，延长买家在网店中的停留时间，提高成交率，根据箱包的消费群体和外形特点对网店首页的色彩、布局等进行搭配，还掌握了箱包网店首页设计中的各种技术要点和操作技巧第章商品详情页设计8

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

二、课堂案例零食网店商品详情页设计

二、课堂案例数码网店商品详情页设计

四、教学内容综合实训

五、技能拓展【学习目标】

1.了解商品详情页设计的重要性教学要求

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

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

1.学会通过自己的作品诠释“不忘本来、吸收外来、面向未来”

2.把热爱祖国、热爱人民、热爱传统文化的思想融入设计中

1.商品详情页的设计思路教学重点

2.商品详情页的设计与制作

1.商品详情页的设计思路教学难点

2.商品详情页的设计与制作教学方法讲授法、案例法课时数5课时教学内容第一节商品详情页及其设计思路一认识商品详情页商品详情页是所有网店营销的落地点买家通过搜索商品进入网店，首先进入的就是商品详情页，在所有页面中有且仅有商品详情页承担着让买家完成下单购买的职责商品详情页主要用于展示单个商品的细中信息，它的精致程度和设计感直接影响买家对商品的认知二商品详情页的设计思路实拍商品是最基本的要求，要让买家觉得这家网店的商品质量是完全可以信赖的对于单个商品页面的设计而言，商品信息的编辑与设计尤为重要除了展示商品本身的外观、性能等细节外，商品详情页中还可以直观地展示网店内的优惠打折信息，如“折扣”“买井”“搭配促销”“优惠券”等适当地添加些附加信息可以让网店和商品的展示更加真实和完整，从而提高页面转化率在商品详情页中，为了让买家真实地体验到商品的实际效果，通常需要设计“使用感受”“尺码标示”和“商品ar节”等内容由于对商品的不同描述需要在同一个页面中展示，所以在设计中要注意把握好页面的整体风格第二节课堂案例零食网店商品详情页设计

一、设计理念•商品开心果的颜色为高明度的米白色，所以首焦海报的颜色选择了饱和度较高的黄色渐变色进行搭配，背景色选择灰绿色，产生活泼、清新的视觉效果•采用错落有致的图像放置方法，让页面版式显得灵活多变，富有设计感•使用矩形对每组商品细节进行分割，使买家能够更加直观、准确地了解商品信息二技术要点•使用矩形工具绘制出页面中所需的矩形•使用“投影”图层样式为海报文字添加投影效果•使用图层蒙版来控制图像的显示范围三实操演练略第三节课堂案例数码网店商品详情页设计

一、设计理念•在色彩搭配上，选择以蓝色作为页面背景，用浅蓝色块来修饰•使用“渐变叠加”图层样式修饰装饰形状，起到聚焦视线的作用•文字的编排别具一格，有让人眼前一亮的感觉，便于买家与商品产生情感共鸣

二、技术要点•使用“字符”面板设置文字属性•利用图层蒙版控制修饰图形的显示•使用矩形工具、圆角矩形工具、椭圆工具与直线工具绘制装饰形状三实操演练略第四节综合实训以某网店家纺四件套图片为素材设计网店商品详情页，除了全面地展示商品细节之外，商品信息要精练，能够清晰地反映商品的特点，同时页面设计与色彩搭配要凸显清新、大气的感觉第五节技能拓展在京东平台上设计与制作商品详情页的方法与其大体相同，不同的是后者对商品详情页进行了大致的分类，分类以标签的形式显示出来如果要在“商品介绍”选项卡中使用网站默认的标题栏对商品详情进行介绍，那么标题栏的后面会统一显示广告语和Logo,设计者只需直接添加文字和图片即可除了上面提到的对商品详情页的设置不同外，在京东上设计与制作商品详情页都可以参考淘宝的设计与制作方法，即利用图片、文字和修饰元素来说明商品的特点，从各个角度完美地呈现出商品的细节商品详情页是整个网店的亮点和聚焦点，通常情况下买家在网购时是看了商品详情页之后再下单购买的一个充满设计感的商品详情页能够激发买家的消费欲望，促归纳与提高使其快速下单购买，由此可见商品详情页设计的重要性与必要性通过本章的学习，我们了解了商品详情页设计的重要性和设计思路，并能抓住不同商品的特点设计出别具一格的商品详情页第章商品短视频制作9-、商品短视频的作用

二、商品主图视频制作

三、商品详情页视频制作

四、综合实教学内容训【学习目标】

1.掌握修整视频素材的方法

2.掌握添加视频字幕的方法

3.掌握为视频添加滤镜和转场的方法4・掌握制作运动追踪动画的方法教学要求

5.掌握添加音效的方法

6.掌握导出视频的方法【素养目标】紧跟电子商务行业发展，锻炼实践操作能力

1.商品主图视频制作教学重点

2.商品详情页视频制作

1.商品主图视频制作教学难点

2.商品详情页视频制作教学方法讲授法、案例法课时数5课时教学内容第一节商品短视频的作用商品短视频可以帮助卖家全方位地宣传商品，它替代了传统的图文表达形式，虽然只有短短的十几秒或几十秒的时间，却能让买家非常直观地了解商品的基本信息和设计亮点，多感官体验商品，从而节约买家进行咨询的时间，有助于让买家快速下单商品短视频的主要作用如下

1.增强视听刺激，激发购买欲

2.多方位、多角度地展示商品的细力特征第三节网店装修中需要注意的问题

一、装修图片的显示装修网店所用的图片要存放在卖家自己账户的网络空间中，使用某些免费的存储空间或者盗用别人的图片，可能会出现图片正常显示几天后就不能显示的情况因此，要将装修的图片管理好，使用正规的网络存储空间来管理图片，并且及时在计算机上进行备份，以免图片丢失

二、适量使用闪图和特效在装修网店时要适量使用闪图和特效，因为闪图和特效会占用计算机空间，计算机配置不是很高的买家进入网店后计算机运行速度就会变慢，买家会感觉等待时间过长，以致购物体验变差过多的闪图和特效也很容易让买家感到视觉疲劳，而且会喧宾夺主，突出不了商品的重点

三、添加音乐要有讲究在网店中添加音乐时要深思熟虑如果买家不开音响，添加的音乐不仅毫无作用，还会占用网络数据的传输空间；如果买家开了音响，进入网店后，网店音乐与买家播放器的音乐出现重合，买家可能会立刻关闭网店页面如果确实想添加音乐，建议添加一些比较柔和、悦耳的音乐，让人感觉舒服的音乐会让买家在店内的停留时间变长

四、控制装修图片的色彩巧妙地运用色彩可以使网店页面变得鲜艳、生动、富有活力，但是网店页面的颜色不能太多、太杂，要保持统一，要有一个固定的配色方案对色彩进行规范，以减少视觉干扰颜色过多容易造成版面的视觉效果复杂、混乱，对买家获取商品信息毫无帮助，甚至可能会带来负面影响五网店风格的选择在网店装修之初就要确定风格，通常情况下会选用“默认风格”，因为商品的图片大多是通过抠图抠出来的，背景是白色的，“默认风格”的背景基本上也是白色的，整体会显得简明、舒适如果商品图片的背景不是白色的，就可以选择其他风格此外，在把握网店整体风格的同时，还要考虑其稳定性和可更改性六网店视频切忌过长要想提高商品的转化率，就要在短时间内将有效的信息传递给买家一张静态的图片通常一两眼就能看完，而一段视频却需要花上几秒甚至更多的时间因此，尽管各电商平台规定的视频时长上限并不短，但是卖家在制作视频时仍然要控制好时间，让买家能在极短的时间内了解商品并做出购买的决定对于同样的商品，有的卖家就能把商品卖出去，生意做得风生水起，有的卖家发归纳与布的商品则会石沉大海，无人问津买家为什么会对相同的商品有截然不同的态度呢？除提高了推广方式和营销手段外，网店装修的作用也不可小觑商品再好，吸引不来买家也毫无用处因此，对于卖家来说，网店装修是决定网店成败的重要因素之一通过本章的学习，我们理解了网店装修的重要性，明白了网店装修与转化

3.提供贴心、专业的服务

4.提高网店商品转化率第二节商品主图视频制作主图视频是在网店主图位置所展示的短视频，以影音形式动态地呈现商品信息，能够在较短的时间内有效地提升买家对商品的认知与了解，促使其做出购买的决定一设置视频项目属性并导入素材在会声会影中新建与保存项目，并将要用到的相关视频、音频等素材都添加到素材文件夹中，再将素材插入时间轴中，构建视频的初始形态操作步骤略

二、修整素材对时间轴中的素材进行修整，包括调整音量、修剪素材，以及对视频素材进行变速处理操作步骤略

三、添加字幕在短视频中添加商品信息字幕操作步骤略四导出商品主图视频商品主图视频制作完成后，可以快速导出视频在导出视频时，应根据项目属性设置相应的配置文件操作步骤略

五、按电商平台要求转换视频文件使用会声会影导出的AVI格式的视频文件往往很大，会超过电商平台对视频大小的要求使用“格式工厂”可以重新将文件转换为符合电商平台要求的视频文件操作步骤略第三节商品详情页视频制作商品详情页视频侧重于展示商品的细节、材质、用法等，对商品主图视频缺少部分的信息进行补充，呈现更完整的商品信息

一、设置视频项目属性并导入素材在会声会影中创建素材文件夹，将要用到的相关图片、视频和音频等素材都添加到素材文件夹中，再将素材插入时间轴中操作步骤略二修整素材对时间轴中的素材进行修整，包括调整音量、设置视频素材变速、设置停帧素材，以及为素材添加自定义动作操作步骤略三添加滤镜效果为素材添加滤镜，可以使素材效果更加丰富，实现各种特殊的效果在此为图片素材添加“气泡”滤镜操作步骤略

四、添加转场效果在素材之间添加转场效果，使素材之间的切换形成动画效果，提升影片的观赏性和流畅性操作步骤略五制作运动追踪动画运动追踪可以跟踪视频画面中的某个点，以添加素材或动态马赛克效果，让字幕或图示完美地附着在移动的物体上，随着物体的移动进行移动在此利用“运动追踪”和“匹配动作”功能制作商品结构的图示动画操作步骤略

六、添加字幕在短视频中添加字幕操作步骤略

七、添加音效并导出视频在短视频中添加音效素材，渲染画面氛围，给观众带来更多的真实感，然后导出视频文件操作步骤略第四节综合实训将视频、图片、音乐等素材导入会声会影程序中，将素材添加到时间轴面板中并进行修整，为素材添加滤镜效果，在素材之间添加转场效果，在视频素材中添加字幕并制作运动追踪动画，然后导出手表详情页视频目前，网店平台中的很多图文内容正在被更直观、更生动的短视频所取代商品短视频能够让买家快速了解商品的特点、功能与品牌理念等，迅速吸引买家的兴趣，让其产生购买归纳与的意愿本章通过两个实训案例详细介绍了利用会声会影制作商品主图视频和商品详情提高页视频的方法通过本章的学习，我们掌握了修整视频素材、添加视频字幕、为视频添加滤镜和转场、制作运动追踪动画、添加音效，以及导出视频的方法与技巧■第章移动端店装修美工设计10i

一、移动端网店页面结构分析教学内容

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

三、课堂案例美妆商品直播主图设计【学习目标】

1.了解移动端网店页面的框架结构

2.了解移动端网店图片发布的尺寸要求

3.掌握移动端网店装修的基本方法教学要求

4.掌握移动端网店直播主图的制作方法【素养目标】

1.提高版权保护意识，遵纪守法

2.培养网络安全意识，安全、正确、合理地使用网络资源

1.移动端网店装修设计教学重点

2.制作移动端网店直播主图

1.移动端网店装修设计教学难点

2.制作移动端网店直播主图教学方法讲授法、案例法课时数3课时教学内容第一节移动端网店页面结构分析一移动端网店页面的框架结构移动端网店和PC端网店一样，也存在着页面之间的跳转及页面结构层级关系的安排与布置问题为了便于管理，手机淘宝已经给卖家划分好了相应的网店页面框架结构卖家虽然可以不必考虑图标、按钮等UI（用户界面）设计，也不必过多地考虑移动端网店页面的结构组成，却要在已有的框架结构中添加能够促进买家消费的内容此外，根据框架结构给所添加的内容设置相应的商品或活动链接也尤为重要

二、移动端网店图片发布尺寸要求为了规范设计，手机淘宝对图片的发布尺寸做出了非常明确的要求，具体如下•店招规格尺寸为750像素X254像素•在图片上添加文字时，中文字号230；英文和阿拉伯数字字号220•图片高度W960像素（建议高度不超过600像素）；支持JPG、GIF、PNG图片格式•首页和详情页图片宽度为480〜620像素第二节移动端网店装修快速入门一保持网店设计风格的一致性移动端网店整体的装修与设计要做到风格一致、首尾呼应，否则不利于网店整体设计风格的塑造不同于PC端网店，移动端网店是一种狭窄的视觉展示，如果不依据网店品牌基调保持设计风格的一致性，网店形象的不鲜明感就会带来视觉的混乱体验，无法让买家对网店形成视觉记忆二采用简单且便于操作的设计方式复杂的操作与交互设计很可能会给买家带来困惑与苦恼，甚至让他们最终失去浏览的耐心因此，在进行移动端网店装修时，要简化一切不必要的设计，让买家不必因为多余的操作而忘记网购的初衷，这也是促进移动端网店销量增加的有效手段之一三网店色彩的设计与选择在进行移动端网店装修时，最好采用较为鲜亮的色彩，因为这样既能给买家带来较好的浏览体验，又能与淘宝平台所提供的浅灰色背景相融合，让网店的整体设计风格更加统一与完整鲜明的色彩不一定是鲜艳的高纯度色彩，也可以是低纯度但明度较高的色彩相对于深色系的色彩而言，这些色彩更加引人注目，能够获得买家较高的关注度，容易吸引买家的眼球，激发其购买欲第三节课堂案例美妆商品直播主图设计望

一、设计理念•使用墨绿色作为背景，搭配上黄色的广告文字，更好地突出了主题信息•添加“领福利”“活动价”等促销信息，激发买家的购物欲望，进一步吸引其点击主图二技术要点•为图片创建图层蒙版，对图像的显示进行控制•利用“内阴影”图层样式为图片添加内阴影效果•使用文字工具添加促销文案•使用形状工具绘制各种修饰形状三实操演练略移动端网店可以看作是PC端网店的延续，在进行网店装修时要把握“用户体验”这一关键点移动端网店主要依附于智能手机平台，智能手机又让人与机器之间有了更亲密的接触与互动，所以与移动端中其他应用软件一样，在设计移动端网店页归纳与提高面时，要结合智能手机平台的特色，设计出更加注重交互体验与友好度的页面，这样才能赢得买家的喜爱，从而提高转化率通过本章的学习，我们了解了移动端网店页面的框架结构和图片发布的尺寸要求，掌握了移动端网店装修的基本方法，以及移动端网店直播主图的制作方法第章移动端网店首页与详情页装修设计11

一、移动端网店首页装修设计教学内容

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

三、课堂案例女装网店年中盛典首页设计【学习目标】

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

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

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

4.掌握商品分类导航及分类展示的装修设计方法教学要求

5.了解网店详情页装修设计的FABE原则6,掌握移动端网店详情页的装修设计方法【素养目标】

1.树立严谨的工作态度，提升做事的专注程度

2.坚定文化自信，积极用作品展示美好生活

1.移动端网店首页装修设计教学重点

2.移动端网店详情页装修设计

1.移动端网店首页装修设计教学难点

2.移动端网店详情页装修设计教学方法讲授法、案例法课时数5课时教学内容第一节移动端网店首页装修设计

一、店招的装修设计手机淘宝店招背景图片尺寸为750像素X254像素，店招底图作为店招的主要装饰元素,可以用来突出网店的特色与形象因为店招底图的实际显示面积比较小，所以在设计时不宜过于复杂，简单明了的设计才能让买家快速获取网店信息，在为打造网店品牌起到促进作用的同时在一定程度上吸引买家进店消费底图内容可以是纯图片，并且图片内容要与网店形象有所关联；也可以是以图片为主或以文字为主的图文搭配形式，通过文字标明网店的特点，以此来吸引买家不论店招底图中包含哪些内容，在设计时都要注意保持信息的完整性与清晰性，并且所添加的底图内容要与网店具有一定的关联，否则买家无法接收到店招中的信息，店招设计也就不能起到实质性的作用二轮播图片的装修设计轮播图片也称为焦点图，通常被放在移动端网店的首焦页面，也就是第一屏中能被买家快速看到的位置通常情况下，轮播图片中包含网店上新活动通知、促销活动展示等内容轮播图片的内容要简洁、文字要清晰、主次要分明，并且要能达到快速传播的目的此外，在设计时要注意控制好轮播图片的数量，以及展示的先后顺序三优惠券的装修设计在进行移动端网店的装修设计时，一般将优惠券放在店招或轮播图片的下方，并留出足够的空间，使用较为鲜明的色彩，让买家能够注意到优惠券，这样才能真正发挥引流与促进转化的作用在优惠券上添加“进入领取”按钮之类的视觉元素，可以在一定程度上引导买家的点击行为相对于没有明显按钮引导的优惠券板块而言，有按钮引导时更具操作的提示感,有利于引导买家的参与行为四商品分类导航的装修设计通常情况下，在移动端网店首页中，轮播图片与优惠券板块后面是分类导航板块在设计这个板块时，要注意控制好显示尺寸与比例，使其能够清晰与完整地展示在买家面前,起到快速导航的作用

五、商品分类展示的装修设计通常情况下，移动端网店首页商品分类展示会呈现以爆款或促销为主的商品图片，将全店爆款或非常优惠的商品图片放在第一区，以促进购买力的快速转化移动端买家更关注网店新品与应季商品的发布，因此在商品分类展示的第二区中可以对新品与换季商品进行重点展示除了上述的第一区与第二区以外，还有第三区、第四区……在这些区域可以根据需要放置不同的商品在网店首页商品分类展示第三区中，对店长推荐的商品进行展示商品分类展示区的分区不宜过多，商品分类展示的每一区中的商品图片也不宜过多简洁、整齐的图片排列组合能让移动端的买家获得更好的浏览与购物体验第二节移动端网店详情页装修设计一详情页装修设计的原则FABE简单来说，FABE是一种通过4个关键环节来解答买家诉求，巧妙应对买家关心的问题,从而顺利实现商品销售诉求的销售模式，具体表现为4个方面介绍商品的特质、特性等基本功能，以及它是如何满足买家需求的介绍商品的卖点与优势，向买家证明商品的卖点，其实就是给买家提供更多购买该商品的理由以买家利益为中心，告知并强调买家购买商品后会得到的利“益，激发买家的购买欲望证据指第三方认知、新闻舆论或技术报告等信息，要有足够的权威性、客观性、可靠性与可见证性，这样才能获得买家的信任在FABE原则的指引下，需要做到以下几点，让商品描述变得更加符合网店的销售环境，以增加买家的购买动力

1.真实感

2.逻辑感

3.亲切感

4.对话感

5.氛围感

6.正规感

二、直截了当地突出商品信息移动端网店详情页浏览的连贯性不如PC端网店，并且买家的页面平均停留时间很短,所以在设计移动端网店详情页时必须做到简单高效、直截了当移动端网店必须在前三屏对商品的卖点和重耍信息进行清晰的描述，因为过于烦琐的关联信息可能需要占用好儿屏的空间，每占用一屏的空间便会让买家多一次滑动操作，这样可能会惹恼买家，使其失去对商品的购买兴趣，以致买家流失第三节课堂案例女装网店年中盛典首页设计

一、设计理念•在配色上使用紫色作为页面背景，使用黄色作为点缀色鲜明的配色给人以纯粹的感觉，将商品时尚、活力的特质展现得恰到好处•首焦海报通过颇具设计感的标题文字布局吸引买家视线，搭配穿着黄色时装的模特形象，让买家一眼就能了解网店销售的主要商品，从而充分地展示出网店信息•商品展示区域通过不同的商品布局让页面显得协调而不单一，增强买家进一步深入了解商品的欲望

二、技术要点•通过添加图层样式对文字的效果进行控制•创建剪贴蒙版，控制图像的显示区域

三、实操演练越来越多的买家选择通过移动端网店进行网购，这是因为移动端网店所具备的特点给予了他们很好的用户体验这些特点并不足以让买家决定购买，卖家还需要对网店进行个性化且更有亲和力的设计，对网店的各个细节进行优化，才能营造良好的购物氛围，让买家归纳与最终被网店所吸引并决定购买商品提高通过本章的学习，我们掌握了店招、轮播图片、优惠券、商品分类导航及分类展示的装修设计方法，了解了网店详情页装修设计的FABE原则，还掌握了移动端网店详情页的装修设计方法率的关系，学会了用有效的方法确定网店的装修风格，也要注意网店装修细节问题，避免客流量的流失第章网店装修四大要点2

一、准备图片素材

二、网店色彩搭配

三、不拘一格的页面布局

四、准确、抢眼的文字【学习目标】

1.掌握拍摄商品图片的基本技巧，并能根据设计风格收集修饰素材

2.熟知常见的色彩搭配方法，学会如何对网店页面进行色彩搭配

3.了解页面布局的组成要素和方式，学会使用页面布局来突出页面的层次感和主次感教学内容

4.能够对段落文字进行合理排列，打造具有高表现力的文字造型，并利用文字营造特定的氛围【素养目标】

1.在进行作品创意设计时，可植入优秀传统文化元素，增强民族自豪感和文化自信

2.发挥创新能力，激发创意，与时俱进，勤于探索，勇于实践

2.常用的配色方法和技巧教学要求

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

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

1.拍摄商品图片教学重点

1.拍摄商品图片的基本技巧教学难点

2.常用的配色方法和技巧

3.利用文字营造特定的氛围教学方法讲授法、案例法4课时课时数教学内容第一节准备图片素材一拍摄商品图片在网店装修之前，首先需要拍摄足够的商品图片只有从不同的角度拍摄商品，力求展示出商品更多的细节，才能最终打动消费者在拍摄某些商品的过程中，为了让商品的色泽和质感更加接近人眼看到的效果，还需要布置简易的拍摄场景，让拍摄中的光线满足所需要的要求，使图片中的商品清晰地展现出来除了要自己布置拍摄场景拍摄商品的细节图片以外，大多数时候为了展示商品的实用特性，让买家更直观地感受商品的实物效果，卖家还需要拍摄模特使用或穿戴商品的图片

二、收集修饰素材修饰素材往往会让页面效果更加绚丽，呈现的视觉元素更加丰富因此，在进行网店装修之前，要根据网店的设计风格及商品特点为网店装修准备所需的修饰素材在商品图片上添加修饰素材是为了提升商品的品质，而大多数的网店装修中需要使用大量的修饰第二节网店色彩搭配素材来让整个页面呈现出完整、统一和丰富的视觉效果

一、常见的配色方法

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

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

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

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

5.重色调配色重色调配色是在相对单调的配色氛围中，通过使用对照色相与色调，从而起到强调效果的一种配色方式这样的配色会打破平淡、枯燥的页面效果，更加引人关注二色彩与市场营销色彩对网店营销而言是一个极其重要的影响因素虽然有些买家对网店首页及商品页面的色彩搭配并不是太在意，但是色彩通过买家的视觉，会对其的心理与思维产生重大的影响女性比男性对新潮的变化反应更为敏感因此，网店配色方案要能够抓住女性的消费心理三不同色调的展示页面

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

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

3.蓝色调页面蓝色调散发着清爽、凉爽之感，适合表现夏季商品、电子商品、清洁用品等，并且蓝色调具有稳定感，容易让买家产生踏实、积极的感觉

4.绿色调页面绿色调适用于环保型的用品，利用绿色对画面进行配色，可以营造出一种干净、整洁的氛围，增强买家在商品使用安全性方面的信赖度第三节不拘一格的页面布局一页面布局的组成要素为了把商品和活动信息最大限度、有效、正确地传达给买家，就需要进行合理的页面布局页面布局的组成要素如下•背景:为了有效地营造出与商品或活动主题相统一的页面氛围，可以对背景进行设计,使用图案、纯色和图像等元素的背景•图像网店装修布局中的图像主要指商品图像、模特图像和用于修饰页面的形状、符号和插画等，这些图像本身包含着一定的信息，可对商品或辅助商品进行展示，并为页面营造一种特定的氛围•文字文字主要对商品信息进行说明，是页面布局要素中最核心的部分之一，其设计风格要与商品的风格保持一致文字除了用于传递商品信息以外，还可以作为修饰元素放在页面中，以达到平衡布局的效果•留白留白指布局好商品、文字与修饰元素之后，余下的空白部分在布局中不注意留白，将页面填充得满满当当，会给人一种沉闷的感觉，造成视觉疲劳二常用的页面布局方式

1.中间对齐的页面布局这种布局方式具有可以吸引买家视线的优点，但是会显得整体页面比较狭窄通常情况下，可以调整一些图像的尺寸，将留白部分的特色发挥出来，从而清除沉闷、狭窄等弊端，产生安静、稳定的感觉

2.对角线排列的页面布局这种布局方式适合表达自由奔放动态的感觉，并且会形成自然的Z字形视觉牵引效果,给人一种清爽、利落的感觉当然，无论怎样的自由式布局，都要以指引线为准对图片和文字进行设计和布置

3.棋盘式的页面布局这种布局将图像按照棋盘表面的方格样式进行布局，把众多的图像一次性地展示给买家这种布局方式适合用于展示商品的各个细节部分，其优点就是将众多的图像集合为视觉上的一个整体，形成一种统一感，将买家的视线集中到一处

4.左对齐的页面布局由于人们的视线一般是从左向右移动的，所以这种页面布局会吸引更多的视线，适合用在表现那些有顺序之分的内容上，如商品使用的说明顺序、商品的制作过程等这些连贯性的主题采用左对齐模式的页面布局来表现，效果极佳

5.对称型的页面布局这种布局方式是指以画面的横向或纵向中心线为轴，将页面组成要素按照彼此相对的方式进行两侧布局在页面布局中，即使两侧的组成要素不是按照完全相同的尺寸和排列方式来进行的，只要两侧的空间宽度和重量感相同，就可以体现出对称的布局效果这种布局能够营造出一种文静、安定的整体氛围第四节准确、抢眼的文字一网店页面段落文字的排列方式

1.自由对齐自由对齐就是让每段文字自由地组合在一起，没有固定的方向或位置采用这种对齐方式排列的文字表现形式较为自由，给人以活泼、自然的感觉，能够表现出不拘一格的效果

2.左对齐左对齐就是将每行文字的左侧边缘对齐，较为常用左对齐排列通常能够呈现出一种整齐、利落的感觉，具有很强的协调感，并且只要合理地调整文字的大小，就可以轻松地制作出层次感

3.居中对齐居中对齐就是将每行文字的中间对齐到一个垂直线上这种对齐方式可以将人的视线集中起来，减少周围元素对文字的影响，是段落文字编排中常用的一种对齐方式

4.右对齐右对齐与左对齐的效果正好相反，它是将每行文字的右侧边缘对齐这种对齐方式可以让人的视线集中到文字的右侧，并且利用每行文字的长短不一在左侧形成一定的波形，从而产生流动感

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

1.连笔连笔设计是指字体的前后笔画一笔紧连着一笔，呈现出紧密相连的状态，使同一个字或不同字的笔画之间流畅、自然地衔接起来连笔讲究的是字体书写节奏的流畅，能使信息更为突出和鲜明连笔设计能够展现出笔画脉络与字体的整体形态，让笔画的特点片段得到补充和延伸

2.省略字体形态的省略设计需要对字体的基本结构有全面的掌握在进行省略设计时要充分发挥联想，既要使字体呈现出独特的个性，又要使文字具有可读性，让字体形态易于区分此外，省略方式的合理运用可使字体失去部分笔画，只利用显示的笔画来表现字体的形态，让文字具有独特的影像魅力，有助于增强文字的表现力，引起买家的注意

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

三、利用文字营造特定的氛围利用文字这一简单的元素，通过字体形状的变化、修饰元素的添加和色彩的巧妙搭配就可以营造出特定的氛围

1.喜庆

2.冰爽

3.天然

4.可爱买家进入网店，如果视觉体验不好，就更不用说去看网店中的商品了，所以不能忽视最基本的网店装修环节本章主要从图片素材、色彩搭配、页面布局与文字4个方面介绍如何进行网店装修才能吸引买家眼球，提高转化率归纳与通过本章的学习，我们掌握了掌握拍摄商品图片的基本技巧，并能根据设提高计风格收集修饰素材，熟知了常见的色彩搭配方法，学会了如何对网店页面进行色彩搭配，还了解了页面布局的组成要素和方式，学会了使用页面布局来突出页面的层次感和主次感，能够对段落文字进行合理排列，打造具有高表现力的文字造型，并利用文字营造特定的氛围第章网店装修六大技能3

一、裁图——纠正商品图片角度

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

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

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

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

六、文字——商品信息辅助说明教学内容【学习目标】

1.掌握对商品图片的尺寸、构图进行调整和对商品外形进行校正的方法

2.能够根据网店装修的需要抠出商品图像并替换背景

3.掌握去除水印、局部擦除、美化处理、调整模特身形、锐化图像的方教学要求法

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

5.能够制作具有创意感的标题文字，并对段落文字进行艺术化编排【素养目标】在工作中弘扬工匠精神，增强责任意识

1.对商品图片进行重新构图并美化教学重点

2.对商品图像进行修图和抠图处理

3.将商品图片进行校正调色

1.对商品图片进行重新构图并美化教学难点

2.对商品图像进行修图和抠图处理

3.将商品图片进行校正调色教学方法讲授法、案例法课时数6课时教学内容第一节裁图一纠正商品图片角度一调整图片大小网店平台通常会对装修图片的大小有一定的限制，这是为了让图片能够在网上快速地传输和显示，所以在拿到商品图片素材之后，大多数情况下都需要重新对商品图片的大小进行设置，使其符合网店平台的要求在Photoshop中，可以使用“图像大小”命令调整商品图片的大小二裁剪商品图片中多余的图像摄影师在拍摄商品时，为了将商品全部囊括到画面中，有时可能会忽略商品图片的构图,或者将不需要的对象也纳入其中，此时可以使用Photoshop中的裁剪工具或“裁剪”命令来快速裁剪图片中多余的图像，以达到重新构图的目的三对商品外形进行校正在拍摄商品图片时，由于拍摄角度等存在问题，图片中的商品外形出现畸形，这会影响。