不用费劲找H5模板，手把手教你制作精美H5！

最近几年H5迅速风靡，并且快速进入了大众的视野，提供给我们有趣的页面和内容！H5逐渐占据了自己的营销地位音乐网站后台管理模板，越来越多的品牌开始制作H5。

《睡姿大比拼》

在各式各样的活动中，H5绝对是常被选择的一员，每到节假日等活动高峰期，朋友圈被刷屏时有发生，高流量和高传播度使得H5在国内的地位逐渐上升。经常会有一些线下店铺需要用H5来推广形象。面对这样的需求，我们应该如何制作？接下来，跟随小艺一起来看看。

从零开始学做一支H5

01

H5的制作与分工

很多人疑惑H5 到底是怎么做出来的？为什么有些H5 看起来非常酷炫，而有一些却像翻页PPT 一样简单？答案是这与你选择制作的方式有关。

H5 的制作方式多样，大体上可分为两种：工具制作和代码制作。

工具制作的H5 简单易上手，工期短，制作成本也相对较低。对于某些小白工具，甚至可以在十分钟内就玩懂。你若对交互、玩法要求较高，想做带感的游戏或精美的视频H5，工具制作的H5 就不能满足你了，这需要通过前端写代码来实现。

下面就来展开讲讲用工具制作H5。

02

工具制作

市场上的H5 制作工具繁多，进入2018 年以来，已形成低阶、中阶和高阶3 个梯队。可以根据工期，时间和金钱预算以及成品质量等进行选择。

低阶H5 制作工具

（1）初页

初页是目前最简单的“类PPT 式”H5 制作工具，无技术基础的普通用户可在10 分钟内就通晓其制作方法，并可在App 中完成制作。它的交互方式通常是滑动翻页，有时会适当加入点击、滑动、长按等操作。其最大的优势是可以在网页中直接调试和修改。

如果想做生日贺卡、婚礼邀请函、生活图志之类的简单H5 就可以选择它。在初页中制作H5，可以选择手动或自动排版。手动模式需要用户上传1~20 张图片，可挑选模板或自由组合图片。点击页面右上角的“换音乐”或“换动画”按钮，即可更换适合场景的配乐与动效。图文排版完成后，可点击“下一步”按钮跳转到发布页面，设置标题。H5 发布后，可在“我”的主页中看到并管理H5。

自动模式需要先给H5 确定一个标题，随后挑选并上传1~50 张图片，确定封面图片和文字内容后，初页会对H5 进行排版设计，并添加动效和背景音乐。如果不满意，则可以手动更换模板。

（2）易企秀

易企秀是公众认知度较高的H5 制作工具。很多人以为易企秀就是H5，其实不然，它只是制作H5 众多软件中的一个，并且门槛较低。它主打企业办公和日常运维的H5 制作，提供数据统计功能，App 及PC 端皆可操作。

易企秀适用于企业介绍、招聘启事、产品宣传、预约报名等。在使用易企秀创建画板时，可以选择“模板创建”或“空白创建”。套用模板制作相对简单，选择“模板创建”即可进入易企秀模板库。

在画板页面中，包含文本、图片、背景等基础功能，除了自由创作，还可以套用单页模板。

易企秀提供视频、链接、图集等常用组件，以及画中画、画板、投票等高级组件，非常适合在营销活动中进行传播。

（3）兔展

兔展除了具备初页、易企秀的所有功能，还增添了小程序生成功能。与此同时，其视频和长图文功能与同级别工具相比，用户体验感较好。2018 年，小程序成为传播和用户沉淀的重要阵地，对制作H5、小程序感兴趣的用户可尝试这款产品。

兔展的H5 制作页面与易企秀左右相反，样式模板隐藏在各个栏目下，基础画布看起来更简洁一些。

点击右侧的“添加图片背景”字样，可选择图案和文字特效模板。图片素材库中的动图较多，很多都需要付费使用，免费素材较少音乐网站后台管理模板，设计比较简单。

文字、形状素材可免费使用，互动组件下还有“生成海报”功能，用户可对海报进行设计。

中阶H5 制作工具

（1）凡科

凡科除了具有低阶制作工具的功能，还可以实现伪装朋友圈、接电话、发红包等功能。但别看功能升级了，操作依旧很简单，套用模板就可以实现。凡科的另一大优势是功能性网站搭建，如果你有设计PC 网站、手机网站的需求，那么可以考虑试试这款产品。

凡科互动提供了很多素材模板，并且功能性较强，即使是使用免费版的用户，也可以使用很多素材来制作H5。

凡科的H5 制作页面呈左右非对称分布，工具栏与画板分布比例不可调节。在页面右侧可以对文字、特效进行设置，在左侧工具栏中可看到每页添加的功能，如图片生成、活动说明、分享效果等。

用户可对画板进行自由编辑，添加微信聊天、手机来电显示等场景化背景。

（2）720 云

720 云主打全景H5 制作，在其网站上可以找到大量好看的全景素材图片，算是H5 制作工具中，做全景H5 最专业的门户。用户可以在平台上提前购买全景图片，上传到制作页面进行编辑。

在编辑页面中，工具栏在画面最左侧，其中包含视角、沙盘、遮罩、足迹等功能，方便用户制作全景H5。

高阶H5 制作工具

iH5

iH5 适用于专职设计人员，学习门槛较高，但可以实现相对多样的高级效果，功能涵盖品牌展示，动画、游戏制作，建站等，同时也支持红包、支付、录音、拍照上传、获取用户个人信息等微信功能，缺点是没有制图和图标功能。

iH5 相对前几种工具，更加专业。不过即使用户是初学者也不用担心，iH5 在进入页面时，会以弹窗形式向用户提供素材和特效模板。用户可以在模板基础上进行二次创作，添加文字、图片等信息。

除此之外，iH5 也提供视频教学功能，点击“摄像机”按钮，即可打开相应的视频观看学习。视频播放时间大多在10 分钟以内，按照H5 功能可分为数据、变量、动画等课程。

iH5 的界面与Photoshop 的界面类似，中间为画布，左侧为工具栏，右侧显示制作步骤。相比其他几种制作工具，iH5 的自由度更高。

iH5 作为一款高阶制作工具，制作难度体现在组件设计上。除了图文、形状等基础组件，iH5 还有容器、动画、数据、素材等组件。用户可任意搭配，设计自己的H5。

如果想用iH5 制作一个简单的画面，可以先建立一个画布。首先，将准备好的素材拖进白色画布，上传到后台。

接下来，单击工具栏右上角的“文字”按钮，在编辑框内输入文字。

调整文字颜色、大小和位置，一个简单的页面就做好了。