2.1 H5的制作工具和工具组合形式

在H5的设计过程中，根据设计要求的类别，设计师可以选取针对性强且自身所能够掌握的工具进行组合搭配设计，以大大提高工作效率，并完成所需要的效果，达到高效、精确。接下来详细介绍如何正确选择H5的制作工具和工具组合形式。

2.1.1 开发类H5制作工具

在制作带有开发的设计案例时，根据设计要求的简易程度，我们可以采用两种不同的组合形式来搭配设计。如果设计要求常规简单，可以采用Photoshop＋Keynote/PowerPoint（PPT）的组合搭配形式。Photoshop负责用来设计画面及元素，Keynote/PowerPoint（PPT）负责用来做演示，并与前端工程师沟通。

Photoshop，全称“Adobe Photoshop”，简称“PS”，其在Adobe的产品线里是个极为强大的综合应用软件，对于每个设计师来说都不会陌生。伴随着H5的兴起，设计师们逐渐发现在H5领域中，PS可以称为“万能工具”。以往PS常常用于矢量图像的绘制以及图像处理，而对声音或视频之类的编辑处理都是不可能完成的，但当Photoshop CC发布之后，新增的“时间轴”功能使PS不但可以用于矢量图像的绘制，而且还能够对视频和声音进行编辑，添加一定难度的动效和简单的特效命令，而恰好这些基本的操作就可以满足设计H5的常规需求。如图2-1所示，为Adobe Photoshop CC启动页面。

如图2-2所示，为使用PS制作的静态展示类H5页面效果。

Keynote/PowerPoint（PPT）可以说是最简单的原型演示工具。Keynote是2003年，苹果公司推出的适用于Mac操作系统的一款演示幻灯片应用软件，与PowerPoint（PPT）不同的是，这款软件能够使页面和设计更图形化，因其操作简单，功能繁多，像BAT这样的知名企业都在用，以及苹果公司自身的WWDC开发者大会都是采用Keynote进行效果演示，如图2-3所示。但秉承着苹果一贯的风格，这款软件只有在Mac系统中可以使用，如果您是PC用户，也可以使用PowerPoint（PPT）来做辅助的效果演示。

PowerPoint，全称“Microsoft Office PowerPoint”，简称“PPT”，是由微软公司开发构造的一款演示文稿软件，而使用PPT做出来的东西就叫作演示文稿，其中俗称的“幻灯片”就是演示文稿中的每一页。演示文稿可以在投影仪或计算机上进行演示，也可以打印制作成胶片应用到更广泛的领域中。

如果设计要求非常复杂，除了简单的画面及元素，还要添加视频、特效和音效时，可以采用Photoshop＋Illustrator＋Final Cut Pro/Garage Band/Premiere＋Keynote/PowerPoint（PPT）的组合搭配形式。

Photoshop和Illustrator负责完成设计画面和字体；Final Cut Pro/Garage Band/Premiere负责完成视频、声音的剪辑；Keynote/PowerPoint（PPT）同样是用来做演示，并与前端工程师沟通。

Final Cut Pro是苹果公司所开发的一款专业视频非线性编辑软件，其包含了进行后期制作所需的一切功能。如果您是苹果系统用户，推荐使用Final Cut Pro，学习成本相对较低。

Premiere，全称“Adobe Premiere”，简称“PR”，是由Adobe公司推出的一款常用的视频编辑软件，因其较好的兼容性，使得可以与Adobe其他产品线的软件相互协作，同时易学、高效、精确的优点，也成为视频剪辑时的不二选择，也是PC用户的黄金搭档，如图2-4所示。

2.1.2 网站类H5制作工具

同样，对于网站类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制作工具。

1. 凡科互动

凡科互动是一个专注微营销新玩法的创新型企业，为企业用户提供多元、高效、易用的互联网工具，增加其曝光、提升转化，其主页如图2-5所示。

凡科互动平台的主要功能如图2-6所示。

凡科互动的主要特色是游戏互动营销，通过将企业品牌软性植入游戏中，让用户在有趣的娱乐互动中接受品牌，从而提高销售转化率。

2. 视界互动

