本书全面系统地介绍了电商视觉设计的相关知识和基本设计技巧，包括初识电商视觉设计、商品图片精修与视觉合成、商品营销推广图设计、电商海报设计、商品详情页设计、活动专题页设计、PC 端店铺首页设计、手机端店铺首页设计。

第 1 章以外的其他几章内容均以知识讲解与案例制作作为主线展开介绍，知识讲解部分能够使学生系统地了解电商视觉设计中的各类基本规范，案例制作部分可以使学生快速掌握电商视觉设计的思路。本书每章最后还安排了课堂实训及课后习题，可以拓展学生对电商视觉设计的实际应用能力。

本书可作为高等院校电商视觉设计相关课程的教材，也可供电商视觉设计相关人员学习。

1.本书注重实操，注重各个模块的视觉设计，如首页、详情页等，内容全面、案例新颖。

2.本书配套PPT课件、慕课视频、教学大纲、素材文件、电子教案等多样的数字资源。

3.四色印刷，品相精美。

张之峰，黄河水利职业技术学院网络营销教研室主任，副教授，开封市电子商务智库专家，市优秀教师，国家职业教育在线精品课主持人，金砖国家职业技能大赛优秀指导专家，带队获国际赛银牌两项，国赛一等奖两项。主编《电子商务解决方案——中小企业应用》等教材4部，其中《电子商务解决方案——中小企业应用》为国家“十二五”规划教材。作者团队既有丰富的电商从业经验，也长期和企业对接，有丰富的社会培训经验，熟悉电商视觉设计的工作内容及技巧。

第 1章 初识电商视觉设计

1.1　电商视觉设计概述 ...........................2

1.1.1　电商视觉设计的基本概念 ................　2

1.1.2　电商视觉设计的主流平台 ................　2

1.2　电商视觉设计师概述 ........................3

1.2.1　电商视觉设计师的类型划分 ............　3

1.2.2　电商视觉设计师的工作内容 ............　4

1.2.3　电商视觉设计师的常用软件 ............　5

1.3　电商视觉设计的设计基础 ..................6

1.3.1　基础元素 .......................................　6

1.3.2　色彩搭配.......................................　7

1.3.3　字体表现.......................................　8

1.3.4　版式构图 ......................................　9

1.4　电商视觉设计的基本流程 ................　11

1.4.1　需求分析 ......................................　11

1.4.2　素材收集 .....................................　11

1.4.3　视觉设计 .....................................　11

1.4.4　审核修改 .....................................　11

1.4.5　完稿切图......................................　11

1.4.6　上传装修......................................12

1.5　电商视觉设计的规范与规则 .............12

1.5.1　单位规范 ......................................12

1.5.2　页面结构 ......................................13

1.5.3　布局规范 ......................................14

1.5.4　文字规则......................................16

课堂实训——思考钻展图的字体表现　..........18

课后习题——思考钻展图的版式构图　..........18



第　2章 商品图片精修与视觉合成

2.1　商品图片精修 ..............................20

2.1.1　商品图片精修的核心要素 ..............　20

2.1.2　商品图片精修的常用技法 ..............21

2.1.3　理解光影与材质 ...........................　22

2.1.4　应用案例——精修护发发膜瓶器图 ...　24

2.2　视觉合成 ....................................25

2.2.1　合成的基本类型 ...........................　25

2.2.2　合成的透视知识 ..........................　26

2.2.3　合成的光影表现 ..........................　27

2.2.4　应用案例——合成室内空间场景 ....31

课堂实训——精修传统茶叶包装图　............34

课后习题——合成室外写实场景　...............35



第3章　商品营销推广图设计

3.1　主图设计 ....................................37

3.1.1　主图设计概述 ..............................　37

3.1.2　主图的设计尺寸 ...........................　37

3.1.3　主图的设计技巧...........................　38

3.1.4　应用案例——设计嘉兴肉粽主图 ...　38

3.2　直通车图设计 ..............................44

3.2.1　直通车图设计概述 .......................　44

3.2.2　直通车图的设计尺寸 ...................　46

3.2.3　直通车图的设计技巧 ...................　46

3.2.4　应用案例——设计静音风扇

　直通车图 ...........................................47

3.3　钻展图设计 .................................53

3.3.1　钻展图设计概述...........................　53

3.3.2　钻展图的设计尺寸 .......................　53

3.3.3　钻展图的设计技巧 .......................　54

3.3.4　应用案例——设计美食活动

　钻展图 .......................................　55

课堂实训——设计护肤品直通车图　............59

课后习题——设计家居用品活动钻展图　.......60



第4章　电商海报设计

4.1　电商海报概述 ..............................62

4.1.1　电商海报的常见类型 ....................　62

4.1.2　电商海报的常见尺寸 ....................　63

4.2　电商海报的版面布局 ......................63

4.2.1　电商海报的布局类型 ....................　63

4.2.2　电商海报的布局原则 ...................　64

4.3　PC 端电商海报的表现形式 ..............65

4.3.1　PC 端电商海报的风格定位 ...........　66

4.3.2　PC 端电商海报的表现手法 ..........　66

4.3.3　应用案例——设计实木

　双人床 PC 端电商海报 ................　67

4.4　手机端电商海报的设计特点 .............70

4.4.1　图形分割 ....................................　70

4.4.2　简洁背景 ....................................　70

4.4.3　应用案例——设计女性旗袍

　手机端电商海报 ...........................71

