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

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