第1章 初識電商視覺設(shè)計(jì)1

1.1　什么是視覺設(shè)計(jì)　2

1.1.1　視覺識別設(shè)計(jì)　2

1.1.2　視覺傳達(dá)設(shè)計(jì)　3

1.2　電商視覺設(shè)計(jì)前的準(zhǔn)備　4

1.2.1　網(wǎng)店的視覺定位　4

1.2.2　明確視覺規(guī)范的作用　6

1.3　電商視覺設(shè)計(jì)黃金構(gòu)圖法　7

1.3.1　對稱切割構(gòu)圖法　7

1.3.2　組合切割構(gòu)圖法　8

1.3.3　整體場景構(gòu)圖法　9

1.3.4　多重切割構(gòu)圖法　10

1.3.5　簡單切割構(gòu)圖法　11

1.3.6　流程構(gòu)圖法　12

1.3.7　放射構(gòu)圖法　13

1.3.8　物體輪廓構(gòu)圖法　13

【課后練習(xí)題】

第2章　電商網(wǎng)站視覺配色設(shè)計(jì)　15

2.1　網(wǎng)店頁面的配色方案　16

2.1.1　色搭原則七要素　16

2.1.2　色彩的聯(lián)覺聚焦圖片　17

2.1.3　網(wǎng)店風(fēng)格的形成要素　18

2.2　網(wǎng)店頁面的配色誤區(qū)　27

2.2.1　色彩過多　28

2.2.2　背景和文字對比不強(qiáng)烈　28

2.2.3　過分強(qiáng)調(diào)色彩的刺激度　29

2.3　網(wǎng)店的整體配色案例　30

【課后練習(xí)題】

第3章　店鋪標(biāo)志視覺設(shè)計(jì)　37

3.1　徽標(biāo)的設(shè)計(jì)　38

3.1.1　徽標(biāo)的設(shè)計(jì)要領(lǐng)　38

3.1.2　徽標(biāo)的設(shè)計(jì)標(biāo)準(zhǔn)　39

3.2　店標(biāo)的設(shè)計(jì)　41

3.2.1　店標(biāo)的設(shè)計(jì)形態(tài)　41

3.2.2　店標(biāo)的設(shè)計(jì)技巧　43

3.2.3　不同行業(yè)的店標(biāo)設(shè)計(jì)　45

3.2.4　店標(biāo)的設(shè)計(jì)流程　47

【課后練習(xí)題】

第4章　店鋪首頁視覺設(shè)計(jì)　51

4.1　首頁視覺水平的四大指標(biāo)　52

4.1.1　首頁跳失率　52

4.1.2　首頁點(diǎn)擊率　52

4.1.3　首頁人均點(diǎn)擊次數(shù)　53

4.1.4　首頁平均停留時間　53

4.2　店招視覺設(shè)計(jì)　54

4.2.1　店招視覺設(shè)計(jì)規(guī)范　54

4.2.2　店鋪名稱的藝術(shù)化處理　55

4.2.3　圖層樣式的應(yīng)用　56

4.3　首焦輪播區(qū)視覺設(shè)計(jì)　57

4.3.1　設(shè)計(jì)聚焦消費(fèi)者視線　57

4.3.2　構(gòu)建設(shè)計(jì)圖三要素　58

4.3.3　溶圖的應(yīng)用規(guī)范　60

4.4　商品陳列區(qū)視覺設(shè)計(jì)　60

4.4.1　營造視覺動線　61

4.4.2　商品布局藝術(shù)化　63

4.5　化妝品店鋪首頁視覺設(shè)計(jì)案例　64

【課后練習(xí)題】

第5章　商品詳情頁視覺設(shè)計(jì)　75

5.1　商品主圖設(shè)計(jì)　76

5.1.1　商品主圖的設(shè)計(jì)規(guī)范　76

5.1.2　商品主圖的設(shè)計(jì)形式　76

5.1.3　添加文案提高主圖點(diǎn)擊率　78

5.2　商品細(xì)節(jié)展示區(qū)設(shè)計(jì)　79

5.2.1　商品細(xì)節(jié)展示區(qū)的表現(xiàn)形式　80

5.2.2　商品細(xì)節(jié)展示區(qū)通用設(shè)計(jì)方式　81

5.3　商品功效簡介區(qū)設(shè)計(jì)　83

5.3.1　商品功效簡介區(qū)的設(shè)計(jì)規(guī)范　83

5.3.2　修飾元素在設(shè)計(jì)中的重要性　84

5.4　女鞋商品詳情頁視覺設(shè)計(jì)案例　85

【課后練習(xí)題】

第6章　高點(diǎn)擊率推廣圖片視覺設(shè)計(jì)　93

6.1　推廣圖片構(gòu)圖法則　94

6.1.1　變化式構(gòu)圖　94

6.1.2　對角線構(gòu)圖　94

6.1.3　平衡式構(gòu)圖　94

6.1.4　對稱式構(gòu)圖　95

6.1.5　緊湊式構(gòu)圖　95

6.1.6　X形構(gòu)圖　95