课堂实训——　设计新品吹风机 PC 端

电商海报　..........................76

课后习题——　设计电动牙刷手机端

电商海报　..........................76



第5章　商品详情页设计

5.1　商品详情页概述 ...........................79

5.2　商品海报设计 ..............................80

5.2.1　商品海报的定义 ...........................　80

5.2.2　商品海报的设计规则 ....................　80

5.2.3　应用案例——设计中秋月饼

　商品海报 ....................................　80

5.3　卖点提炼设计 ..............................84

5.3.1　卖点提炼的定义 ...........................　84

5.3.2　卖点提炼的设计规则....................　84

5.3.3　应用案例——设计中秋月饼

　卖点提炼 ....................................　84

5.4　商品展示设计 ..............................89

5.4.1　商品展示的定义 ...........................　90

5.4.2　商品展示的设计规则....................　90

5.4.3　应用案例——设计中秋月饼

　商品展示 ....................................　90

5.5　细节展示设计 ..............................92

5.5.1　细节展示的定义 ...........................　93

5.5.2　细节展示的设计规则 ....................　93

5.5.3　应用案例——设计中秋月饼

　细节展示 ....................................　93

5.6　商品信息设计 ..............................98

5.6.1　商品信息的定义 ...........................　98

5.6.2　商品信息的设计规则 ....................　99

5.6.3　应用案例——设计中秋月饼

　商品信息 ....................................　99

5.7　其他模块设计 ............................　101

5.7.1　其他模块的定义 ..........................　101

5.7.2　其他模块的设计规则 ...................102

5.7.3　应用案例——设计中秋月饼

　其他模块 ...................................102

课堂实训——设计舒适运动鞋商品详情页　...　105

课后习题——设计温和洗面奶商品详情页　...　106



第6章　活动专题页设计

6.1　活动专题页的基本类型 .................　108

6.1.1　PC 端活动专题页 .......................108

6.1.2　手机端活动专题页 ......................108

6.2　活动专题页的表现形式 .................　109

6.2.1　矩形排列 ....................................109

6.2.2　场景展示 ...................................109

6.3　活动专题页的设计要点 .................　110

6.3.1　商品陈列....................................　110

6.3.2　内容分隔 ....................................111

6.4　PC 端活动专题页的页面设计 .........　112

6.4.1　PC 端活动专题页的设计尺寸 ......　112

6.4.2　PC 端活动专题页的页面结构 ......　112

6.4.3　应用案例——设计家电平台初

　春焕新 PC 端活动专题页............　113

6.5　手机端活动专题页的页面设计 ........　129

6.5.1　手机端活动专题页的设计尺寸 ......129

6.5.2　手机端活动专题页的页面结构 .....129

6.5.3　应用案例——设计家电平台初

　春焕新手机端活动专题页 ............130

课堂实训——　设计坚果店铺年货盛典

PC　端活动专题页 .............　145

课后习题——　设计坚果店铺年货盛典

手机端活动专题页　.............　146



第7章　PC端店铺首页设计

7.1　PC 端店铺概述 ..........................　148

7.2　店招与导航栏设计 .......................　148

7.2.1　店招与导航栏的定义 ...................148

7.2.2　店招与导航栏的设计规则 ............148

7.2.3　应用案例——设计简约家具

　PC 端店铺店招与导航栏 ............149

7.3　轮播海报设计 ............................　153

7.3.1　轮播海报的定义 ..........................153

7.3.2　轮播海报的设计规则...................154

7.3.3　应用案例——设计简约家具

　PC 端店铺轮播海报 ...................154

7.4　优惠券设计 ...............................　158

7.4.1　优惠券的定义 .............................158

7.4.2　优惠券的设计规则 ......................159

7.4.3　应用案例——设计简约家具

　PC 端店铺优惠券 ......................159

7.5　分类模块设计 ............................　162

7.5.1　分类模块的定义 ..........................162

7.5.2　分类模块的设计规则 ...................163

7.5.3　应用案例——设计简约家具

　PC 端店铺分类模块 ...................163

7.6　商品展示设计 ............................　166

7.6.1　商品展示的定义 ..........................166

7.6.2　商品展示的设计规则 ...................167

7.6.3　应用案例——设计简约家具

　PC 端店铺商品展示 ...................167

7.7　底部信息设计 ............................　172

7.7.1　底部信息的定义 ..........................172

7.7.2　底部信息的设计规则 ...................172

7.7.3　应用案例——设计简约家具

　PC 端店铺底部信息 ...................172

课堂实训——　设计数码产品 PC 端

店铺首页　........................　176

课后习题——　设计护肤品 PC 端

店铺首页　........................　177



第8章　手机端店铺首页设计

8.1　手机端店铺首页设计基本概述 .........　179

8.1.1　手机端店铺首页设计的必要性 ........179

8.1.2　手机端与 PC 端店铺首页设计的

　区别 ...........................................179

8.1.3　手机端店铺首页设计的关键点 .......　181

8.2　手机端店铺首页设计 ....................　182

8.2.1　轮播海报设计 .............................182

8.2.2　优惠券设计 ................................183

8.2.3　分类模块设计 ............................183

8.2.4　商品展示设计 ............................183

8.2.5　底部信息设计 ............................184

8.2.6　应用案例——设计简约家具

　手机端店铺首页 .........................184

课堂实训——　设计数码产品手机端

店铺首页　..........................　195

课后习题——　设计护肤品手机端

店铺首页　........................　196