第 1章 初識互聯(lián)網(wǎng)視覺設(shè)計　/ 1

1.1　互聯(lián)網(wǎng)視覺設(shè)計概述 /　2

1.1.1　什么是互聯(lián)網(wǎng)視覺設(shè)計 /　2

1.1.2　視覺設(shè)計在互聯(lián)網(wǎng)中的體現(xiàn) /　2

1.1.3　互聯(lián)網(wǎng)視覺設(shè)計未來的發(fā)展趨勢 /　3

1.2　互聯(lián)網(wǎng)視覺設(shè)計前的準備工作 /　3

1.2.1　了解目標消費者的心理 /　3

1.2.2　分析品牌并收集素材 /　6

1.2.3　明確視覺定位 /　7

1.2.4　布局視覺頁面 /　7

1.3　互聯(lián)網(wǎng)視覺設(shè)計思維 /　8

1.3.1　設(shè)計思維 /　8

1.3.2　運營思維 /　8

1.3.3　營銷思維 /　9

1.4　學好互聯(lián)網(wǎng)視覺設(shè)計應具備的能力 /　9

1.4.1　創(chuàng)造能力 /　9

1.4.2　審美能力 /　9

1.4.3　軟件操作能力 /　10

1.4.4　營銷文案寫作能力 /　10

項目一　運用互聯(lián)網(wǎng)設(shè)計思維分析海報頁面 /10

項目二　規(guī)劃網(wǎng)店活動頁面布局 /12

思考與練習　/13

第　2章 互聯(lián)網(wǎng)視覺設(shè)計的基本原則 /　14

2.1　對比原則 /　15

2.1.1　色彩對比 /　15

2.1.2　圖文對比 /　17

2.1.3　方向?qū)Ρ?/　18

2.1.4　大小對比 /　18

2.2　重復原則 /　19

2.2.1　重復原則的準則 /　19

2.2.2　重復原則的運用 /　19

2.3　平衡原則 /　21

2.3.1　對稱平衡 /　21

2.3.2　非對稱平衡 /　21

2.4　節(jié)奏與韻律原則 /　22

2.4.1　節(jié)奏與韻律原則的概念 /　22

2.4.2　節(jié)奏與韻律原則的運用 /　22

項目一　分析網(wǎng)站中視覺設(shè)計的基本原則 /　23

項目二　中秋節(jié)Banner視覺設(shè)計 /　24

思考與練習　/　27

第3章　互聯(lián)網(wǎng)視覺設(shè)計的基本要素 /　28

3.1　色彩 /　29

3.1.1　色彩的屬性 /　29

3.1.2　色彩的搭配 /　31

3.1.3　色彩的組合 /　32

3.1.4　色彩的聚焦 /　32

3.2　文字 /　33

3.2.1　文字的字體 /　33

3.2.2　文字的對比 /　33

3.2.3　文字的排版 /　34

3.3　圖片 /　35

3.3.1　圖片的基本要求 /　35

3.3.2　圖片的簡單處理 /　36

3.3.3　GIF動圖的制作 /　37

3.4　構(gòu)圖 /　38

3.4.1　切割構(gòu)圖法 /　38

3.4.2　韻律構(gòu)圖法 /　38

3.4.3　平衡構(gòu)圖法 /　38

3.4.4　放射構(gòu)圖法 /　38

3.4.5　流程構(gòu)圖法 /　39

3.4.6　物體輪廓構(gòu)圖法 /　39

項目一　規(guī)劃茶葉海報頁面 /　40

項目二　規(guī)劃“11.11”活動頁面 /　41

思考與練習　/　43

第4章　電商視覺設(shè)計 /　44

4.1　電商視覺設(shè)計的原則 /　45

4.1.1　功能性原則 /　45

4.1.2　可視性原則 /　46

4.1.3　統(tǒng)一性原則 /　47

4.2　網(wǎng)店頁面視覺設(shè)計 /　47

4.2.1　網(wǎng)店頁面的素材準備 /　48

4.2.2　網(wǎng)店頁面的視覺定位 /　49

