眾所周知，從引爆朋友圈的“圍住神經(jīng)貓”到顛覆傳統(tǒng)的廣告大眾點(diǎn)評(píng)H5專題頁(yè)“我們之間只有一個(gè)字”，H5靠著無(wú)需下載、即點(diǎn)即用的屬性迅速上位，一躍變成當(dāng)紅炸子雞。

2014年下半年起，各種H5游戲和專題頁(yè)紛紛展露頭角，然而大企業(yè)大公司的土豪都在利用自己強(qiáng)大資源和技術(shù)比拼H5場(chǎng)景頁(yè)面，一些小企業(yè)或普通獨(dú)立營(yíng)銷者就只能眼巴巴看著嗎？NO，實(shí)力差點(diǎn)技術(shù)差點(diǎn)效果差點(diǎn)，但是我們也能做，下面小編就給大家推薦一些免費(fèi)的H5場(chǎng)景頁(yè)面制作神器！

PP匠

網(wǎng)址：http:///

推薦語(yǔ)：會(huì)PPT就會(huì)H5

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

易企秀

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

推薦語(yǔ)：簡(jiǎn)單粗暴上手快

特點(diǎn)：

1、簡(jiǎn)單粗暴，容易上手，易操作，而且免費(fèi)，有多種動(dòng)態(tài)模板，能實(shí)現(xiàn)文本和圖片帶有滑動(dòng)、隱現(xiàn)、放大縮小等動(dòng)態(tài)效果；

2、 ios 移動(dòng)客戶端，在手機(jī)上也可創(chuàng)建場(chǎng)景應(yīng)用，以及數(shù)據(jù)統(tǒng)計(jì)功能等；

3、私人定制：設(shè)計(jì)師定制和高端定制兩種，可以請(qǐng)別人設(shè)計(jì)精美絢麗H5社；

4、組件中有互動(dòng)、表單、和特效等，也有模版可供選擇，無(wú)需自己制作。

缺點(diǎn)：

1、圖片導(dǎo)入一般賬號(hào)只能支持JPG\PNG\GIF，服務(wù)商賬號(hào)才能導(dǎo)入PSD。

2、表格互動(dòng)類模板較少，需要自己去制作。

秀場(chǎng)展示：

案例分享

阿里安全16年年會(huì)邀請(qǐng)函

MAKA

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

推薦語(yǔ)：會(huì)PS就會(huì)H5

特點(diǎn)：

1、新手推薦使用，模板豐富，有靜態(tài)模版和動(dòng)態(tài)模版可供選擇，有多種動(dòng)態(tài)效果以及交互效果可供選擇，個(gè)人感覺(jué)MAYA的界面比較簡(jiǎn)潔；

2、除收費(fèi)版外提供免費(fèi)版，不過(guò)免費(fèi)版不提供外鏈模板，操作簡(jiǎn)單，一分鐘上手，五分鐘創(chuàng)作H5，超越PPT的極簡(jiǎn)操作方式！

3、雙端操作一個(gè)賬號(hào)，多平臺(tái)操作，支持MAKA PC端、移動(dòng)客戶端。

4、最最重要的是：    它支持PSD一鍵導(dǎo)入！它支持PSD一鍵導(dǎo)入！它支持PSD一鍵導(dǎo)入?。?！

缺點(diǎn)：

免費(fèi)版不提供自定義動(dòng)效、支付、導(dǎo)航、預(yù)約等服務(wù)，也不能添加外鏈。

PSD一鍵導(dǎo)入演示：

眾多免費(fèi)模版

制作場(chǎng)景展示

制作場(chǎng)景展示

案例分享：樂(lè)視超級(jí)手機(jī)

初頁(yè)

網(wǎng)址：http://chuye./

推薦語(yǔ)：手機(jī)也能做H5啦

特點(diǎn)：

1、小清新的風(fēng)格，標(biāo)簽是最潮的音樂(lè)照片情感故事記錄/表達(dá)工具。

2、直接在手機(jī)下載APP編輯操作，作為手機(jī)端制作動(dòng)態(tài)海報(bào)的app，面向C端，直接在手機(jī)上編輯創(chuàng)作，圖文混排的模板也很豐富。

3、個(gè)人建議如果喜歡旅游，記錄生活的點(diǎn)滴，并將拍的照片制作出文藝的H5分享給朋友圈，可以使用初頁(yè)來(lái)制作。

缺點(diǎn)：

1、在電腦PC端編輯性能差，主要是在手機(jī)端編輯；

2、功能相對(duì)較少，組件較少，沒(méi)有PSD一鍵導(dǎo)入功能。

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

麥片BlueMP

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

推薦語(yǔ)：微站形式是亮點(diǎn)

