標籤:

有哪些不用編寫代碼就能輕鬆製作生成HTML5頁面的工具?

最好能簡單介紹一下各工具的優缺點。


我覺得我可以來回答一下這個問題。

作為移動互聯網公司入職不到一年的產品新人,我最近用過一些製作H5的工具。不敢說是每個工具的深度使用者,起碼平時可以利用起來,在不用代碼的情況下,使用這些工具確實達到了省時省力的效果。

【開始答樓主】 ——————————————————

HTML5頁面製作工具,大體分為兩類:基於HTML5的網站工具和手機APP工具(當然還有一些其他的,例如基於微信公眾號的等,下面也會介紹)。

  • 先總的說一下個人感受

1.基於HTML5的工具網站:功能較強大,單頁面的操作性較強,可完成各種頁面交互效果;但是某些時候會有操作「失靈」的現象,如上傳圖片失敗,點擊保存失敗,生成失敗等。原因你懂得~

2.手機工具APP:相比起工具網站來講,顯得比較順手,有大量模板套用,製作簡單快捷;但是拘泥於現有的模板,使得單頁面不會有較大的可操作空間,從而無法實現DIY交互效果。

  • 下面展開說下每個使用過的工具吧

基於HTML5的工具網站:

【兔展】http://www.rabbitpre.com/

優點:頁面DIY程度較高,動效實現起來也簡易方便,可製作比較任性的H5頁面。

缺點:屏幕界面大小不可調節,上傳的圖會比例失調;生成後到各尺寸屏上頁面會存在拉伸現象。

(此圖意在說明上傳的圖片的尺寸都是網站自己默認的一個尺寸,不是圖片本身的尺寸,不利於使用者調整)

【MAKA.im】 http://www.maka.im/home/index.html

優點:與兔展類似,更像製作PPT一樣。每一頁的具體效果可以具體編輯,單頁操作性較高,有新手(有模板)和高階(無模板)兩種編輯模式;翻頁效果比兔展多,模板也更強大一些。

【居高互動刊】http://hdk.jugocn.com/

優點:最簡單易上手的工具之一,根據提示一步一步的添加,共4步,最後生成微雜誌。相比其他在線工具,較穩定。

缺點:目前沒試通製作單頁上的交互效果,沒找到開啟pro功能的入口。

【ANIMATRON】http://www.animatron.com/

優點:像flash的在線版,功能強大,可以創建HTML5動畫。適合有動畫基礎的人做演示製作。

缺點:需要動畫製作基礎;工作界面響應時間長;貌似只能分享到twitter、Facebook、google+、tumblr?

【iSpring 7】http://www.ispringsolutions.com/

噱頭是PPT轉HTML5工具,完美與PPT兼容,可製作Html5移動課件。

不過,目前我只能連著VPN再用Safari才能打開網站鏈接。

【秀製作】http://xiumi.us/

優點:版式輕鬆,製作快捷,寬頻穩定。

缺點:對圖片和文字在各種屏幕上的顯示沒有做很好的適配;不能對模板中文字的編輯調整位置。

手機工具APP:

【初頁】

優點:模板質量高,套用模板編輯時效率高,操作簡單快捷,效果和體驗在製作H5頁面的APP工具裡面算是出類拔萃。

缺點:單頁面可操作性較低,僅支持套用模板。

【快邀約】快速製作邀請函

優點:易上手,省時高效,便於統計。

缺點:頁面簡陋,只能選擇固有模板創建文字和添加圖片。

【易企秀】中小微企業的移動場景營銷管家

優點:套用模板,創建快捷,用來做企業介紹、產品推薦。擁有強大的推廣統計、客戶管理功能。嗯,這裡應該贊一個。

缺點:只能用模板,DIY程度低;統計數據是否準確需要進一步確認,目前看來可能有遺漏數據的現象(在小範圍測試中,統計到的數量小於應有的數量)。

【微貼】:通過微信公眾號創建H5頁面

優點:手機公眾號內直接創建簡單頁面,根據提示創建即可,無腦方便快捷。

缺點:只是單頁面展示,承載不了交互效果等特效和更多內容。

  • 總結

工具網站做的H5頁面,多注重單獨頁面的自定義交互方案,DIY程度高,相對來說用時較長,又受制於帶寬因素,故影響操作;

工具APP做的H5頁面,多注重效率,目前都是套用模板,因而對單頁面的DIY程度較低,交互效果受限。

作為我個人而言,移動互聯的新任PM,我平時常用到的是【MAKA】和【兔展】,這兩個相對來說更適合半天時間來完成;如想快速製作展示頁面就用【初頁】,這個在功能效率與設計感方面更突出一些;組織活動、製作邀請函、分發活動通知等用【快邀約】;平時推廣新產品、聯絡客戶和招聘新人用【易企秀】。

【回答完畢】 ——————————————————

以上是近期以來對HTML5製作工具的一些淺顯認知,希望對樓主有所幫助,也歡迎大家多多交流與指正。


Mac下一抓一大把,比如上邊這個能生成整站的Rapid Weaver。還有能製作HTML5動畫的Hype 2,以Flash的方式製作HTML頁面的Google Web Designer,甚至不寫代碼就能設計頁面的Sparkle,能把代碼結構管理的很清晰的Espresso……數不勝數


