H5設(shè)計(jì)與運(yùn)營（視頻指導(dǎo)版）

第 1章 H5：強(qiáng)互動(dòng)的微場景體驗(yàn) 1
1．1　什么是H5　1
1．1．1　認(rèn)識H5　1
1．1．2　H5與App的區(qū)別　2
1．2　H5營銷的優(yōu)勢　5
1．3　H5的應(yīng)用場景　6
1．4　H5的應(yīng)用類型　10
1．4．1　展示類　10
1．4．2　全景/VR類　10
1．4．3　視頻類　11
1．4．4　動(dòng)畫類　11
1．4．5　交互動(dòng)畫類　12
1．4．6　模擬類　12
1．4．7　合成類　13
1．4．8　數(shù)據(jù)應(yīng)用類　14
1．4．9　游戲類　14
1．4．10　跨屏類　15
1．4．11　綜合類　15
【課后習(xí)題】　16
第　2章 運(yùn)營規(guī)劃：開發(fā)H5的流程與策略　17
2．1　開發(fā)H5的基本流程　17
2．2　開發(fā)H5的細(xì)節(jié)規(guī)范　21
2．2．1　選擇合適的瀏覽器　21
2．2．2　頁面尺寸匹配手機(jī)屏幕　21
2．2．3　優(yōu)化設(shè)計(jì)細(xì)節(jié)　22
2．2．4　優(yōu)化H5的性能　28
2．3　打造爆款H5的策略　30
2．3．1　充電增值　30
2．3．2　娛樂消遣　31
2．3．3　情感共鳴　32
2．3．4　利益驅(qū)使　33
2．3．5　自我展示　34
2．3．6　創(chuàng)意創(chuàng)新　35
2．3．7　熱門話題　36
2．3．8　內(nèi)容精致　37
2．3．9　多樣交互　38
2．3．10　風(fēng)格統(tǒng)一　39
【課后習(xí)題】　39
第3章　H5頁面風(fēng)格設(shè)計(jì)：營造極具沖擊力的視覺氛圍　41
3．1　常見的H5頁面風(fēng)格　41
3．1．1　簡約風(fēng)格　41
3．1．2　扁平化風(fēng)格　42
3．1．3　科技感風(fēng)格　43
3．1．4　卡通手繪風(fēng)格　43
3．1．5　水墨風(fēng)格　44
3．1．6　手繪風(fēng)格　44
3．1．7　混合風(fēng)格　45
3．2　H5頁面色彩設(shè)計(jì)　46
3．2．1　H5頁面設(shè)計(jì)中常用的配色方案　46
3．2．2　H5頁面色彩設(shè)計(jì)策略　50
3．2．3　常用的H5配色工具　52
【課后習(xí)題】　54
第4章　圖文設(shè)計(jì)：用高顏值圖文提升畫面質(zhì)感　55
4．1　H5頁面版式設(shè)計(jì)　55
4．1．1　頁面有層級，元素要統(tǒng)一　55
4．1．2　頁面信息排版　56
4．1．3　可視化頁面信息　59
4．1．4　適當(dāng)?shù)牧舭住?0
4．1．5　保持頁面視覺平衡　60
4．1．6　運(yùn)用插畫　61
4．1．7　版面符合視覺心理　62
4．2　H5頁面圖片設(shè)計(jì)　62
4．2．1　提高或降低圖版率　63
4．2．2　使用全圖和局部細(xì)節(jié)圖片　64
4．2．3　使用圖標(biāo)　64
4．2．4　壓縮圖片大小　66
4．3　H5頁面文本設(shè)計(jì)　67
4．4　實(shí)戰(zhàn)案例——制作邀請函H5頁面　69
4．4．1　使用Photoshop制作邀請函首頁　69
4．4．2　將PSD圖片導(dǎo)入H5頁面　77
【課后習(xí)題】　80
第5章　影音設(shè)計(jì)：增強(qiáng)H5畫面的張力氛圍　81
5．1　H5動(dòng)畫/視頻設(shè)計(jì)　81
5．1．1　H5動(dòng)畫/視頻制作策略　81
5．1．2　常用的H5動(dòng)畫/視頻制作工具　83
5．1．3　實(shí)戰(zhàn)案例——制作易企秀制作健身會(huì)所宣傳視頻　85
5．2　H5背景音樂/音效設(shè)計(jì)　94
5．2．1　H5背景音樂/音效的重要性　94
5．2．2　為H5頁面添加背景音樂/音效　95
5．3　H5音樂素材的搜集與編輯　97
5．3．1　搜集音效素材的渠道　97
5．3．2　實(shí)戰(zhàn)案例——使用Audition制作H5背景音樂　98
【課后習(xí)題】　101
第6章　動(dòng)效設(shè)計(jì)：打造H5頁面交互體驗(yàn)　102
6．1　H5頁面動(dòng)效實(shí)現(xiàn)方法　102
6．2　優(yōu)化H5頁面動(dòng)效　104
6．2．1　翻頁動(dòng)效　105
6．2．2　頁面元素動(dòng)效　105
6．2．3　功能性動(dòng)效　106
6．2．4　對象的線性運(yùn)動(dòng)動(dòng)效　107
6．2．5　元素的形變動(dòng)效　107
6．2．6　平移與縮放動(dòng)效　108
6．2．7　視差動(dòng)效　108
6．2．8　維度動(dòng)效　108
6．3　實(shí)戰(zhàn)案例——使用易企秀制作H5動(dòng)效頁面　109
【課后習(xí)題】　113
第7章　創(chuàng)意優(yōu)化：用高端創(chuàng)意打造刷屏級H5　114
7．1　創(chuàng)作富有“情感”的H5　114
7．1．1　挖痛點(diǎn)　114
7．1．2　戳淚點(diǎn)　116
7．1．3　找共鳴　117
7．1．4　代入感　118
7．2　借助超級IP形成創(chuàng)意主題　119
7．2．1　人氣公知IP主題　119
7．2．2　古文化IP主題　120
7．3　H5創(chuàng)意文案的撰寫　120
7．3．1　確定主題　121
7．3．2　擬定標(biāo)題　122
7．3．3　創(chuàng)意內(nèi)容　123
7．4　運(yùn)用熱門技術(shù)打造H5炫酷畫面　124
7．4．1　基于傳感器　124
7．4．2　基于觸摸屏操作　127
7．4．3　基于畫面呈現(xiàn)　130
7．5　設(shè)計(jì)趣味玩法增加H5的互動(dòng)性　131
7．5．1　抽獎(jiǎng)活動(dòng)　131
7．5．2　搶紅包活動(dòng)　132
7．5．3　投票問卷　133
7．5．4　趣味小游戲　133
7．5．5　場景模擬　134
【課后習(xí)題】　135
第8章　H5制作工具——易企秀的使用　138
8．1　H5基本編輯　138
8．1．1　認(rèn)識易企秀H5編輯器　138
8．1．2　文本編輯　139
8．1．3　圖片編輯　141
8．1．4　背景編輯　143
8．1．5　形狀編輯　144
8．1．6　添加音樂　146
8．1．7　頁面設(shè)置　147
8．1．8　使用特效　149
8．1．9　使用動(dòng)畫　149
8．1．10　使用觸發(fā)　150
8．2　使用易企秀H5編輯器組件　152
8．2．1　使用常用組件　152
8．2．2　使用基礎(chǔ)組件　156
8．2．3　使用高級組件　158
8．2．4　使用微信組件　166
8．2．5　使用AI組件　169
8．3　使用易企秀H5編輯器表單　171
8．3．1　使用常用表單組件　172
8．3．2　使用基礎(chǔ)表單組件　175
8．3．3　使用高級表單組件　177
【課后習(xí)題】　177
第9章　H5制作實(shí)戰(zhàn)：使用易企秀制作H5　179
9．1　實(shí)戰(zhàn)案例——企業(yè)宣傳與邀請函翻頁型H5的制作　179
9．1．1　制作企業(yè)宣傳H5　179
9．1．2　制作邀請函H5　191
9．2　實(shí)戰(zhàn)案例——企業(yè)招聘長頁型H5的制作　195
9．3　實(shí)戰(zhàn)案例——調(diào)查問卷表單型H5的制作　201
9．4　實(shí)戰(zhàn)案例——翻牌游戲互動(dòng)型H5的制作　205
【課后習(xí)題】　209
第　10章 推廣引流：優(yōu)質(zhì)渠道誘發(fā)H5裂變式傳播　210
10．1　微信推廣引流　210
10．1．1　通過微信好友推廣H5　210
10．1．2　通過微信群推廣H5　211
10．1．3　通過朋友圈推廣H5　212
10．2　App推廣引流　214
10．3　新媒體平臺(tái)推廣引流　215
10．4　線下活動(dòng)推廣引流　216
10．5　二維碼推廣引流　216
【課后習(xí)題】　217