4.2.3　網(wǎng)店圖片設(shè)計規(guī)范 /　50

4.2.4　網(wǎng)店頁面視覺設(shè)計的基本要求 /　51

4.3　網(wǎng)店首頁視覺設(shè)計 /　52

4.3.1　網(wǎng)店首頁視覺設(shè)計要點 /　52

4.3.2　店招模塊視覺設(shè)計 /　53

4.3.3　首頁焦點圖模塊視覺設(shè)計 /　54

4.3.4　優(yōu)惠券模塊視覺設(shè)計 /　54

4.3.5　分類導航模塊視覺設(shè)計 /　55

4.3.6　活動展示模塊視覺設(shè)計 /　55

4.4　商品詳情頁視覺設(shè)計 /　56

4.4.1　商品詳情頁的制作規(guī)范 /　56

4.4.2　商品詳情頁的內(nèi)容安排 /　56

4.4.3　商品詳情頁視覺設(shè)計案例分析 /　57

項目一　食品類網(wǎng)店首頁視覺設(shè)計 /　58

項目二　堅果商品詳情頁視覺設(shè)計 /　65

思考與練習　/　71

第5章　微信公眾號視覺設(shè)計 /　72

5.1　了解微信公眾號 /　73

5.1.1　微信公眾號的類型 /　73

5.1.2　微信公眾號的功能 /　76

5.1.3　微信公眾號的設(shè)置 /　76

5.1.4　微信公眾號的視覺設(shè)計元素 /　79

5.2　微信公眾號的視覺設(shè)計流程 /　80

5.2.1　分析消費者需求 /　80

5.2.2　分析競爭對手 /　82

5.2.3　確定設(shè)計風格 /　82

5.2.4　完成設(shè)計草案 /　82

5.3　微信公眾號各版塊視覺設(shè)計 /　83

5.3.1　公眾號封面視覺設(shè)計 /　83

5.3.2　公眾號Banner視覺設(shè)計 /　83

5.3.3　公眾號廣告視覺設(shè)計 /　84

5.3.4　公眾號推薦視覺設(shè)計 /　85

5.3.5　公眾號求關(guān)注視覺設(shè)計 /　85

項目　“食味坊”微信公眾號頁面設(shè)計 /　86

思考與練習　/　92

第6章　H5視覺設(shè)計 /　93

6.1　H5概述 /　94

6.1.1　什么是H5 /　94

6.1.2　H5的類型 /　95

6.1.3　制作H5的常用工具 /　98

6.2　H5視覺設(shè)計的基本流程 /　99

6.2.1　做好前期準備 /　99

6.2.2　繪制H5原型圖 /　99

6.2.3　設(shè)計H5界面 /　100

6.2.4　利用工具制作H5 /　100

6.2.5　分享與發(fā)布H5 /　101

6.3　H5視覺設(shè)計要點 /　102

6.3.1　創(chuàng)新創(chuàng)意 /　102

6.3.2　統(tǒng)一風格 /　102

6.3.3　注重氛圍 /　103

6.3.4　強調(diào)真實的用戶體驗 /　104

6.4　H5視覺設(shè)計分析 /　104

6.4.1　版式設(shè)計分析 /　104

6.4.2　交互設(shè)計分析 /　104

6.4.3　活動設(shè)計分析 /　105

6.4.4　動效設(shè)計分析 /　106

6.4.5　音效設(shè)計分析 /　107

項目　促銷活動H5視覺設(shè)計 /　107

思考與練習　/　117

第7章　網(wǎng)站頁面視覺設(shè)計 /　118

7.1　了解網(wǎng)站頁面視覺設(shè)計 /　119

7.1.1　網(wǎng)站頁面的視覺構(gòu)成元素 /　120

7.1.2　網(wǎng)站頁面的視覺設(shè)計特點 /　122

7.1.3　網(wǎng)站頁面的視覺設(shè)計原則 /　124

7.2　網(wǎng)站頁面布局與視覺風格 /　126

7.2.1　網(wǎng)站頁面布局的常見方式 /　126

7.2.2　網(wǎng)站頁面布局形態(tài) /　128

