**章 緒論 ................................................................................................................................................. 1
**節 電商視覺設計概述 .............................................................................................................. 2
一、視覺設計 ................................................................................................................................ 2
二、視覺營銷 ................................................................................................................................ 3
第二節 電商視覺設計的準備 .......................................................................................................... 5
一、電商網店的視覺定位 ........................................................................................................... 5
二、文案策劃 ................................................................................................................................ 6
三、商品拍攝 ................................................................................................................................ 7
四、圖片處理 ................................................................................................................................ 8
五、詳情頁設計 ............................................................................................................................ 8
第三節 電商視覺設計色彩應用 .................................................................................................... 10
一、色彩的基礎知識 .................................................................................................................. 10
二、電商網店視覺圖像的色彩調整 ......................................................................................... 17
三、電商網店的配色 .................................................................................................................. 23
第四節 電商視覺設計文字應用 .................................................................................................... 28
一、電商視覺設計中的字體 ..................................................................................................... 28
二、電商網店的字體設計 ......................................................................................................... 31
第五節 電商視覺設計的形狀應用 ................................................................................................ 34
一、電商網店視覺設計中的形狀 ............................................................................................. 34
二、形狀的創意處理 .................................................................................................................. 34
第二章 電商視覺設計體現 ..................................................................................................................... 36
**節 電商視覺營銷設計體現 .................................................................................................... 37
一、電商網店視覺體現 ............................................................................................................. 37
二、廣告視覺體現 ...................................................................................................................... 38
三、商品視覺體現 ...................................................................................................................... 39
第二節 電商網店視覺風格 ............................................................................................................ 42
一、電商網店視覺風格的概念 ................................................................................................. 42
二、確定電商網店視覺風格 ..................................................................................................... 43
第三節 電商廣告視覺傳達 ............................................................................................................ 44
一、電商廣告視覺傳達的概念及意義 ..................................................................................... 44
二、電商廣告視覺傳達的要求 ................................................................................................. 45
第四節 電商視覺營銷 ..................................................................................................................... 45
一、電商視覺營銷的概念 ......................................................................................................... 45
二、電商視覺營銷的策略 ......................................................................................................... 45
第三章 電商視覺影像傳達 ..................................................................................................................... 55
**節 電商商品拍攝基礎知識 .................................................................................................... 56
一、認識拍攝器材 ...................................................................................................................... 56
二、電商商品拍攝中的用光與布光 ......................................................................................... 63
三、開拍前必不可少的準備工作 ............................................................................................. 69
第二節 電商商品拍攝的構圖 ........................................................................................................ 73
一、構圖的含義與目的 ............................................................................................................. 73
二、構圖的畫幅 .......................................................................................................................... 74
三、基本構圖方法 ...................................................................................................................... 75
四、基本構圖技巧 ...................................................................................................................... 78
第三節 電商商品圖片拍攝 ............................................................................................................ 81
一、電商商品拍攝中背景的選擇 ............................................................................................. 81
二、電商商品拍攝中商品的陳列與擺放 ................................................................................. 82
三、電商商品圖片拍攝案例 ..................................................................................................... 83
第四節 電商商品視頻拍攝 ............................................................................................................ 85
一、視頻拍攝的要求 .................................................................................................................. 85
二、電商商品視頻拍攝的流程 ................................................................................................. 87
三、電商商品視頻拍攝案例 ..................................................................................................... 88
第四章 電商商品圖片的處理 ................................................................................................................. 90
**節 商品圖片視覺效果分析 .................................................................................................... 91
一、視覺效果 .............................................................................................................................. 91
二、視覺元素 .............................................................................................................................. 98
第二節 精細處理商品圖片 ............................................................................................................ 99
一、去除商品圖片中的細小瑕疵――清除商品圖片上的污漬 ............................................ 99
二、去除商品圖片中的大面積瑕疵――還原商品圖片原貌 ............................................... 101
三、突出商品圖片細節的處理――銳化商品圖片細節 ....................................................... 102
四、商品圖片的虛實處理――突出商品圖片主體 ............................................................... 104
五、修復商品圖片的殘缺――好看的碗 ............................................................................... 106
第三節 摳取圖片中所要的內容 .................................................................................................. 107
一、摳取規則形狀的商品圖片――草地上的球 ................................................................... 107
二、摳取不規則形狀的商品圖片――甜品 ........................................................................... 110
三、根據色彩摳取商品圖片――項鏈 ................................................................................... 112
第四節 豐富商品圖片內容 .......................................................................................................... 114
一、添加矢量元素――凸顯商品信息 ................................................................................... 114
二、用文字裝飾圖片――靈活的路徑文字 ........................................................................... 116
三、改變商品圖片局部色彩――讓顏色更豐富 ................................................................... 118
第五章 電商網店首頁視覺設計 ........................................................................................................... 121
**節 電商網店首頁認知 .......................................................................................................... 122
一、電商網店首頁部分內容展示 ........................................................................................... 122
二、電商網店首頁設計 ........................................................................................................... 123
第二節 店招視覺設計 ................................................................................................................... 123
一、店招視覺設計的意義與功能 ........................................................................................... 123
二、店招視覺設計的規范 ....................................................................................................... 124
三、店招視覺設計的要求 ....................................................................................................... 124
四、店招視覺設計的方法 ....................................................................................................... 125
五、店招視覺設計案例――善美花屋網店店招 ................................................................... 125
第三節 店徽視覺設計 ................................................................................................................... 128
一、店徽視覺設計認知 ........................................................................................................... 128
二、店徽視覺設計的常見類型 ............................................................................................... 128
三、店徽視覺設計的要點 ....................................................................................................... 130
四、店徽視覺設計案例――喵村網店店徽 ........................................................................... 131
第四節 海報視覺設計 ................................................................................................................... 135
一、海報視覺設計認知 ........................................................................................................... 135
二、海報視覺設計的要點 ....................................................................................................... 135
三、海報視覺設計的規范 ....................................................................................................... 135
四、海報視覺設計的技巧 ....................................................................................................... 136
五、海報視覺設計案例――廚具網店海報 ........................................................................... 137
第六章 電商網店詳情頁視覺設計 ...................................................................................................... 140
**節 電商網店詳情頁認知 ...................................................................................................... 141
一、詳情頁的意義 .................................................................................................................... 141
二、詳情頁的營銷流程 ........................................................................................................... 141
三、詳情頁的尺寸 .................................................................................................................... 141
四、詳情頁的設計要點 ........................................................................................................... 141
五、詳情頁的設計類型 ........................................................................................................... 141
第二節 商品主圖視覺設計 .......................................................................................................... 144
一、商品主圖視覺設計認知 ................................................................................................... 144
二、商品主圖的設計形式 ....................................................................................................... 145
三、提高商品主圖點擊率的方法 ........................................................................................... 146
四、商品主圖視覺設計案例――八分褲商品主圖 ............................................................... 146
第三節 關聯營銷圖視覺設計 ...................................................................................................... 149
一、關聯營銷圖視覺設計認知 ............................................................................................... 149
二、關聯營銷圖視覺設計的原則 ........................................................................................... 149
三、關聯營銷圖視覺設計的表現形式 ................................................................................... 150
第四節 商品細節圖視覺設計 ...................................................................................................... 152
一、商品細節圖的表現方法 ................................................................................................... 152
二、商品細節圖的設計方法 ................................................................................................... 154
三、商品細節圖視覺設計案例――品牌女鞋 ....................................................................... 155
第五節 商品功能圖視覺設計 ...................................................................................................... 158
一、商品功能圖視覺設計認知 ............................................................................................... 158
二、商品功能圖的設計規范 ................................................................................................... 158
第六節 商品展示設計 ................................................................................................................... 160
一、商品展示設計認知 ........................................................................................................... 160
二、商品展示設計的內容 ....................................................................................................... 160
三、商品展示設計的方法 ....................................................................................................... 161
四、商品展示設計案例――女包顏色展示 ........................................................................... 162
第七章 電商網店推廣圖與促銷活動頁視覺設計 ............................................................................. 165
**節 高點擊率推廣圖視覺設計 .............................................................................................. 166
一、高點擊率推廣圖的意義 ................................................................................................... 166
二、直通車推廣圖的設計技巧 ............................................................................................... 166
三、直通車推廣圖視覺設計案例――地燈直通車推廣圖 ................................................... 168
四、鉆展圖視覺設計 ................................................................................................................ 171
第二節 促銷活動頁視覺設計 ...................................................................................................... 173
一、促銷活動頁的制作方法 ................................................................................................... 173
二、促銷活動頁的廣告尺寸 ................................................................................................... 173
三、促銷活動頁的廣告設計準則 ........................................................................................... 173
四、促銷活動的類型 ................................................................................................................ 175
五、促銷活動頁視覺設計案例――女包促銷廣告 ............................................................... 178
第八章 手機移動端視覺設計 ............................................................................................................... 183
**節 手機移動端電商網店視覺設計 ..................................................................................... 184
一、手機移動端電商網店視覺設計認知 ............................................................................... 184
二、手機移動端電商網店首頁視覺設計 ............................................................................... 186
三、手機移動端電商網店首頁視覺設計案例――時尚床品店鋪首頁 .............................. 189
四、手機移動端電商網店詳情頁視覺設計 ........................................................................... 193
五、手機移動端電商網店詳情頁視覺設計案例――索尼相機詳情頁 .............................. 195
第二節 手機移動端微店視覺設計 .............................................................................................. 198
一、手機移動端微店首頁視覺設計 ....................................................................................... 198
二、手機移動端微店詳情頁視覺設計 ................................................................................... 201
三、手機移動端微店底部導航視覺設計 ............................................................................... 203
四、手機移動端微店詳情頁視覺設計案例――年貨大集詳情頁 ...................................... 203
參考文獻 ..................................................................................................................................................... 208