视界互动是国内H5技术型营销的领跑者，为企业带来各种形式的H5创意设计与定制开发，为广大中小企业量身打造一站式的高性价比营销推广方案，其主页如图2-7所示。

视界互动的业务范围主要包括H5、VR、内容服务、互联网整合营销以及综合平台推广等。其中，H5营销的业务如图2-8所示。

3. 人人秀

人人秀（rrxiu.net）可以帮助用户制作各种H5页面、微场景、创意海报、微杂志、微信邀请函、场景应用、微信贺卡，即使是不懂设计、不会编程的新手，也可以快速上手，如图2-9所示。

人人秀的主要功能和特色如图2-10所示。

人人秀的“产品中心”中提供了100多种营销插件，如微信红包、大转盘抽奖、照片投票、VR全景、微信卡券、问卷调查以及各种小游戏等，用户通过简单的拖曳操作，即可轻松调用这些插件，实现更好的营销功能，如图2-11所示。

在“模板商店”页面中，人人秀按照H5的用途、行业、功能和活动费用进行分类，导航功能非常全面、清晰，而且还支持自由搜索功能，如图2-12所示。同时，针对新用户和企业会员等不同层次的用户，还提供了相关的福利，极大地增加了对用户的吸引力。

在“作品秀”页面中，列出了很多互联网、影视、银行、航空、家电以及学校等不同行业的优秀企业H5营销方案，如华为、腾讯、百度、阿里巴巴、口碑网、爱奇艺以及网易等，帮助大家更好地了解和学习这些企业的H5营销特色。

另外，人人秀的“欢乐现场”版块为用户带来了一站式的现场活动营销服务，主要服务如图2-13所示。

“欢乐现场”适用于年会、会议、酒吧、婚礼、商业活动、培训、赛事、校园等不同的场景，为企业带来线上线下的全方位营销方案。

在人人秀平台发布作品成功后，会自动跳转至分享推广界面，人人秀系统将会从作品丰富度、功能丰富度、作品安全性、浏览流畅度以及版权完整度等多个方面对你的作品进行一个综合测评，助你更好地修改和完善作品。

2.1.3 辅助类H5制作工具

随着H5的发展，页面的要求水准已越来越高，通常设计一份好的H5作品除了需要一些常用的设计工具以外，辅助工具也是必不可少的。下面介绍几种设计H5时常用的辅助工具。

1. 声音/视频压缩工具

作为一个便携性、小容量的H5页面，视频、音效的添加大小也受到了限制，过大的视频、音效会导致整个页面数据过于庞大，加载缓慢，那么声音、视频压缩工具就对整个页面的音频起到了很大的辅助作用。

通常我们会使用PC的格式工厂、Mac的Video Converter和Garage Band（随身录音室）等小工具压缩音频，并将其植入到H5作品中。如图2-14所示为格式工厂的工作页面。

【专家提醒】

格式工厂的作用范围不仅仅是能够压缩音频，还可以对不同页面使用的音频进行相对应的格式转换，方便页面加载音频。

2. 图片压缩工具

图片的大小与声音、视频的大小存在一样的问题，都是需要对过大的文件进行压缩才能植入H5页面。在H5设计过程中，最常用的图片压缩网站是：https://tinypng.com/，以及一款腾讯出品的压缩工具平台——智图（http://zhitu.isux.us/），如图2-15所示。

3. 二维码生成工具

随着H5的演变，其已经成为涵盖领域非常广泛的一种传播媒介，大多数的H5也成为广告推广的一个平台，那么作为一个广告推广页面，主页的企业集团二维码则是必不可少的。很多互联网公司正是发现了这一点，从而推出了非常多的二维码生成工具，在这里比较常用的工具有微微和草料等，但有一部分高级功能是需要收费使用的。

如图2-16所示，为草料二维码生成器的网站页面。

4. Ps Play

大多数的简单H5效果都是用Adobe Photoshop CC制作出来的，但因为PC端软件的限制及不易携带性，从而演化出了在手机端能够方便浏览Photoshop设计效果的移动软件——Ps Play。该软件还可以在预览设计效果时，同步调试并截图保存到手机端，直接运用微信和E-mail等工具进行分享，如图2-17所示。