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

第 1章 H5：強(qiáng)互動的微場景體驗 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　動畫類　11
1．4．5　交互動畫類　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章 運營規(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è)計細(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è)計：營造極具沖擊力的視覺氛圍　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è)計　46
3．2．1　H5頁面設(shè)計中常用的配色方案　46
3．2．2　H5頁面色彩設(shè)計策略　50
3．2．3　常用的H5配色工具　52
【課后習(xí)題】　54
第4章　圖文設(shè)計：用高顏值圖文提升畫面質(zhì)感　55
4．1　H5頁面版式設(shè)計　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　運用插畫　61
4．1．7　版面符合視覺心理　62
4．2　H5頁面圖片設(shè)計　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è)計　67
4．4　實戰(zhàn)案例——制作邀請函H5頁面　69
4．4．1　使用Photoshop制作邀請函首頁　69
4．4．2　將PSD圖片導(dǎo)入H5頁面　77
【課后習(xí)題】　80
第5章　影音設(shè)計：增強(qiáng)H5畫面的張力氛圍　81
5．1　H5動畫/視頻設(shè)計　81
5．1．1　H5動畫/視頻制作策略　81
5．1．2　常用的H5動畫/視頻制作工具　83
5．1．3　實戰(zhàn)案例——制作易企秀制作健身會所宣傳視頻　85
5．2　H5背景音樂/音效設(shè)計　94
5．2．1　H5背景音樂/音效的重要性　94
5．2．2　為H5頁面添加背景音樂/音效　95
5．3　H5音樂素材的搜集與編輯　97
5．3．1　搜集音效素材的渠道　97
5．3．2　實戰(zhàn)案例——使用Audition制作H5背景音樂　98
【課后習(xí)題】　101
第6章　動效設(shè)計：打造H5頁面交互體驗　102
6．1　H5頁面動效實現(xiàn)方法　102
6．2　優(yōu)化H5頁面動效　104
6．2．1　翻頁動效　105
6．2．2　頁面元素動效　105
6．2．3　功能性動效　106
6．2．4　對象的線性運動動效　107
6．2．5　元素的形變動效　107
6．2．6　平移與縮放動效　108
6．2．7　視差動效　108
6．2．8　維度動效　108
6．3　實戰(zhàn)案例——使用易企秀制作H5動效頁面　109
【課后習(xí)題】　113
第7章　創(chuàng)意優(yōu)化：用高端創(chuàng)意打造刷屏級H5　114
7．1　創(chuàng)作富有“情感”的H5　114
7．1．1　挖痛點　114
7．1．2　戳淚點　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　運用熱門技術(shù)打造H5炫酷畫面　124
7．4．1　基于傳感器　124
7．4．2　基于觸摸屏操作　127
7．4．3　基于畫面呈現(xiàn)　130
7．5　設(shè)計趣味玩法增加H5的互動性　131
7．5．1　抽獎活動　131
7．5．2　搶紅包活動　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　使用動畫　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制作實戰(zhàn)：使用易企秀制作H5　179
9．1　實戰(zhàn)案例——企業(yè)宣傳與邀請函翻頁型H5的制作　179
9．1．1　制作企業(yè)宣傳H5　179
9．1．2　制作邀請函H5　191
9．2　實戰(zhàn)案例——企業(yè)招聘長頁型H5的制作　195
9．3　實戰(zhàn)案例——調(diào)查問卷表單型H5的制作　201
9．4　實戰(zhàn)案例——翻牌游戲互動型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　新媒體平臺推廣引流　215
10．4　線下活動推廣引流　216
10．5　二維碼推廣引流　216
【課后習(xí)題】　217