H5移动营销广告设计全攻略:软件操作+应用开发+视觉设计+实战案例

H5移动营销广告设计全攻略工具操作 应用开发 视觉设计 实战案例

目 录

软件操作篇

第 1章

H5微营销：互动性更强的场景体验

1.1 H5移动营销，更小、更快、更简单.....9

1.1.1 为什么选择做H5营销.......................9

1.1.2 H5移动营销的功能特色....................9

1.1.3 细数用户的行为特征.......................10

1.2 用实力说话，H5移动营销的优势.......11

第 2章

工具：H5常用工具简介

2.1 设计方法：H5移动设计的3种途径....16

2.2 元素设计：H5的图形图像、影音开发工具............................................16

2.2.1 Photoshop——功能强大的设计工具...............................................17

2.2.2 Illustrator——专业的矢量图绘制工具...............................................17

2.2.3 Sketch——移动UI界面设计工具....18

2.2.4 After Effects——制作炫酷的视频特效........................................18

2.2.5 Cinema 4D——专业的三维软件工具........................................19

2.2.6 Final cut Pro——专业视频非线性编辑软件........................................19

2.2.7 Garage Band——数码音乐创作软件...............................................20

2.3 动画设计：H5设计的演示动画制作工具............................................20

2.3.1 Keynote——设计吸引人的PPT.....20

2.3.2 HYPE——做出悦目的动画效果......21

2.4 技术实现：H5的定制化发挥和创作工具............................................21

2.4.1 FWA——H5可以实现什么动态效果...............................................21

2.4.2 W 3school——了解H5的基础代码知识...............................................22

2.5 快速套用：互联网模板类H5开发平台.23

2.5.1 人人秀——3分钟制作H5微场景平台...............................................23

2.5.2 易企秀——一键生成企业营销H5....25

2.5.3 兔展——让H5设计不再单调...........27

2.5.4 MAKA——轻松搞定H5定制推广....29

2.5.5 初页——把你的照片变成故事和书....30

2.6 创意设计：互联网功能类H5开发平台.31

2.6.1 互动大师（iH5）——可视化的H5在线编辑器........................................31

2.6.2 意派360——非常懂设计师的专业H5工具..........................................34

2.7 组合使用：各种H5工具的选择方式...37

2.7.1 开发类H5工具的选择.....................37

2.7.2 网站类H5工具的选择.....................37

2.8 省时省力：H5设计常用的辅助工具...37

2.8.1 格式工厂——声音/视频压缩工具.....37

2.8.2 Ps Play——在手机上预览Photoshop设计稿...........................................38

2.8.3 TinyPNG——图片压缩工具...........38

2.8.4 草料——二维码生成工具................39



第3章

重点：H5之Photoshop详解

3.1 图像设计：轻松提升H5作品的颜值....41

3.1.1 控制移动H5图像的画布..................41

3.1.2 运用工具裁剪移动H5图像..............42

3.1.3 移动H5图像的抠图合成..................43

3.1.4 移动H5图像的影调调整..................44

3.1.5 移动H5图像的色彩调整..................45

3.1.6 移动H5图像设计的绘图基础...........46

3.1.7 移动H5图像的路径编辑技巧...........47

3.1.8 移动H5图像的修饰与修复..............48

3.2 文字设计：做出有质感的好作品.......49

3.2.1 认识移动H5中的文字.....................49

3.2.2 输入移动H5图像文字.....................50

3.2.3 设置移动H5文字属性.....................51

3.2.4 设置移动H5段落属性.....................52

3.2.5 设置H5文字的排版样式..................53

3.2.6 设置H5的标题文字格式..................55

3.2.7 制作移动H5界面路径文字..............56

3.2.8 制作与编辑变形移动H5文字...........57







应用开发篇



第4章

流程：移动H5的策划与开发

4.1 前期准备：让H5设计事半功倍.........59

4.1.1 定目标：H5用来做什么..................59

4.1.2 找热点：H5如何火起来..................60

4.1.3 写策划：H5如何做起来..................61

