第1 章　H5 學習入門：了解H5 的設計基礎 1

1.1　H5 七問：全面了解H5 2

1.1.1　H5 的概念 2

1.1.2　H5 營銷的概念 4

1.1.3　H5 營銷的特點 4

1.1.4　推廣H5 的原因 5

1.1.5　H5 與超媒體的關系 7

1.1.6　H5 場景有利于營銷 8

1.1.7　H5 營銷的潮流和方向 11

1.2　H5 五種類型：H5 的分類 14

1.2.1　信息展示型H5 14

1.2.2　動畫交互型H5 15

1.2.3　游戲互動型H5 16

1.2.4　技術驅動型H5 19

1.2.5　場景模擬型H5 20

1.3　兩大界面：H5 的設計尺寸 24

1.3.1　iOS 設備主要屏幕分辨率 25

1.3.2　Android 設備主要屏幕分辨率 27

第2 章　H5 引流活動：為門店招徠大量顧客 29

2.1　線上線下：H5 的深入營銷 30

2.1.1　線下互動：鼓勵用戶線下二次消費 30

2.1.2　線下引流：輕松打造H5 引流利器 32

2.2　新客進店：H5 的吸粉能力 33

2.2.1　投票活動：吸引用戶，推廣品牌 33

2.2.2　紅包邀請函：立竿見影的引流效果 34

2.2.3　抽獎活動：帶動門店產品銷量增加 37

2.2.4　砍價預售活動：大幅增加線下引流 40

2.3　顧客留存：H5 的留客能力 42

2.3.1　優惠券活動：增加線下門店的熱度 42

2.3.2　H5 小游戲：延長顧客線下消費時間 43

2.3.3　等位活動：用H5 活動減少等位流失 44

2.4　現場互動：H5 的互動能力 47

2.4.1　線下會展活動：吸引更多人流 47

2.4.2　會議現場活動：豐富會議環節 48

2.4.3　連續性現場活動：沉淀大量粉絲 49

2.5　分享傳播：H5 的傳播能力 50

2.5.1　禮品活動：顧客贏福利，門店得利潤 50

2.5.2　裂變紅包：消費者推薦好友送紅包 51

2.5.3　分享后抽獎：快速擴散門店促銷消息 53

第3 章　H5 營銷活動：為品牌擴大知名度 55

3.1　微信吸粉：H5 的裂變式傳播 56

3.1.1　強制關注：簡單高效暴力吸粉 56

3.1.2　裂變增長：分享活動快速吸粉 58

3.1.3　保持互動：有效增強粉絲黏性 64

3.2　品牌引流：輕松打造流行品牌 68

3.2.1　H5 模板：讓引流變得更加簡單 69

3.2.2　自定義兌獎碼：讓引流更具吸引力 71

3.2.3　聯系客服，通過激勵用戶引流 71

3.3　品牌推廣：全面傳達品牌調性 72

3.3.1　VR 全景＋紅包：瞬間提高品牌知名度 72

3.3.2　語音紅包：迅速打響品牌標語 75

3.3.3　植入廣告：全方位地擴散品牌 75

3.4　品牌認同：提高顧客品牌認知度 77

3.4.1　答題紅包：讓用戶了解品牌知識 77

3.4.2　品牌調性：用H5 打響品牌知名度 78

3.4.3　線上傳播：讓品牌深入人心 79

3.5　品牌維護：鞏固品牌市場地位 79

3.5.1　品牌促銷：有效提高品牌口碑 79

3.5.2　日常維護：增加品牌曝光度 80

第4 章　H5 制作工具：移動H5 的設計與制作 81

4.1　設計方法：3 種途徑設計H5 頁面 82

4.2　元素設計：H5 的圖形、圖像、影音 83

4.2.1　Adobe Photoshop：強大的綜合應用軟件 83

4.2.2　Adobe Illustrator：便于線框圖的繪制 84

4.2.3　Sketch：矢量圖設計工具 85

4.2.4　Adobe After Effects：圖形視頻處理軟件 85

4.2.5　CINEMA 4D：制作酷炫的3D 效果 86

4.2.6　Final Cut Pro：進行后期制作 86

4.2.7　Garage Band：數碼音樂創作軟件 86

4.3　動畫設計：為H5 制作吸人眼球的動畫 87

