眾所周知，從引爆朋友圈的“圍住神經貓”到顛覆傳統的廣告大眾點評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