傻瓜工具让你秒学H5，亮瞎上司、讨好女票

来源：全媒派

当媒趣君第一次接触到H5交互新闻时，感觉世界观都被颠覆了。而短短不到一年时间，H5大军已经全面占领手机。从最开始的新闻专题，到火爆朋友圈的小游戏，再到刷屏的邀请函，逼格高到没朋友的媒趣君当然也不能放过。今日带来七款H5自制小工具，不用跪求程序猿，怎么任性怎么来！

H5都能怎么玩

对于H5这个名词想必大家已经很熟悉了，就在2014年，一项本来还不太成熟的技术在微信的社交舞台上大放异彩，让我们见识了“移动+社交”爆发的巨大能量。还不知道H5都有啥玩法，怎么玩？快搬着小板凳听媒趣君一一道来。

1.幻灯片式玩法

以下这个特斯拉的例子相信很多人都看过，精美的图片设计+简单的翻页效果，在我的印象中大概3、4月份看到特斯拉这个H5的时候，大家还不知道原来微信营销可以这么玩，当然，在这之后H5就千树万树梨花开了。

这是H5最早期也是最典型的玩法，因为简单、实用，所以至今还很流行。其效果就是简单的图片展示&翻页交互，最终整体的表现很像幻灯片展示。

★ TIPS

由于制作简单，周期短，这种H5展现形式适用于频繁、小型的需求。用在线编辑器的话，不需要任何开发，你只需要要配备一名设计和文案。

2.交互式动画

可口可乐这个案例可能很多小伙伴都了解过，是运用H5绘图功能的典型例子。当然这里面的交互还是比较简单的，只不过它基本体现了交互式动画的感觉。整个可口可乐的时间轴是随着用户向上滑动页面“绘制”出来的。

其实除了这种叙事型的H5动画，我们能看到的大多数H5游戏也都都属于这一类，比如神经猫、打企鹅、2048等等。

这些类型各异的H5应用，本质上都是基于H5的动画技术做的。它们所涉及的相关动画技术主要有H5的Canvas/SVG，以及JS、CSS3，目前大部分H5的动画效果还是用JS实现的，实现的效果类似PPT中的动画功能，只能实现元素的平移、旋转、隐现等等。事实上通过JS+Canvas/SVG+CSS3可以实现非常复杂的交互式动画，最直观的就是H5游戏，比如神经猫。

那么，H5到底能实现什么样的动画效果呢？这应该是大家在做H5时最头疼的问题，因为不知道能做成什么样，你也就不知道从何下手。所以给大家介绍一个网站：http://fff.cmiscm.com/，在这个网站中，你几乎能看到所有H5能够实现的动画效果，下次如果需要做H5的时候就可以跟开发说“你看，就是这个效果”。

该网站上一个关于“种树”的示例截图。在屏幕任意地方点击都会在相应的地方种一颗树，你可以看到树的生长过程。

★ TIPS

交互式动画类型的H5制作周期和成本比较高，需要提前规划。除了创意、文案、设计这些以外，开发周期较长，优质的H5大约在两周到4周左右，也有可能更长。

这种类型的H5要找靠谱的供应商，因为复杂交互做出来的效果，在用户看来只有完美和垃圾两种层次，所以慎重。当然如果你自己要花血本自建团队也不是不行——产品经理、设计师、前端工程师、PHP工程师（涉及表单、登录、评论等元素的时候需要），各一枚就够了。

3.功能型H5

功能型H5的独特价值在于，除了具备传播性以外，它通过用户的重复使用行为使得H5的传播是一个持续不断的过程，这一点是一般的H5所不具备的。比如百度针对地铁涨价做的H5，它可以计算你每天坐地铁要多少钱并且实时显示大家的评论。

也就是说在设计H5的时候除了考虑传播的问题以外，也要思考如何把它变成一个持续运营的产品。这里面其实是思考角度的问题，从“我要传播什么”到“我希望用户传播什么”的转变。

★ TIPS

轻交互重功能的功能型H5制作周期较短、成本也不高，成功的关键不在于酷炫的交互，而在于用户需求的把握以及后续的运营。

因此，这一类H5需要的是一名高水平的的产品经理，而以设计、开发为辅。功能型H5目前没有太多成熟的例子，不过离线存储的技术可能会是功能型H5的应用重点，大家可以关注一下。

实用小工具get，H5分分钟自己搞定

大牌们的H5营销都那么炫酷，自己也心动手痒有木有？别着急，媒趣君特意为大家准备了七款实用小工具，有了它们，咱也可以任性地来一句“Html5自己就能做！”再也不用跪舔程序猿技术猿什么的了。尽情拿走不谢！

1、品趣

访问地址：http://pro.pin-qu.com/site/index

技术支持：时趣

工具优点：时趣出品，操作简单，模版丰富，傻瓜式操作

2、MAKA

访问地址：http://www.maka.im

技术支持：MAKA

工具优点：静态模板和动态模板都有，模板样式丰富

3、易传单

 访问地址：http://echuandan.com

技术支持：易传单

工具优点：编辑器界面比较友好，设计灵活方便

4、点点客海报

访问地址：http://www.dodoca.com

技术支持：点点客

工具优点：注册简单，扫描二维码即可登录使用

5、秀制作

访问地址：http://xiumi.us

技术支持：秀米

工具优点：系统支持动态模板，和秀米排版助手好搭档

6、微杂志

访问地址：http://youzan.com

技术支持：有赞（口袋通）

工具优点：可以结合微商城做些传播，为店铺或商品引流

7、初页