這是html5程序員在知乎上被黑的最狠的一次。


Weebly: Create a Free Website, Online Store, or Blog

Wix: Free Website Builder


首先先把這些軟體分成2類,專業軟體和大眾軟體,都是工具,但特點也是明顯的。專業軟體適合深度使用用戶,能完成的效果會更加漂亮和自由,但是學習難度也更大。大眾軟體使用模板套用,也支持自由創作,學習成本低。

  • 專業軟體的典型代表:ih5和意派,自由定製程度會更強,當然學習難度也更大。也不用寫代碼,專業的設計工作室推薦這兩款軟體。
  • 大眾軟體的典型代表有:MAKA、易企秀和兔展,這三款在使用操作上不分伯仲。還有一些不錯的,比如人人秀、木疙瘩、雲來。如果是企業內部的設計師建議採用大眾的製作工具就可以了,模板已經非常豐富,大部分都是幾千個模板的量級,音效和字體都有保證。

----------------------------------------------------------------------------

更新內容:對於個人用戶,且不是設計師的朋友們,也有很多公眾號內提供了H5製作的工具,每年節假日在廣大人民群眾中傳播的祝福賀卡是這種類型的典型代表。

-------------------------------------------------------------------------------

不用編寫代碼又能輕鬆製作成H5的,想要出彩,得再策劃和設計上下功夫,沒有付出精力、時間,出來的作品只能稱之為交作業了。

所以即便不寫代碼,也強烈建議在策劃和設計上多多花時間:

設計涉及到PS、AI,視效設計會涉及到AE、C4D,音效會涉及到garageband、final cut、Adobe Premiere

策划上參考《H5策劃比執行更重要,此句重複100遍!》《【H5最新玩法匯總】有了這些新玩法,還怕沒靈感?》《有哪些簡單又刷屏的H5案例?》


如果真的是工具層面上,只有VXPLO互動大師和Epub360兩家。前者注重各種交互效果,後者更像做電子書。其他的L1總結的都只能算是模板...... 就像PS和美圖秀秀的區別......


以上說的大部分都是單純的HTML5製作工具,但是沒有實現營銷的閉環。

推薦一個新產品【幾步JIBUU】JIBUU幾步 · 精準的集客和社會化營銷工具

幾步是一款強大的客戶收集管理和社會化營銷工具(SCRM)

通過幾步,市場銷售人員可以做多渠道客戶收集和管理,支持快速生成HTML5與客戶連接,在集客-標籤-營銷-傳播-分析上擁有完全的營銷閉環解決方案,最終價值在於幫助企業和個人實現銷售轉化和提升客戶復購率。


Html5製作工具對比

最近迫於老闆的要求,要做一些Html5的宣傳網頁(原諒我用詞可能不準,大家明白意思就好),介紹俺們的公司和產品……雖然說老闆有點跟風,並且出手已經有點晚了,可是任務下來了還是得做。

先兩句話介紹下背景:我們公司是一家小創業公司,開發人數不夠(必有我師焉的情況),所以前端工程師是不會搭理你的需求的,一切都得自己來搞,還得搞得飛起才行,不然老闆不幹,以上千(我)載(去)難(ni)逢(mei)的情況也是讓我著實頭痛了一陣。

說說經過幾天調查後對市面上的html5製作工具的使用感受吧,希望能給看這篇文章的你一些提示,選擇適合自己的工具(網站)。

首先,工具列表在此http://next.36kr.com/posts/collections/61

小編就是參考了這篇列表,裡面有幾十個工具,都是做html5的,小編我雖然沒有全部都用,但是有幾款口碑不錯的都使用了一下,不禁感概現在互聯網圈子裡節操和功能強大不會並存。大家蘿蔔白菜,各取所需就好。

  • 首先,MAKA,這是一款相比其他工具操作更加簡單,功能也較為單一的一款。在maka中提供的文字、圖片樣式都比較有限,很適合對特效要求不高的人(估計這樣的人很多,60%以上吧);裡面提供一些特效模板,都是設置好的效果,用起來很方便,並且提供頁面翻頁的效果選擇,這點值得贊一下;不好的地方在不能修改表單的多少,只有兩種模板,不夠靈活,另外要使用數據統計模板的話還要關注微信並分享一篇內容,小編沒使用,所以這個功能不做點評了。
  • 第二家,爆米兔,估計是這裡面最年輕的一款工具了,功能數量和maka差不多,模板數量也相差不多,界面稍顯粗糙,一些細節的操作做得也比較一般,屬於可以用的級別;但是值得表揚的一點,也是爆米兔最讓小編喜歡的地方——沒有該死的來源顯示,別家基本都在你的應用一些位置上加上自己的logo,想去掉就得花錢升級賬號,這一點在爆米兔上完全沒有,小編覺得功能可以慢慢優化,但是節操這年頭可不好找了。不過,想做複雜效果的人還得接著往下看
  • 第三家,易企秀——可以說是行業標榜的一款了,除了那該死的企業logo展示。易企秀最大的特點就是模板更新快,小編大概隔了兩周做新的應用,易企秀就多了n個模板,並且還有幾處功能更新,這點很值得其他家學習;不足嘛,小編是普通賬號,很多高級功能都用不了,去掉這些功能不算,易企秀其實和上面兩家差別不大,並且最後一頁還必須顯示易企秀的logo,這點老闆真是意見頗大,不想花錢就得裝個孫子,我們老闆也是讓小編醉了。
  • 第四家,易傳單,這家坦白說和易企秀很像,但又不如易企秀做的好,裡面有圖層功能,和ps的差不多,但是頁面元素多了後這個功能又變得很雞肋。
  • 最後一家,初頁,移動端的產品,沒太怎麼使用,只是感覺在移動端上不好用,上面的案例很多,好像都是別的用戶做的,不過在小編手機上用總是死機,所以最早就放棄了這家。


