正版图书 H5移动营销广告设计全攻略:软件操作+应用开发+视觉设计+实战案例 刘松异 人民邮电出版社

                   联锐广文图书专营店 · 购买须知

作品看点

场景丰富，120多个成功的H5营销案例:括产品推广、品牌宣传、自媒体'吸'、企业招聘、邀请函等，20多种设计开发H5作品的工具和软件，H5营销策划推广的技巧，括:裂变增长、顾客留存、品牌营销、打造'品'、策划共鸣故事、IP营销、丰富流量渠道等，附赠素材，同步在线教学视频，读者可以边学习边练习，提高学习效率。

内容简介

本书是一本介绍移动H5设计的实例操作型教程，讲解了H5的开发工具、图文内容设计、应用开发制作、移动视觉营销和创意制作，以及H5设计实战案例等方面知识，帮助读者从新手成长为移动H5设计高手。本书共11章，括H5营销的优势、简介、Photoshop制作详解，移动H5的策划与开发、热门开发技术，移动H5的视觉风格、视觉创意设计要点与方法，还有H5移动单页及节日场景、产品推广、企业招聘广告综合设计等内容，读者学后可以融会贯通、举一反三，制作出更多精彩、的移动H5页面效果。本书适合从事移动互联网工作的设计师、营销人员，以及利用H5进行营销的公和需要进行移动互联网营销的企业相关人员使用。随书附赠教学资源，括书中案例的素材文件、效果文件，以及在线操作演示视频，读者可以边学习边练习，提高学习效率。

作者介绍

刘松异，H5移动营销专家，多年的移动互联网营销经验。 H5美工广告设计师，擅长H5的视觉设计和创意表达。 从H5的调研到设计、内容到形式、营销到运营、企业到用户、引流到变现等，有着一套标准化、高效化的整套方案和方法。 曾参与多家品牌企业H5的设计和运营，如智联招聘、招商银行、平安保险、中国电信、保利地产、国泰君安、三一重工、南方航空等。

目录

H5移动营销广告设计全攻略工具操作+应用开发+视觉设计+实战案例n
目 录n
软件操作篇n
第 1章n
H5微营销：互动性更强的场景体验n
1．1 H5移动营销，更小、更快、更简单．．．．．9n
1．1．1 为什么选择做H5营销．．．．．．．．．．．．．．．．．．．．．．．9n
1．1．2 H5移动营销的功能特色．．．．．．．．．．．．．．．．．．．．9n
1．1．3 细数用户的行为特征．．．．．．．．．．．．．．．．．．．．．．．10n
1．2 用实力说话，H5移动营销的优势．．．．．．．11n
第 2章n
工具：H5常用工具简介n
2．1 设计方法：H5移动设计的3种途径．．．．16n
2．2 素设计：H5的图形图像、影音开发工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．16n
2．2．1 Photoshop——功能强大的设计工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．17n
2．2．2 Illustrator——专业的矢量图绘制工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．17n
2．2．3 Sketch——移动UI界面设计工具．．．．18n
2．2．4 After Effects——制作炫酷的视频．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．18n
2．2．5 Cinema 4D——专业的三维软件工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19n
2．2．6 Final cut Pro——专业视频线性编辑软件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19n
2．2．7 Garage Band——数码音乐创作软件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．20n
2．3 动画设计：H5设计的演示动画制作工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．20n
2．3．1 Keynote——设计吸引人的PPT．．．．．20n
2．3．2 HYPE——做出悦目的动画效果．．．．．．21n
2．4 技术实现：H5的定制化发挥和创作工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．21n
2．4．1 FWA——H5可以实现什么动态效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．21n
2．4．2 W 3school——了解H5的基础代码知识．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．22n
2．5 快速套用：互联网模板类H5开发平台．23n
2．5．1 人人秀——3分钟制作H5微场景平台．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．23n
2．5．2 易企秀——一键生成企业营销H5．．．．25n
2．5．3 兔展——让H5设计不再单调．．．．．．．．．．．27n
2．5．4 MAKA——轻松搞定H5定制推广．．．．29n
2．5．5 初页——把你的照片变成故事和书．．．．30n
2．6 创意设计：互联网功能类H5开发平台．31n
2．6．1 互动大师（iH5）——可视化的H5在线编辑器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．31n
2．6．2 意派360——常懂设计师的专业H5工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．34n
2．7 组合使用：各种H5工具的选择方十．．37n
2．7．1 开发类H5工具的选择．．．．．．．．．．．．．．．．．．．．．37n
2．7．2 网站类H5工具的选择．．．．．．．．．．．．．．．．．．．．．37n
2．8 省时省力：H5设计常用的辅助工具．．．37n
2．8．1 格式工厂——声音/视频压缩工具．．．．．37n
2．8．2 Ps Play——在上预览Photoshop设计稿．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．38n
2．8．3 TinyPNG——图片压缩工具．．．．．．．．．．．38n
2．8．4 草料——生成工具．．．．．．．．．．．．．．．．39n