4.3.1　Keynote：設計吸引人的PPT 87

4.3.2　HYPE：做出悅目的動畫效果 88

4.4　技術實現：H5 的定制與開發 88

4.4.1　FWA：設計領域的前沿標桿 88

4.4.2　W3school：學習H5 的基本代碼知識 89

4.5　快速套用：提供H5 模板的各大平臺 90

4.5.1　人人秀：快速上手制作H5 90

4.5.2　易企秀：海量的H5 場景模板 93

4.5.3　兔展：專注H5 技術實現 95

4.5.4　MAKA：簡單強大的在線創作平臺 97

4.5.5　初頁：音樂照片情感工具 98

4.6　創意設計：靈活進行H5 開發 99

4.6.1　互動大師：在線編輯交互內容 99

4.6.2　意派Epub 360：專業的H5設計功能 101

4.7　組合使用：選擇H5 的工具組合形式 103

4.7.1　開發類H5 的工具選擇 103

4.7.2　網站類H5 的工具選擇 104

4.8　省時省力：H5 設計常用的輔助工具 104

4.8.1　格式工廠：音頻視頻的格式轉換 104

4.8.2　PS Play：手機端的PS 瀏覽工具 105

4.8.3　tinypng.com：壓縮過大圖片文件 105

4.8.4　草料：生成二維碼 106

第5 章　H5 設計流程：移動H5 的策劃與開發 107

5.1　前期準備：讓H5 設計營銷有備無患 108

5.1.1　定目標：精準定位用戶 108

5.1.2　找熱點：進行火爆營銷 109

5.1.3　寫策劃：全面把握H5 110

5.2　程序設計：制作精美吸睛的H5 111

5.2.1　選擇模板：快速制作H5 作品 112

5.2.2　交互設計：讓用戶參與互動 113

5.2.3　視覺設計：讓H5 頁面錦上添花 115

5.3　測試分析：H5 的升華與完善 120

5.3.1　程序測試：及時完善H5 121

5.3.2　活動上線：快速推廣H5 122

5.3.3　效果分析：分析營銷效果 123

第6 章　H5 開發技術：移動H5 熱門開發技術 127

6.1　“黑科技”：讓H5 人氣爆炸 128

6.1.1　720 度全景：展現三維立體空間感 128

6.1.2　3D 旋轉：讓H5 畫面更具動感 128

6.1.3　人臉識別：實現H5 趣味營銷 129

6.1.4　物理引擎：創建一個虛擬世界 130

6.1.5　重力感應：提升用戶互動體驗 131

6.1.6　手指跟隨：產生幻燈片效果 132

6.2　H5 +AR/VR/AI：多種手段全新體驗 133

6.2.1　AR 技術：實現線上、線下相結合 133

6.2.2　VR 技術：生成虛擬動態場景 134

6.2.3　AI 技術：讓H5 擁有人工智能 135

6.3　技術運用：展現酷炫H5 畫面 138

6.3.1　快閃視頻：讓你的H5更吸睛 138

6.3.2　粒子特效：讓你的H5更酷炫 139

6.3.3　視頻互動：更好地展示品牌形象 141

6.3.4　多屏互動：輕松打造互娛模式 142

6.3.5　GIF 動畫：讓你的頁面栩栩如生 142

第7 章　H5 視覺風格：移動H5 視覺風格設計 145

7.1　五大原則：H5 設計的精髓要點 146

7.1.1　設計原則：多創意，少抄襲 146

7.1.2　設計風格：H5 的風格要統一 147

7.1.3　H5 原型圖：繪制與構思方法 148

7.1.4　視覺氛圍：著眼于情感傳遞 149

7.1.5　真實體驗：讓用戶身臨其境 150

7.2　12 種風格：H5 設計的不二之選 151

7.2.1　扁平視覺風格設計 151

7.2.2　插畫視覺風格設計 152

7.2.3　手繪視覺風格設計 152

7.2.4　動漫視覺風格設計 152

7.2.5　水墨視覺風格設計 154

7.2.6　復古視覺風格設計 155

7.2.7　寫實視覺風格設計 155

7.2.8　科技視覺風格設計 156

7.2.9　極簡視覺風格設計 157

7.2.10　拼貼視覺風格設計 157

7.2.11　攝影視覺風格設計 158