软件操作篇 9
第1章 H5微营销：互动性更强的场景体验 9
1.1 H5移动营销，更小、更快、更简单 9
1.1.1 为什么选择做H5营销 9
1.1.2 H5移动营销的功能特色 9
1.1.3 细数用户的行为特征 10
1.2 用实力说话，H5移动营销的优势 11
第2章 工具：H5常用工具简介 16
2.1 设计方法：H5移动设计的3种途径 16
2.2 元素设计：H5的图形图像、影音开发工具 16
2.2.1 Photoshop——功能强大的设计工具 17
2.2.2 Ⅲustrator——专业的矢量图绘制工具 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 W3school——了解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详解 41
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
应用开发篇 59
第4章 流程：移动H5的策划与开发 59
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热门开发技术 82
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
视觉设计篇 98
第6章 风格：移动H5视觉风格设计 98
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视觉创意设计 117
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
实战案例篇 142
第8章 单页：精美H5单页移动设计 142
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移动设计 159
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移动设计 180
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移动设计 200
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