4.2 程序设计：做H5的基本流程............62

4.2.1 选择模板：一键生成H5作品...........62

4.2.2 交互设计：让H5更具互动性...........63

4.2.3 视觉设计：给H5锦上添花..............68

4.3 测试分析：做好H5的总结与沉淀.......73

4.3.1 程序测试：进行修改和完善............73

4.3.2 活动上线：做好H5的推广..............74

4.3.3 效果分析：实现数据化营销............77



第5章

技术：移动H5热门开发技术

5.1 让H5人气值爆棚的“黑科技”.........82

5.1.1 运用720度全景技术打造全景画面效果........................................82

5.1.2 运用3D旋转技术让H5画面更加动感...............................................82

5.1.3 运用人脸识别技术实现H5趣味营销...............................................83

5.1.4 运用物理引擎技术创建出虚拟世界...............................................84

5.1.5 运用重力感应技术提升用户的互动体验........................................85

5.1.6 运用手指跟随产生滑动幻灯片效果....86

5.2 H5 VR/AR/AI：融合高端定制开发....87

5.2.1 运用AR技术结合线下活动和线上互动...............................................87

5.2.2 运用VR技术生成一种虚拟的动态情境........................................88

5.2.3 运用AI技术让移动H5作品变智能....89

5.3 展现动态炫酷画面的H5技术运用......92

5.3.1 运用快闪影片让H5作品更吸引眼球...............................................92

5.3.2 运用粒子特效展现炫酷的动画效果....93

5.3.3 运用视频互动更好地展示品牌内容....94

5.3.4 运用多屏互动打造互动娱乐新模式....95

5.3.5 运用GIF动画让页面变得生动..........96







视觉设计篇



第6章

风格：移动H5视觉风格设计

6.1 设计原则：五大H5设计精髓要点......98

6.1.1 有创意，少抄袭，多原创................98

6.1.2 注重H5设计风格的统一..................99

6.1.3 H5原型图的绘制与构思................100

6.1.4 营造出合适的视觉氛围.................100

6.1.5 让用户真实参与和体验.................101

6.2 设计风格：12种H5设计风格解析....103

6.2.1 扁平、插画视觉风格设计..............103

6.2.2 手绘、动漫视觉风格设计..............105

6.2.3 水墨、复古视觉风格设计..............105

6.2.4 写实、科技视觉风格设计..............106

6.2.5 极简、拼贴视觉风格设计..............108

6.2.6 摄影、小清新视觉风格设计..........109

6.3 表现手法：6种H5视觉特效设计.......110

6.3.1 来电视觉特效表现手法.................110

6.3.2 擦除视觉特效表现手法.................112

6.3.3 动画视觉特效表现手法.................113

6.3.4 SVG视觉特效表现手法................113

6.3.5 拍立得视觉特效表现手法..............114

6.3.6 玻璃碎掉视觉特效表现手法..........115



第7章

创意：移动H5视觉创意设计

7.1 版式设计：让你的设计越来越出色....117

7.1.1 视觉动线设计...............................117

7.1.2 画面焦点设计...............................117

7.1.3 页面层级设计...............................118

7.2 活动设计：快速引爆H5页面的热度..119

7.2.1 砍价活动设计...............................119

7.2.2 抽奖活动设计...............................121

7.2.3 调查问卷设计...............................121

7.2.4 投票活动设计...............................123

7.2.5 微信卡券活动设计........................127

7.3 动效设计：为H5页面打造视觉动效....127

7.3.1 了解移动H5的动效知识................127

7.3.2 H5动效的主要类型与实现方法.....128

7.3.3 在H5作品中运用转场类动效.........130

7.3.4 在H5作品中运用内容类动效.........131

7.3.5 在H5作品中运用辅助性动效.........131

7.3.6 在H5作品中运用功能性动效.........131

7.4 音效设计：更好展现H5作品个性与情感.........................................132

7.4.1 不能忽略H5作品中的声音............132

7.4.2 H5背景音效的注意事项................133