第3章n
重点：H5之Photoshop详解n
3．1 图像设计：轻松提升H5作品的颜值．．．．41n
3．1．1 控制移动H5图像的画布．．．．．．．．．．．．．．．．．．41n
3．1．2 运用工具裁剪移动H5图像．．．．．．．．．．．．．．42n
3．1．3 移动H5图像的抠图合成．．．．．．．．．．．．．．．．．．43n
3．1．4 移动H5图像的影调调整．．．．．．．．．．．．．．．．．．44n
3．1．5 移动H5图像的色彩调整．．．．．．．．．．．．．．．．．．45n
3．1．6 移动H5图像设计的绘图基础．．．．．．．．．．．46n
3．1．7 移动H5图像的路径编辑技巧．．．．．．．．．．．47n
3．1．8 移动H5图像的修饰与修复．．．．．．．．．．．．．．48n
3．2 文字设计：做出有质感的好作品．．．．．．．49n
3．2．1 认识移动H5中的文字．．．．．．．．．．．．．．．．．．．．．49n
3．2．2 输入移动H5图像文字．．．．．．．．．．．．．．．．．．．．．50n
3．2．3 设置移动H5文字属性．．．．．．．．．．．．．．．．．．．．．51n
3．2．4 设置移动H5段落属性．．．．．．．．．．．．．．．．．．．．．52n
3．2．5 设置H5文字的沛样十．．．．．．．．．．．．．．．．．53n
3．2．6 设置H5的标题文字格十．．．．．．．．．．．．．．．．．55n
3．2．7 制作移动H5界面路径文字．．．．．．．．．．．．．．56n
3．2．8 制作与编辑变形移动H5文字．．．．．．．．．．．57n



应用开发篇n

第4章n
流程：移动H5的策划与开发n
4．1 前期准备：让H5设计．．．．．．．．．59n
4．1．1 定目标：H5用来做什么．．．．．．．．．．．．．．．．．．59n
4．1．2 找热点：H5如何火起来．．．．．．．．．．．．．．．．．．60n
4．1．3 写策划：H5如何做起来．．．．．．．．．．．．．．．．．．61n
4．2 程序设计：做H5的基本流程．．．．．．．．．．．．62n
4．2．1 选择模板：一键生成H5作品．．．．．．．．．．．62n
4．2．2 交互设计：让H5更具互动性．．．．．．．．．．．63n
4．2．3 视觉设计：给H5锦上添花．．．．．．．．．．．．．．68n
4．3 测试分析：做好H5的总结与沉淀．．．．．．．73n
4．3．1 程序测试：进行修改和完善．．．．．．．．．．．．73n
4．3．2 活动上线：做好H5的推广．．．．．．．．．．．．．．74n
4．3．3 效果分析：实现数据化营销．．．．．．．．．．．．77n

第5章n
技术：移动H5热门开发技术n
5．1 让H5人气值棚的'黑科技'．．．．．．．．．82n
5．1．1 运用720度全景技术打造全景画面效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．82n
5．1．2 运用3D旋转技术让H5画面更加动感．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．82n
5．1．3 运用人脸识别技术实现H5趣味营销．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．83n
5．1．4 运用物理引擎技术创建出虚拟世界．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．84n
5．1．5 运用重力感应技术提升用户的互动体验．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．85n
5．1．6 运用手指跟随产生滑动幻灯片效果．．．．86n
5．2 H5 +VR/AR/AI：融合高端定制开发．．．．87n
5．2．1 运用AR技术结合线下活动和线上互动．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．87n
5．2．2 运用VR技术生成一种虚拟的动态情境．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．88n
5．2．3 运用AI技术让移动H5作品变智能．．．．89n
5．3 展现动态炫酷画面的H5技术运用．．．．．．92n
5．3．1 运用快闪影片让H5作品更吸引眼球．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．92n
5．3．2 运用粒子展现炫酷的动画效果．．．．93n
5．3．3 运用视频互动更好地展示品牌内容．．．．94n
5．3．4 运用多屏互动打造互动新模十．．．95n
5．3．5 运用GIF动画让页面变得生动．．．．．．．．．．96n



