電商視覺設計（全彩慕課版）
張之峰 朱孟昀
相關主題
商品描述
本書全面系統地介紹了電商視覺設計的相關知識和基本設計技巧，包括初識電商視覺設計、商品圖片精修與視覺合成、商品營銷推廣圖設計、電商海報設計、商品詳情頁設計、活動專題頁設計、PC 端店鋪首頁設計、手機端店鋪首頁設計。
第 1 章以外的其他幾章內容均以知識講解與案例製作作為主線展開介紹，知識講解部分能夠使學生系統地瞭解電商視覺設計中的各類基本規範，案例製作部分可以使學生快速掌握電商視覺設計的思路。本書每章最後還安排了課堂實訓及課後習題，可以拓展學生對電商視覺設計的實際應用能力。
本書可作為高等院校電商視覺設計相關課程的教材，也可供電商視覺設計相關人員學習。
作者簡介
张之峰，黄河水利职业技术学院网络营销教研室主任，副教授，开封市电子商务智库专家，市优秀教师，国家职业教育在线精品课主持人，金砖国家职业技能大赛优秀指导专家，带队获国际赛银牌两项，国赛一等奖两项。主编《电子商务解决方案——中小企业应用》等教材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
