H5設計與運營（視頻指導版）

第 1章 H5：強互動的微場景體驗 1
1．1　什么是H5　1
1．1．1　認識H5　1
1．1．2　H5與App的區(qū)別　2
1．2　H5營銷的優(yōu)勢　5
1．3　H5的應用場景　6
1．4　H5的應用類型　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ù)應用類　14
1．4．9　游戲類　14
1．4．10　跨屏類　15
1．4．11　綜合類　15
【課后習題】　16
第　2章 運營規(guī)劃：開發(fā)H5的流程與策略　17
2．1　開發(fā)H5的基本流程　17
2．2　開發(fā)H5的細節(jié)規(guī)范　21
2．2．1　選擇合適的瀏覽器　21
2．2．2　頁面尺寸匹配手機屏幕　21
2．2．3　優(yōu)化設計細節(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　利益驅使　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　風格統(tǒng)一　39
【課后習題】　39
第3章　H5頁面風格設計：營造極具沖擊力的視覺氛圍　41
3．1　常見的H5頁面風格　41
3．1．1　簡約風格　41
3．1．2　扁平化風格　42
3．1．3　科技感風格　43
3．1．4　卡通手繪風格　43
3．1．5　水墨風格　44
3．1．6　手繪風格　44
3．1．7　混合風格　45
3．2　H5頁面色彩設計　46
3．2．1　H5頁面設計中常用的配色方案　46
3．2．2　H5頁面色彩設計策略　50
3．2．3　常用的H5配色工具　52
【課后習題】　54
第4章　圖文設計：用高顏值圖文提升畫面質感　55
4．1　H5頁面版式設計　55
4．1．1　頁面有層級，元素要統(tǒng)一　55
4．1．2　頁面信息排版　56
4．1．3　可視化頁面信息　59
4．1．4　適當?shù)牧舭住?0
4．1．5　保持頁面視覺平衡　60
4．1．6　運用插畫　61
4．1．7　版面符合視覺心理　62
4．2　H5頁面圖片設計　62
4．2．1　提高或降低圖版率　63
4．2．2　使用全圖和局部細節(jié)圖片　64
4．2．3　使用圖標　64
4．2．4　壓縮圖片大小　66
4．3　H5頁面文本設計　67
4．4　實戰(zhàn)案例——制作邀請函H5頁面　69
4．4．1　使用Photoshop制作邀請函首頁　69
4．4．2　將PSD圖片導入H5頁面　77
【課后習題】　80
第5章　影音設計：增強H5畫面的張力氛圍　81
5．1　H5動畫/視頻設計　81
5．1．1　H5動畫/視頻制作策略　81
5．1．2　常用的H5動畫/視頻制作工具　83
5．1．3　實戰(zhàn)案例——制作易企秀制作健身會所宣傳視頻　85
5．2　H5背景音樂/音效設計　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
【課后習題】　101
第6章　動效設計：打造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
【課后習題】　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　擬定標題　122
7．3．3　創(chuàng)意內(nèi)容　123
7．4　運用熱門技術打造H5炫酷畫面　124
7．4．1　基于傳感器　124
7．4．2　基于觸摸屏操作　127
7．4．3　基于畫面呈現(xiàn)　130
7．5　設計趣味玩法增加H5的互動性　131
7．5．1　抽獎活動　131
7．5．2　搶紅包活動　132
7．5．3　投票問卷　133
7．5．4　趣味小游戲　133
7．5．5　場景模擬　134
【課后習題】　135
第8章　H5制作工具——易企秀的使用　138
8．1　H5基本編輯　138
8．1．1　認識易企秀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　頁面設置　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　使用基礎組件　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　使用基礎表單組件　175
8．3．3　使用高級表單組件　177
【課后習題】　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
【課后習題】　209
第　10章 推廣引流：優(yōu)質渠道誘發(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
【課后習題】　217