众所周知，从引爆朋友圈的“围住神经猫”到颠覆传统的广告大众点评H5专题页“我们之间只有一个字”，H5靠着无需下载、即点即用的属性迅速上位，一跃变成当红炸子鸡。
It is well known that detonated from friends "surround nerve cat" to subvert the traditional advertising public comments on the H5 project "is only one word between us" page, H5 through without having to download, the point of the attribute, quickly jumped into a crispy Fried chicken.

 

 
2014年下半年起，各种H5游戏和专题页纷纷展露头角，然而大企业大公司的土豪都在利用自己强大资源和技术比拼H5场景页面，一些小企业或普通独立营销者就只能眼巴巴看着吗？NO，实力差点技术差点效果差点，但是我们也能做，下面小编就给大家推荐一些免费的H5场景页面制作神器！
Since the second half of 2014, all kinds of H5 games and special pages are emerging, however, big companies of the company's local tyrants are using their resources and strong technical contest page H5 scene, a few small companies or ordinary independent marketers can see? NO, the power nearly the technical almost the effect almost, but we can also do, below small make up to recommend some free H5 scene page to make the artifact!

 

 
PP匠
PP artisan

 
网址：http://ppj.io/
Website: http://ppj.io/

 
推荐语：会PPT就会H5
Recommendation: the PPT will be H5

 

 
特点：为什么首推PP匠呢？因为这个网站对咱们PPTer绝对是一个福音，支持PPT一键转化为H5页面，PPT中的动画包括页面切换动画，全都识别。一句话，会做PPT，就会做H5。
Features: why did the first push the PP? Because this site is definitely a good news for us PPTer, we support the slide 1 key into H5 page, and the animation in the PPT includes page switching animation, all recognition. In a word, you will make PPT, and you will do H5.

 
易企秀
Yi qi xiu
网址：http://www.eqxiu.com/
Website: http://www.eqxiu.com/

 
推荐语：简单粗暴上手快
Recommendation: simple and rough hands

 

 
特点：
Features:

 
1、简单粗暴，容易上手，易操作，而且免费，有多种动态模板，能实现文本和图片带有滑动、隐现、放大缩小等动态效果；
1. Simple and rough, easy to handle, easy to operate, and free, there are a variety of dynamic templates, which can realize the dynamic effects of text and pictures with sliding, looming and amplification.

 
2、 ios 移动客户端，在手机上也可创建场景应用，以及数据统计功能等；
2. Ios mobile client, can also create scene application and data statistics function on the phone;

 
3、私人定制：设计师定制和高端定制两种，可以请别人设计精美绚丽H5社；
3. Private customization: designer customization and high-end customization, you can ask others to design beautiful and gorgeous H5 club;

 
4、组件中有互动、表单、和特效等，也有模版可供选择，无需自己制作。
4. There are interactive, forms, and special effects in the components. There are also templates to choose from. No need to make them yourself.

 

 

 
缺点：
Disadvantages:

 
1、图片导入一般账号只能支持JPG\PNG\GIF，服务商账号才能导入PSD。
1. The general account can only support JPG \ PNG \ GIF, and the service account can import PSD.

 
2、表格互动类模板较少，需要自己去制作。
2. There are fewer forms interactive templates, and you need to make them yourself.

 

 
秀场展示：
Exhibition:

 

 

 
案例分享
Case sharing

 
阿里安全16年年会邀请函
Invitation letter of ali safe for 16 years

 

 

 
MAKA
MAKA

 
网址：http://www.maka.im/
Website: http://www.maka.im/

 
推荐语：会PS就会H5
Recommendation: PS will be H5

 

 
特点：
Features:

 
1、新手推荐使用，模板丰富，有静态模版和动态模版可供选择，有多种动态效果以及交互效果可供选择，个人感觉MAYA的界面比较简洁；
1. The novice recommends using, the template is rich, there are static template and dynamic template to choose, there are many dynamic effects and interactive effects to choose from, personal feeling MAYA's interface is relatively concise;

 
2、除收费版外提供免费版，不过免费版不提供外链模板，操作简单，一分钟上手，五分钟创作H5，超越PPT的极简操作方式！
2. Free version is provided in addition to the free version, but free version does not provide the external chain template, the operation is simple, one minute to the hand, five minutes to create H5, beyond the PPT minimalist operation!

 
3、双端操作一个账号，多平台操作，支持MAKA PC端、移动客户端。
3. Double - end operation of an account, multi-platform operation, support for MAKA PC end, mobile client.

 
4、最最重要的是：    它支持PSD一键导入！它支持PSD一键导入！它支持PSD一键导入！！！
4. The most important thing is: it supports PSD one key import! It supports PSD key import! It supports PSD one key import!!!

 

 

 
缺点：
Disadvantages:

 
免费版不提供自定义动效、支付、导航、预约等服务，也不能添加外链。
The free version does not offer custom action, payment, navigation, booking or other services, nor can you add external chains.

 

 
PSD一键导入演示：
PSD one-key import demonstration:

 

 

 
众多免费模版
Many free templates

 

 

 
制作场景展示
Production scene presentation

 

 

 
制作场景展示
Production scene presentation

 
案例分享：乐视超级手机
Case sharing: Letv super cell phone

 

 

 
初页
At the beginning of page

 
网址：http://chuye.cloud7.com.cn/
Website: http://chuye.cloud7.com.cn/

 
推荐语：手机也能做H5啦
Recommendation: the phone can also do H5

 
特点：
Features:

 
1、小清新的风格，标签是最潮的音乐照片情感故事记录/表达工具。
1. Small and fresh style, the label is the most fashionable music photo emotional story record/expression tool.

 
2、直接在手机下载APP编辑操作，作为手机端制作动态海报的app，面向C端，直接在手机上编辑创作，图文混排的模板也很丰富。
2. Directly download the APP editing operation on the mobile phone, as the APP of mobile phone end making dynamic posters, facing the C terminal, editing and composing directly on the phone, and the template of the image and text mixing is also rich.

 
3、个人建议如果喜欢旅游，记录生活的点滴，并将拍的照片制作出文艺的H5分享给朋友圈，可以使用初页来制作。
3. If you like to travel and record your life, you will be able to use the first page to create the art of the H5.

 

 
缺点：
Disadvantages:

 
1、在电脑PC端编辑性能差，主要是在手机端编辑；
1. Poor editing performance on PC PC side, mainly in mobile phone editing;

 
2、功能相对较少，组件较少，没有PSD一键导入功能。
2. Relatively few functions, few components, no PSD one-key import function.

 

 

 
案例分享：这是小编自己用初页耗时几分钟做的一个旅游的H5。很简单~
Case sharing: this is an example of a travel H5 that took a few minutes to do with the first page. Very simple ~

 

 

 
麦片BlueMP
Cereal BlueMP

 
网址：http://www.bluemp.cn/Index.html
Website: http://www.bluemp.cn/Index.html

 
推荐语：微站形式是亮点
Recommendation: microstation form is the highlight

 

 
特点：
Features:

 
1、通过微站的形式进行管理，上传自己作品后可以在后台监控流量、数据分析、收益、运营情况等；
1. Manage in the form of micro-station, and upload your own works to monitor traffic, data analysis, revenue and operation situation in the background.

 
2、麦片H5新功能有调趣味问答、调查问卷、心理测试、数据报表。
2. The new function of cereal H5 is interesting question-and-answer, questionnaire, psychological test and data report.

 
3、制作场景页面和易企秀大同小异；
3. Make scene page and easy to show the same;

 

 
缺点：
Disadvantages:

 
1、注册比较麻烦，需要手机号，不能微信或者QQ一键登录；
1. The registration is more troublesome, requires the phone number, cannot be the WeChat or QQ one key login;

 
2、没有PSD一键导入功能。
2. No PSD key import function.

 

 
操作界面展示
Interface display

 

 

 
界面展示
The interface display

 

 

 
案例分享：有趣的气血大PK测试
Case sharing: an interesting PK test

 

 

 
开心推
Happy to push

 
网址：http://www.kxtui.com/
Website: http://www.kxtui.com/

 
推荐语：不会编程也做H5游戏
Recommendation: no programming and H5 games

 

 
特点：
Features:

 
1、听名字就知道这个平台侧重点在于H5游戏制作，可以轻松创建属于自己的游戏，提供海量的游戏模版，通过充满趣味的游戏引爆盆友圈转发和扩散。
1, listen to the name will know that this platform focus lies in the H5 game production, you can easily create their own game, game template for amounts, detonated friends forwarding through fun games and diffusion.

 
2、主要是通过已有游戏模板，将模板中一些元素替换成自己想要的图片或者文本。
2. Mainly through the existing game templates, replace some elements of the template with the images or text that you want.

 

 
缺点：
Disadvantages:

 
感觉整个界面不好看，比较浮夸；比如：推倒妹纸，将汤唯替换成自己女朋友照片吧~。
Feel the whole interface not good-looking, more grandiose; For example: tear down the girl, replace tang wei with his girlfriend photo.

 

 

 
界面展示
The interface display

 

 

 
案例分享：好玩的密室逃脱哦~
Case sharing: a good escape from the chamber of secrets

 

 

 

 
以上介绍的都是新手简单的傻瓜式操作的H5制作工具，下面介绍一些稍微复杂专业要求较高的H5制作工具。
All of the above are the beginner's simple foolproof H5 production tools, and the following are some of the more advanced H5 production tools.

 
百度H5
Baidu H5

 
网址：http://h5.baidu.com/
Website: http://h5.baidu.com/

 
推荐语：百度良心产品
Recommendation: baidu conscience product

 

 
特点：
Features:

 
1、最大特点是支持直接导入PSD文件，想要做出一个质量高的H5页面也不容易，要求拥有一定的PS能力，把图片做好以后直接保存为PSD导进去，再进行文字和动画编辑，这就要求不仅仅是套用工具自行带的模版，而加入按照自己想法制作的图片，有自己的想法。
1, the biggest characteristic is to support direct import the PSD files, want to make a high quality of H5 page is not easy, requires the ability to have some PS, when it's done the image saved as a guide in PSD directly, then text and animation editor, this request is not only to use tools to take the template, and join made pictures of according to oneself idea, have their own ideas.

 
2、动画制作以时间轴的顺序在下方显示出来；
2. Animation production is shown below in the order of time axis;

 
3、有插件选项，其中有加载进度插件和计数器插件；
3. There are plugin options, including loading progress plug-ins and counter plugins;

 

 

 
操作界面演示：
Operation interface demonstration:

 

 

 
操作平台展示
Platform display

 
案例分享：宝宝离婚真相测试
Case sharing: baby divorce truth test

 

 

 
免展
Free show

 
网址：http://www.rabbitpre.com/
Website: http://www.rabbitpre.com/

 
推荐语：支持PSD导入较易上手
Recommendation: support PSD import more easily

 

 
特点：
Features:

 
1、最大特点仍是支持PSD一键导入；
1. The biggest feature is still support for the PSD one-key import;

 
2、兔展的使用页面十分清新；
2. The use page of rabbit exhibition is very fresh;

 

 
缺点：
Disadvantages:

 
1、兔展过慢慢发展壮大后，有许多功能是VIP才能使用的，比如说特效或者更精密的模板之类的。
1. After the rabbit exhibition has grown and grown, many functions are used by VIP, such as special effects or more precise templates.

 
2、支持chrome浏览器。
2. Support chrome browser.

 
编辑制作区
Edit production area

 

 

 
案例分享：移动营销整合平台
Case sharing: mobile marketing integration platform

 

 

 
木疙瘩
Wood a knot in one's

 
网址：http://wwq-test.mugeda.com/
Website: http://wwq-test.mugeda.com/

 
推荐语：最专业、最全面的神器
Recommendation: the most professional and comprehensive artifact

 

 
特点：
Features:

 
1、这个绝对专业级的H5交互动画制作云平台，上手难度较大；
1. This absolute professional H5 interactive animation production cloud platform is difficult to handle;

 
2、拥有业界最为强大的动画编辑能力和最为自由的创作空间，可以帮助专业设计师和团队高效的完成面向移动设备的H5专业内容的制作发布、帐号管理、协同工作、数据收集等功能；
2, has the industry's most powerful animation editing ability and the creation of the most free space, can help accomplish professional designers and team and efficient for mobile devices of H5 professional content production release, account management, collaborative work, data collection, and other functions.

 
3、各种图标，各种按钮、各种背景，微信控件、计数器、计时器等等应有尽有，素材相当丰富；
3. Various ICONS, various buttons, various backgrounds, WeChat controls, counters, timers and so on.

 

 
缺点：
Disadvantages:

 
Mugeda帮你把它完美的实现，由于木疙瘩功能较多，内容丰富，建议学习此工具去官网学习教程；
Mugeda helps you to make it perfect, because of the more functions and abundant contents, it is recommended to learn the course of the website.

 
平台操作演示
Platform operation demonstration

 

 

 

 

 
小编个人觉得：所有H5中如果掌握了木疙瘩，你就所向无敌，什么都能做了。
The individual thinks: all H5 if master wooden knot, you will be invincible, everything can be done.

 
案例分享：端午吃粽子
Case sharing: Dragon Boat Festival eating zongzi

 

 

 
epub360意派
Epub360 means to send

 
网址：http://www.epub360.com/
Website: http://www.epub360.com/

 
推荐语：够专业够强大
Recommendation: enough of a major

 

 
注意了，这个可不是奇虎360开发的，而是意派开发的，堪称专业级别的H5交互设计利器，功能也是极其的强大。
Note that this is not the development of qihoo 360, but the development of an Italian, professional level of H5 interaction design, the function is also extremely powerful.

 

 
特点：
Features:

 
1、最大亮点是它的高级组件，是目前唯一支持SVG路径动画、SVG变形动画、精细化序列帧动画控制的H5设计工具。
1. The biggest highlight is its advanced component, which is the only H5 design tool that supports SVG path animation, SVG deformed animation, refined sequence frame animation control.

 
2、还支持关联控制，真正做到专业级的交互动画控制，手势触发、摇一摇、拖拽交互、碰撞检测、重力感应、关联控制...并结合Epub360提供的数十种触发器控制，完全满足您个性化的交互设计需求。
2. It also supports association control, which can truly achieve professional interactive animation control, gesture triggering, shake, drag and drop interaction, collision detection, gravity induction, association control... Combined with the dozens of trigger controls provided by Epub360, you can fully meet your personalized interaction design requirements.

 
3、国内率先支持微信高级接口JsSDK，可实现获取昵称头像、拍照、录音等功能，结合投票、评论、助力、信息列表组件，可轻松实现社交互动类H5的设，参数变量、条件判断、数据库等高级数据组件，可轻松实现测试题、抽奖、社交轻游戏类H5的设计，未来将实现WebApp级别的专业应用可视化设计。
3, the first high-level interface to support WeChat JsSDK, can realize gain nickname avatar, pictures, audio, and other functions, combined with the vote, comment, power, information list components, can easily realize social interaction class H5, parameter variables, the condition judgment, database and other advanced data components, can easily implement test, the design of the lottery, light social games H5, the future will implement the WebApp level of professional application of visual design.

 

 
缺点：
Disadvantages:

 
可用模版数量较少。
There are fewer templates available.

 
注意最好需要下载最新版谷歌浏览器
Note that it is best to download the latest version of Google