详情
全书分为四篇：
软件操作篇：先讲H5设计、开发用到的常用工具软件，并介绍为主的PS的软件操作。
应用开发篇：从H5的策划、开发，用到的新技术、新效果，进行全面、深入的讲解。
视觉设计篇：从H5的设计风格、表现手法、动态效果、音频特效、交互设计等细讲。
实战安全篇：从最常用的4个领域——产品推广、节日场景、旅行相册、企业招聘，列举案例，介绍H5的从零开始，如何设计、制作和发布。
图书在版编目（CIP）数据
H5移动营销广告设计全攻略：软件操作+应用开发+视觉设计+实战案例 / 刘松异编著．--北京：人民邮电出版社，2019.7
ISBN 978-7-115-51156-0
Ⅰ．①H… Ⅱ．①刘… Ⅲ．①网络营销—广告设计 Ⅳ．①F713.365.2②F713.81
中国版本图书馆CIP数据核字（2019）第078366号
编 著 刘松异
责任编辑 张丹阳
责任印制 马振武
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
北京捷迅佳彩印刷有限公司印刷
开本：700×1000 1/16
印张：14
字数：358千字
印数：1-3 000册
2019年7月第1版
2019年7月北京第1次印刷
读者服务热线：（010）81055410 印装质量热线：（010）81055316
反盗版热线：（010）81055315
广告经营许可证：京东工商广登字20170147号
本书是一本介绍移动H5设计的实例操作型教程，讲解了H5的开发工具、图文内容设计、应用开发制作、移动视觉营销和创意制作，以及H5设计实战案例等方面知识，帮助读者从新手成长为移动H5设计高手。
本书共11章，包括H5营销的优势、工具软件简介、Photoshop制作详解，移动H5的策划与开发、热门开发技术，移动H5的视觉风格、视觉创意设计要点与方法，还有H5移动单页及节日场景、产品推广、企业招聘广告综合设计等内容，读者学后可以融会贯通、举一反三，制作出更多精彩、完美的移动H5页面效果。
本书适合从事移动互联网工作的设计师、微信营销人员，以及利用H5进行营销的公司和需要进行移动互联网营销的企业相关人员使用。随书附赠教学资源，包括书中案例的素材文件、效果文件，以及在线操作演示视频，读者可以边学习边练习，提高学习效率。
如今，移动互联网的发展速度越来越快，移动设备越来越普及。基于移动互联网和智能手机的H5产品也被广泛运用到各个领域，各类手机端小游戏、商品广告、结婚请柬、招聘信息、营销活动等，纷纷采用H5的形式来进行传播和展示。
一个好的H5产品，无论是在立意、创意、设计的层面，还是在制作和传播过程中，需要各方面协同一致，技术的把握、创意与文案的优化、传播的执行都是不可或缺的。本书为读者提供了大量“刷屏”级的H5案例，包括软件操作、应用开发、视觉设计、实战案例等4篇内容，全方位解决用户营销需求。
软件操作：主要讲解了H5营销的优势和主要制作工具等内容，用通俗易懂的方式，阐述H5设计与制作工具的使用方法和搭配技巧。
应用开发：主要讲解了H5策划与开发流程和移动H5热门开发技术的应用，结合企业实例分析，帮助读者快速掌握H5的开发与应用。
视觉设计：主要包括视觉风格设计和视觉创意设计，介绍了丰富的视觉设计技巧，让H5营销作品更有竞争力，为企业带来更多潜在客户，快速提升企业销售额和品牌影响力。
实战案例：主要包括产品推广、品牌宣传、节日场景、企业招聘等传统行业和互联网行业的经典案例，从创意角度和技术角度讨论H5案例，让读者学习到大品牌的H5营销成功经验，并有效应用于实际工作中。
本书适合对H5移动营销感兴趣的读者阅读，帮助读者打下坚实的基础。
（1）H5设计的爱好者：通过大量案例寻找更多创意思路。
（2）H5初级设计人员：系统学习H5的制作和运营。
（3）对H5移动营销感兴趣的普通用户：了解H5营销的基本方法和流程。
（4）传统纸媒体设计师及新媒体广告美工：掌握H5视觉设计的要点，为转型做知识储备，提升自己的职场技能。
（5）高校或培训机构的学生：学习系统的H5设计和营销知识，自我提升。
本书是一本综合实战型的H5教程，除了对理论知识的讲解，还有对各个领域实战案例的讲解。如果你准备往移动营销行业发展，那么本书一定适合你。
完整的流程：介绍拥有数十万用户的H5制作工具，帮助读者利用各种精美模板一键生成H5产品，只需简单的操作，就让你轻松制作出炫酷的移动展示效果。
热门的创意：选择热门的创意，起到抛砖引玉的作用，启发读者将创意思路更加完美地运用到H5页面设计当中，让你的H5作品更加优秀。
经典的案例：大量的品牌H5营销案例，如腾讯、百度、支付宝、宝马、京东、万达、美的、天猫等，共计120多个品牌，让你的品牌营销更有水准。
丰富的场景：产品推广、品牌宣传、自媒体“吸粉”、企业招聘、邀请函等场景的讲解，全面满足你的个性化需求。
全面的行业：房产、餐饮、汽车、电子数码、时尚饰品、互联网金融、新零售电商、网络游戏、新媒体平台及在线教育等行业案例介绍，帮助你降低企业的移动营销成本，提高营销转化率，开启推广营销新时代。
希望本书能够为读者带来真实的营销帮助，让读者零预算也能做出“刷爆”朋友圈的H5活动，让产品的流量和转化率暴涨。
随书附赠教学资源，包括书中案例的素材文件、效果文件，以及在线教学视频。读者可以扫描“资源获取”二维码获得资源获取方法，如需下载技术支持，可发送邮件至szys@ptpress.com.cn。
人民邮电出版社有限公司旗下品牌“数艺社”，专注于专业艺术设计类图书出版，为艺术设计从业者提供专业的图书、U书、课程等教育产品。领域涉及平面、三维、影视、摄影与后期等数字艺术门类；字体设计、品牌设计、色彩设计等设计理论与应用门类；UI设计、电商设计、新媒体设计、游戏设计、交互设计、原型设计等互联网设计门类；环艺设计手绘、插画设计手绘、工业设计手绘等设计手绘门类。更多服务请访问“数艺社”社区平台www.shuyishe.com。我们将提供及时、准确、专业的学习服务。
学习提示
H5移动营销，更小、更快、更简单
用实力说话，H5移动营销的优势
在移动互联网时代，诞生了H5这种全新的信息连接方式，它可以代替传统的纸张、印刷和派发方式，同时企业可以随意编辑需要的推广内容，做到“所见即所得”。尤其是在新媒体营销环境下，H5的推广方式简单得只需要一个二维码，或者一个网页链接，即可将大量的信息呈现到用户眼前，适合多种用户场景。
移动互联网具有碎片化、社会化等天然的营销优势，可以帮助企业更好地推广各种品牌活动、产品和服务，增加线下和线上的销量，同时企业可以获得大量的潜在优质粉丝关注，这些都是传统营销难以实现的。
移动互联网为企业提供了很多营销工具，如App、微信公众号等，但是，最方便快捷的莫过于H5了。H5是社会化营销发展的一种必然产物，如图1-1所示。在互联网时代早期，主要的社会化营销工具就是博客和微博，其主要内容也就是文字、图片和视频等；到了移动互联网时代伴随着微信的出现，人们不再满足于单向的信息传递，更偏重于双方的互动和分享，此时H5便成为时下社会化营销的标配。
专家指点
Blog即网络日志，外语全名Web log，后来缩写为Blog，它是继Email、BBS和IM之后出现的第四种网络交流方式。
H5是伴随着移动互联网兴起的一种新型营销工具，由于它是移动互联网的衍生物，因此也具有很多移动互联网的营销优势，如娱乐化、碎片化、社会化、互动性强等。如今，H5已经成为各行各业必不可少的营销工具，它可以帮助企业更好地“吸粉引流”、销售产品。
H5移动营销的主要特点就是跨平台性和本地存储特性，如表1-1所示。
可以说，H5技术的成熟，不但为移动互联网开辟了一种全新的营销方式，同时也推动了移动互联网的快速发展。在营销方面，我们可以将各种媒体的表现方式融入H5页面中，包括文字动效、游戏、视频、图片、图表、音乐及互动调查等内容形式，而且可以重点展示品牌，方便用户阅读、体验与分享。
下面我们来看看H5营销的特色功能，分析一下H5场景为何有利于营销。H5营销作为一种新型的移动营销方式，发展速度极快，在短时间内已经成为互联网的一大特色。对于企业而言，要想突破传统的营销方式，获得更好的发展，就需要利用H5营销这种新手段开拓市场，抓住机遇。H5营销之所以能够快速提升影响力，其根本的特色功能不可忽视，主要分为如图1-2所示的4个方面。
专家指点
与传统的营销方式相比，H5营销方式可以更好地激起用户的阅读和分享欲望，甚至有些优秀的H5页面可以实现数亿级的曝光量。因此，如今很多企业和商家都在争先恐后地进入H5营销领域，以借此实现更高的营业额。
为了让H5页面可以被用户点击和浏览，我们还需要分析移动互联网时代的用户行为特征，如图1-3所示。
当然，除了前面介绍的几种行为，还有一个比较重要的就是要善于引导用户分享，这样才能让你的H5营销获得更好的效果，如图1-4所示。
对于开发者或企业来说，H5营销在成本、开发、传播、运营和维护等方面都具有很多优势，下面将分别进行介绍。
从企业的传统宣传方式来看，如电视广告、企业横幅、宣传海报、活动展板、活动宣传单、灯箱宣传、刊物宣传等，需要投入的资金较多，而宣传的效果往往有限。尤其是电视广告和网络广告等宣传方式，需要的费用更多。这些宣传方式相较于H5营销方式而言，都因投入资金多而成了企业进行宣传时的第二选择。
对于H5营销，企业所需要花费的仅仅是H5页面的设计成本和维护成本，投入的资金并不多。
专家指点
从用户的角度来说，他不需要下载安装H5，也不用浪费过多流量和时间，就可以满足自己的核心需求，因此使用成本非常低。当用户看到一个H5页面时，想看就可以根据提示看，不想看直接关掉就行，也不需要卸载等操作。
H5营销之所以能够受到企业的青睐，与它所具有的开发优势是分不开的，如图1-5所示。
H5的运营比较简单，企业只需要通过开发平台的后台，即可快速收集用户的各种数据，如流量统计、分享统计、互动统计、扩展网址统计、分享渠道统计、独立访客（UV）统计、访问设备、访客停留时间/阅读深度、地域访问统计等数据情况。
同时，H5的运营优势具体表现在以下两个方面，如图1-6所示。
面对多屏应用，各种智能设备、各种操作系统以及各种应用平台，都制定了不同的开发要求，这让应用开发者感到痛苦不堪。以苹果iOS系统和安卓系统为例，企业在开发App时，就需要做两个版本才行。而H5具有非常灵活的跨平台性能，可以帮助企业避免很多麻烦，如图1-7所示。
专家指点
企业只需做一个H5作品，即可应用到多种平台上，不管是开发的资金和时间，还是后期的运营维护，都更加低廉、方便，这明显也是移动应用的一个刚需。
H5在维护方面的优势主要体现在以下两个方面，如图1-8所示。
智能手机作为信息接收和发布的载体，其使用量要远远超过笔记本电脑和平板电脑等其他移动设备，若把H5的发展比作疯长的茂林，那么智能手机便是H5生存、生长所依靠的土壤。智能手机对H5发展的有利特点如图1-9所示。
随着科技的发展，智能手机的功能也日益强大，除了支持各类娱乐性的H5应用外，也支持许多技术操作性H5的应用，视、听、读、写、剪辑的功能日渐强大，使H5的操作越来越简便，同时也更加容易推广和发展。H5的主要应用优势如图1-10所示。
例如，“围住神经猫”是一个比较老却非常经典的H5作品，如图1-11所示。早在2014年7月就上线了，据悉其开发时间仅为一天半，而且整个开发过程就两个人负责，一个负责美术设计，另一个负责程序开发。
游戏规则非常简单，在画面中会随机出现两种颜色的圆点，而扭动的小猫只会停留在灰色的圆点上，我们可以点击灰色圆点将其变成橙色，只要用橙色圆点将小猫围住即可，系统会自动统计用户围住小猫时使用的步数。
“围住神经猫”之所以取得成功，主要原因如图1-12所示。
相关数据显示，“围住神经猫”推出的第一天表现很普通，其独立玩家数（IP）只有23.4万，流量（PV）也只有86.3万，但在第二天马上呈现出爆发式的增长，上线48小时内其独立玩家数（IP）就突破了241万，流量（PV）也达到了1026万。“围住神经猫”在短短3天时间内，访问量就达到了惊人的上亿次，同时也让H5游戏再度火起来，这不得不说是一次移动互联网时代的传播奇迹。
在“围住神经猫”取得成功后，其开发团队还联合腾讯在“神经猫”这个IP上大做文章，推出了“神经猫的日常”，其中包含了“围住神经猫”“暴打神经猫”“神经猫广场舞”等多款小游戏。
学习提示
H5可以说是目前覆盖领域非常广泛的传播媒介，它跨平台的优势性可以显著地降低开发与运营成本。
本章主要介绍H5设计的常用工具，包括基于互联网的H5开发工具、基于应用软件的H5设计工具以及选择H5的工具组合形式等内容。
随着移动互联网的高速发展，手机功能越来越强大，人们对移动端产品的表现能力也有了更高的要求，因此我们需要设计体验效果更好的H5页面。本节主要从设计方法上分析H5移动设计的3种途径，如图2-1所示。
专家指点
UED的全称为User Experience Design，即“用户体验设计”，是以用户为中心的一种设计手段，是以用户需求为目标而进行的设计。
UED团队通常包括以下职位。
• 交互设计师（Interaction Designer）：指参与完成对产品与用户之间的互动机制进行分析、预测、定义、规划、描述和探索过程的设计师，即定义人造物的行为方式的工作者。
• 视觉设计师（Vision Designer）：通过视觉形象将品牌理念和营销目的传达给消费者，起着连通企业、商品、消费者桥梁的作用。
• 用户体验设计师（User Experience Design）：用户体验设计的从业者。
• 用户界面设计师（User Interface Design）：指对H5的人机交互、操作逻辑、界面美观进行整体设计的从业者。
• 前端开发工程师（Web Developer）：负责利用（X）HTML、CSS、JavaScript以及Flash等各种Web技术进行客户端产品开发的从业者。
H5已逐渐成为目前涵盖领域十分广泛的一种传播媒介，正因为如此，所涉及的设计工具种类也十分庞杂。目前，多数H5设计师都是从其他相关行业跨入这个领域的，同时专业的H5生成平台存在同质化现象，因此即便是有设计功底的设计师，也需要根据自身的优势来选择工具进行学习，从而制作出想要的效果。现阶段，H5设计领域还没有统一的设计工具，设计师需要搭配多种软件来设计制作，本节将列举一些常用的图形图像处理和影音开发工具。
Photoshop，全称“Adobe Photoshop”，简称“PS”，它在Adobe的产品线里是个极为强大的综合应用软件，对于每个设计师来说都不会陌生。图2-2所示为Adobe Photoshop CC 2018的启动页面。
图2-3所示为使用PS制作的静态展示类H5页面效果。
伴随着H5的兴起，设计师们逐渐发现在H5领域中，PS可以称为“万能工具”。以往PS常常用于矢量图像的绘制及图像处理，而不能对声音或视频之类文件进行编辑处理。但当Photoshop CC发布之后，它新增的“时间轴”功能，使得PS不但可以用于绘制矢量图像，还能够对视频和声音文件进行编辑，添加一定难度的动效和简单的特效，而这些基本操作恰好可以满足H5设计的常规需求。
Illustrator，全称“Adobe Illustrator”，简称“AI”，是专业的矢量图形绘制软件。与Photoshop不同的是，Illustrator作为专业的矢量绘制软件，在H5的设计上便于线框图的绘制，避免了Photoshop多图层来回操作的不便，同时，使用AI软件能够让H5页面字体的设计展现得更好。图2-4所示为Adobe Illustrator CC 2018的启动页面。
图2-5所示为采用矢量图形设计的H5页面。
Sketch是一款轻量化、易操作的矢量图形设计工具，它可以让UI设计更加简单、高效。Sketch的设计基于层次的绘图空间和无限的规模，其独特的颜色、完美精细的运算可以让图片变得更加精细，是一款很好的H5设计辅助工具，如图2-6所示。
After Effects，全称“Adobe After Effects”，简称“AE”，是Adobe公司推出的一款图形视频处理软件。AE可以创建各种引人注目的动态图形，制作出震撼的视觉效果，为H5页面添加令人耳目一新的效果，属于视频后期处理软件。图2-7所示为Adobe After Effects CC 2018的启动页面。
“Cinema 4D”指“4D电影”，但软件本身是3D表现，拥有着极高的运算速度和强大的渲染插件，是由德国Maxon Computer公司开发的，软件简称为“C4D”。图2-8所示为使用Cinema 4D制作的渲染图。
专家指点
AE和C4D是包装设计行业中常用搭配，由于H5的跨平台特性，设计师可以结合这些特效软件制作出炫酷的效果，然后植入H5设计中。这两个工具都属于特殊H5设计所需要使用的辅助软件，建议选择性学习。
Final Cut Pro是苹果公司开发的一款专业视频非线性编辑软件，包含了进行后期制作所需的一切功能，如图2-9所示。如果你是苹果系统的用户，推荐使用Final Cut Pro，因为学习成本相对较低。
Garage Band是一款由苹果公司编写的数码音乐创作软件，是Mac的应用程序套装iLife的一部分，如图2-10所示。即使是业余的爱好者，也能够使用Garage Band轻松制作出各种音乐效果。对于H5中的背景音频设计来说，这款软件非常实用。
在H5作品中，通常会采用大量的动态效果来吸引用户的注意力，本节将介绍一些非常简单实用的演示动画制作工具。
Keynote/PowerPoint（PPT）是非常简单的原型演示工具。Keynote是2003年由苹果公司推出的适用于Mac操作系统的一款幻灯片演示应用软件。与PowerPoint（PPT）不同的是，这款软件能够使页面和设计更加图形化，因其操作简单、功能繁多，很多BAT知名企业都在使用，如图2-11所示。苹果公司自身的WWDC开发者大会上都是采用的Keynote进行的效果演示。但这款软件只有Mac系统可以使用，如果你是PC端用户也可以使用PowerPoint（PPT）来做辅助的效果演示。
专家指点
PowerPoint，全称“Microsoft Office PowerPoint”，简称“PPT”，是由微软公司开发的一款演示文稿软件，而使用PPT做出来的东西就叫作演示文稿，俗称的“幻灯片”就是演示文稿中的页面。演示文稿可以在投影仪或计算机上进行演示，也可以打印制作成胶片，应用到更广泛的领域中。
HYPE是一款适用于Mac操作系统的H5创作工具，主打H5设计的移动端软件，擅长在网页上做出悦目的动画效果。它不仅包含了动效功能，还加入了时间轴和动力学模块等高级命令，同时可以将H5页面直接生成代码，并且可以进行自主响应式设计。图2-12所示为HYPE软件的应用图标。
通常，定制化的H5设计工作都是由前端工程师来完成的，当然设计师也需要适当了解一些工具和技术，以便更好地配合前端工程师，从而获得理想的设计效果。
FWA全称为Favourite Website Awards，是一个互动多媒体网站收录平台，目的是展示世界上优秀、前沿的网络媒体艺术设计作品，如图2-13所示。设计者可以通过FWA这个平台，了解H5可以实现的动态效果。
W3school是一个专业的编程入门学习及技术文档查询网站，提供包括HTML、CSS、Javascript、jQuery、C、PHP、Java、Python、Sql及Mysql等编程语言和开源技术的在线教程及使用手册，如图2-14所示。
例如，“你，找到方向了么？”是由腾讯游戏为宣传旗下“首款战争策略手游”做的线上推广页面，通过测试问答的互动方式，来吸引用户参与，如图2-15所示。这个H5作品采用了大量的H5代码技术，具体包括：EaselJS+Pr eloadJS+TweenJS+Velocit yJS+Zepto。
因此，对于H5设计者来说，你一定要知道它们的基本功能和用法，并将其运用到自己的H5作品中，制作出更加精彩的H5页面。例如，京东推出的“时尚生活体验馆”这个H5页面通过8个家居场景来展示时尚生活体验馆的种种可能，每个场景的主人公动画都是使用CSS3代码来实现的，如图2-16所示。CSS3是CSS（层叠样式表）技术的升级版本，CSS3的“动画”（animation）属性能够实现更复杂的样式变化及交互效果，不需要使用任何Flash或JavaScript脚本代码。
在移动互联网时代，H5越来越被看重，与此同时，各种H5制作平台和工具也腾空出世，为H5营销人员提供了大量的创作工具。对于H5营销人员来说，需要了解这些平台的特征，才能更好地应用，从而更快、更好地创作出更多优秀的H5营销方案，下面介绍几种常用的互联网模板类H5开发平台。
人人秀可以帮助用户制作各种H5页面、微场景、创意海报、微杂志、微信邀请函、场景应用、微信贺卡，即使是不懂设计、不会编程的新手，也可以快速入门，如图2-17所示。
人人秀的主要功能和特点如图2-18所示。
人人秀的“产品中心”中提供了100多种营销插件，如微信红包、大转盘抽奖、照片投票、VR全景、微信卡券、问卷调查及各种小游戏等。用户通过简单的拖曳操作，即可轻松调用这些插件，实现更好的营销功能，如图2-19所示。
在“模板商店”页面中，人人秀按照H5的用途、行业、功能和活动费用进行分类，导航功能全面、清晰，并且支持自由搜索，如图2-20所示。同时，针对新用户和企业会员等不同层次的用户，人人秀还提供了相关的福利，极大地提高了吸引力。
在“作品秀”页面中，展示了很多互联网、影视、银行、航空及教育等不同行业的优秀企业的H5营销方案，如华为、腾讯、百度、阿里巴巴、口碑网、爱奇艺、网易等，帮助大家更好地了解和学习这些企业的H5营销特色。
另外，人人秀的“欢乐现场”版块为用户带来了一站式的现场活动营销服务，主要服务内容如图2-21所示。“欢乐现场”适用于年会、会议、酒吧、婚礼、商业活动、培训、赛事、校园等不同的场景和地点，为企业带来线上、线下的全方位营销。
在人人秀平台成功发布作品后，会自动跳转至分享推广界面，同时会出现作品的得分，人人秀系统将会从作品丰富度、功能丰富度、作品安全性、浏览流畅度及版权完整度等多个方面对作品进行一个综合测评，助你更好地修改和完善作品。
易企秀提供海量的H5场景模板，可以帮助用户轻松制作H5作品，如图2-22所示。
易企秀的主要优势和特点如图2-23所示。
下面对易企秀中的一些特殊功能进行介绍。
（1）自定义加载Logo功能：用户可以将载入H5场景时的易企秀Logo，替换为企业品牌Logo或自定义图片，这有助于树立企业形象，彰显品牌实力。
（2）独立域名：主要包括自定义场景链接、优化爬虫结果、占领搜索引擎高地。
（3）去尾页标识：去除场景默认尾页提示，加强传播内容的整体性，从而更好地突出品牌概念。
（4）场景保障服务：易企秀具有独立场景服务器及CND加速服务，让H5场景访问更迅速、更稳定，全面保障传播路径。
（5）场景审核服务：双重审核机制辅助规避传播平台内容限制风险，并且具有场景前置审核、审核关闭短信提醒、驳回加急审核等功能。
（6）VIP专属私人服务：包括专享客服热线及会员培训等，高效解决H5制作及其他使用问题。
易企秀的“免费模板”页面具有完善的导航功能和搜索功能，同时模板的热点性非常强，使用体验非常好。其中，值得一提的是，易企秀还加入了“营销日历”搜索功能，可以帮助企业快速锁定近期的H5营销活动，不错过任何热点，如图2-24所示。除了H5模板外，易企秀还提供了较为完整的移动互联网广告投放平台，包括腾讯联盟广告、公众号广告、朋友圈广告、App广告等。
另外，易企秀还借鉴了自媒体的运营模式，加入“秀场”“秀客”等平台，帮助优秀的H5设计师吸引粉丝，获得企业关注。“秀客”是指那些在“秀场”平台上展示高端H5场景的设计师及各种广告、代理等服务商，他们可以解决企业的广告场景定制服务需求，如图2-25所示。
“秀客”的H5作品多为原创，而且其中必须加入一类定制场景，如企业广告、招聘信息、企业品牌故事、产品推广信息或易企秀官方活动等，如图2-25所示。
兔展是一个专注于H5技术实现的专业制作平台，包括微场景、微页、微杂志、微信邀请函等，帮助用户制作炫酷的移动展示页，如图2-26所示。
兔展的主要功能和特色如下。
（1）热门模版：一分钟快速制作H5。
• 精品企业邀请函。
• 热门节日活动必备。
• 品牌推广精品。
• 活动报名招聘精品。
（2）海量资深设计：23万资深设计师，提供高质量、高效益、快捷又方便的平面设计服务。
• 公司化运营，团队化协作，专业级定制。
• 提供快捷、高效的移动端自营销场景订制服务。
（3）全渠道精准传播：释放营销潜力，将活动发布到论坛、QQ群、微信群、线下实体店及其他渠道，无缝连接线上、线下，并统计各个渠道的数据，帮助企业精准筛选潜在用户。
（4）营销有数：以数据为依据的营销。
• 传播评价：自传播水平、页面水平、投放渠道。
• 传播数据指标：浏览量、访客量、分享率。
（5）数字营销服务：高效连接用户。
• H5专业定制：打破常规的创意、引发共鸣的文案和场景、个性化的视觉风格设计。
• 品牌曝光渠道：打通微信媒介、锁定精准人群进行投放、实现“增粉引流”。
• 数字资产沉淀：分析传播分享的效果，从中筛选有效的渠道，快速刻画用户画像。
（6）企业管理服务：全面提高管理效率。对企业的产品、用户群体及营销场景进行全面分析，然后整合和管理营销内容和渠道，加强企业与用户的关系，并降低营销成本。
兔展的H5模板主要包括推荐模板、翻页、长页、短视频、企业专享和企业专区等类型，聚集了各种H5的常见应用场景，如企业招聘、企业宣传、会议邀请、产品介绍、报名培训、品牌推广、节日推广、数据报告、事件祝福、新品发布及周年庆等，如图2-27所示。
其中，“长页”模板可以实现“一页到底”的便捷移动方式，这里主要针对一些H5长页面，通常以静态展示为主，如图2-28所示。在“企业专区”模块，企业用户可以购买相应套餐，享受更多的额外企业服务，包括使用各种精选的限时免费模板，共享企业模板和素材，以及利用大数据进行传播与分析。
MAKA是一个缔造“简单、强大”的H5在线创作平台，是一款别致的互动营销工具，目前已经有超过1000万全球用户注册，每月有超过5亿人次通过MAKA阅读新形式的图文交互信息，如图2-29所示。
MAKA的主要特色在于提供了海量的视频模板，类型包含了各行各业的各种应用场景，可以满足用户的多方位需求，如图2-30所示。用户只需在MAKA的模板商城，根据需求筛选模板，将鼠标指针移动至对应的模版封面上，单击“马上使用”按钮即可应用。模板具有完整的行业结构逻辑，只需进行小小的改动就可以立刻传播。
“初页”是北京七厘米科技有限公司开发的一款基于H5音乐照片的情感、面向个人用户的H5内容发布工具与社区软件，如图2-31所示。
“初页”的主要特色在于，即使用户没有专业的技术，也能通过简单几个步骤，制作出精美的海报。图2-32所示为“初页”手机版制作工具。“初页”是将H5页面拆分成模板、图片、文字和特效4个方面，用户可以自由选择模板，将手机中的图片随意加入，并且可以修改文字内容，使之与图片内容相符。
互联网功能类H5开发平台在进行创意设计时，灵活度要更高一些，不仅可以套用模板，还可以针对各种元素进行开发设计，使其满足自己的需求。本节主要介绍一些典型的功能类H5开发平台，包括互动大师（iH5）和意派360。
iH5的前身为VXPLO互动大师，是一套完全自主研发的H5设计工具，用户可以在线编辑网页交互内容，作品支持各种移动端设备和主流浏览器。作为一款基于云端的网页H5交互设计工具，iH5的优势在于能使用户在无须编码的情况下，通过可视化的操作，对H5页面进行在线编辑。iH5的主页如图2-33所示。
iH5的主要优势和特点如图2-34所示。
专家指点
iH5看上去像一款制作前端H5的SaaS（软件级服务）产品，但本质上iH5几乎集成了“前后端”所需的所有功能，用户只需要学习iH5的制作流程就可以完成各种场景、游戏、App的搭建，不需要有任何代码基础。
iH5提供了类别、场景和效果3个基本的导航功能，同时它的每个导航功能菜单都比较丰富，类别包括全部、官方模板、设计师模板、新手专属、免费；场景包括邀请函、企业招聘、电商、相册、节日祝福等多种类型，如图2-35所示。
iH5是一款无须下载的H5设计开发工具，采用了物理引擎、数据库、直播流、SVG、WebApp、多屏互动等技术，为用户带来一站式的Web App平台解决方案。iH5还被用于其他领域，如图2-36所示。
iH5的制作页面与Photoshop相类似，如图2-37所示。在iH5的制作页面的最右边是对象树，它就是Photoshop软件中的图层。在对象树中，包括图片、视频、序列帧等素材元素，页面、对象组等容器元素，以及时间轴、数据库等功能性元素，这些都是构成H5的基本元素。这些对象以树形的结构层层组织在一起，就构成了一个H5的骨架。当然，要搭建这个骨架，我们需要使用到最左边的工具栏，其位置也与Photoshop类似，它可以用来创建H5中的各种对象，像在Photoshop软件中做图一样来制作H5页面。
意派Epub360具有非常专业的H5设计功能，可以满足企业的个性化设计需求，如图2-38所示。
意派Epub360的主要功能和特点如图2-39所示。
Epub360不但具有多花样的动画设定与触发器设定功能，同时还可以调用微信高级接口，不需要进行编程，即可轻松设计出具有交互功能的H5应用场景，其核心交互组件如表2-1所示。
图2-40所示为意派Epub360的“模板”页面，包括“创意形式”和“场景”两大类型，提供了邀请函、招聘、品牌推广、产品宣传、婚礼庆典、活动营销、节日主题、数据报告、微杂志、微官网和年会等不同应用场景的H5模板。
另外，意派Epub360还将一些比较常用的H5应用场景，如答题测试、我画你猜游戏、签到抽奖、手绘大赛、转盘抽奖及图片投票等，进行数据逻辑封装，用户只需要进行简单的逻辑配置，即可轻松使用专业级的H5数据应用，如图2-41所示。这对于那些完全不懂H5设计的人来说，绝对是一大福音。
在H5的设计过程中，根据设计要求，设计师选取针对性强且自身能够掌握的工具进行搭配使用，可以大大提高工作效率，完成所需要的效果。接下来详细介绍如何正确选择H5工具的组合形式。
如果设计要求非常复杂，除了简单的画面及元素之外，还要添加视频、特效和音效时，可以采用Photoshop＋Illustrator＋Final Cut Pro/Garage Band/Premiere＋Keynote/PowerPoint（PPT）的组合搭配形式。
Photoshop和Illustrator负责完成画面和字体的设计；Final Cut Pro/Garage Band/Premiere负责完成视频、声音的剪辑；Keynote/PowerPoint（PPT）负责完成演示的制作，设计师可以通过演示与前端工程师进行沟通。
在网站类H5的内容表现要求简单时，可以采用Photoshop＋H5模板工具网站的组合搭配形式。Photoshop负责完成设计画面，并存成PNG格式图片，然后上传到H5模板工具网站，利用网站来生成H5作品。
在内容表现要求复杂时，可以采用Photoshop＋Illustrator＋Final Cut Pro＋H5模板工具网站的组合搭配形式。Photoshop＋Illustrator负责设计出所需的分层PNG图，Final Cut Pro负责制作所需的声音和音频，最后通过H5模板工具网站来生成最终的效果。
专家指点
随着时代的进步，智能手机已经成为大众普及的通信工具，而H5的主要载体便是智能手机。在智能手机端浏览H5页面已经成为一种需求，同时，利用手机制作H5页面也已成为H5发展的一个趋势，因此，众多H5制作平台纷纷推出手机端制作H5的工具，例如，人人秀推出的小程序制作工具便能够很好地满足在手机端制作H5的需求。
随着H5的发展，用户对页面的要求越来越高，要设计一个优秀的H5作品，除了需要一些常用的设计工具以外，辅助工具也是必不可少的。下面介绍几种设计H5时常用的辅助工具。
作为一个便携性好、容量小的H5页面，添加的视频、音效文件大小也受到了限制，过大的视频、音效文件会导致整个页面数据过于庞大，加载缓慢，因此视频、音频的压缩工具就对整个页面的效果制作起到了很大的辅助作用。
通常我们会使用PC端的格式工厂、Mac系统的Video Converter和Garage Band（随身录音室）等小工具压缩处理音、视频文件，并将其植入到H5作品中。图2-42所示为格式工厂的工作页面。格式工厂不仅仅能压缩音、视频文件，还可以对不同页面使用的音、视频文件进行相应的格式转换，方便不同页面加载音、视频文件。
大多数简单的H5效果都是用Adobe Photoshop CC制作出来的，但因为PC端软件的限制及不便携性，从而演化出了在手机端能够方便浏览Photoshop设计效果的移动软件——Ps Play。该软件在预览设计效果的同时，可以同步调试并截图保存到手机端，还可以直接运用微信和Email等工具进行分享，如图2-43所示。
图片文件的大小与声音、视频文件的大小存在一样的问题，那就是过大的文件需要进行压缩才能植入H5页面。TinyPNG是一个常用的图片压缩网站，此外，还有一款腾讯出品的压缩工具平台——智图，也非常好用，如图2-44所示。
H5已经成为涵盖领域非常广泛的一种传播媒介，大多数的H5页面也成了广告推广的一个平台。那么，在做一个广告推广页面时，主页的企业集团二维码，是必不可少的。很多互联网公司正是发现了这一点，从而推出了非常多的二维码生成工具，比较常用的工具有微微和草料等，但有一部分高级功能是需要付费才能使用的。
图2-45所示为草料二维码生成器的网站页面。
