H5移动营销:活动策划+设计制作+运营推广+应用案例(第2版)

第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