写给大家看的H5面制作入门指引

1、写给大家看的 H5 页面制作入门指南。H5 是最近两年非常火的一个东西，什么是H5 呢？通俗的说就是那些经常刷爆微信朋友圈的手机网页了。 给大家举个例子，长按识别二维码就可以查看。相信大家在 这之前都或多或少有看到过这样的页面。无论是企业宣传， 制作简历、邀请函，还是制作纪念册、表白， H5 有着其非常 广泛的应用。那这样的页面是怎么做出来的呢？其实普通人 也可以轻松上手，今天三顿就来和大家分享一些H5 制作的入门技巧，教大家如何做出酷炫的酷炫的H5 页面。国际惯例放一个机智的目录：工欲善其事必先利其器，不管 是专业的设计师还是小白，制作 H5 页面都会不可避免的用 到一些在线制作工具。然而目

2、前的 H5 在线制作工具层出不穷，不说成百上千也有 几十种之多，三顿在这里为大家推荐几款基础和实用的。MAKA( maka.im )要说小白用哪一款 H5 制作工具比较好，我觉得首推的就是MAKATo为什么这么说呢？首先 MAKA的操作页面非常简单， 乍一看和PPT还有几分相像。添加文字图片都非常方便，轻 松上手。其次 MAKA中有大量做好的免费模板，不需要大家设计，就可以通过模板来进行制作。而且免费模板的质量也 都非常的高，放张截图你们感受一下。不仅有模板，内置的 素材也是一应俱全。高清图片、矢量图标，甚至连PPT中常用的数据图表都可以直接套用。除此之外还有很多好玩的玩 法，比如投票、倒计时

3、、呼叫拨号等等的交互效果都可以一 键实现，非常傻瓜，大家可以自己去尝试一下。最后，它还 支持PSD格式的文件一键导入，大家可以用PS来制作页面后直接导入到 MAKA生成H5页面。iH5 （ ）MAKA可以说是入门级的 H5制作工具，秉承着少而精的原则， 我觉得MAK也是最适合大家使用的。那么除此之外呢也有很多专业设计师会用到的H5制作工具，支持制作各种动效和交互效果，而我要给大家推荐的是这款 叫ih5的在线工具。看页面就可以发现有一种PS的既视感，所以非常专业，而我推荐给大家的原因是里面准备了很多好 的H5教程，从新手到进阶一应俱全。同时它也准备了很多 素材和案例供大家学习，所以如果真的想好好

4、学一下H5的话建议大家可以尝试这个平台。 H 5工具我只推荐这两款， 他 们之间好比就是会声会影和 AE的关系，前者简单易学后者 高端专业却内置了很多教程，方便大家学习。然而其实使用 这些工具也存在一些问题，比如因为都是在网页上制作，会 出现卡顿。另外工具中内置的字体也不是很多，有时候没有 办法达到我们的效果。那么作为一个“坚信 PPT是万能的”的三顿，我们完全可以 利用PPT轻松的制作出H5页面。之前三顿有写过一篇文章， 教大家用PPT中修改页面尺寸的方法制作微信封面图，二维 码页等等。其实一样的方法也可以用来做 H5。接下来就为大家送上完整的 PPT制作H5教程。首先我们需要在设计选项卡幻

5、灯片大小中修改页面尺寸，页 面尺寸调整为全屏显示（ 16:10 ），然后页面方向设置纵向。这样以后一个H5页面的样子就出现在我们眼前了，我们要 做的就是在这个页面上添加所需的元素。在这里做一个举 例，在页面上添加简单的元素。 其实这样一个页面就完成了， 我们之后要做的是把页面搬运到H5在线生成工具中，这里以MAK为例。方法也很简单，在左上角的文件选项卡中选择另存为，属性勾选JPG格式，点击保存。然后将保存好的图片上传到 MAKA 中，一个页面就轻松的完成了。当然每个平台所需的PPT页面尺寸不同，大家可以生成之后在网站上进行进一步的调 整。这个方法适合做一些简单的静态页面，如果大家想为页 面中的

6、元素比如说刚刚图片中的文字加一些动画效果，那么 处理就稍微麻烦一些。我们需要在PPT中，将元素逐个保存为图片， 然后导入MAKA 需要注意的是保存时要选择保存为PNG格式，这样元素背景才是透明的。文字处理也是一样，处理完后按PPT中的版式原封不动搬运到 MAKA然后逐个添加动画效果就可以了。学会PPT走遍天下都不怕。真的是这样，用最基础的PPT技巧完全可以制作一个酷炫的 H5页面，让你横行整个公司。 当然虽然和PPT制作类似，但有几个注意事项还是要在这里 提醒一下大家。首先是每个页面上的元素不宜过多，这个和PPT道理一样，要做到让人一划就过却可以轻松地记住页面上的信息。第 二，页面底部要适当留

7、空，因为每个页面都有一个滑动的效 果，虽然很常用但也会有很多人不知道。所以大家要注意留 出这个空间，让观众可以看得清楚。除此之外也有很多可以 一键实现PPT到H5页面转换的工具，我给大家推荐其中的 一个，PPJ.JO,上传PPT后可以之间生成 H5非常方便。经 过测试，PPT中大部分动画效果都可以保留下来。但这个网 页还属于测试阶段，对于有的页面转化效果并不是特别好。 仔细看完今天的教程，我相信大家都可以轻松的做出一份还 不错的H5页面，当然这些只是最基础的技巧，做出专业水 准的H5还需要大家去尝试和探索。 但是用这些基础的技巧去应付我们经常需要做的邀请函、简 历等等那绝对是绰绰有余了。类似的H5制作平台还有很多，比如Epub360、易企秀等等，我在这里只推荐两款是希望大H5家先尝试，也欢迎大家在下方留