视觉设计篇n

第6章n
风格：移动H5视觉风格设计n
6．1 设计原则：五大H5设计精髓要点．．．．．．98n
6．1．1 有创意，少抄袭，多原创．．．．．．．．．．．．．．．．98n
6．1．2 注重H5设计风格的统一．．．．．．．．．．．．．．．．．．99n
6．1．3 H5原型图的绘制与构思．．．．．．．．．．．．．．．．100n
6．1．4 营造出合适的视觉氛围．．．．．．．．．．．．．．．．．100n
6．1．5 让用户真实参与和体验．．．．．．．．．．．．．．．．．101n
6．2 设计风格：12种H5设计风格解析．．．．103n
6．2．1 扁平、插画视觉风格设计．．．．．．．．．．．．．．103n
6．2．2 手绘、动漫视觉风格设计．．．．．．．．．．．．．．105n
6．2．3 水墨、复古视觉风格设计．．．．．．．．．．．．．．105n
6．2．4 写实、科技视觉风格设计．．．．．．．．．．．．．．106n
6．2．5 极简、拼贴视觉风格设计．．．．．．．．．．．．．．108n
6．2．6 摄影、小清新视觉风格设计．．．．．．．．．．109n
6．3 表现手法：6种H5视觉设计．．．．．．．110n
6．3．1 来电视觉表现手法．．．．．．．．．．．．．．．．．110n
6．3．2 擦除视觉表现手法．．．．．．．．．．．．．．．．．112n
6．3．3 动画视觉表现手法．．．．．．．．．．．．．．．．．113n
6．3．4 SVG视觉表现手法．．．．．．．．．．．．．．．．113n
6．3．5 拍立得视觉表现手法．．．．．．．．．．．．．．114n
6．3．6 玻璃碎掉视觉表现手法．．．．．．．．．．115n

第7章n
创意：移动H5视觉创意设计n
7．1 版式设计：让你的设计越来越出色．．．．117n
7．1．1 视觉动线设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．117n
7．1．2 画面焦点设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．117n
7．1．3 页面层级设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．118n
7．2 活动设计：快速引H5页面的热度．．119n
7．2．1 砍价活动设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．119n
7．2．2 抽奖活动设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．121n
7．2．3 调查问卷设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．121n
7．2．4 投票活动设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．123n
7．2．5 卡券活动设计．．．．．．．．．．．．．．．．．．．．．．．．127n
7．3 动效设计：为H5页面打造视觉动效．．．．127n
7．3．1 了解移动H5的动效知识．．．．．．．．．．．．．．．．127n
7．3．2 H5动效的主要类型与实现方法．．．．．128n
7．3．3 在H5作品中运用转场类动效．．．．．．．．．130n
7．3．4 在H5作品中运用内容类动效．．．．．．．．．131n
7．3．5 在H5作品中运用辅助性动效．．．．．．．．．131n
7．3．6 在H5作品中运用功能性动效．．．．．．．．．131n
7．4 音效设计：更好展现H5作品个性与情感．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．132n
7．4．1 不能忽略H5作品中的声音．．．．．．．．．．．．132n
7．4．2 H5背景音效的注意事项．．．．．．．．．．．．．．．．133n
7．4．3 选择合适的H5背景音效．．．．．．．．．．．．．．．．133n
7．4．4 H5作品中常见的辅助音效．．．．．．．．．．．．134n
7．4．5 如何获取更好的音效．．．．．．．．．．．．．．．．．．．．．134n
7．5 交互设计：增加互动性吸引更多人气．．．．135n
7．5．1 幕评论设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．135n
7．5．2 点击触发事件设计．．．．．．．．．．．．．．．．．．．．．．．．136n
7．5．3 互动游戏设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．138n



实战案例篇n

