第1章 H5：强互动的微场景体验 1
1.1 什么是H5 1
1.1.1 认识H5 1
1.1.2 H5与App的区别 2
1.2 H5营销的优势 5
1.3 H5的应用场景 6
1.4 H5的应用类型 10
1.4.1 展示类 10
1.4.2 全景/VR类 10
1.4.3 视频类 11
1.4.4 动画类 11
1.4.5 交互动画类 12
1.4.6 模拟类 12
1.4.7 合成类 13
1.4.8 数据应用类 14
1.4.9 游戏类 14
1.4.10 跨屏类 15
1.4.11 综合类 15

第2章 运营规划：开发H5的流程与策略 17
2.1 开发H5的基本流程 17
2.2 开发H5的细节规范 21
2.2.1 选择合适的浏览器 21
2.2.2 页面尺寸匹配手机屏幕 21
2.2.3 优化设计细节 22
2.2.4 优化H5的性能 28
2.3 打造爆款H5的策略 30
2.3.1 充电增值 30
2.3.2 娱乐消遣 31
2.3.3 情感共鸣 32
2.3.4 利益驱使 33
2.3.5 自我展示 34
2.3.6 创意创新 35
2.3.7 热门话题 36
2.3.8 内容精致 37
2.3.9 多样交互 38
2.3.10 风格统一 39

第3章 H5页面风格设计：营造极具冲击力的视觉氛围 41
3.1 常见的H5页面风格 41
3.1.1 简约风格 41
3.1.2 扁平化风格 42
3.1.3 科技感风格 43
3.1.4 卡通手绘风格 43
3.1.5 水墨风格 44
3.1.6 手绘风格 44
3.1.7 混合风格 45
3.2 H5页面色彩设计 46
3.2.1 H5页面设计中常用的配色方案 46
3.2.2 H5页面色彩设计策略 50
3.2.3 常用的H5配色工具 52

第4章 图文设计：用高颜值图文提升画面质感 55
4.1 H5页面版式设计 55
4.1.1 页面有层级，元素要统一 55
4.1.2 页面信息排版 56
4.1.3 可视化页面信息 59
4.1.4 适当的留白 60
4.1.5 保持页面视觉平衡 60
4.1.6 运用插画 61
4.1.7 版面符合视觉心理 62
4.2 H5页面图片设计 62
4.2.1 提高或降低图版率 63
4.2.2 使用全图和局部细节图片 64
4.2.3 使用图标 64
4.2.4 压缩图片大小 66
4.3 H5页面文本设计 67
4.4 实战案例——制作邀请函H5页面 69
4.4.1 使用Photoshop制作邀请函首页 69
4.4.2 将PSD图片导入H5页面 77

第5章 影音设计：增强H5画面的张力氛围 81
5.1 H5动画/视频设计 81
5.1.1 H5动画/视频制作策略 81
5.1.2 常用的H5动画/视频制作工具 83
5.1.3 实战案例——制作易企秀制作健身会所宣传视频 85
5.2 H5背景音乐/音效设计 94
5.2.1 H5背景音乐/音效的重要性 94
5.2.2 为H5页面添加背景音乐/音效 95
5.3 H5音乐素材的搜集与编辑 97
5.3.1 搜集音效素材的渠道 97
5.3.2 实战案例——使用Audition制作H5背景音乐 98

第6章 动效设计：打造H5页面交互体验 102
6.1 H5页面动效实现方法 102
6.2 优化H5页面动效 104
6.2.1 翻页动效 105
6.2.2 页面元素动效 105
6.2.3 功能性动效 106
6.2.4 对象的线性运动动效 107
6.2.5 元素的形变动效 107
6.2.6 平移与缩放动效 108
6.2.7 视差动效 108
6.2.8 维度动效 108
6.3 实战案例——使用易企秀制作H5动效页面 109

第7章 创意优化：用高端创意打造刷屏级H5 114
7.1 创作富有“情感”的H5 114
7.1.1 挖痛点 114
7.1.2 戳泪点 116
7.1.3 找共鸣 117
7.1.4 代入感 118
7.2 借助超级IP形成创意主题 119
7.2.1 人气公知IP主题 119
7.2.2 古文化IP主题 120
7.3 H5创意文案的撰写 120
7.3.1 确定主题 121
7.3.2 拟定标题 122
7.3.3 创意内容 123
7.4 运用热门技术打造H5炫酷画面 124
7.4.1 基于传感器 124
7.4.2 基于触摸屏操作 127
7.4.3 基于画面呈现 130
7.5 设计趣味玩法增加H5的互动性 131
7.5.1 抽奖活动 131
7.5.2 抢红包活动 132
7.5.3 投票问卷 133
7.5.4 趣味小游戏 133
7.5.5 场景模拟 134

第8章 H5制作工具——易企秀的使用 138
8.1 H5基本编辑 138
8.1.1 认识易企秀H5编辑器 138
8.1.2 文本编辑 139
8.1.3 图片编辑 141
8.1.4 背景编辑 143
8.1.5 形状编辑 144
8.1.6 添加音乐 146
8.1.7 页面设置 147
8.1.8 使用特效 149
8.1.9 使用动画 149
8.1.10 使用触发 150
8.2 使用易企秀H5编辑器组件 152
8.2.1 使用常用组件 152
8.2.2 使用基础组件 156
8.2.3 使用高级组件 158
8.2.4 使用微信组件 166
8.2.5 使用AI组件 169
8.3 使用易企秀H5编辑器表单 171
8.3.1 使用常用表单组件 172
8.3.2 使用基础表单组件 175
8.3.3 使用高级表单组件 177

第9章 H5制作实战：使用易企秀制作H5 179
9.1 实战案例——企业宣传与邀请函翻页型H5的制作 179
9.1.1 制作企业宣传H5 179
9.1.2 制作邀请函H5 191
9.2 实战案例——企业招聘长页型H5的制作 195
9.3 实战案例——调查问卷表单型H5的制作 201
9.4 实战案例——翻牌游戏互动型H5的制作 205

第10章 推广引流：优质渠道诱发H5裂变式传播 210
10.1 微信推广引流 210
10.1.1 通过微信好友推广H5 210
10.1.2 通过微信群推广H5 211
10.1.3 通过朋友圈推广H5 212
10.2 App推广引流 214
10.3 新媒体平台推广引流 215
10.4 线下活动推广引流 216
10.5 二维码推广引流 216