模块1 认识H5
1.1 什么是H5 ................................................................................2
1.1.1 H5的特点 ........................................................................2
1.1.2 H5的类型 ........................................................................3
1.1.3 H5的行业应用 .................................................................7
1.1.4 H5的页面风格 ............................................................... 11
1.2 H5页面制作流程和规范 ......................................................15
1.2.1 H5页面制作基本流程 .....................................................15
1.2.2 H5页面设计规范 ............................................................16
1.2.3 优质H5页面作品赏析 .....................................................17
1.3 H5页面制作工具 ..................................................................21
1.3.1 常见的H5页面制作工具 .................................................21
1.3.2 H5辅助设计工具 ............................................................24
1.3.3 学会利用AIGC工具 ........................................................28
模块2 H5页面设计基础
2.1 H5页面色彩搭配 ..................................................................34
2.1.1 色彩三要素 ....................................................................34
2.1.2 色彩的感知 ....................................................................37
2.1.3 H5页面配色方法 ............................................................45
2.1.4 好用的配色工具 .............................................................48
2.2 H5页面版式布局 ..................................................................51
2.2.1 页面视觉动线 ................................................................51
2.2.2 制造视觉动线 ................................................................55
2.2.3 理清页面视觉层次 .........................................................57
2.3 H5页面交互设计 ..................................................................59
2.3.1 交互设计的重要性 .........................................................59
2.3.2 交互设计的元素 .............................................................60
2.3.3 交互设计原则 ................................................................62
实战演练 利用配色网站更改标志颜色 63
课后作业 65
模块3 H5页面元素的应用
3.1 了解H5页面尺寸 ..................................................................67
3.2 设置页面图像元素 ................................................................68
3.2.1 图像的种类 ....................................................................68
3.2.2 图像选取原则 ................................................................70
3.2.3 图像获取方式 ................................................................70
3.2.4 图像的简单处理 .............................................................74
3.3 设置页面文字元素 ................................................................77
3.3.1 选择合适的字体 .............................................................77
3.3.2 标题与正文的设置 .........................................................82
3.4 设置H5音频元素 ..................................................................86
3.4.1 常见音频类型 ................................................................86
3.4.2 音频的获取方式 .............................................................87
3.4.3 对音频进行简单处理 ......................................................89
3.5 设置页面表单元素 ................................................................91
3.5.1 页面表单的作用 .............................................................91
3.5.2 页面表单的设计原则 ......................................................91
3.5.3 页面表单的种类 .............................................................92
实战演练 制作“用眼知识调查问卷”页面 93
课后作业 101
模块4 H5页面动画与特效的制作
4.1 页面常规动效 ......................................................................103
4.1.1 添加页面动效的作用 ....................................................103
4.1.2 页面动效的类型 ...........................................................103
4.1.3 常规动效的添加与设置 ................................................106
4.2 页面创意交互动效 .............................................................. 110
4.2.1 一镜到底交互特效 ....................................................... 110
4.2.2 VR全景交互特效 ......................................................... 111
4.2.3 手指跟随交互特效 ....................................................... 117
4.2.4 重力感应交互特效 ....................................................... 117
4.3 页面视觉特效 ...................................................................... 118
4.3.1 页面粒子特效 .............................................................. 118
4.3.2 页面GIF动画特效 ........................................................120
4.3.3 页面快闪特效 ..............................................................120
实战演练 制作企业历程H5页面 125
课后作业 130
模块5 用易企秀制作H5页面
5.1 创建H5页面 ........................................................................132
5.1.1 使用H5模板创建 ..........................................................132
5.1.2 利用空白画布创建 .......................................................134
5.1.3 管理H5页面 .................................................................135
5.2 制作静态H5页面 ................................................................137
5.2.1 设置页面背景 ..............................................................137
5.2.2 添加与设置文字元素 ....................................................141
5.2.3 添加与设置装饰元素 ....................................................146
5.3 制作动态H5页面 ................................................................150
5.3.1 添加与设置动画元素 ....................................................150
5.3.2 添加音频与视频元素 ....................................................155
5.4 添加H5常用组件 ................................................................157
5.4.1 视觉组件 .....................................................................157
5.4.2 交互组件 .....................................................................158
5.4.3 趣味特效组件 ..............................................................159
5.4.4 活动营销类组件 ...........................................................160
5.5 预览与发布H5页面 ............................................................162
实战演练 完善摄影展邀请函内容页 163
课后作业 168
模块6 H5营销活动设计
6.1 了解H5营销 ........................................................................170
6.1.1 H5营销的优势 .............................................................170
6.1.2 H5营销的思维模式 ......................................................170
6.1.3 H5营销发展趋势 ..........................................................174
6.2 常见H5营销活动 ................................................................176
6.2.1 活动抽奖类 ..................................................................176
6.2.2 投票活动类 ..................................................................179
6.2.3 答题互动类 ..................................................................180
6.2.4 游戏活动类 ..................................................................181
6.2.5 微信场景营销模拟 .......................................................182
6.3 常见H5推广渠道 ................................................................184
6.3.1 微信社交平台 ..............................................................184
6.3.2 新媒体平台 ..................................................................189
6.3.3 APP小程序平台 ...........................................................190
6.3.4 二维码推广 ..................................................................191
实战演练 制作中秋答题活动页面 191
课后作业 198
模块7 企业招聘H5页面设计与制作
7.1 制作企业招聘首页面..........................................................200
7.1.1 设置封面页背景 ...........................................................200
7.1.2 设置封面页内容 ...........................................................201
7.2 制作招聘详情页面 ..............................................................204
7.2.1 制作“关于我们”页面 ................................................204
7.2.2 制作“工作环境”页面 ................................................206
7.2.3 制作其他页面 ..............................................................208
7.3 为招聘页面添加交互动画 .................................................212
7.3.1 添加页面元素动画 .......................................................212
7.3.2 添加页面切换动画 .......................................................215
7.4 发布与分享H5招聘页面 ....................................................217
参考文献 ...............................................................................224
附录 H5营销策略常见疑难问题 .............219