H5页面制作入门指南

H5是最近两年非常火的一个东西,什么是H5呢?通俗的说就是那些经常刷爆微信朋友圈的手机网页了。
 
给大家举个例子,长按识别二维码就可以查看。相信大家在这之前都或多或少有看到过这样的页面。
 
无论是企业宣传,制作简历、邀请函,还是制作纪念册、表白,H5有着其非常广泛的应用。

那这样的页面是怎么做出来的呢?其实普通人也可以轻松上手,今天就来和大家分享一些H5制作的入门技巧,教大家如何做出酷炫的酷炫的H5页面。
 
-------------------------------------------
 先看以下目录:

工欲善其事必先利其器,不管是专业的设计师还是小白,制作H5页面都会不可避免的用到一些在线制作工具。
 
然而目前的H5在线制作工具层出不穷,不说成百上千也有几十种之多,在这里为大家推荐几款基础和实用的。
 
-------------------------------------------
 
MAKA(maka.im)
 
要说小白用哪一款H5制作工具比较好,我觉得首推的就是MAKA了。

为什么这么说呢?首先MAKA的操作页面非常简单,乍一看和PPT还有几分相像。添加文字图片都非常方便,轻松上手。
其次MAKA中有大量做好的免费模板,不需要大家设计,就可以通过模板来进行制作。而且免费模板的质量也都非常的高,放张截图你们感受一下。
不仅有模板,内置的素材也是一应俱全。高清图片、矢量图标,甚至连PPT中常用的数据图表都可以直接套用。
除此之外还有很多好玩的玩法,比如投票、倒计时、呼叫拨号等等的交互效果都可以一键实现,非常傻瓜,大家可以自己去尝试一下。

图片说明:










最后,它还支持PSD格式的文件一键导入,大家可以用PS来制作页面后直接导入到MAKA,生成H5页面。


iH5(ih5.cn)
 
MAKA可以说是入门级的H5制作工具,秉承着少而精的原则,我觉得MAKA也是最适合大家使用的。
 
那么除此之外呢也有很多专业设计师会用到的H5制作工具,支持制作各种动效和交互效果,而我要给大家推荐的是这款叫ih5的在线工具。


看页面就可以发现有一种PS的既视感,所以非常专业,而我推荐给大家的原因是里面准备了很多好的H5教程,从新手到进阶一应俱全。



然而其实使用这些工具也存在一些问题,比如因为都是在网页上制作,会出现卡顿。另外工具中内置的字体也不是很多,有时候没有办法达到我们的效果。
 
这时候,我们完全可以利用PPT轻松的制作出H5页面。



首先我们需要在设计选项卡幻灯片大小中修改页面尺寸,页面尺寸调整为全屏显示(16:10),然后页面方向设置纵向。


这样以后一个H5页面的样子就出现在我们眼前了,我们要做的就是在这个页面上添加所需的元素。



其实这样一个页面就完成了,我们之后要做的是把页面搬运到H5在线生成工具中,这里以MAKA为例。
 
方法也很简单,在左上角的文件选项卡中选择另存为,属性勾选JPG格式,点击保存。

然后将保存好的图片上传到MAKA中,一个页面就轻松的完成了。当然每个平台所需的PPT页面尺寸不同,大家可以生成之后在网站上进行进一步的调整。

这个方法适合做一些简单的静态页面,如果大家想为页面中的元素比如说刚刚图片中的文字加一些动画效果,那么处理就稍微麻烦一些。
 
我们需要在PPT中,将元素逐个保存为图片,然后导入MAKA,需要注意的是保存时要选择保存为PNG格式,这样元素背景才是透明的。
文字处理也是一样,处理完后按PPT中的版式原封不动搬运到MAKA,然后逐个添加动画效果就可以了。


学会PPT,走遍天下都不怕。真的是这样,用最基础的PPT技巧完全可以制作一个酷炫的H5页面,让你横行整个公司。
 
当然虽然和PPT制作类似,但有几个注意事项还是要在这里提醒一下大家。
 
首先是每个页面上的元素不宜过多,这个和PPT道理一样,要做到让人一划就过却可以轻松地记住页面上的信息。

 
第二,页面底部要适当留空,因为每个页面都有一个滑动的效果,虽然很常用但也会有很多人不知道。所以大家要注意留出这个空间,让观众可以看得清楚。

除此之外也有很多可以一键实现PPT到H5页面转换的工具,我给大家推荐其中的一个,PPJ.JO,上传PPT后可以之间生成H5非常方便。
 
PPT中大部分动画效果都可以保留下来。但对于有的页面转化效果不是特别好。类似的H5制作平台还有很多,比如Epub360、易企秀等等。
weinxin
关注微信取下载密码
微信公众号回复"",即可获得下载密码 立即下载
  • 免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除 ,谢谢您合作!