7.4.3 选择合适的H5背景音效................133

7.4.4 H5作品中常见的辅助音效............134

7.4.5 如何获取更好的音效.....................134

7.5 交互设计：增加互动性吸引更多人气....135

7.5.1 弹幕评论设计...............................135

7.5.2 点击触发事件设计........................136

7.5.3 互动游戏设计...............................138







实战案例篇



第8章

单页：精美H5单页移动设计

8.1 旅行相册H5页面设计...................142

8.1.1 设计旅行相册颗粒背景效果........142

8.1.2 设计旅行相册文字信息效果........143

8.1.3 设计旅行相册照片装饰效果........145

8.2 促销活动H5页面设计...................147

8.2.1 设计促销活动背景纹理效果........147

8.2.2 设计促销活动文字边框效果........148

8.2.3 设计促销活动产品布局效果........151

8.3 年会邀请函H5页面设计................152

8.3.1 设计年会邀请函边框效果...........152

8.3.2 设计年会邀请函主题效果...........155

8.3.3 设计年会邀请函整体效果...........156



第9章

综合：节日场景H5移动设计

9.1 春节活动H5作品设计的前期准备....159

9.1.1 整体的创意构思............................159

9.1.2 素材图像的收集............................160

9.2 通过Photoshop制作图像效果......160

9.2.1 制作节日主题文字效果.................160

9.2.2 抠取新年装饰素材图案.................163

9.3 通过工具网站生成H5作品.............164

9.3.1 设计H5作品的第 1页：活动标题...164

9.3.2 设计H5作品的第 2页：祝福文案...168

9.3.3 设计H5作品的第3页：红包活动...172

9.3.4 为H5作品添加背景音效................175

9.4 移动H5作品的发布和分享.............176

9.4.1 发布与上线H5作品.......................176

9.4.2 将H5活动页面分享到微信群.........178



第 10章

综合：产品推广H5移动设计

10.1 产品推广H5作品设计的前期准备..180

10.1.1 整体的创意构思.......................180

10.1.2 素材图像的拍摄与收集.............180

10.2 通过Photoshop制作图像效果.....181

10.2.1 主题文字的设计.......................181

10.2.2 产品图片的调色处理................184

10.2.3 产品图片的详情展示................185

10.3 通过工具网站生成H5作品...........187

10.3.1 设计H5作品的第 1页：首页设计........................................187

10.3.2 设计H5作品的第 2页：推荐产品1......................................190

10.3.3 设计H5作品的第3页：推荐产品2 .....................................192

10.3.4 设计H5作品的第4页：产品展示........................................193

10.3.5 设计H5作品的第5页：产品预订........................................194

10.3.6 为H5作品添加背景音效...........196

10.4 移动H5作品的发布和分享...........196

10.4.1 发布与上线H5作品..................196

10.4.2 将H5作品分享到朋友圈...........198



第 11章

综合：企业招聘H5移动设计

11.1 企业H5招聘广告制作的前期准备..200

11.1.1 H5招聘广告的整体创意构思....200

11.1.2 整理相关的招聘内容................201

11.2 通过Photoshop制作图像效果....201

11.2.1 使用Photoshop制作招聘主题图片.................................201

11.2.2 使用Photoshop调整企业相关图片.................................203

11.3 通过工具网站生成H5页面...........206

11.3.1 设计H5招聘广告的第 1页：招聘主题........................................206

11.3.2 设计H5招聘广告的第 2页：公司实力展示.................................209

11.3.3 设计H5招聘广告的第3页：工作环境展示.................................210

11.3.4 设计H5招聘广告的第4页：企业福利展示.................................211

11.3.5 设计H5招聘广告的第5页：招聘岗位展示.................................213

11.3.6 设计H5招聘广告的第6页：在线报名申请.................................216

11.3.7 为H5作品添加背景音效...........219

11.4 移动H5作品的发布和分享...........220

11.4.1 发布与上线H5作品..................221

11.4.2 分享H5作品与收集求职者信息.221