玩转网店“视觉营销”设计

第1章 网店美化与装修必备知识 1

本章导读 1

效果欣赏 1

学习目标 1

技能要点 2

实训任务 2

1.1什么是网店装修 2

1.2网店装修的意义 3

1.2.1获取网店信息 3

1.2.2直观掌握更多的商品信息 4

1.3网店装修与转化率的关系 5

1.4常见电商平台及其配色 5

1.4.1如何确定装修的风格 7

1.4.2网店整体色调的选择 8

1.5网店装修中的误区 8

本章总结 10

练习与实践 10

实训任务 11

第2章 网店美化与装修前准备 12

本章导读 12

效果欣赏 12

学习目标 12

技能要点 12

实训任务 13

2.1拍摄宝贝图片 13

2.1.1摄影器材选择 13

2.1.2布置室外拍摄场地 18

2.1.3布置室内拍摄场地 18

2.1.4拍摄商品要多角度、重细节 19

2.2后期修片原则 20

2.2.1还原宝贝色彩 20

2.2.2简化背景，突出重点 20

2.2.3谨慎锐化 21

2.2.4保证图片的原长宽比 21

2.3收集装修所需的设计素材 21

2.4了解文件格式 22

本章总结 23

练习与实践 23

实训任务 24

第3章 专业的网店装修利器—Photoshop 25

本章导读 25

效果欣赏 25

学习目标 25

技能要点 25

实训任务 25

3.1照片的基础调整 26

3.1.1“图像大小”改变照片分辨率 26

3.1.2“裁剪工具”精确裁剪照片 26

3.1.3更改照片的文件格式 27

3.2修复照片的瑕疵 27

3.2.1去除照片中多余的图像 27

3.2.2消除人物的眼袋 28

3.2.3抹去烦人的黑眼圈与斑点 29

3.2.4模糊局部图像 30

3.3抠取商品的六大法宝 31

3.3.1快速抠取单色背景的图像 31

3.3.2规则对象的抠取 31

3.3.3抠取轮廓清晰的图像 32

3.3.5抠取精细图像 32

3.3.6抠取半透明图像 33

3.4宝贝调色的六大秘诀 34

3.4.1有针对性的色彩处理——色相/饱和度 34

3.4.2调整色彩的高、中、低调——色彩平衡 35

3.4.3模拟特殊图像色彩——照片滤镜 36

3.4.4局部色调的变换——可选颜色 37

3.5照片影调的五大秘密武器 38

3.5.1对光线的明暗修正——曝光度 38

3.5.2图像明暗的层次——亮度/对比度 38

3.5.3局部明暗处理——色阶 39

3.5.4自由处理各区域的明暗——曲线 40

本章总结 41

练习与实践 42

实训任务 43

第4章 打造过目不忘的店招与导航 44

本章导读 44

效果欣赏 44

学习目标 44

技能要点 44

实训任务 44

4.1店招的设计分析 45

4.1.1店招设计尺寸和格式 45

4.1.2店招的作用 46

4.1.3店招包含的信息 46

4.2店招的设计逻辑 47

4.3导航条的设计分析 48

4.3.1导航条的作用 48

4.3.2导航条的设计尺寸 49

4.3.3导航条的设计逻辑 49

4.3.4电器导航条的设计详解 49

4.3.5精致风格导航条设计详解 50

4.4店招与导航条的综合设计 51

4.4.1潮流女装网店店招导航设计详解 51

4.4.2萌系女包网店店招导航设计详解 53

本章总结 55

练习与实践 55

实训任务 56

第5章 加深顾客第一印象——首页海报设计 57

本章导读 57

效果欣赏 57

学习目标 57

技能要点 57

实训任务 57

5.1店铺海报的作用及设计规范 58

5.1.1店铺海报常见尺寸 58

5.1.2海报的作用 59

5.2海报的构成要素 60

5.2.1海报文案 60

5.2.2海报图片 60

5.2.3海报色彩 61

5.2.4海报版式 61

5.3海报配色指南 61

5.3.1常规配色比例 62

5.3.2配色原理 62

5.4海报版式设计 64

5.4.1海报常见版式 64

5.5海报字体设计 66

5.5.1海报字体的重要性 66

5.5.2海报字体使用技巧 67

5.6海报字体编排 70

5.6.1文字编排——对齐 70

5.6.2文字编排——对比 71

5.6.3文字编排——分组 71

5.6.4文字编排——强调 72

5.6.5文字编排——线框的约束与强调 73

5.7海报文案设计 74

5.7.1求实惠的购买动机 74

5.7.2新奇个性购买动机 75

5.7.3便利性购买动机 76

5.7.4求美购买动机 76

5.7.5尊贵购买动机 77

5.7.6从众购买动机 78

5.7.7廉价购买动机 78

5.7.8好奇购买动机 79

5.7.9习惯型的购买动机 79

本章总结 80

练习与实践 80

实训任务 81

第6章 赢得回头客——店铺收藏与客服区制作 82

本章导读 82

效果欣赏 82

学习目标 82

技能要点 82

实训任务 82

6.1收藏区的设计分析 83

6.1.1收藏区的设计要点 83

6.1.2收藏区的设计分析 84

