第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

7.2.12　小清新视觉风格设计     159

7.3　6 种表现手法：H5 设计的视觉特效      160

7.3.1　来电特效：使H5 页面更加真实     160

7.3.2　擦除特效：让H5 页面充满神秘     163

7.3.3　动画特效：让H5 页面妙趣横生     163

7.3.4　SVG 特效：让H5 更加灵活    164

7.3.5　拍立得特效：使H5 互动性更强     165

7.3.6　碎玻璃特效：让H5 页面更加酷炫     166

第8 章　H5 内容设计：打造爆品的不二法门      167

8.1　版式设计：带来绝佳视觉体验     168

8.1.1　视觉动线：合理布局，减少疲劳     168

8.1.2　画面焦点：着重突出营销重点     168

8.1.3　页面层级：主次分明，井然有序     169

8.2　活动设计：吸引用户的有力形式      170

8.2.1　砍价活动：裂变式引爆产品热度     170

8.2.2　抽奖活动：吸引更多用户参与     172

8.2.3　问卷调查：及时收集用户反馈     172

8.2.4　投票活动：拉票机制，快速吸粉     174

8.2.5　卡券活动：更好地进行推广促销     175

8.3　动效设计：让用户产生浓厚的兴趣      176

8.3.1　动效设计知识：事先了解，有备无患     176

8.3.2　动效设计：主要类型和实现方法     177

8.3.3　转场动效：承上启下，切换效果     178

8.3.4　内容类动效：展现丰富多彩的内容     178

8.3.5　辅助性动效：有效提升H5趣味性         179

8.3.6　功能性动效：引导用户的操作     179

8.4　音效设计：塑造氛围，感受真实      180

8.4.1　重要性：为用户带来沉浸式体验     180

8.4.2　注意事项：确保声音为内容服务     181

8.4.3　音效选择：与画面相辅相成    181

8.4.4　音效分类：常见的3 种H5音效     182

8.4.5　如何获取：4 个有效的采集方法     182

8.5　交互设计：实现信息的有效传播      183

8.5.1　弹幕评论：实时互动，营造火热氛围     183

8.5.2　点击触发：深度参与，以求更好的营销效果    184

8.5.3　互动游戏：“蝴蝶效应”的营销效果     186

第9 章　H5 运营技巧：着眼于用户做好营销      191

9.1　五大思维：帮你做好H5 营销      192

9.1.1　流量思维：大面积＋多渠道         192

9.1.2　借势思维：借势每一个社会热点     193

9.1.3　奖励思维：重赏之下，必有勇夫     194

9.1.4　众筹思维：一滴水汇聚成海洋     195

9.1.5　生活思维：从群众中来，到群众中去       196

9.2　三点一线：引发共鸣，让人动容      196

9.2.1　泪点：催人泪下，让用户记忆深刻     197

9.2.2　痛点：戳中“痛点”，满足用户需求     198

9.2.3　触点：触景生情，让用户为之动容     199

9.2.4　故事线：增强H5 的代入感     200

第10 章　H5 营销推广：实现有效的移动营销      203

10.1　H5 ＋超级IP：让H5 引爆文化内核        204

10.1.1　古文化大IP：使传统文化焕发生机    204

10.1.2　人气公知IP：速度吸引粉丝关注    205

10.1.3　人气偶像IP：具有强大的号召力        205

10.2　流量渠道：高流量、高转化、高回报         205

10.2.1　微信朋友圈：借助社交为H5 吸粉     205

10.2.2　微信群：精准推送营销信息      205

10.2.3　微信好友：从身边的人开始营销    206

10.2.4　App：实现内容的跨界传播    207

10.2.5　新媒体：实行“泛娱乐”战略    208

10.2.6　二维码：线上、线下，打通电商闭环        209

10.2.7　线下活动：针对小的用户群体    210

10.3　专业推广：精准灵活地锁定用户        210

10.3.1　戳中“痛点”：让用户冲动起来    211

10.3.2　数据：实现H5 的精准投放    211

10.3.3　微信设置：方便快速，实现一键投放       212

第11 章　H5 广告案例：给用户带来全新体验      213

11.1　产品推广案例：有效实现变现        214

11.1.1　小米：MIUI 12.5    214

11.1.2　COCO 奶茶：啡行日记滤挂咖啡    215

11.1.3　凯迪拉克：XT4 燃战G7公路    217

11.1.4　博士伦：裸感，仿若天生       219

11.1.5　稳捷One Touch：你有多久没给爸妈打电话了          220

11.1.6　UR：虚拟绿洲剧本杀    222

11.2　品牌宣传案例：打响品牌名声        223

11.2.1　中国平安：人生真相诗      224

11.2.2　网易云音乐：遇见时光里的自己    225

11.2.3　咪咕圈圈酱：你有一封面试邀请函        227

11.2.4　饿了么：这是什么神仙外卖    228

11.2.5　建发房产：湖悦江南，重构山水东方    229

第12 章　H5 场景案例，全新视角的全新思维         231

12.1　商业场景案例：现象级的刷屏事件        232

12.1.1　企业招聘：同学，还在等什么？快上车       232

12.1.2　活动预热：生活与你 一起升级      233

12.1.3　活动报名：在大唐，看未来       235

12.1.4　活动邀请函：关于未来空间的新物种集会即将启幕，等你来玩      236

12.1.5　微商引流：惊！职场打工人扬眉吐气的终极秘诀竟是     238

12.2　生活场景案例：个性化记录生活的美好        239

12.2.1　纪念相册：青春纪念册     239

12.2.2　个人简历：毕业生求职简历      240

12.2.3　结婚请柬：清新简约手绘婚礼邀请函          241

12.2.4　节日贺卡：双语包粽子     242

12.2.5　情侣表白：你有一封情书待开      244

12.2.6　店铺开业：盛大开业活动邀请函       245

12.2.7　公益活动：二十四节气——惊蛰      246