第8章n
单页：精美H5单页移动设计n
8．1 旅行相册H5页面设计．．．．．．．．．．．．．．．．．．．142n
8．1．1 设计旅行相册颗粒背景效果．．．．．．．．142n
8．1．2 设计旅行相册文字信息效果．．．．．．．．143n
8．1．3 设计旅行相册照片装饰效果．．．．．．．．145n
8．2 活动H5页面设计．．．．．．．．．．．．．．．．．．．147n
8．2．1 设计活动背景纹理效果．．．．．．．．147n
8．2．2 设计活动文字边框效果．．．．．．．．148n
8．2．3 设计活动产品布局效果．．．．．．．．151n
8．3 年会邀请函H5页面设计．．．．．．．．．．．．．．．．152n
8．3．1 设计年会邀请函边框效果．．．．．．．．．．．152n
8．3．2 设计年会邀请函主题效果．．．．．．．．．．．155n
8．3．3 设计年会邀请函整体效果．．．．．．．．．．．156n

第9章n
综合：节日场景H5移动设计n
9．1 春节活动H5作品设计的前期准备．．．．159n
9．1．1 整体的创意构思．．．．．．．．．．．．．．．．．．．．．．．．．．．．159n
9．1．2 素材图像的收集．．．．．．．．．．．．．．．．．．．．．．．．．．．．160n
9．2 通过Photoshop制作图像效果．．．．．．160n
9．2．1 制作节日主题文字效果．．．．．．．．．．．．．．．．．160n
9．2．2 抠取新年装饰素材图案．．．．．．．．．．．．．．．．．163n
9．3 通过工具网站生成H5作品．．．．．．．．．．．．．164n
9．3．1 设计H5作品的第 1页：活动标题．．．164n
9．3．2 设计H5作品的第 2页：祝福文案．．．168n
9．3．3 设计H5作品的第3页：红活动．．．172n
9．3．4 为H5作品添加背景音效．．．．．．．．．．．．．．．．175n
9．4 移动H5作品的发布和分享．．．．．．．．．．．．．176n
9．4．1 发布与上线H5作品．．．．．．．．．．．．．．．．．．．．．．．176n
9．4．2 将H5活动页面分享到群．．．．．．．．．178n

第 10章n
综合：产品推广H5移动设计n
10．1 产品推广H5作品设计的前期准备．．180n
10．1．1 整体的创意构思．．．．．．．．．．．．．．．．．．．．．．．180n
10．1．2 素材图像的拍摄与收集．．．．．．．．．．．．．180n
10．2 通过Photoshop制作图像效果．．．．．181n
10．2．1 主题文字的设计．．．．．．．．．．．．．．．．．．．．．．．181n
10．2．2 产品图片的调色处理．．．．．．．．．．．．．．．．184n
10．2．3 产品图片的详情展示．．．．．．．．．．．．．．．．185n
10．3 通过工具网站生成H5作品．．．．．．．．．．．187n
10．3．1 设计H5作品的第 1页：首页设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．187n
10．3．2 设计H5作品的第 2页：推荐产品1．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．190n
10．3．3 设计H5作品的第3页：推荐产品2 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．192n
10．3．4 设计H5作品的第4页：产品展示．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．193n
10．3．5 设计H5作品的第5页：产品．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．194n
10．3．6 为H5作品添加背景音效．．．．．．．．．．．196n
10．4 移动H5作品的发布和分享．．．．．．．．．．．196n
10．4．1 发布与上线H5作品．．．．．．．．．．．．．．．．．．196n
10．4．2 将H5作品分享到朋友圈．．．．．．．．．．．198n

第 11章n
综合：企业招聘H5移动设计n
11．1 企业H5招聘广告制作的前期准备．．200n
11．1．1 H5招聘广告的整体创意构思．．．．200n
11．1．2 整理相关的招聘内容．．．．．．．．．．．．．．．．201n
11．2 通过Photoshop制作图像效果．．．．201n
11．2．1 使用Photoshop制作招聘主题图片．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．201n
11．2．2 使用Photoshop调整企业相关图片．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．203n
11．3 通过工具网站生成H5页面．．．．．．．．．．．206n
11．3．1 设计H5招聘广告的第 1页：招聘主题．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．206n
11．3．2 设计H5招聘广告的第 2页：公实力展示．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．209n
11．3．3 设计H5招聘广告的第3页：工作环境展示．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．210n
11．3．4 设计H5招聘广告的第4页：企业展示．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．211n
11．3．5 设计H5招聘广告的第5页：招聘岗位展示．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．213n
11．3．6 设计H5招聘广告的第6页：在线报名申请．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．216n
11．3．7 为H5作品添加背景音效．．．．．．．．．．．219n
11．4 移动H5作品的发布和分享．．．．．．．．．．．220n
11．4．1 发布与上线H5作品．．．．．．．．．．．．．．．．．．221n
11．4．2 分享H5作品与收集求职者信息．221