6.2收藏区的案例分析 84

6.2.1以店庆为主题的收藏区设计与详解 84

6.2.2收藏区添加大量优惠券信息案例详解 87

6.2.3古典风格收藏区设计 90

6.3客服区的设计分析 91

6.3.1客服区的设计原则 91

6.3.2客服区设计案例分析 93

6.3.3冷酷风格客服区设计 93

6.4客服区与收藏区结合的设计 95

本章总结 97

练习与实践 97

实训任务 98

第7章 展现宝贝的专业与品质——详情页制作 99

本章导读 99

效果欣赏 99

学习目标 99

技能要点 99

实训任务 99

7.1详情页的设计分析 100

7.1.1商品详情页结构 100

7.1.2商品详情页各模块作用 102

7.1.3关联营销区（促销专区） 102

7.1.4产品属性 103

7.1.5商品实物展示 104

7.1.6商品细节展示 104

7.1.7服务质量 105

7.1.8客服及售后服务 106

7.2商品描述设计与详解 107

7.2.1详情页设计前的准备 108

7.2.2宝贝描述案例分析 109

7.3商品搜索主图制作 111

7.3.1商品搜索主图制作要求 111

7.3.2服装鞋帽类搜索主图制作要求 113

7.3.3商品搜索主图案例分析 119

本章总结 121

练习与实践 121

实训任务 122

第8章 店铺优化——直通车、钻展图片设计 123

本章导读 123

效果欣赏 123

学习目标 123

技能要点 124

实训任务 124

8.1设计店铺专属直通车 124

8.1.1直通车规则认知 124

8.1.2直通车图片设计技巧 128

8.1.3直通车案例分析 129

8.1.4直通车展示位置 131

8.1.5影响直通车综合排名质量得分的维度 132

8.1.6优化的十二条直通车规 132

8.1.7提高直通车点击率的视觉优化策略 133

8.2店铺优化之钻展图片设计 134

8.2.1什么是钻石展位 134

8.2.2钻石展位的特点 135

8.2.3钻石展位设计要求 136

8.2.4淘宝钻石展位图片的要求 136

8.2.5如何提升钻石展位点击率 138

本章总结 142

练习与实践 143

实训任务 144

第9章 初始代码 145

本章导读 145

效果欣赏 145

学习目标 145

技能要点 145

实训任务 145

9.1认识常见的网店装修代码 146

9.1.1 HTML概念 146

9.1.2常用代码标签 146

9.2 table表格应用案例 150

9.2.1用table绘制简单表格 150

9.2.2 table表格应用基础——切片分隔符 151

9.2.3 table表格嵌套的应用 152

本章总结 158

练习与实践 158

实训任务 159

第10章 Div和行内css样式 160

本章导读 160

效果欣赏 160

学习目标 160

技能要点 160

实训任务 160

10.1 div＋css样式 161

10.1.1 div标签 161

10.1.2 css样式 161

10.2 div＋css案例应用 167

10.2.1 div＋css效果图演示 167

本章总结 168

练习与实践 168

实训任务 169

第11章 position定位 170

本章导读 170

效果欣赏 170

学习目标 170

技能要点 170

实训任务 170

11.1定位属性 171

11.1.1 position属性 171

11.1.2相对定位 171

11.1.3绝对定位 172

11.2定位属性效果演示 173

11.2.1 Position的案例使用 173

本章总结 175

练习与实践 175

实训任务 176

第12章 Widget规范 177

本章导读 177

效果欣赏 177

学习目标 177

技能要点 177

实训任务 177

12.1 Tabs——标签页 178

12.1.1 Tabs所需DOM结构 178

12.1.2 Tabs组件调用方法 179

12.1.3 Tabs参数配置 179

12.2 Slide卡盘 180

12.2.1 Slide所需DOM结构 180

12.2.2 Slide组件调用方法 181

12.2.3 Slide案例应用 181

12.3 Carousel-旋转木马 182

12.3.1 Carousel所需DOM结构 182

12.3.2 Carousel组件调用方法 183

12.3.3 Carousel案例应用 184

12.4 Accordion-手风琴 185

12.4.1 Accordion-手风琴所需DOM结构 185

12.4.2 Accordion组件调用方法 186

12.4.3 Accordion参数配置 187

12.5 Popup-弹出层 187

12.5.1 Popup-弹出层所需DOM结构 187

12.5.2 Popup组件调用方法 188

12.5.3 Popup参数配置 188

12.6 Countdown-倒计时 190

12.6.1 Countdown组件调用方法及所需DOM结构 190

12.6.2 Countdown参数配置 193

12.7店铺倒计时效果演示 194

本章总结 195

练习与实践 195

实训任务 196

第13章 组件 197

本章导读 197

效果欣赏 197

学习目标 197

技能要点 197

实训任务 197

13.1网店组件 198

13.1.1二维码图片组件 198

13.1.2购物车组件 198

13.1.3收藏宝贝组件 198

13.1.4喜欢组件简介 198

13.1.5页面如何添加喜欢组件 199

13.1.6分享组件简介 199

13.1.7页面如何添加分享组件 200

本章总结 201

练习与实践 201

实训任务 202