H5是HTML5的簡稱,百度給出的定義估計只有程序員們看得懂了,所以小伙伴們沒有必要去深究這其中的含義,你只需知道運用這個軟件就好了,你只需知道即便你不懂代碼,也可以用H5制作出一個游戲,比如14年火爆朋友圈的圍住神經(jīng)貓,也可以做出一個簡易的app,也可以做出形象且傳播性強的產(chǎn)品展示頁面。
H5具有強大的交互功能,匹配了當下強調(diào)的用戶參與感,它改變了傳統(tǒng)的信息傳播方式,能夠快速靈活的在手機端進行展示和傳播。但,想要做出很驚艷的H5還是要花費一番功夫的,很多小伙伴都說在做H5的時候,感覺沒有靈感,不知道如何下手。今天我和小伙伴們講一下有哪些制作H5的工具,哪些比較合適小白,哪些交互性更強一些,同時整理了一些案例,希望能夠幫助小伙伴們接觸到更多的知識,以后在做H5的就不會那么困難啦。
第一部分:H5制作工具大集合
易企秀:
這個是我剛接觸H5用的制作工具,簡單易學(xué),如果你本身不是設(shè)計出身,對比例美學(xué)沒什么概念 ,對配色技巧一竅不通,那也沒有關(guān)系,有很多模板給你參考,直接套用就好了,一些基本的邀請函、企業(yè)招聘、企業(yè)宣傳、產(chǎn)品展示、都是可以做的,你只需要根據(jù)后臺的步驟去編輯就好了,功能比較傻瓜,主要是展示類的功能,不能滿足對設(shè)計要求比較高的小伙伴。

兔展:
兔展的廣告語是“像PPT一樣的移動H5頁面”,有免費和收費的模板,分行業(yè)來整理H5的案例,在操作上和易企秀差不多,只要把這兩個軟件其中一個的操作步驟熟練了,另一個也就沒什么問題,就像你學(xué)會了PS,就不怕AI不會一樣。

MAKA:
我知道這個制作工具是因為MAKA的一個招聘H5,這個制作工具的頁面非常扁平化,看著舒服。里邊的案例是比較精美的,相對于易企秀和兔展更有設(shè)計感。當然也是分免費和收費的,免費的模板沒有自定義的動效,也不能添加外鏈。一些精美的模板是需要收費的,有些模板需要19軟妹幣,有些需要49軟妹幣。這個制作工具有APP,是可以在手機端操作的。

MAKA手機端操作頁面:

最酷網(wǎng):
最酷里邊的模板選用是不需要付費的,但是如果你要加上自己的LOGO和尾頁版權(quán)就需要收費了,后臺操作功能和其他的工具差不多,就和我們做PPT添加動態(tài)效果一樣的。有些互動的控件是需要購買的,比如微信紅包,商品試用、優(yōu)惠券、搖一搖等等。

初頁:
這是一款很傻瓜式的H5制作工具,個人認為這個制作工具可以用作相冊展示,因為沒有講究什么設(shè)計概念,對于零基礎(chǔ)的設(shè)計小伙伴來說,這一款H5制作工具是最適合的。小伙伴們只要添加文字和圖片,就可以在線生成一個H5了。
這是網(wǎng)頁的制作頁面

初頁手機端操作頁面

以上的這五個H5制作工具都是很容易就上手的,即便你沒有任何的設(shè)計基礎(chǔ),也能分分鐘制作出簡單的H5頁面,比如電子相冊,婚禮邀請函、產(chǎn)品宣傳、節(jié)日祝?;蛘弑戆字?,這幾個制作工具完全能夠滿足你的要求。類似這樣的制作工具還有l(wèi)ive app、me、秀米秀制作等等。大家都可以上這幾個網(wǎng)站練手一下,看看那個平臺更加合適自己,這些制作工具的操作都是具有相似性的,只要把一個軟件都學(xué)會了,那么其他的軟件就不會有多大的問題的。
下面再給小伙伴們整理一下具有難度的H5制作工具,主要是針對具有設(shè)計基礎(chǔ)的設(shè)計師。
首推互動大師vxplo,這是我們設(shè)計師用的制作工具啦,操作起來可沒有像上面的辣么簡單了,需要小伙伴們花費一定的時間去研究,因為有些功能還是比較難以理解的,不過小伙伴們可以加入他們的QQ群噢,里邊會有不少的牛人幫助你快速學(xué)會用這個軟件的,平臺上也有一些教學(xué)案例和視頻,并且分行業(yè)來整理相關(guān)的案例,小伙伴可以在網(wǎng)頁上搜索相關(guān)的行業(yè)精品。


互動大師的功能性是比較強大的,看一下操作平臺就知道了。

第二個就是Epub360意派,其號稱是“專業(yè)級H5交互利器”其功能性就不用說了,一張圖告訴大家它的功能有多強大??赡芎芏嘈』锇槎歼€不知道這些特色的交互組件是什么意思,這個就留著下一期再和小伙伴們講吧。

操作頁面和互動大師是差不多的,這兩個軟件其實還是有一定的相通性的。

