H5移動營銷：活動策劃+設(shè)計制作+運營推廣+應(yīng)用案例（第2版）

第1 章　H5 學(xué)習(xí)入門：了解H5 的設(shè)計基礎(chǔ) 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 與超媒體的關(guān)系 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　技術(shù)驅(qū)動型H5 19
1.2.5　場景模擬型H5 20
1.3　兩大界面：H5 的設(shè)計尺寸 24
1.3.1　iOS 設(shè)備主要屏幕分辨率 25
1.3.2　Android 設(shè)備主要屏幕分辨率 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　抽獎活動：帶動門店產(chǎn)品銷量增加 37
2.2.4　砍價預(yù)售活動：大幅增加線下引流 40
2.3　顧客留存：H5 的留客能力 42
2.3.1　優(yōu)惠券活動：增加線下門店的熱度 42
2.3.2　H5 小游戲：延長顧客線下消費時間 43
2.3.3　等位活動：用H5 活動減少等位流失 44
2.4　現(xiàn)場互動：H5 的互動能力 47
2.4.1　線下會展活動：吸引更多人流 47
2.4.2　會議現(xiàn)場活動：豐富會議環(huán)節(jié) 48
2.4.3　連續(xù)性現(xiàn)場活動：沉淀大量粉絲 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　強制關(guān)注：簡單高效暴力吸粉 56
3.1.2　裂變增長：分享活動快速吸粉 58
3.1.3　保持互動：有效增強粉絲黏性 64
3.2　品牌引流：輕松打造流行品牌 68
3.2.1　H5 模板：讓引流變得更加簡單 69
3.2.2　自定義兌獎碼：讓引流更具吸引力 71
3.2.3　聯(lián)系客服，通過激勵用戶引流 71
3.3　品牌推廣：全面?zhèn)鬟_(dá)品牌調(diào)性 72
3.3.1　VR 全景＋紅包：瞬間提高品牌知名度 72
3.3.2　語音紅包：迅速打響品牌標(biāo)語 75
3.3.3　植入廣告：全方位地擴散品牌 75
3.4　品牌認(rèn)同：提高顧客品牌認(rèn)知度 77
3.4.1　答題紅包：讓用戶了解品牌知識 77
3.4.2　品牌調(diào)性：用H5 打響品牌知名度 78
3.4.3　線上傳播：讓品牌深入人心 79
3.5　品牌維護：鞏固品牌市場地位 79
3.5.1　品牌促銷：有效提高品牌口碑 79
3.5.2　日常維護：增加品牌曝光度 80
第4 章　H5 制作工具：移動H5 的設(shè)計與制作 81
4.1　設(shè)計方法：3 種途徑設(shè)計H5 頁面 82
4.2　元素設(shè)計：H5 的圖形、圖像、影音 83
4.2.1　Adobe Photoshop：強大的綜合應(yīng)用軟件 83
4.2.2　Adobe Illustrator：便于線框圖的繪制 84
4.2.3　Sketch：矢量圖設(shè)計工具 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：數(shù)碼音樂創(chuàng)作軟件 86
4.3　動畫設(shè)計：為H5 制作吸人眼球的動畫 87
4.3.1　Keynote：設(shè)計吸引人的PPT 87
4.3.2　HYPE：做出悅目的動畫效果 88
4.4　技術(shù)實現(xiàn)：H5 的定制與開發(fā) 88
4.4.1　FWA：設(shè)計領(lǐng)域的前沿標(biāo)桿 88
4.4.2　W3school：學(xué)習(xí)H5 的基本代碼知識 89
4.5　快速套用：提供H5 模板的各大平臺 90
4.5.1　人人秀：快速上手制作H5 90
4.5.2　易企秀：海量的H5 場景模板 93
4.5.3　兔展：專注H5 技術(shù)實現(xiàn) 95
4.5.4　MAKA：簡單強大的在線創(chuàng)作平臺 97
4.5.5　初頁：音樂照片情感工具 98
4.6　創(chuàng)意設(shè)計：靈活進行H5 開發(fā) 99
4.6.1　互動大師：在線編輯交互內(nèi)容 99
4.6.2　意派Epub 360：專業(yè)的H5設(shè)計功能 101
4.7　組合使用：選擇H5 的工具組合形式 103
4.7.1　開發(fā)類H5 的工具選擇 103
4.7.2　網(wǎng)站類H5 的工具選擇 104
4.8　省時省力：H5 設(shè)計常用的輔助工具 104
4.8.1　格式工廠：音頻視頻的格式轉(zhuǎn)換 104
4.8.2　PS Play：手機端的PS 瀏覽工具 105
4.8.3　tinypng.com：壓縮過大圖片文件 105
4.8.4　草料：生成二維碼 106
第5 章　H5 設(shè)計流程：移動H5 的策劃與開發(fā) 107
5.1　前期準(zhǔn)備：讓H5 設(shè)計營銷有備無患 108
5.1.1　定目標(biāo)：精準(zhǔn)定位用戶 108
5.1.2　找熱點：進行火爆營銷 109
5.1.3　寫策劃：全面把握H5 110
5.2　程序設(shè)計：制作精美吸睛的H5 111
5.2.1　選擇模板：快速制作H5 作品 112
5.2.2　交互設(shè)計：讓用戶參與互動 113
5.2.3　視覺設(shè)計：讓H5 頁面錦上添花 115
5.3　測試分析：H5 的升華與完善 120
5.3.1　程序測試：及時完善H5 121
5.3.2　活動上線：快速推廣H5 122
5.3.3　效果分析：分析營銷效果 123
第6 章　H5 開發(fā)技術(shù)：移動H5 熱門開發(fā)技術(shù) 127
6.1　“黑科技”：讓H5 人氣爆炸 128
6.1.1　720 度全景：展現(xiàn)三維立體空間感 128
6.1.2　3D 旋轉(zhuǎn)：讓H5 畫面更具動感 128
6.1.3　人臉識別：實現(xiàn)H5 趣味營銷 129
6.1.4　物理引擎：創(chuàng)建一個虛擬世界 130
6.1.5　重力感應(yīng)：提升用戶互動體驗 131
6.1.6　手指跟隨：產(chǎn)生幻燈片效果 132
6.2　H5 +AR/VR/AI：多種手段全新體驗 133
6.2.1　AR 技術(shù)：實現(xiàn)線上、線下相結(jié)合 133
6.2.2　VR 技術(shù)：生成虛擬動態(tài)場景 134
6.2.3　AI 技術(shù)：讓H5 擁有人工智能 135
6.3　技術(shù)運用：展現(xiàn)酷炫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 視覺風(fēng)格：移動H5 視覺風(fēng)格設(shè)計 145
7.1　五大原則：H5 設(shè)計的精髓要點 146
7.1.1　設(shè)計原則：多創(chuàng)意，少抄襲 146
7.1.2　設(shè)計風(fēng)格：H5 的風(fēng)格要統(tǒng)一 147
7.1.3　H5 原型圖：繪制與構(gòu)思方法 148
7.1.4　視覺氛圍：著眼于情感傳遞 149
7.1.5　真實體驗：讓用戶身臨其境 150
7.2　12 種風(fēng)格：H5 設(shè)計的不二之選 151
7.2.1　扁平視覺風(fēng)格設(shè)計 151
7.2.2　插畫視覺風(fēng)格設(shè)計 152
7.2.3　手繪視覺風(fēng)格設(shè)計 152
7.2.4　動漫視覺風(fēng)格設(shè)計 152
7.2.5　水墨視覺風(fēng)格設(shè)計 154
7.2.6　復(fù)古視覺風(fēng)格設(shè)計 155
7.2.7　寫實視覺風(fēng)格設(shè)計 155
7.2.8　科技視覺風(fēng)格設(shè)計 156
7.2.9　極簡視覺風(fēng)格設(shè)計 157
7.2.10　拼貼視覺風(fēng)格設(shè)計 157
7.2.11　攝影視覺風(fēng)格設(shè)計 158