第1章 H5广告设计入门 1
1.1什么是H5 2
1.1.1H5是什么 2
1.1.2无处不在的H5 3
1.1.3H5的主要功能 5
1.1.4使用H5有哪些优势 5
1.1.5探索H5广告的潮流和方向 8
1.2H5页面的类型 9
1.2.1活动运营型 10
1.2.2品牌宣传型 10
1.2.3产品介绍型 11
1.2.4总结报告型 11
1.3形式为功能服务 12
1.3.1简单图文的H5页面 12
1.3.2礼物/贺卡/邀请函的H5页面 12
1.3.3问答/评分/测试的H5页面 12
1.3.4游戏的H5页面 13
第2章 H5设计的常用工具 14
2.1基于互联网平台的H5开发工具 15
2.1.1APICloud：H5代码编辑工具 15
2.1.2Egret：提供开源的H5引擎 16
2.1.3云适配：一键PC网站转移动网站 17
2.1.4iH5：HTML5可视化编辑工具 18
2.1.5人人秀：无代码的H5制作工具 20
2.1.6易企秀：H5场景定制工具 22
2.2基于应用软件的H5设计工具 24
2.2.1Photoshop：图形图像设计工具 24
2.2.2Illustrator：专业的矢量图绘制工具 25
2.2.3After Effects：制作酷炫的视频特效 25
2.2.4CINEMA 4D：专业的三维软件工具 26
2.2.5随身录音室：数码音乐创作软件 26
2.2.6HYPE：HTML5动画制作利器 27
2.2.7其他：H5设计常用的辅助工具 27
2.3选择H5的工具组合形式 29
2.3.1选择开发类H5工具 29
2.3.2选择网站类H5工具 30
2.3.3利用手机制作H5 30
第3章 H5设计的基本操作 32
3.1如何“生产”H5 33
3.1.1选择平台和进行登录 33
3.1.2选择模板 33
3.1.3布局页面 34
3.1.4添加和编辑图片 35
3.1.5添加和编辑文本元素 36
3.1.6添加动画元素 36
3.1.7添加音乐元素 37
3.1.8添加视频元素 37
3.1.9添加交互元素 38
3.1.10添加表单和组件 39
3.1.11预览作品 40
3.1.12发布作品 40
3.2在H5页面中添加各种元素 41
3.2.1添加弹幕元素 41
3.2.2添加地图元素 42
3.2.3添加倒计时元素 43
3.2.4添加动画文字元素 45
3.2.5添加图表插件元素 46
3.2.6添加祝福贺卡元素 48
3.2.7添加雷达扫描元素 49
3.2.8添加语音留言元素 50
3.2.9添加照片海报元素 51
3.2.10制作长页面H5 52
3.3为设计加分的4个要点 54
3.3.1细节与统一 54
3.3.2热点与话题 55
3.3.3故事与情感 55
3.3.4技术与互动 56
第4章 H5的视觉交互设计 57
4.1H5页面的版式设计 58
4.1.1H5版式设计的原则 58
4.1.2H5页面的网格设计 59
4.1.3H5页面版式的突破 62
4.2H5页面的字体设计 62
4.2.1设置H5页面的字体 62
4.2.2设置H5页面的字号 64
4.2.3设置H5页面的字间距 64
4.2.4设置H5页面的行间距 65
4.2.5H5字体设计的基本技巧 65
4.3H5页面的色彩设计 66
4.3.1了解色彩原理 66
4.3.2了解色彩三要素 67
4.3.3实用H5配色技巧 70
4.4H5页面的交互设计 74
4.4.1了解H5交互设计 74
4.4.2制作H5交互设计 74
4.5H5页面的视觉流程设计 78
4.5.1什么是视觉流程设计 78
4.5.2H5常见的视觉流程设计类型 78
第5章 H5的创意内容设计 81
5.1创建H5活动营销页面 82
5.1.1答题活动的H5页面 82
5.1.2问卷调查活动的H5页面 84
5.1.3微信红包活动的H5页面 86
5.1.4VR全景的H5页面 88
5.1.5一镜到底的H5页面 89
5.1.6快闪活动的H5页面 90
5.1.7砍价活动的H5页面 91
5.2创建H5趣味营销页面 92
5.2.1互动游戏设计 92
5.2.2微信场景模拟 93
5.2.3来电界面模拟 95
5.2.4通知界面模拟 95
第6章 产品推广：营销展示的H5广告设计 97
6.1新品上市：掌握新品发布的H5页面设计 98
6.1.1设计新品发布背景形状效果 98
6.1.2设计新品发布图文信息效果 101
6.1.3设计新品发布图层装饰效果 105
6.2数码宣传：掌握电商产品的H5页面设计 108
6.2.1设计电商产品杂色背景效果 108
6.2.2设计电商产品主体布局效果 110
6.2.3设计电商产品信息点缀效果 115
6.3品牌汽车：掌握汽车产品的H5页面设计 116
6.3.1设计汽车产品页面背景效果 117
6.3.2设计汽车产品界面框架效果 118
6.3.3设计汽车产品文字修饰效果 120
第7章 活动推广：互动投票的H5广告设计 123
7.1新春活动：掌握砸金蛋的H5页面设计 124
7.1.1设计砸金蛋新春背景效果 124
7.1.2设计砸金蛋元素装饰效果 126
7.1.3设计砸金蛋文字按钮效果 130
7.2商场活动：掌握抽奖活动的H5页面设计 133
7.2.1设计抽奖活动转盘底盘效果 134
7.2.2设计抽奖活动奖品文字信息 139
7.2.3设计抽奖活动页面装饰效果 144
7.3营销活动：掌握投票活动的H5页面设计 147
7.3.1设计投票活动背景效果 147
7.3.2设计投票活动文字信息 149
7.3.3设计投票活动点缀效果 154
第8章 互粉增粉：游戏红包的H5广告设计 157
8.1游戏程序：掌握小游戏的H5页面设计 158
8.1.1设计小游戏背景底纹效果 158
8.1.2设计小游戏界面按钮效果 159
8.1.3设计小游戏素材插件效果 164
8.2摄影论坛：掌握旅行相册的H5页面设计 165
8.2.1设计旅行相册颗粒背景效果 166
8.2.2设计旅行相册文字信息效果 167
8.2.3设计旅行相册照片装饰效果 169
8.3微信增粉：掌握口令红包的H5页面设计 171
8.3.1设计口令红包页面效果 171
8.3.2设计口令红包按钮效果 174
8.3.3设计口令红包背景效果 178
第9章 人才招募：招聘求职的H5广告设计 179
9.1企业招聘：掌握专场招聘会的H5页面设计 180
9.1.1设计专场招聘会渐变合成背景效果 180
9.1.2设计专场招聘会招聘信息边框效果 183
9.1.3设计专场招聘会的文字宣传内容 184
9.2实习招募：掌握校园招聘会的H5页面设计 188
9.2.1设计校园招聘会动感模糊背景效果 189
9.2.2设计校园招聘会页面主题宣传信息 190
9.2.3设计校园招聘会元素装饰效果 194
9.3应聘求职：掌握个人简历的H5页面设计 197
9.3.1设计个人简历舞台揭幕效果 198
9.3.2设计个人简历主题文字效果 200
9.3.3设计个人简历光斑点缀效果 203
第10章 企业宣传：品牌介绍的H5广告设计 206
10.1会议宣传：掌握商务汇报的H5页面设计 207
10.1.1设计商务汇报页面背景效果 207
10.1.2设计商务汇报主题内容效果 209
10.1.3设计商务汇报背景装饰效果 211
10.2公司简介：掌握公司介绍的H5页面设计 214
10.2.1设计公司介绍背景色块效果 214
10.2.2设计公司介绍图片文字效果 215
10.2.3设计公司介绍文字装饰效果 219
10.3企业品牌：掌握品牌展示的H5页面设计 220
10.3.1设计品牌展示色彩搭配效果 221
10.3.2设计品牌展示主题文字效果 223
10.3.3设计品牌展示企业标志效果 225
第11章 节日活动：电商购物H5广告设计 227
11.1购物活动：掌握年中大促的H5页面设计 228
11.1.1设计年中大促渐变背景效果 228
11.1.2设计年中大促底部装饰效果 229
11.1.3设计年中大促标志文字效果 231
11.2电商活动：掌握双十二促销的H5页面设计 237
11.2.1设计双十二促销纹理绿叶效果 238
11.2.2设计双十二促销文字边框效果 240
11.2.3设计双十二促销产品布局效果 242
11.3七夕活动：掌握情人节的H5页面设计 244
11.3.1设计情人节浪漫星空背景效果 245
11.3.2设计情人节渐变文字按钮效果 246
11.3.3设计情人节情侣装饰效果 251
第12章 会议邀请：年会晚会邀请函的H5广告设计 254
12.1企业年会：掌握年会邀请函的H5页面设计 255
12.1.1设计年会邀请函欧式边框效果 255
12.1.2设计年会邀请函主题内容效果 257
12.1.3设计年会邀请函底部装饰效果 259
12.2招商加盟：掌握招商邀请函的H5页面设计 261
12.2.1设计招商邀请函背景底纹效果 261
12.2.2设计招商邀请函文字广告信息 264
12.2.3设计招商邀请函个性花纹效果 265
12.3颁奖晚会：掌握颁奖典礼邀请函的H5页面设计 266
12.3.1设计颁奖典礼邀请函旋转背景效果 266
12.3.2设计颁奖典礼邀请函内容效果 268
12.3.3设计颁奖典礼邀请函装饰效果 271
第13章 喜庆请柬：贺卡卡片的H5广告设计 273
13.1结婚请帖：掌握婚礼请柬的H5页面设计 274
13.1.1设计婚礼请柬主题背景效果 274
13.1.2设计婚礼请柬文本矩形效果 276
13.1.3设计婚礼请柬装饰效果 279
13.2新春贺卡：掌握新年祝福的H5页面设计 281
13.2.1设计新年祝福背景纹理效果 282
13.2.2设计新年祝福文字信息效果 283
13.2.3设计新年祝福新春元素效果 290
13.3爱情卡片：掌握情侣表白的H5页面设计 294
13.3.1设计情侣表白浪漫背景效果 294
13.3.2设计情侣表白文本内容效果 295
13.3.3设计情侣表白元素装饰效果 297