這兩款制作工具功能是比較強大的,交互性比較強,這就意味著學(xué)起來的難度是比較大的,對設(shè)計要求比較高,想在頁面里加入一些高逼格的gif圖,想增加和用戶的互動性,那么這兩個軟件是要好好學(xué)的。
第二部分:H5素材和靈感大集合
我自己認為好的H5頁面是要有一定的設(shè)計感的,所以今天我們就來講一講,如何去找一些優(yōu)秀的H5案例作為參考素材,如何借鑒別人做得好的方面。
首先,我們先來講PC端的H5素材平臺。我個人覺得當大家不知道去哪里找案例和素材的時候,完全可以在一些制作H5的平臺找一些案例。今天介紹兩個匯聚最新H5案例的網(wǎng)站。
第一個是愛果果:


這里收藏了最新且比較優(yōu)秀的H5案例,小伙伴沒有靈感,不知道怎么做的時候,就來這里看看,說不定會給你啟發(fā)噢。
第二個是黃蜂網(wǎng):
在H5營銷案例上,黃蜂網(wǎng)和愛果果都是收集比較新的案例,但是黃蜂網(wǎng)有網(wǎng)頁設(shè)計、電商淘寶、手機界面、UI界面等等的素材。這里的素材比較豐富,小伙伴們要定時去這個網(wǎng)站看看,會有不同的收獲的。

以上的這兩個平臺是我用電腦的時候,經(jīng)常去看的兩個網(wǎng)站,會定期收錄最新的H5案例,看到好的案例就收藏起來,我通常是看到好的案例,就把二維碼保存下來了建立一個文件夾,然后在命名是哪個品牌的H5,平常有時間的時候就多看看,或者做H5找不到素材的時候就去看看。
第三部分:集合H5案例的微信公眾號
第一個微信公眾號:H5創(chuàng)意匯
這里有10000個移動營銷案例,小伙伴們可以在微信公眾號里用關(guān)鍵詞進行搜索相關(guān)行業(yè)的案例,看到好的微信公眾號是可以隨手收藏起來。
第二個微信公眾號:愛分享H5
這個微信公眾號可以直接制作H5的,里邊也有一些案例,但是都是比較普通的,其特色就是能夠在公眾號里直接做H5,但也是比較簡單的。
第三個微信公眾號:H5案例分享
這個微信公眾號會定期的推送各種形式的H5案例集合,比如邀請函、比如護膚品、比如愛情婚姻等等,同時也會收錄一些最近質(zhì)量高的H5。微信公眾號里邊也能搜索各類行業(yè)的H5,還有微信群噢,可以加入微信群進行學(xué)習(xí)噢。
第四個微信公眾號:H5圈
一個集合各行業(yè)H5案例的微信公眾號,分類比較清晰,小伙伴們在菜單欄那里找到自己的行業(yè),然后點擊進去就可以找到很多案例啦。
第五個微信公眾號:H5說
這個微信公眾號也是集合不少的優(yōu)秀H5,不過分類沒有那么清晰,不過我覺得優(yōu)秀的案例都是可以看看的,看多了、下手做的時候就會有靈感啦,所謂的厚積薄發(fā)就是這個意思。
第六個微信公眾號:拇指部落
這個微信公眾號定位很清晰,收集當下熱門的H5互動營銷案例,并且是專門做H5營銷游戲定制,這個對于剛接觸H5的小伙伴這個有點難度的,但用H5做出的游戲,互動性很強哇,就像當年火爆朋友圈的“圍住神經(jīng)貓”,想在H5這一塊發(fā)展的小伙伴可以深入研究一下。
第四部分:經(jīng)典H5案例集合
第一個:S級轎跑車 奔馳著的藝術(shù)殿堂
推薦理由:創(chuàng)意非常好,互動性很強,畫面很震撼,有一種看了還想看的感覺。









第二個:有本事一口氣看完
推薦理由:這個動態(tài)做得真的很好,畫面和動態(tài)交相輝映,讓人有一種身臨其境的感覺。




第三個:致另一個無用的我
推薦理由:表達的主題很有共鳴,一下就瘋傳了朋友圈是有理由的。







第四個:美到?jīng)]有朋友,趕緊來圍觀
推薦理由:主要看畫面,哈哈哈哈


以上這幾個H5案例是我比較喜歡的,不管是主題創(chuàng)意,還是畫面設(shè)計都深得我心,但也不是那么輕易就做得出來的,現(xiàn)在放上來分享給小伙伴們。H5是一門新的領(lǐng)域,做得好的人并不是很多,如果有一定平面基礎(chǔ)的小伙伴可以往這方面發(fā)展,因為這一行的人才很稀缺的,未來的傳播方式一定是以H5為主的。有些小伙伴如果只是想做一些產(chǎn)品的展示,那么易企秀、兔展、MAKA等制作工具就可以滿足啦,如果需要互動性強一點,就需要用到其他高級的軟件了。希望小伙伴們都能做出酷炫的H5,能夠通過H5,榮登人生巔峰。