互聯(lián)網(wǎng)視覺設計（全彩慕課版）

第 1章 初識互聯(lián)網(wǎng)視覺設計　/ 1
1.1　互聯(lián)網(wǎng)視覺設計概述 /　2
1.1.1　什么是互聯(lián)網(wǎng)視覺設計 /　2
1.1.2　視覺設計在互聯(lián)網(wǎng)中的體現(xiàn) /　2
1.1.3　互聯(lián)網(wǎng)視覺設計未來的發(fā)展趨勢 /　3
1.2　互聯(lián)網(wǎng)視覺設計前的準備工作 /　3
1.2.1　了解目標消費者的心理 /　3
1.2.2　分析品牌并收集素材 /　6
1.2.3　明確視覺定位 /　7
1.2.4　布局視覺頁面 /　7
1.3　互聯(lián)網(wǎng)視覺設計思維 /　8
1.3.1　設計思維 /　8
1.3.2　運營思維 /　8
1.3.3　營銷思維 /　9
1.4　學好互聯(lián)網(wǎng)視覺設計應具備的能力 /　9
1.4.1　創(chuàng)造能力 /　9
1.4.2　審美能力 /　9
1.4.3　軟件操作能力 /　10
1.4.4　營銷文案寫作能力 /　10
項目一　運用互聯(lián)網(wǎng)設計思維分析海報頁面 /10
項目二　規(guī)劃網(wǎng)店活動頁面布局 /12
思考與練習　/13
第　2章 互聯(lián)網(wǎng)視覺設計的基本原則 /　14
2.1　對比原則 /　15
2.1.1　色彩對比 /　15
2.1.2　圖文對比 /　17
2.1.3　方向對比 /　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)站中視覺設計的基本原則 /　23
項目二　中秋節(jié)Banner視覺設計 /　24
思考與練習　/　27
第3章　互聯(lián)網(wǎng)視覺設計的基本要素 /　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　構圖 /　38
3.4.1　切割構圖法 /　38
3.4.2　韻律構圖法 /　38
3.4.3　平衡構圖法 /　38
3.4.4　放射構圖法 /　38
3.4.5　流程構圖法 /　39
3.4.6　物體輪廓構圖法 /　39
項目一　規(guī)劃茶葉海報頁面 /　40
項目二　規(guī)劃“11.11”活動頁面 /　41
思考與練習　/　43
第4章　電商視覺設計 /　44
4.1　電商視覺設計的原則 /　45
4.1.1　功能性原則 /　45
4.1.2　可視性原則 /　46
4.1.3　統(tǒng)一性原則 /　47
4.2　網(wǎng)店頁面視覺設計 /　47
4.2.1　網(wǎng)店頁面的素材準備 /　48
4.2.2　網(wǎng)店頁面的視覺定位 /　49
4.2.3　網(wǎng)店圖片設計規(guī)范 /　50
4.2.4　網(wǎng)店頁面視覺設計的基本要求 /　51
4.3　網(wǎng)店首頁視覺設計 /　52
4.3.1　網(wǎng)店首頁視覺設計要點 /　52
4.3.2　店招模塊視覺設計 /　53
4.3.3　首頁焦點圖模塊視覺設計 /　54
4.3.4　優(yōu)惠券模塊視覺設計 /　54
4.3.5　分類導航模塊視覺設計 /　55
4.3.6　活動展示模塊視覺設計 /　55
4.4　商品詳情頁視覺設計 /　56
4.4.1　商品詳情頁的制作規(guī)范 /　56
4.4.2　商品詳情頁的內(nèi)容安排 /　56
4.4.3　商品詳情頁視覺設計案例分析 /　57
項目一　食品類網(wǎng)店首頁視覺設計 /　58
項目二　堅果商品詳情頁視覺設計 /　65
思考與練習　/　71
第5章　微信公眾號視覺設計 /　72
5.1　了解微信公眾號 /　73
5.1.1　微信公眾號的類型 /　73
5.1.2　微信公眾號的功能 /　76
5.1.3　微信公眾號的設置 /　76
5.1.4　微信公眾號的視覺設計元素 /　79
5.2　微信公眾號的視覺設計流程 /　80
5.2.1　分析消費者需求 /　80
5.2.2　分析競爭對手 /　82
5.2.3　確定設計風格 /　82
5.2.4　完成設計草案 /　82
5.3　微信公眾號各版塊視覺設計 /　83
5.3.1　公眾號封面視覺設計 /　83
5.3.2　公眾號Banner視覺設計 /　83
5.3.3　公眾號廣告視覺設計 /　84
5.3.4　公眾號推薦視覺設計 /　85
5.3.5　公眾號求關注視覺設計 /　85
項目　“食味坊”微信公眾號頁面設計 /　86
思考與練習　/　92
第6章　H5視覺設計 /　93
6.1　H5概述 /　94
6.1.1　什么是H5 /　94
6.1.2　H5的類型 /　95
6.1.3　制作H5的常用工具 /　98
6.2　H5視覺設計的基本流程 /　99
6.2.1　做好前期準備 /　99
6.2.2　繪制H5原型圖 /　99
6.2.3　設計H5界面 /　100
6.2.4　利用工具制作H5 /　100
6.2.5　分享與發(fā)布H5 /　101
6.3　H5視覺設計要點 /　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視覺設計分析 /　104
6.4.1　版式設計分析 /　104
6.4.2　交互設計分析 /　104
6.4.3　活動設計分析 /　105
6.4.4　動效設計分析 /　106
6.4.5　音效設計分析 /　107
項目　促銷活動H5視覺設計 /　107
思考與練習　/　117
第7章　網(wǎng)站頁面視覺設計 /　118
7.1　了解網(wǎng)站頁面視覺設計 /　119
7.1.1　網(wǎng)站頁面的視覺構成元素 /　120
7.1.2　網(wǎng)站頁面的視覺設計特點 /　122
7.1.3　網(wǎng)站頁面的視覺設計原則 /　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)站頁面視覺設計風格 /　129
7.3　網(wǎng)站頁面的視覺設計流程 /　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
項目　設計旅游網(wǎng)站首頁頁面 /　134
思考與練習　/　141
第8章　活動廣告頁面視覺設計 /　142
8.1　明確活動廣告的目的 /　143
8.1.1　拉新 /　143
8.1.2　留存 /　144
8.1.3　擴大品牌知名度 /　144
8.1.4　清理庫存 /　145
8.2　活動廣告頁面的設計原則 /　146
8.2.1　主題突出 /　146
8.2.2　風格統(tǒng)一 /　146
8.2.3　目標明確 /　147
8.3　活動廣告頁面的設計要求 /　148
8.3.1　明確活動主題風格 /　148
8.3.2　合理搭配色彩 /　149
8.3.3　合理搭配點綴物 /　151
8.3.4　營造促銷氛圍 /　151
項目一　分析“中秋節(jié)”活動廣告頁面 /　153
項目二　“化妝品節(jié)”活動廣告頁面視覺設計 /　155
思考與練習　/　159
第9章　短視頻視覺設計 /　161
9.1　認識短視頻 /　162
9.1.1　短視頻的特點 /　162
9.1.2　短視頻的發(fā)展趨勢 /　163
9.1.3　短視頻的主要類型 /　163
9.2　短視頻的視覺設計流程 /　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　短視頻拍攝的構圖 /　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　為短視頻添加轉場 /　173
項目一　拍攝水果類短視頻 /　174
項目二　水果類短視頻的后期處理 /　176
思考與練習　/　180
第　10章 綜合案例——家居類品牌視覺設計 /　181
10.1　案例分析 /　182
10.1.1　分析需求 /　182
10.1.2　確定風格與方向 /　183
10.2　設計移動端網(wǎng)店首頁頁面 /　183
10.2.1　前期策劃 /　184
10.2.2　家居類移動端網(wǎng)店首頁設計 /　184
10.3　設計商品詳情頁 /　188
10.3.1　前期策劃 /　188
10.3.2　沙發(fā)商品詳情頁設計 /　189
10.4　設計網(wǎng)站首頁頁面 /　192
10.4.1　前期策劃 /　192
10.4.2　網(wǎng)站首頁頁面設計 /　194
10.5　設計品牌活動宣傳頁面 /　197
10.5.1　前期策劃 /　197
10.5.2　微信公眾號頁面視覺設計 /　198
10.5.3　H5活動頁面視覺設計 /　202
10.5.4　網(wǎng)頁活動廣告頁面視覺設計 /　205
10.6　拍攝與處理家居短視頻 /　206
10.6.1　前期策劃 /　206
10.6.2　家居短視頻的拍攝 /　207
10.6.3　家居短視頻的后期處理 /　208