第 1 章 H5 设计概述 001
1.1　H5概述 .................................002
1.1.1　H5 的概念..........................................002
1.1.2　H5 与 App 的区别.............................002
1.2　H5营销的优势........................002
1.3　H5的应用方向和渠道 ............. 003
1.4　H5的常见类型 ...................... 003
1.4.1　静态普通类........................................003
1.4.2　基础动画类........................................004
1.4.3　炫酷交互类........................................004
1.4.4　数据图表类........................................005
1.4.5　随机事件类........................................005
1.4.6　长页展示类........................................006
1.4.7　综合类................................................006
第 2 章 认识易企秀008
2.1　易企秀简介 ........................... 009
2.1.1　什么是易企秀....................................009
2.1.2　账号注册和登录方式........................009
2.1.3　账号类型和产品矩阵........................010
2.1.4　认识易企秀导航栏及商城产品........010
2.1.5　易企秀 PC 端和移动端的区别.........011
2.2　认识易企秀H5编辑器 .............012
2.2.1　作品创建功能....................................012
2.2.2　左侧导航栏功能................................013
2.2.3　各项组件功能....................................014
2.2.4　作品分享设置及分享样式................ 017
2.2.5　保存与发布........................................018
2.2.6　页面设置、图层管理、页面管理.....019
2.3　作品尺寸与屏幕适配................020
2.3.1　作品尺寸............................................020
2.3.2　文件大小和文件模式........................020
2.3.3　识别文件中的文字............................020
2.3.4　常规页面及长页面............................020
2.4　课后习题：制作浪漫粉紫色
贺卡等 ..................................021
第 3 章 创建 H5 作品 024
3.1　创建静态H5作品....................025
3.1.1　准备工作............................................025
3.1.2　制作过程............................................025
3.1.3　保存并发布........................................028
3.2　创建动态H5 ......................... 028
3.2.1　元素组件设置....................................029
3.2.2　元素样式设置....................................030
3.2.3　元素的动画设置................................031
3.2.4　进入动画、强调动画、退出动画..... 033
3.2.5　元素动画的设置................................034
3.2.6　添加音乐............................................035
3.2.7　作品分享设置和加载页设置............036
3.2.8　尾页设置及广告去除........................ 037
3.3　实战案例：制作小清新粉色羽毛
邀请函 ................................. 038
3.4　课后习题：制作水墨中国风
邀请函 ................................. 045
第 4 章 H5 制作的高级功能应用 047
4.1　认识高级组件 ........................ 048
4.1.1　拼图、轮播图....................................048
4.1.2　数据图表、随机事件........................049
4.1.3　一镜到底、快闪、画中画、立体魔方............................................052
4.1.4　地图、拨打电话、跳转链接............059
4.1.5　实时日期、实时位置、天气、画板....................................................062
4.1.6　动态数字、音效、目录....................064
4.1.7　底部菜单、点击截图、计时............ 067
4.2　认识表单组件........................ 068
4.2.1　输入框................................................069
4.2.2　单选和多选........................................069
4.2.3　下拉列表............................................070
4.2.4　评分.................................................... 071
4.2.5　手机号验证........................................ 072
4.2.6　提交按钮............................................ 072
4.3　认识互动组件.........................073
4.3.1　微信头像、微信语音........................ 073
4.3.2　上传照片、头像墙............................ 075
4.3.3　投票、点赞、浏览次数.................... 076
4.3.4　留言板、弹幕.................................... 077
4.4　智能组件 .............................. 079
4.4.1　自说字画、年龄改变........................ 079
4.4.2　人脸识别、人脸融合........................081
4.4.3　红包、抽奖、打赏............................082
4.4.4　在线收款、实时对话........................086
4.5　特效 .................................... 087
4.5.1　涂抹....................................................088
4.5.2　指纹....................................................088
4.5.3　飘落物................................................088
4.5.4　渐变....................................................089
4.5.5　重力感应............................................090
4.5.6　砸玻璃................................................090
4.5.7　模拟对话............................................090
4.6　实战案例：制作复杂H5...........091
4.7　课后习题：制作小清新唯美紫色H5 ............................... 098
第 5 章 爆款 H5 页面设计 101
5.1　风格百变：常见的H5页面风格.... 102
5.2　色彩搭配：H5页面色彩设计.....106
5.2.1　H5 页面设计中常用的配色方案...... 106
5.2.2　H5 页面色彩设计策略...................... 109
5.2.3　常用的 H5 配色工具......................... 109
5.3　图文设计：用高颜值图文提升
画面质感 ............................... 112
5.3.1　H5 页面的排版设计.......................... 113
5.3.2　H5 页面的层级和元素设计.............. 114
5.3.3　H5 页面信息的可视化设计.............. 116
5.3.4　H5 页面留白设计.............................. 116
5.3.5　H5 页面视觉平衡设计...................... 117
5.3.6　H5 页面视觉心理设计...................... 118
5.3.7　H5 页面图片设计.............................. 120
5.3.8　H5 页面文本设计.............................. 122
5.4　实战案例：制作爆款高级
质感H5 ................................ 124
5.5　课后习题：制作招聘宣传H5..... 131
第 6 章 H5 创意互动设计 134
6.1　影音设计：增强H5画面的张力...................................... 135
6.1.1　加入外接视频.................................... 135
6.1.2　加入外链视频.................................... 135
6.1.3　常用的 H5 动画和视频制作工具..... 136
6.1.4　H5 背景音乐和音效设计.................. 138
6.1.5　音乐素材的搜集与编辑.................... 139
6.1.6　搜集音效素材的渠道........................140
6.2　动效设计：打造H5页面交互体验感 .................................. 142
6.2.1　优化 H5 页面动画............................. 142
6.2.2　翻页动画............................................ 142
6.2.3　页面元素动画.................................... 143
6.2.4　运用 GIF 动画特效打造视觉效果...... 144
6.2.5　实战案例：使用易企秀制作 H5动效页面............................................ 144
6.3　高级互动组件：打造炫酷H5.....146
6.3.1　运用一镜到底、快闪功能................ 146
6.3.2　怎样运用一镜到底............................ 148
6.3.3　设置动画时间.................................... 150
6.3.4　运用智能组件.................................... 151
6.3.5　添加特效............................................ 152
6.3.6　运用弹幕............................................ 153
6.3.7　运用触发功能.................................... 154
6.3.8　运用轮播图........................................ 162
6.4　实战案例：制作高端创意互动H5 ................................ 163
6.5　课后习题：制作清新淡绿色婚礼邀请函 .................................. 167
第 7 章 H5 实战案例 170
7.1　实战案例：企业宣传翻页型H5的制作...................................... 171
7.2　实战案例：长页版H5制作 ....... 175
7.3　实战案例：炫酷动画型H5制作 .....................................178
7.4　实战案例：触发答题互动型H5制作 ..................................... 181