●第1章H5：強互動的微場景體驗 1
1.1什麼是H51
1.1.1認識H51
1.1.2H5與App的區別2
1.2H5營銷的優勢5
1.3H5的應用場景6
1.4H5的應用類型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數據應用類14
1.4.9遊戲類14
1.4.10跨屏類15
1.4.11綜合類15
【課後習題】16
第2章運營規劃：開發H5的流程與策略17
2.1開發H5的基本流程17
2.2開發H5的細節規範21
2.2.1選擇合適的瀏覽器21
2.2.2頁面尺寸匹配手機屏幕21
2.2.3優化設計細節22
2.2.4優化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創意創新35
2.3.7熱門話題36
2.3.8內容精致37
2.3.9多樣交互38
2.3.10風格統一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.2H5頁面色彩設計46
3.2.1H5頁面設計中常用的配色方案46
3.2.2H5頁面色彩設計策略50
3.2.3常用的H5配色工具52
【課後習題】54
第4章圖文設計：用高顏值圖文提升畫面質感55
4.1H5頁面版式設計55
4.1.1頁面有素要統一55
4.1.2頁面信息排版56
4.1.3可視化頁面信息59
4.1.4適當的留白60
4.1.5保持頁面視覺平衡60
4.1.6運用插畫61
4.1.7版面符合視覺心理62
4.2H5頁面圖片設計62
4.2.1提高或降低圖版率63
4.2.2使用全圖和局部細節圖片64
4.2.3使用圖標64
4.2.4壓縮圖片大小66
4.3H5頁面文本設計67
4.4實戰案例——制作邀請函H5頁面69
4.4.1使用Photoshop制作邀請函首頁69
4.4.2將PSD圖片導入H5頁面77
【課後習題】80
第5章影音設計：增強H5畫面的張力氛圍81
5.1H5動畫/視頻設計81
5.1.1H5動畫/視頻制作策略81
5.1.2常用的H5動畫/視頻制作工具83
5.1.3實戰案例——制作易企秀制作健身會所宣傳視頻85
5.2H5背景音樂/音效設計94
5.2.1H5背景音樂/音效的重要性94
5.2.2為H5頁面添加背景音樂/音效95
5.3H5音樂素材的搜集與編輯97
5.3.1搜集音效素材的渠道97
5.3.2實戰案例——使用Audition制作H5背景音樂98
【課後習題】101
第6章動效設計：打造H5頁面交互體驗102
6.1H5頁面動效實現方法102
6.2優化H5頁面動效104
6.2.1翻頁動效105
6.2.素動效105
6.2.3功能性動效106
6.2.4對像的線性運動動效107
6.素的形變動效107
6.2.6平移與縮放動效108
6.2.7視差動效108
6.2.8維度動效108
6.3實戰案例——使用易企秀制作H5動效頁面109
【課後習題】113
第7章創意優化：用高端創意打造刷屏級H5114
7.1創作富有“情感”的H5114
7.1.1挖痛點114
7.1.2戳淚點116
7.1.3找共鳴117
7.1.4代入感118
7.2借助超級IP形成創意主題119
7.2.1人氣公知IP主題119
7.2.2古文化IP主題120
7.3H5創意文案的撰寫120
7.3.1確定主題121
7.3.2擬定標題122
7.3.3創意內容123
7.4運用熱門技術打造H5炫酷畫面124
7.4.1基於傳感器124
7.4.2基於觸摸屏操作127
7.4.3基於畫面呈現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.1H5基本編輯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使用觸發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制作實戰：使用易企秀制作H5179
9.1實戰案例——企業宣傳與邀請函翻頁型H5的制作179
9.1.1制作企業宣傳H5179
9.1.2制作邀請函H5191
9.2實戰案例——企業招聘長頁型H5的制作195
9.3實戰案例——調查問卷表單型H5的制作201
9.4實戰案例——翻牌遊戲互動型H5的制作205
【課後習題】209
第10章推廣引流：優質渠道誘發H5裂變式傳播210
10.1推廣引流210
10.1.1通過好友推廣H5210
10.1.2通過群推廣H5211
10.1.3通過朋友圈推廣H5212
10.2App推廣引流214
10.3新媒體平臺推廣引流215
10.4線下活動推廣引流216
10.5二維碼推廣引流216
【課後習題】217