互動大師,vxplo 。之前就是因為看了秀米,覺得千篇一律,沒新意,才各種搜索類似的更好用的,搜到的互動大師。題主看了絕對不會失望,功能超全。


爆米兔:http://www.baomitu.com


答數最多的朋友說了很多初級H5的工具。

能實現把H5做成移動端PPT的效果。

可是不做交互,怎麼能說是HTML5作品。

下面我想推薦一款mac端才有的軟體 HYPE3

由apple的兩位員工研發,無需代碼,輕鬆上手。

不僅可以做html5 也輕輕鬆鬆做gif

界面如下

下面是hype的入門介紹視頻。

不過官方教程需要翻牆觀看。


這都是工具和html5沒有什麼關係,只是炒概念而已,你要是要製作一個網站的頁面,還是必須動用前端工程師--設計師--各種師


其實也可以這麼理解,也就是說有哪些製作簡單製作H5的平台工具,結合1年多的H5製作經驗,與大簡單分享一下!自己使用過幾個平台,主要列舉一下人人秀、易企秀、兔展,自己這三個平台有使用過,像後面用的比較少的就不一一列出各自的優勢劣勢了哈。簡單與大家分享一下!

1.人人秀

https://www.rrxiu.net

擁有豐富的H5微場景展示,微信活動強大,豐富的互動功能,可以實現多種活動功能。比如照片投票,發紅包,答題,H5小遊戲,vr全景,豐富的趣味營銷。在編輯頁面上還可以使用一鍵上傳psd,方便用戶或設計師更好上傳頁面,不用切圖單個上傳,超級方便。編輯界面簡單大氣,很容易上手,自己有使用過,所以比較了解。擁有強大的數據統計,可以多維度,實時的數據監測。

2.易企秀

http://www.eqxiu.com/site/homepage

用於企業的各種展示。總體偏向展示形式。定位為簡單的H5翻頁展示。

3.兔展

http://www.rabbitpre.com

稍微比易企秀逼格高一些,也主要是用於展示。最近視頻突出。

4.MAKA

設計師群體較多,平台的展示比較豐富

5.ih5

專業性極高,編輯界面可以用戶自己寫代碼,界面看起來也像專業的設計軟體。總體適合專業的程序和設計人員使用。

6.凡科

網站建設很厲害,可以製作H5展示和小遊戲

7.初頁

畫面唯美,定位於音樂相冊,畫冊,比較文藝范。主要用於展示。

8.意派Epub360

可以製作展示,和少量的互動功能,不過擁有免費製作的次數有限。超過10次就要付費使用。

9.搜狐快站

用於便捷的H5展示,可以實現H5展示,宣傳功能。

總結:偏向展示類型的:像易企秀、MAKA、兔展、初頁、意派Epub360、搜狐快站

偏向互動類型的:人人秀、凡科、ih5互動比較強大

每一個H5製作平台,都有自己獨特的特點。大家可以根據自己的傾向和需求來選擇使用。


不寫代碼使用HTML5最好的工具就是錢!有錢我給你寫!嫌我寫的差,我找人給你寫!


一路看過來,大家都已經推薦了很多H5製作工具了,我來推薦一款回答里沒有提到噠!!!

登登登,那就是營銷也可以很好玩的24好玩~~

無需程序和美術,簡單幾步替換素材,即可生成一款好玩的H5小遊戲

wuli24好玩走扁平卡通風,喜歡這類風格的童靴們來圍觀呀~

戳這裡:24好玩


現在用的是iebook的超級h5,簡單易用而且功能強大,

H5.Iebook.cn


vxplo互動大師 挺好用的。現在一直在試著用它,功能很全,很不錯


9466網頁助手


市面上有比較多吧。朋友推薦的秀米就不錯。


如果是真實生產項目,你需要一個前端工程師,各種模板工具生成的頁面不可能100%符合你要求。

如果只是做個推廣頁面,PPT之類的,網上搜索HTML5工具一搜一大堆,都差不多的


推薦閱讀:

HTML5 會不會使 Linux 比 Windows 更受歡迎?
jquery網頁載入進度條思路?
為什麼說html5是移動互聯網的趨勢?
做導航欄為什麼用ul>li,而不用dd dt dl?
如何系統的學習做網站?

TAG:HTML5 |