特點(diǎn)：

1、通過(guò)微站的形式進(jìn)行管理，上傳自己作品后可以在后臺(tái)監(jiān)控流量、數(shù)據(jù)分析、收益、運(yùn)營(yíng)情況等；

2、麥片H5新功能有調(diào)趣味問(wèn)答、調(diào)查問(wèn)卷、心理測(cè)試、數(shù)據(jù)報(bào)表。

 3、制作場(chǎng)景頁(yè)面和易企秀大同小異；

缺點(diǎn)： 

1、注冊(cè)比較麻煩，需要手機(jī)號(hào)，不能微信或者QQ一鍵登錄；

2、沒(méi)有PSD一鍵導(dǎo)入功能。

操作界面展示

界面展示

案例分享：有趣的氣血大PK測(cè)試

開(kāi)心推

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

推薦語(yǔ)：不會(huì)編程也做H5游戲

特點(diǎn)：

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

2、主要是通過(guò)已有游戲模板，將模板中一些元素替換成自己想要的圖片或者文本。

缺點(diǎn)：

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

界面展示

案例分享：好玩的密室逃脫哦~

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

百度H5

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

推薦語(yǔ)：百度良心產(chǎn)品

特點(diǎn)：

1、最大特點(diǎn)是支持直接導(dǎo)入PSD文件，想要做出一個(gè)質(zhì)量高的H5頁(yè)面也不容易，要求擁有一定的PS能力，把圖片做好以后直接保存為PSD導(dǎo)進(jìn)去，再進(jìn)行文字和動(dòng)畫編輯，這就要求不僅僅是套用工具自行帶的模版，而加入按照自己想法制作的圖片，有自己的想法。

2、動(dòng)畫制作以時(shí)間軸的順序在下方顯示出來(lái)；

3、有插件選項(xiàng)，其中有加載進(jìn)度插件和計(jì)數(shù)器插件；

操作界面演示：

操作平臺(tái)展示

案例分享：寶寶離婚真相測(cè)試

免展

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

推薦語(yǔ)：支持PSD導(dǎo)入較易上手

特點(diǎn)：

1、最大特點(diǎn)仍是支持PSD一鍵導(dǎo)入；

2、兔展的使用頁(yè)面十分清新；

缺點(diǎn)：

1、兔展過(guò)慢慢發(fā)展壯大后，有許多功能是VIP才能使用的，比如說(shuō)特效或者更精密的模板之類的。

2、支持chrome瀏覽器。

編輯制作區(qū)

案例分享：移動(dòng)營(yíng)銷整合平臺(tái)

木疙瘩

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

推薦語(yǔ)：最專業(yè)、最全面的神器

特點(diǎn)：

1、這個(gè)絕對(duì)專業(yè)級(jí)的H5交互動(dòng)畫制作云平臺(tái)，上手難度較大；

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ù)收集等功能；

3、各種圖標(biāo)，各種按鈕、各種背景，微信控件、計(jì)數(shù)器、計(jì)時(shí)器等等應(yīng)有盡有，素材相當(dāng)豐富；

缺點(diǎn)：

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

平臺(tái)操作演示

小編個(gè)人覺(jué)得：所有H5中如果掌握了木疙瘩，你就所向無(wú)敵，什么都能做了。

案例分享：端午吃粽子

epub360意派

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

推薦語(yǔ)：夠?qū)I(yè)夠強(qiáng)大

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

特點(diǎn)：

1、最大亮點(diǎn)是它的高級(jí)組件，是目前唯一支持SVG路徑動(dòng)畫、SVG變形動(dòng)畫、精細(xì)化序列幀動(dòng)畫控制的H5設(shè)計(jì)工具。

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ì)需求。

3、國(guó)內(nèi)率先支持微信高級(jí)接口JsSDK，可實(shí)現(xiàn)獲取昵稱頭像、拍照、錄音等功能，結(jié)合投票、評(píng)論、助力、信息列表組件，可輕松實(shí)現(xiàn)社交互動(dòng)類H5的設(shè)，參數(shù)變量、條件判斷、數(shù)據(jù)庫(kù)等高級(jí)數(shù)據(jù)組件，可輕松實(shí)現(xiàn)測(cè)試題、抽獎(jiǎng)、社交輕游戲類H5的設(shè)計(jì)，未來(lái)將實(shí)現(xiàn)WebApp級(jí)別的專業(yè)應(yīng)用可視化設(shè)計(jì)。

缺點(diǎn)：

可用模版數(shù)量較少。

注意最好需要下載最新版谷歌瀏覽器

案例分享：

連淘寶都不愿錯(cuò)過(guò)的機(jī)器僧

更多教程和福利↓