7.2.3　常見的網(wǎng)站頁面視覺設(shè)計風格 /　129

7.3　網(wǎng)站頁面的視覺設(shè)計流程 /　132

7.3.1　需求分析 /　132

7.3.2　制作原型圖 /　132

7.3.3　確定網(wǎng)站頁面的風格與規(guī)范 /　133

7.3.4　制作網(wǎng)站頁面 /　133

7.3.5　網(wǎng)站頁面切片 /　134

項目　設(shè)計旅游網(wǎng)站首頁頁面 /　134

思考與練習　/　141

第8章　活動廣告頁面視覺設(shè)計 /　142

8.1　明確活動廣告的目的 /　143

8.1.1　拉新 /　143

8.1.2　留存 /　144

8.1.3　擴大品牌知名度 /　144

8.1.4　清理庫存 /　145

8.2　活動廣告頁面的設(shè)計原則 /　146

8.2.1　主題突出 /　146

8.2.2　風格統(tǒng)一 /　146

8.2.3　目標明確 /　147

8.3　活動廣告頁面的設(shè)計要求 /　148

8.3.1　明確活動主題風格 /　148

8.3.2　合理搭配色彩 /　149

8.3.3　合理搭配點綴物 /　151

8.3.4　營造促銷氛圍 /　151

項目一　分析“中秋節(jié)”活動廣告頁面 /　153

項目二　“化妝品節(jié)”活動廣告頁面視覺設(shè)計 /　155

思考與練習　/　159

第9章　短視頻視覺設(shè)計 /　161

9.1　認識短視頻 /　162

9.1.1　短視頻的特點 /　162

9.1.2　短視頻的發(fā)展趨勢 /　163

9.1.3　短視頻的主要類型 /　163

9.2　短視頻的視覺設(shè)計流程 /　165

9.2.1　前期準備 /　165

9.2.2　拍攝短視頻 /　166

9.2.3　后期制作 /　166

9.3　短視頻的拍攝 /　166

9.3.1　短視頻拍攝的主流平臺 /　166

9.3.2　短視頻拍攝的要點 /　167

9.3.3　短視頻拍攝的構(gòu)圖 /　168

9.4　短視頻的后期處理 /　169

9.4.1　短視頻后期處理的主流平臺 /　170

9.4.2　為短視頻添加字幕 /　170

9.4.3　為短視頻添加特效 /　171

9.4.4　為短視頻添加貼紙 /　172

9.4.5　為短視頻添加音樂 /　172

9.4.6　為短視頻添加濾鏡 /　173

9.4.7　為短視頻添加轉(zhuǎn)場 /　173

項目一　拍攝水果類短視頻 /　174

項目二　水果類短視頻的后期處理 /　176

思考與練習　/　180

第　10章 綜合案例——家居類品牌視覺設(shè)計 /　181

10.1　案例分析 /　182

10.1.1　分析需求 /　182

10.1.2　確定風格與方向 /　183

10.2　設(shè)計移動端網(wǎng)店首頁頁面 /　183

10.2.1　前期策劃 /　184

10.2.2　家居類移動端網(wǎng)店首頁設(shè)計 /　184

10.3　設(shè)計商品詳情頁 /　188

10.3.1　前期策劃 /　188

10.3.2　沙發(fā)商品詳情頁設(shè)計 /　189

10.4　設(shè)計網(wǎng)站首頁頁面 /　192

10.4.1　前期策劃 /　192

10.4.2　網(wǎng)站首頁頁面設(shè)計 /　194

10.5　設(shè)計品牌活動宣傳頁面 /　197

10.5.1　前期策劃 /　197

10.5.2　微信公眾號頁面視覺設(shè)計 /　198

10.5.3　H5活動頁面視覺設(shè)計 /　202

10.5.4　網(wǎng)頁活動廣告頁面視覺設(shè)計 /　205

10.6　拍攝與處理家居短視頻 /　206

10.6.1　前期策劃 /　206

10.6.2　家居短視頻的拍攝 /　207

10.6.3　家居短視頻的后期處理 /　208