6.2　直通車圖片設(shè)計(jì)　96

6.2.1　圖片整體風(fēng)格設(shè)計(jì)　96

6.2.2　突出商品賣點(diǎn)的設(shè)計(jì)　99

6.3　鉆展圖設(shè)計(jì)　100

6.3.1　博取眼球的創(chuàng)意設(shè)計(jì)　100

6.3.2　統(tǒng)一圖片設(shè)計(jì)風(fēng)格　101

6.3.3　確定重點(diǎn)表現(xiàn)元素　102

6.4　聚劃算主圖設(shè)計(jì)　102

6.4.1　聚劃算主圖的設(shè)計(jì)思路　103

6.4.2　聚劃算主圖設(shè)計(jì)案例　104

【課后練習(xí)題】

第7章　網(wǎng)店促銷活動頁視覺設(shè)計(jì)　107

7.1　促銷廣告的黃金設(shè)計(jì)要素　108

7.1.1　保證設(shè)計(jì)的基本美感　108

7.1.2　營造促銷氛圍　111

7.1.3　促銷廣告圖片的設(shè)計(jì)原則　112

7.2　不同發(fā)展階段的促銷廣告設(shè)計(jì)　113

7.2.1　發(fā)展初期為打造爆款而促銷　113

7.2.2　發(fā)展中期為品牌而促銷　115

7.2.3　發(fā)展成熟期為客戶而促銷　116

【課后練習(xí)題】

第8章　移動端網(wǎng)店的用戶體驗(yàn)設(shè)計(jì)　119

8.1　移動端網(wǎng)店的設(shè)計(jì)標(biāo)準(zhǔn)　120

8.1.1　移動端網(wǎng)店店標(biāo)設(shè)計(jì)　120

8.1.2　移動端網(wǎng)店圖片尺寸標(biāo)準(zhǔn)　121

8.1.3　移動端網(wǎng)店框架結(jié)構(gòu)安排　122

8.2　移動端網(wǎng)店視覺設(shè)計(jì)　123

8.2.1　迎合極速打開需求　123

8.2.2　信息內(nèi)容簡潔，便于快速傳播　124

8.2.3　簡單方便的操作與交互　127

8.2.4　整體設(shè)計(jì)風(fēng)格首尾呼應(yīng)　129

8.2.5　保持色彩與文字的鮮明感　130

8.2.6　保持常換常新　132

【課后練習(xí)題】

第9章　手機(jī)移動端淘寶店鋪視覺設(shè)計(jì)　134

9.1　手機(jī)移動端淘寶店鋪首頁優(yōu)化設(shè)計(jì)　135

9.1.1　店招的優(yōu)化設(shè)計(jì)　135

9.1.2　輪播圖片優(yōu)化設(shè)計(jì)　138

9.1.3　優(yōu)惠券的優(yōu)化設(shè)計(jì)　139

9.1.4　商品分類導(dǎo)航優(yōu)化設(shè)計(jì)　141

9.1.5　商品分類展示優(yōu)化設(shè)計(jì)　141

9.2　電子數(shù)碼類商品店鋪首頁案例解析　143

9.3　手機(jī)淘寶店鋪詳情頁優(yōu)化設(shè)計(jì)　145

9.3.1　詳情頁設(shè)計(jì)的FABE原則　145

9.3.2　商品詳情頁的設(shè)計(jì)誤區(qū)　148

9.3.3　根據(jù)消費(fèi)者的頁面平均停留時間設(shè)計(jì)　151

【課后練習(xí)題】

第10章　手機(jī)移動端微店視覺設(shè)計(jì)　153

10.1　微店首頁優(yōu)化設(shè)計(jì)　154

10.1.1　首頁的框架設(shè)計(jì)　154

10.1.2　清晰而準(zhǔn)確的設(shè)計(jì)思路　158

10.1.3　遵守設(shè)計(jì)學(xué)的七秒定律　158

10.1.4　注重細(xì)節(jié)設(shè)計(jì)　159

10.2　商品詳情頁優(yōu)化設(shè)計(jì)　161

10.2.1　商品主圖的設(shè)計(jì)　161

10.2.2　商品描述圖的設(shè)計(jì)　161

10.3　微店底部導(dǎo)航優(yōu)化設(shè)計(jì)　163

10.3.1　底部導(dǎo)航的主要功能　163

10.3.2　底部導(dǎo)航的設(shè)計(jì)規(guī)則　164

10.4　母嬰微店視覺設(shè)計(jì)案例構(gòu)思　165

10.4.1　首頁設(shè)計(jì)布局規(guī)劃　165

10.4.2　主色調(diào)：高純度暖色調(diào)　165

10.4.3　案例配色擴(kuò)展　166

10.4.4　案例設(shè)計(jì)流程　168

10.5　母嬰微店視覺設(shè)計(jì)案例實(shí)操　169

10.5.1　制作微店店招　169

10.5.2　制作首頁導(dǎo)航　171

10.5.3　制作促銷廣告　172

10.5.4　制作特價(jià)專區(qū)　174

10.5.5　制作商品詳情頁　176

【課后練習(xí)題】