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

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

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

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

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

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

1.2.1　了解目標(biāo)消費(fèi)者的心理 /　3

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

1.2.3　明確視覺(jué)定位 /　7

1.2.4　布局視覺(jué)頁(yè)面 /　7

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

1.3.1　設(shè)計(jì)思維 /　8

1.3.2　運(yùn)營(yíng)思維 /　8

1.3.3　營(yíng)銷(xiāo)思維 /　9

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

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

1.4.2　審美能力 /　9

1.4.3　軟件操作能力 /　10

1.4.4　營(yíng)銷(xiāo)文案寫(xiě)作能力 /　10

項(xiàng)目一　運(yùn)用互聯(lián)網(wǎng)設(shè)計(jì)思維分析海報(bào)頁(yè)面 /10

項(xiàng)目二　規(guī)劃網(wǎng)店活動(dòng)頁(yè)面布局 /12

思考與練習(xí)　/13

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

2.1　對(duì)比原則 /　15

2.1.1　色彩對(duì)比 /　15

2.1.2　圖文對(duì)比 /　17

2.1.3　方向?qū)Ρ?/　18

2.1.4　大小對(duì)比 /　18

2.2　重復(fù)原則 /　19

2.2.1　重復(fù)原則的準(zhǔn)則 /　19

2.2.2　重復(fù)原則的運(yùn)用 /　19

2.3　平衡原則 /　21

2.3.1　對(duì)稱平衡 /　21

2.3.2　非對(duì)稱平衡 /　21

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

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

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

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

項(xiàng)目二　中秋節(jié)Banner視覺(jué)設(shè)計(jì) /　24

思考與練習(xí)　/　27

第3章　互聯(lián)網(wǎng)視覺(jué)設(shè)計(jì)的基本要素 /　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　文字的對(duì)比 /　33

3.2.3　文字的排版 /　34

3.3　圖片 /　35

3.3.1　圖片的基本要求 /　35

3.3.2　圖片的簡(jiǎn)單處理 /　36

3.3.3　GIF動(dòng)圖的制作 /　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

項(xiàng)目一　規(guī)劃茶葉海報(bào)頁(yè)面 /　40

項(xiàng)目二　規(guī)劃“11.11”活動(dòng)頁(yè)面 /　41

思考與練習(xí)　/　43

第4章　電商視覺(jué)設(shè)計(jì) /　44

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

4.1.1　功能性原則 /　45

4.1.2　可視性原則 /　46

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

4.2　網(wǎng)店頁(yè)面視覺(jué)設(shè)計(jì) /　47

4.2.1　網(wǎng)店頁(yè)面的素材準(zhǔn)備 /　48

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

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

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

4.3　網(wǎng)店首頁(yè)視覺(jué)設(shè)計(jì) /　52

4.3.1　網(wǎng)店首頁(yè)視覺(jué)設(shè)計(jì)要點(diǎn) /　52

4.3.2　店招模塊視覺(jué)設(shè)計(jì) /　53

4.3.3　首頁(yè)焦點(diǎn)圖模塊視覺(jué)設(shè)計(jì) /　54

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

4.3.5　分類導(dǎo)航模塊視覺(jué)設(shè)計(jì) /　55

4.3.6　活動(dòng)展示模塊視覺(jué)設(shè)計(jì) /　55

4.4　商品詳情頁(yè)視覺(jué)設(shè)計(jì) /　56

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

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

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

項(xiàng)目一　食品類網(wǎng)店首頁(yè)視覺(jué)設(shè)計(jì) /　58

項(xiàng)目二　堅(jiān)果商品詳情頁(yè)視覺(jué)設(shè)計(jì) /　65

思考與練習(xí)　/　71

第5章　微信公眾號(hào)視覺(jué)設(shè)計(jì) /　72

5.1　了解微信公眾號(hào) /　73

5.1.1　微信公眾號(hào)的類型 /　73

5.1.2　微信公眾號(hào)的功能 /　76

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

5.1.4　微信公眾號(hào)的視覺(jué)設(shè)計(jì)元素 /　79

5.2　微信公眾號(hào)的視覺(jué)設(shè)計(jì)流程 /　80

5.2.1　分析消費(fèi)者需求 /　80

5.2.2　分析競(jìng)爭(zhēng)對(duì)手 /　82

5.2.3　確定設(shè)計(jì)風(fēng)格 /　82

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

5.3　微信公眾號(hào)各版塊視覺(jué)設(shè)計(jì) /　83

5.3.1　公眾號(hào)封面視覺(jué)設(shè)計(jì) /　83

5.3.2　公眾號(hào)Banner視覺(jué)設(shè)計(jì) /　83

5.3.3　公眾號(hào)廣告視覺(jué)設(shè)計(jì) /　84

5.3.4　公眾號(hào)推薦視覺(jué)設(shè)計(jì) /　85

5.3.5　公眾號(hào)求關(guān)注視覺(jué)設(shè)計(jì) /　85

項(xiàng)目　“食味坊”微信公眾號(hào)頁(yè)面設(shè)計(jì) /　86

