眾所周知，從引爆朋友圈的“圍住神經(jīng)貓”到顛覆傳統(tǒng)的廣告大眾點(diǎn)評(píng)H5專題頁“我們之間只有一個(gè)字”，H5靠著無需下載、即點(diǎn)即用的屬性迅速上位，一躍變成當(dāng)紅炸子雞。
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游戲和專題頁紛紛展露頭角，然而大企業(yè)大公司的土豪都在利用自己強(qiáng)大資源和技術(shù)比拼H5場(chǎng)景頁面，一些小企業(yè)或普通獨(dú)立營銷者就只能眼巴巴看著嗎？NO，實(shí)力差點(diǎn)技術(shù)差點(diǎn)效果差點(diǎn)，但是我們也能做，下面小編就給大家推薦一些免費(fèi)的H5場(chǎng)景頁面制作神器！
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

 
網(wǎng)址：http://ppj.io/
Website: http://ppj.io/

 
推薦語：會(huì)PPT就會(huì)H5
Recommendation: the PPT will be H5

 

 
特點(diǎn)：為什么首推PP匠呢？因?yàn)檫@個(gè)網(wǎng)站對(duì)咱們PPTer絕對(duì)是一個(gè)福音，支持PPT一鍵轉(zhuǎn)化為H5頁面，PPT中的動(dòng)畫包括頁面切換動(dòng)畫，全都識(shí)別。一句話，會(huì)做PPT，就會(huì)做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
網(wǎng)址：http://www.eqxiu.com/
Website: http://www.eqxiu.com/

 
推薦語：簡(jiǎn)單粗暴上手快
Recommendation: simple and rough hands

 

 
特點(diǎn)：
Features:

 
1、簡(jiǎn)單粗暴，容易上手，易操作，而且免費(fèi)，有多種動(dòng)態(tài)模板，能實(shí)現(xiàn)文本和圖片帶有滑動(dòng)、隱現(xiàn)、放大縮小等動(dòng)態(tài)效果；
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 移動(dòng)客戶端，在手機(jī)上也可創(chuàng)建場(chǎng)景應(yīng)用，以及數(shù)據(jù)統(tǒng)計(jì)功能等；
2. Ios mobile client, can also create scene application and data statistics function on the phone;

 
3、私人定制：設(shè)計(jì)師定制和高端定制兩種，可以請(qǐng)別人設(shè)計(jì)精美絢麗H5社；
3. Private customization: designer customization and high-end customization, you can ask others to design beautiful and gorgeous H5 club;

 
4、組件中有互動(dòng)、表單、和特效等，也有模版可供選擇，無需自己制作。
4. There are interactive, forms, and special effects in the components. There are also templates to choose from. No need to make them yourself.

 

 

 
缺點(diǎn)：
Disadvantages:

 
1、圖片導(dǎo)入一般賬號(hào)只能支持JPG\PNG\GIF，服務(wù)商賬號(hào)才能導(dǎo)入PSD。
1. The general account can only support JPG \ PNG \ GIF, and the service account can import PSD.

 
2、表格互動(dòng)類模板較少，需要自己去制作。
2. There are fewer forms interactive templates, and you need to make them yourself.

 

 
秀場(chǎng)展示：
Exhibition:

 

 

 
案例分享
Case sharing

 
阿里安全16年年會(huì)邀請(qǐng)函
Invitation letter of ali safe for 16 years

 

 

 
MAKA
MAKA

 
網(wǎng)址：http://www.maka.im/
Website: http://www.maka.im/

 
推薦語：會(huì)PS就會(huì)H5
Recommendation: PS will be H5

 

 
特點(diǎn)：
Features:

 
1、新手推薦使用，模板豐富，有靜態(tài)模版和動(dòng)態(tài)模版可供選擇，有多種動(dòng)態(tài)效果以及交互效果可供選擇，個(gè)人感覺MAYA的界面比較簡(jiǎn)潔；
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、除收費(fèi)版外提供免費(fèi)版，不過免費(fèi)版不提供外鏈模板，操作簡(jiǎn)單，一分鐘上手，五分鐘創(chuàng)作H5，超越PPT的極簡(jiǎn)操作方式！
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、雙端操作一個(gè)賬號(hào)，多平臺(tái)操作，支持MAKA PC端、移動(dòng)客戶端。
3. Double - end operation of an account, multi-platform operation, support for MAKA PC end, mobile client.

 
4、最最重要的是：    它支持PSD一鍵導(dǎo)入！它支持PSD一鍵導(dǎo)入！它支持PSD一鍵導(dǎo)入！！！
4. The most important thing is: it supports PSD one key import! It supports PSD key import! It supports PSD one key import!!!

 

 

 
缺點(diǎn)：
Disadvantages:

 
免費(fèi)版不提供自定義動(dòng)效、支付、導(dǎo)航、預(yù)約等服務(wù)，也不能添加外鏈。
The free version does not offer custom action, payment, navigation, booking or other services, nor can you add external chains.

 

 
PSD一鍵導(dǎo)入演示：
PSD one-key import demonstration:

 

 

 
眾多免費(fèi)模版
Many free templates

 

 

 
制作場(chǎng)景展示
Production scene presentation

 

 

 
制作場(chǎng)景展示
Production scene presentation

 
案例分享：樂視超級(jí)手機(jī)
Case sharing: Letv super cell phone

 

 

 
初頁
At the beginning of page

 
網(wǎng)址：http://chuye.cloud7.com.cn/
Website: http://chuye.cloud7.com.cn/

 
推薦語：手機(jī)也能做H5啦
Recommendation: the phone can also do H5

 
特點(diǎn)：
Features:

 
1、小清新的風(fēng)格，標(biāo)簽是最潮的音樂照片情感故事記錄/表達(dá)工具。
1. Small and fresh style, the label is the most fashionable music photo emotional story record/expression tool.

 
2、直接在手機(jī)下載APP編輯操作，作為手機(jī)端制作動(dòng)態(tài)海報(bào)的app，面向C端，直接在手機(jī)上編輯創(chuàng)作，圖文混排的模板也很豐富。
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、個(gè)人建議如果喜歡旅游，記錄生活的點(diǎn)滴，并將拍的照片制作出文藝的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.

 

 
缺點(diǎn)：
Disadvantages:

 
1、在電腦PC端編輯性能差，主要是在手機(jī)端編輯；
1. Poor editing performance on PC PC side, mainly in mobile phone editing;

 
2、功能相對(duì)較少，組件較少，沒有PSD一鍵導(dǎo)入功能。
2. Relatively few functions, few components, no PSD one-key import function.

 

 

 
案例分享：這是小編自己用初頁耗時(shí)幾分鐘做的一個(gè)旅游的H5。很簡(jiǎn)單~
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

 
網(wǎng)址：http://www.bluemp.cn/Index.html
Website: http://www.bluemp.cn/Index.html

 
推薦語：微站形式是亮點(diǎn)
Recommendation: microstation form is the highlight

 

 
特點(diǎn)：
Features:

 
1、通過微站的形式進(jìn)行管理，上傳自己作品后可以在后臺(tái)監(jiān)控流量、數(shù)據(jù)分析、收益、運(yùn)營情況等；
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新功能有調(diào)趣味問答、調(diào)查問卷、心理測(cè)試、數(shù)據(jù)報(bào)表。
2. The new function of cereal H5 is interesting question-and-answer, questionnaire, psychological test and data report.

 
3、制作場(chǎng)景頁面和易企秀大同小異；
3. Make scene page and easy to show the same;

 

 
缺點(diǎn)：
Disadvantages:

 
1、注冊(cè)比較麻煩，需要手機(jī)號(hào)，不能微信或者QQ一鍵登錄；
1. The registration is more troublesome, requires the phone number, cannot be the WeChat or QQ one key login;

 
2、沒有PSD一鍵導(dǎo)入功能。
2. No PSD key import function.

 

 
操作界面展示
Interface display

 

 

 
界面展示
The interface display

 

 

 
案例分享：有趣的氣血大PK測(cè)試
Case sharing: an interesting PK test

 

 

 
開心推
Happy to push

 
網(wǎng)址：http://www.kxtui.com/
Website: http://www.kxtui.com/

 
推薦語：不會(huì)編程也做H5游戲
Recommendation: no programming and H5 games

 

 
特點(diǎn)：
Features:

 
1、聽名字就知道這個(gè)平臺(tái)側(cè)重點(diǎn)在于H5游戲制作，可以輕松創(chuàng)建屬于自己的游戲，提供海量的游戲模版，通過充滿趣味的游戲引爆盆友圈轉(zhuǎn)發(fā)和擴(kuò)散。
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.

 

 
缺點(diǎn)：
Disadvantages:

 
感覺整個(gè)界面不好看，比較浮夸；比如：推倒妹紙，將湯唯替換成自己女朋友照片吧~。
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

 

 

 

 
以上介紹的都是新手簡(jiǎn)單的傻瓜式操作的H5制作工具，下面介紹一些稍微復(fù)雜專業(yè)要求較高的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

 
網(wǎng)址：http://h5.baidu.com/
Website: http://h5.baidu.com/

 
推薦語：百度良心產(chǎn)品
Recommendation: baidu conscience product

 

 
特點(diǎn)：
Features:

 
1、最大特點(diǎn)是支持直接導(dǎo)入PSD文件，想要做出一個(gè)質(zhì)量高的H5頁面也不容易，要求擁有一定的PS能力，把圖片做好以后直接保存為PSD導(dǎo)進(jìn)去，再進(jìn)行文字和動(dòng)畫編輯，這就要求不僅僅是套用工具自行帶的模版，而加入按照自己想法制作的圖片，有自己的想法。
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、動(dòng)畫制作以時(shí)間軸的順序在下方顯示出來；
2. Animation production is shown below in the order of time axis;

 
3、有插件選項(xiàng)，其中有加載進(jìn)度插件和計(jì)數(shù)器插件；
3. There are plugin options, including loading progress plug-ins and counter plugins;

 

 

 
操作界面演示：
Operation interface demonstration:

 

 

 
操作平臺(tái)展示
Platform display

 
案例分享：寶寶離婚真相測(cè)試
Case sharing: baby divorce truth test

 

 

 
免展
Free show

 
網(wǎng)址：http://www.rabbitpre.com/
Website: http://www.rabbitpre.com/

 
推薦語：支持PSD導(dǎo)入較易上手
Recommendation: support PSD import more easily

 

 
特點(diǎn)：
Features:

 
1、最大特點(diǎn)仍是支持PSD一鍵導(dǎo)入；
1. The biggest feature is still support for the PSD one-key import;

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

 

 
缺點(diǎn)：
Disadvantages:

 
1、兔展過慢慢發(fā)展壯大后，有許多功能是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.

 
編輯制作區(qū)
Edit production area

 

 

 
案例分享：移動(dòng)營銷整合平臺(tái)
Case sharing: mobile marketing integration platform

 

 

 
木疙瘩
Wood a knot in one's

 
網(wǎng)址：http://wwq-test.mugeda.com/
Website: http://wwq-test.mugeda.com/

 
推薦語：最專業(yè)、最全面的神器
Recommendation: the most professional and comprehensive artifact

 

 
特點(diǎn)：
Features:

 
1、這個(gè)絕對(duì)專業(yè)級(jí)的H5交互動(dòng)畫制作云平臺(tái)，上手難度較大；
1. This absolute professional H5 interactive animation production cloud platform is difficult to handle;

 
2、擁有業(yè)界最為強(qiáng)大的動(dòng)畫編輯能力和最為自由的創(chuàng)作空間，可以幫助專業(yè)設(shè)計(jì)師和團(tuán)隊(duì)高效的完成面向移動(dòng)設(shè)備的H5專業(yè)內(nèi)容的制作發(fā)布、帳號(hào)管理、協(xié)同工作、數(shù)據(jù)收集等功能；
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、各種圖標(biāo)，各種按鈕、各種背景，微信控件、計(jì)數(shù)器、計(jì)時(shí)器等等應(yīng)有盡有，素材相當(dāng)豐富；
3. Various ICONS, various buttons, various backgrounds, WeChat controls, counters, timers and so on.

 

 
缺點(diǎn)：
Disadvantages:

 
Mugeda幫你把它完美的實(shí)現(xiàn)，由于木疙瘩功能較多，內(nèi)容豐富，建議學(xué)習(xí)此工具去官網(wǎng)學(xué)習(xí)教程；
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.

 
平臺(tái)操作演示
Platform operation demonstration

 

 

 

 

 
小編個(gè)人覺得：所有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

 
網(wǎng)址：http://www.epub360.com/
Website: http://www.epub360.com/

 
推薦語：夠?qū)I(yè)夠強(qiáng)大
Recommendation: enough of a major

 

 
注意了，這個(gè)可不是奇虎360開發(fā)的，而是意派開發(fā)的，堪稱專業(yè)級(jí)別的H5交互設(shè)計(jì)利器，功能也是極其的強(qiáng)大。
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.

 

 
特點(diǎn)：
Features:

 
1、最大亮點(diǎn)是它的高級(jí)組件，是目前唯一支持SVG路徑動(dòng)畫、SVG變形動(dòng)畫、精細(xì)化序列幀動(dòng)畫控制的H5設(shè)計(jì)工具。
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、還支持關(guān)聯(lián)控制，真正做到專業(yè)級(jí)的交互動(dòng)畫控制，手勢(shì)觸發(fā)、搖一搖、拖拽交互、碰撞檢測(cè)、重力感應(yīng)、關(guān)聯(lián)控制...并結(jié)合Epub360提供的數(shù)十種觸發(fā)器控制，完全滿足您個(gè)性化的交互設(shè)計(jì)需求。
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、國內(nèi)率先支持微信高級(jí)接口JsSDK，可實(shí)現(xiàn)獲取昵稱頭像、拍照、錄音等功能，結(jié)合投票、評(píng)論、助力、信息列表組件，可輕松實(shí)現(xiàn)社交互動(dòng)類H5的設(shè)，參數(shù)變量、條件判斷、數(shù)據(jù)庫等高級(jí)數(shù)據(jù)組件，可輕松實(shí)現(xiàn)測(cè)試題、抽獎(jiǎng)、社交輕游戲類H5的設(shè)計(jì)，未來將實(shí)現(xiàn)WebApp級(jí)別的專業(yè)應(yīng)用可視化設(shè)計(jì)。
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.

 

 
缺點(diǎn)：
Disadvantages:

 
可用模版數(shù)量較少。
There are fewer templates available.

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