Chapter 01　網店設計必備知識 .. 001
1.1　了解網店設計 .......... 002
1.1.1　什么是網店設計 .............. 002
1.1.2　網店設計的重要性 ............ 002
1.1.3　網店設計前的準備工作 ........ 003
1.2　網店裝修的一般流程 .... 004
1.2.1　取個好店名很重要 ............ 004
1.2.2　確定設計風格 ................ 004
1.2.3　注重細節修飾 ................ 005
1.3　網店設計中的色彩搭配 .. 005
1.3.1　網店設計中的色彩 ............ 005
1.3.2　色彩搭配的原理 .............. 009
1.4　理解電商設計文案 ...... 011
1.4.1　電商設計文案的內容 .......... 011
1.4.2　電商設計文案策劃 ............ 012
1.4.3　如何創建優秀的產品文案 ...... 013
1.5　電商設計必須注意的問題 .. 014
1.6　如何創建成功的電商網站 .. 015
1.6.1　面向合適的用戶群 ............ 015
1.6.2　遵守常規的導航元素 .......... 017
1.6.3　產品介紹頁面是用戶的關注點 .. 017
1.7　網店視覺營銷 .......... 018
1.7.1　網店視覺營銷的表現 .......... 018
1.7.2　不同類型網店的視覺營銷方法 .. 019
1.8　本章小結 .............. 022
Chapter 02　電商網站布局元素 .. 023
2.1　店標設計 .............. 024
2.1.1　店標的作用 .................. 024
2.1.2　店標的特性 .................. 024
2.1.3　店標的設計要求 .............. 025
2.1.4　店標的類別 .................. 026
案例分析 | 水果店鋪店標設計分析 .... 027
實戰案例 | 設計咖啡店標 ............ 028
案例分析 | 藥品專營店鋪店標設計分析 .. 032
實戰案例 | 設計啤酒店標 ............ 033
2.2　店招設計 .............. 041
2.2.1　店招的設計要點 .............. 041
2.2.2　店招的表現類型 .............. 041
案例分析 | 母嬰商城店招設計分析 .... 043
實戰案例 | 設計店鋪促銷店招 ........ 044
2.3　電商網站導航設計原則 .. 048
2.3.1　符合網站內容結構 ............ 048
2.3.2　明確網站業務目標 ............ 049
2.3.3　遵從用戶使用習慣 ............ 049
2.3.4　避免重復的分類 .............. 050
2.3.5　使用合適的文案 .............. 050
2.3.6　清晰的視覺體驗 .............. 051
2.3.7　為用戶提供反饋 .............. 051
2.3.8　導航符合網站整體風格 ........ 052
2.3.9　利于搜索引擎優化 ............ 052
2.3.10　趨于專業化的導航 .......... 053
案例分析 | 名鞋庫網站導航設計分析 .. 054
實戰案例 | 設計運動品牌電商網站導航 .. 055
2.4　面包屑導航設計技巧 .... 062
2.4.1　統一關鍵詞，避免重復 ........ 062
2.4.2　顯示相關產品數量 ............ 062
2.4.3　善于使用面包屑 .............. 063
2.4.4　使用具有指向性的符號 ........ 063
2.4.5　減少對用戶的影響 ............ 063
2.4.6　控制層級 .................... 064
2.4.7　在面包屑中使用關鍵字 ........ 064
案例分析 | 屈臣氏導航和店招設計分析 .. 065
實戰案例 | 設計網店導航和店招 ...... 066
2.5　商品陳列構圖 .......... 073
2.5.1　距離感 ...................... 073
2.5.2　對稱與等比 .................. 074
2.5.3　節奏感 ...................... 075
2.5.4　圖片與文字的相輔相成 ........ 077
案例分析 | 隨性的商品構圖設計分析 .. 079
實戰案例 | 設計商品菱形排列布局 .... 080
2.6　本章小結 .............. 084
Chapter 03　文字與廣告設計 .... 085
3.1　店鋪中的文字設計 ...... 086
3.1.1　文字的字體 .................. 086
3.1.2　文字的字號 .................. 087
3.1.3　文字的間距和行距 ............ 088
3.1.4　文字的顏色 .................. 089
案例分析 | 母親節變形文字設計分析 .. 090
實戰案例 | 設計廣告變形文字 ........ 091
3.2　文字圖形化處理 ........ 099
3.2.1　文字的圖形化 ................ 099
3.2.2　文字的重疊 .................. 099
3.2.3　文字的整體性 ................ 100
3.2.4　讓文字更易讀 ................ 101
案例分析 | 特效毛筆廣告文字設計分析 .. 102
實戰案例 | 設計光影特效文字 ........ 103
3.3　電商廣告的作用 ........ 109
3.3.1　傳達產品信息 ................ 109
3.3.2　增強產品藝術表現 ............ 110
3.3.3　增加頁面趣味 ................ 111
案例分析 | 衣品天成女裝廣告設計分析 .. 112
實戰案例 | 設計化妝品廣告 .......... 113
3.4　電商廣告排版布局技巧 .. 117
3.4.1　對齊 ........................ 117
3.4.2　對比 ........................ 120
3.4.3　分組 ........................ 123
案例分析 | 海鮮促銷廣告設計分析 .... 125
實戰案例 | 設計水果促銷廣告 ........ 126
3.5　電商廣告設計原則 ...... 133
3.5.1　突出廣告主題 ................ 133
3.5.2　明確廣告目標人群 ............ 135
3.5.3　完美的表現形式 .............. 136
案例分析 | 安踏運動鞋廣告設計分析 .. 142
實戰案例 | 設計運動鞋宣傳廣告 ...... 143
3.6　本章小結 .............. 148
Chapter 04　電商海報設計 ...... 149
4.1　電商海報的類型 ........ 150
4.1.1　產品宣傳海報 ................ 150
4.1.2　促銷宣傳海報 ................ 150
4.1.3　活動宣傳海報 ................ 151
案例分析 | 男裝促銷活動海報設計分析 .. 152
實戰案例 | 設計女裝活動海報 ........ 153
4.2　常見的電商海報構圖方式 .. 159
4.2.1　左右構圖 .................... 159
4.2.2　三欄分布構圖 ................ 160
4.2.3　疊加構圖 .................... 161
4.2.4　傾斜構圖 .................... 161
案例分析 | 太陽鏡海報設計分析 ...... 163
實戰案例 | 設計精油產品海報 ........ 164
4.3　電商海報的配色技巧 .... 172
4.3.1　了解色彩關系 ................ 172
4.3.2　掌握配色黃金比例 ............ 173
4.3.3　鄰近色搭配 .................. 174
4.3.4　間隔色搭配 .................. 176
4.3.5　互補色搭配 .................. 178
案例分析 | 春夏季女鞋活動海報
設計分析 ................ 180
實戰案例 | 設計淘寶新年活動海報 .... 181
4.4　電商海報的設計表現形式 .. 186
4.4.1　直接展示 .................... 186
4.4.2　突出特點 .................... 186
4.4.3　對比襯托 .................... 187
4.4.4　以小見大 .................... 187
4.4.5　聯想 ........................ 187
4.4.6　夸張 ........................ 188
4.4.7　幽默 ........................ 188
4.4.8　以情托物 .................... 189
案例分析 | 母親節活動海報設計分析 .. 190
實戰案例 | 設計五一促銷活動海報 .... 191
4.5　本章小結 .............. 198
Chapter 05　電商頁面構圖設計 .. 199
5.1 了解電商頁面的構圖 .... 200
5.1.1　為什么要對電商頁面進行構圖 .. 200
5.1.2　電商頁面構圖標準 ............ 200
5.2　頁面幾何切割的構圖方式 .. 202
5.2.1　簡單切割 .................... 202
5.2.2　對稱切割 .................... 203
5.2.3　組合切割 .................... 204
5.2.4　多重切割 .................... 205
案例分析 | 化妝品網店活動頁面
設計分析 ................ 206
實戰案例 | 設計運動服裝網店頁面 .... 207
5.3　放射與透視狀的頁面構圖 .. 219
5.4　整體和流程的頁面構圖 .. 220
案例分析 | 護膚品店鋪頁面設計分析 .. 221
實戰案例 | 設計啤酒促銷頁面 ........ 222
5.5　根據圖像輪廓聯想的
方式構圖 .............. 228
案例分析 | 賽車票務電商頁面設計分析 .. 230
實戰案例 | 設計古典風格網店頁面 .... 231
5.6　本章小結 .............. 240
Chapter 06　電商頁面布局設計 .. 241
6.1 電商頁面首屏布局
設計要點 .............. 242
6.1.1　確定頁面首屏可視范圍 ........ 242
6.1.2　展示吸引用戶的信息 .......... 242
6.1.3　明確清晰的視覺焦點 .......... 243
6.1.4　運用圖片便于理解 ............ 244
6.1.5　首屏要強調主題 .............. 244
6.1.6　適當添加交互效果 ............ 245
6.1.7　符合視覺習慣的圖文混排 ...... 245
案例分析 | 時尚女包店鋪頁面設計分析 .. 246
實戰案例 | 設計化妝品網店首頁 ...... 247
6.2　商品列表頁布局設計 .... 257
6.2.1　商品列表形式 ................ 257
6.2.2　展示有用的產品信息 .......... 258
6.2.3　鼠標懸停時產生交互效果 ...... 258
6.2.4　出現適量的附加信息 .......... 259
6.2.5　添加推薦商品刺激消費 ........ 259
6.2.6　減少操作步驟 ................ 260
6.2.7　了解顧客心理 ................ 260
案例分析 | 食品店鋪產品列表頁面
設計分析 ................ 261
實戰案例 | 設計手機促銷列表頁面 .... 262
6.3　商品詳情頁設計 ........ 271
6.3.1　提供商品展示圖片的細節
放大效果 .................... 271
6.3.2　滿足用戶的比價心理 .......... 272
6.3.3　運用商品分享功能 ............ 272
6.3.4　良好的用戶引導 .............. 273
6.3.5　跟隨性導航 .................. 273
6.3.6　不可缺少的商品評價功能 ...... 274
6.3.7　保持商品介紹的連貫性 ........ 274
6.3.8　商品詳情頁面不宜過長 ........ 274
案例分析 | 化妝品詳情頁面設計分析 .. 275
實戰案例 | 設計小家電商品詳情頁面 .. 276
6.4　電商活動頁面設計 ...... 282
6.4.1　活動文案是靈感來源 .......... 282
6.4.2　節日促銷活動頁配色與
素材的選擇 .................. 284
6.4.3　活動頁面設計技巧 ............ 285
案例分析 | 家電促銷活動頁面設計分析 .. 287
實戰案例 | 設計網店活動主題頁面 .... 288
6.5　本章小結 .............. 300