1.3　常见的H5页面制作工具

H5页面制作通常由多个工具相互协作而成，没有专属的工具。下面对一些常用的制作工具进行介绍。

1.3.1　H5页面快速制作平台

这类制作工具指的是用户不需要有编程基础，无须编写代码，直接套用H5模板即可进行快速制作，比较适合新手使用。

1.易企秀平台

与其他在线制作平台相比，易企秀平台使用率相对高一些。该平台主要面向企业用户，平台中提供的模板比较商务化，如图1-13所示。

易企秀的一些特殊功能如下。

·更换加载界面的Logo。在易企秀中用户可将默认的加载页Logo替换为自己品牌的Logo，以加深用户印象，彰显品牌实力。

·具有独立域名。包括自定义场景链接、优化爬虫结果、占领搜索引擎高地。

·去尾页标识。易企秀平台可以去除尾页标识文字，增强内容的完整性。

·具有场景审核服务。易企秀平台具有双重审核机制，可以辅助用户规避平台内容限制相关的风险，并具有场景前置审核、审核关闭短信提醒、驳回加急审核等功能。

·具有H5定制服务。易企秀平台聚集了很多优秀的H5设计师，他们会根据企业需求进行专属定制服务。此外，如果你有能力，也可以申请加入设计师行列，以提升自身收入，如图1-14所示。

2.人人秀平台

人人秀平台的基本功能与易企秀相似，但在互动功能上有所不同，它的拉新促活工具是微信端涨粉神器。在微信上发布的营销活动，人人秀基本上能找到对应的H5模板或互动工具。还能提供实时的数据监测和数据收集功能，在第一时间抓住流量的最新动向，如图1-15所示。

人人秀平台的主要功能如下。

（1）具有百种互动营销组件。人人秀的“互动”界面中提供了100多种活动组件，包含活动抽奖、微信红包、拼团秒杀、各类小游戏等，能够满足企业日常营销活动的需求，如图1-16所示。

（2）具有精准的数据统计系统。H5活动发布后，平台会实时监测并收集相关数据，例如访客停留的时间、访客人数、转发次数、用户画像分析等，如图1-17所示。

（3）海量模板定期更新。人人秀平台提供5000多种模板，用户可以根据平台中的导航栏或搜索栏快速寻找符合自己需求的模板。此外，这些模板每周都会更新，并且每天都有近1万人发布H5作品。

3.MAKA平台

MAKA平台为H5在线设计平台。用户只需选择好模板，然后对模板内容进行更改，即可发布分享。与其他平台的区别在于，MAKA平台提供海量的视频模板，类型覆盖各行各业，可以满足用户多方位需求，如图1-18所示。

1.3.2　H5页面专业设计平台

对于没有制作基础的用户来说，使用以上平台可以快速上手制作H5。而对于有网页设计基础的用户，可以使用专业的H5制作平台来设计，例如iH5、意派Epub360等。这些平台功能全面，操作灵活度很高，可以更好地满足设计需求。

1.iH5平台

iH5（VXPLO互动大师）是一套专业的H5设计平台，无须下载，用户可在线编辑网页交互内容，作品支持各种移动设备和主流浏览器，如图1-19所示。

iH5平台提供类别、场景和效果三个基本的导航功能。其中类别包含官方模板和商业模板；场景包含活动邀请函、企业招聘、电商活动、节日贺卡、品牌展示等类型；效果包含快闪、微信/电话场景模拟、VR全景等特效，如图1-20所示。

用户登录后，单击“创建作品”按钮即可进入iH5编辑器界面，如图1-21所示。编辑器界面右侧为“对象树”面板，该功能类似于Photoshop软件中的图层功能。在此可对页面中的素材元素进行选择、隐藏、锁定、删除等操作。在编辑器左侧的属性面板中可对当前选择的元素进行编辑，例如设置颜色属性、阴影属性等。在编辑器上方的工具面板中可设置各种活动模块的添加、数据库的导出、动画的添加、二维码的加载等。

对于刚接触H5的用户来说，iH5平台还提供相关的教学视频，方便用户学习，如图1-22所示。

2.意派Epub360平台

意派Epub360是一款专业的H5设计平台，与iH5相似，它是可以满足企业的人性化设计需求，如图1-23所示。

登录后单击“免费制作”按钮，即可进行H5的创建操作。该平台的编辑界面与易企秀、人人秀等平台类似，用户可以很方便地找到各种功能按钮进行制作，如图1-24所示。

与其他设计平台相比，意派Epub360的动画控制功能、交互设定功能、社交应用功能较为突出。

（1）动画控制。平台支持SVG变形动画和SVG路径动画，支持精细化序列帧动画控制，支持关联控制。

（2）交互设定。平台提供了10多种H5触发器控制，如碰撞检测、拖放交互、关联控制等。

（3）社交应用。平台提供微信JS-SDK接口的支持，能够快速获取用户信息，结合评论、投票、助力、信息列表等进行设计。

1.3.3　H5页面辅助设计工具

想要设计出好的H5页面效果，除了会使用H5设计平台中的相关功能外，辅助工具也是必不可少的。例如，页面中图片元素的处理、视频音频元素的处理等。下面对这些常用的处理工具进行介绍。

1.Photoshop软件

说起图像处理工具，自然就会想到功能强大的Photoshop软件了，如图1-25所示。它被广泛应用于各设计领域，当然也包括H5页面设计领域。利用Photoshop软件可以对H5页面版式进行设计，包括页面背景设计、图片效果设计、页面装饰设计等。

在用Photoshop软件进行设计时，需注意页面大小的设置。因为设计的H5页面最终要导入H5制作平台中，所以用户先要了解当前H5制作平台规定的画布尺寸，然后再根据该尺寸来设置Photoshop页面的大小。图1-26所示是易企秀平台导入PSD文件的要求。

2.Illustrator软件

Illustrator是一款专业的矢量设计软件，主要用于插画设计、图标设计、文字设计等方面，这些图形在H5中也是经常用到的，如图1-27所示。当然，用户还可使用一些轻量化的矢量图设计工具，例如Pixso、Sketch等。这些小工具会自带很多矢量图形的模板，用户可在模板的基础上进行二次编辑，使其符合制作需求。

3.After Effects软件

After Effects（简称AE）是一款专业的视频特效制作软件。利用AE可创建各种酷炫的视觉效果，让H5页面更加吸睛，如图1-28所示。

4.Audition软件

Audition是一款功能强大的音频处理软件。可进行音频录制、音频编辑、声音去噪、音频转换等，让声音文件更好地融入H5内容中，如图1-29所示。除此之外，GoldWave、Audacity、Sound Forge等软件也可以很好地处理音频文件。

5.其他辅助小工具

当导入的视频或音频文件不支持播放时，可以使用“格式工厂”软件进行格式转换处理。该工具不但能够转换文件格式，还能够对当前视频或音频文件进行压缩处理，以使其符合制作需求，如图1-30所示。

“格式工厂”软件可以对音视频文件进行转换压缩，但是对图片的压缩却无能为力。这时腾讯推出的一款“智图”工具就派上了用场。该工具可以轻松地将png、jpeg、gif等格式的图片进行压缩处理，压缩速度快、压缩率高，并支持WebP格式的生成，图1-31所示是智图官网界面。