思考與練習(xí)　/　92

第6章　H5視覺(jué)設(shè)計(jì) /　93

6.1　H5概述 /　94

6.1.1　什么是H5 /　94

6.1.2　H5的類型 /　95

6.1.3　制作H5的常用工具 /　98

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

6.2.1　做好前期準(zhǔn)備 /　99

6.2.2　繪制H5原型圖 /　99

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

6.2.4　利用工具制作H5 /　100

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

6.3　H5視覺(jué)設(shè)計(jì)要點(diǎn) /　102

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

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

6.3.3　注重氛圍 /　103

6.3.4　強(qiáng)調(diào)真實(shí)的用戶體驗(yàn) /　104

6.4　H5視覺(jué)設(shè)計(jì)分析 /　104

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

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

6.4.3　活動(dòng)設(shè)計(jì)分析 /　105

6.4.4　動(dòng)效設(shè)計(jì)分析 /　106

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

項(xiàng)目　促銷(xiāo)活動(dòng)H5視覺(jué)設(shè)計(jì) /　107

思考與練習(xí)　/　117

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

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

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

7.1.2　網(wǎng)站頁(yè)面的視覺(jué)設(shè)計(jì)特點(diǎn) /　122

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

7.2　網(wǎng)站頁(yè)面布局與視覺(jué)風(fēng)格 /　126

7.2.1　網(wǎng)站頁(yè)面布局的常見(jiàn)方式 /　126

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

7.2.3　常見(jiàn)的網(wǎng)站頁(yè)面視覺(jué)設(shè)計(jì)風(fēng)格 /　129

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

7.3.1　需求分析 /　132

7.3.2　制作原型圖 /　132

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

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

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

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

思考與練習(xí)　/　141

第8章　活動(dòng)廣告頁(yè)面視覺(jué)設(shè)計(jì) /　142

8.1　明確活動(dòng)廣告的目的 /　143

8.1.1　拉新 /　143

8.1.2　留存 /　144

8.1.3　擴(kuò)大品牌知名度 /　144

8.1.4　清理庫(kù)存 /　145

8.2　活動(dòng)廣告頁(yè)面的設(shè)計(jì)原則 /　146

8.2.1　主題突出 /　146

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

8.2.3　目標(biāo)明確 /　147

8.3　活動(dòng)廣告頁(yè)面的設(shè)計(jì)要求 /　148

8.3.1　明確活動(dòng)主題風(fēng)格 /　148

8.3.2　合理搭配色彩 /　149

8.3.3　合理搭配點(diǎn)綴物 /　151

8.3.4　營(yíng)造促銷(xiāo)氛圍 /　151

項(xiàng)目一　分析“中秋節(jié)”活動(dòng)廣告頁(yè)面 /　153

項(xiàng)目二　“化妝品節(jié)”活動(dòng)廣告頁(yè)面視覺(jué)設(shè)計(jì) /　155

思考與練習(xí)　/　159

第9章　短視頻視覺(jué)設(shè)計(jì) /　161

9.1　認(rèn)識(shí)短視頻 /　162

9.1.1　短視頻的特點(diǎn) /　162

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

9.1.3　短視頻的主要類型 /　163

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

9.2.1　前期準(zhǔn)備 /　165

9.2.2　拍攝短視頻 /　166

9.2.3　后期制作 /　166

9.3　短視頻的拍攝 /　166

9.3.1　短視頻拍攝的主流平臺(tái) /　166

9.3.2　短視頻拍攝的要點(diǎn) /　167

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

9.4　短視頻的后期處理 /　169

9.4.1　短視頻后期處理的主流平臺(tái) /　170

9.4.2　為短視頻添加字幕 /　170

9.4.3　為短視頻添加特效 /　171

9.4.4　為短視頻添加貼紙 /　172

9.4.5　為短視頻添加音樂(lè) /　172

9.4.6　為短視頻添加濾鏡 /　173

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

項(xiàng)目一　拍攝水果類短視頻 /　174

項(xiàng)目二　水果類短視頻的后期處理 /　176

思考與練習(xí)　/　180

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

10.1　案例分析 /　182

10.1.1　分析需求 /　182

10.1.2　確定風(fēng)格與方向 /　183

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

10.2.1　前期策劃 /　184

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

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

10.3.1　前期策劃 /　188

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

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

10.4.1　前期策劃 /　192

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

10.5　設(shè)計(jì)品牌活動(dòng)宣傳頁(yè)面 /　197

10.5.1　前期策劃 /　197

10.5.2　微信公眾號(hào)頁(yè)面視覺(jué)設(shè)計(jì) /　198

10.5.3　H5活動(dòng)頁(yè)面視覺(jué)設(shè)計(jì) /　202

10.5.4　網(wǎng)頁(yè)活動(dòng)廣告頁(yè)面視覺(jué)設(shè)計(jì) /　205

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

10.6.1　前期策劃 /　206

10.6.2　家居短視頻的拍攝 /　207

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