刷屏朋友圈的那些H5，做起來居然這么簡單

時間：2023-07-05 12:30:02 | 來源：網(wǎng)站運營

時間：2023-07-05 12:30:02 來源：網(wǎng)站運營

刷屏朋友圈的那些H5，做起來居然這么簡單：Hello，早上好。

又見面啦，我是水韜。

上次寫了一篇關于PPT動畫基礎知識普及的推文，有的小伙伴反映輕動畫確實是工作型匯報中需要學的的內(nèi)容，表示期待更多。

能夠挖掘更多簡單卻實用的小技能，幫助大家在日常工作學習生活中，我個人非常開心。




相信大家都在微信朋友圈里看到過一些宣傳招新活動之類的鏈接，大家點進去會發(fā)現(xiàn)每一頁內(nèi)容都是動態(tài)的，文字素材圖片的出現(xiàn)都有各自的動畫，通過手指滑動切換頁面。










那么這種看起來很高級，閱讀起來很舒服的鏈接，是怎么做的呢？

其實很簡單，今天就和大家分享一下這個小技能——簡易微信H5頁面。







【01】H5頁面


其實，外界簡單的稱呼它為H5頁面，其實H5這個詞涉及的知識遠超動態(tài)頁面這一說法，這一說法是不嚴謹?shù)摹?br>
但是為了推文閱讀理解，下文所說的H5頁面就是指簡單的微信動態(tài)鏈接頁面。

-----------

許多小伙伴平時看到的動態(tài)頁面，可能是這些曾經(jīng)在朋友圈刷屏的H5頁面。







http://bmw2.thefront.com.cn/m2_2016/?from=groupmessage&isappinstalled=0 (二維碼自動識別)

http://wefire.qq.com/act/a20150826kris/wb/index.htm (二維碼自動識別)

像以上兩個復雜案例，其實都是專業(yè)的團隊花費一定的周期，投入代碼/文案/美工等等完成的，整個的制作難度與成本都比較大，常用于大型品牌的活動宣傳推廣，傳播效果往往也非常爆炸。

但是，今天推文要介紹的是，滿足一般個人或工作室簡單宣傳招新展示為目的H5，而這種簡單傳播動態(tài)H5頁面往往是這樣的。







http://u6879498.viewer.maka.im/k/NG6HC1ZR?t=1524238159914 (二維碼自動識別)

http://viewer.maka.im/k/T_PD5T25K6?mode=storeTemplate&TempAdmode=true (二維碼自動識別)

這種以微信傳播為主要渠道的簡單的動態(tài)宣傳H5頁面，通過圖片素材等將文案具象化，賦予了一定的動態(tài)效果，結合了BGM效果，使原本干巴巴的純文字內(nèi)容，寓于了鮮活的生命力，吸引了更多的點擊與傳播。

那怎么做呢？不著急，馬上開始今天的分享，關于H5頁面構成與常見平臺推薦。







【02】頁面構成


若要學習，必先拆解。

我們先來簡單拆解一下一般H5頁面上的構成部分，我們可以將其分為以下幾個部分：




文字內(nèi)容/圖片素材/動畫特效/轉(zhuǎn)場特效/交互工具。

1，文字內(nèi)容 + 圖片素材




文字和素材是搭建整個H5頁面的門面。




①素材運用需要與主題內(nèi)容相符合

②內(nèi)容需要經(jīng)過二次的整理，將重點語提取出來著重展示。







2，動畫特效




和PPT動畫相似，在H5里動畫同樣包括進入/強調(diào)/退出三個動態(tài)效果。




在一般的H5平臺中，動畫種類一般都非常豐富，只需要選擇合適的動畫，設置好動畫時間，順序，就可以使整個頁面動起來。

進入動畫：













強調(diào)動畫：













退出動畫：













以上展示來自兔展，后邊會介紹更多的平臺供大家選擇。

轉(zhuǎn)場特效：




默認的轉(zhuǎn)場是頁面向下推動，如果我們想要其他切換效果，也可以進行設設置，不同平臺的設置位置不同。













此處以Equb360為例，展示部分切換效果。










“眾創(chuàng)杯”創(chuàng)業(yè)大賽 · 宣傳H5 @水韜




3，交互工具




指的是制作H5的人，通過H5與觀看者互動的過程，基礎的交互主要是信息留存作用，主要包括鏈接跳轉(zhuǎn)，表單功能，二維碼，投票留言，地圖功能等。

在此基礎上，也可以研究研究更高級的玩法，例如h5小游戲，Layer容器，一鏡到底，重力感應，走馬燈等等。







意派 Equb360部分交互組件 · 界面







【03】平臺推薦


平臺推薦，以個人使用的體驗出發(fā)，從動畫功能，操作界面，花樣玩法等因素上，將他們分為入門級/中級。

Ps.高級的這里不介紹…因為俺沒達到。

一，首先是初級的

初級網(wǎng)站可以滿足大多數(shù)小伙伴對動畫頁面的操作，通過套用模板，簡單添加素材，替換文本，設置動畫，簡單交互等，比較容易制作出活動宣傳，職位招聘，年終回顧等動態(tài)頁面。

MAKA--http://maka.im/home













MAKA是我最早接觸的一個H5網(wǎng)站，忽略迷一樣的名字。

優(yōu)點：操作比較簡便，模板數(shù)量多，套用模板的話上手很快，素材庫里能使用的素材也可直接替換。

缺點：高級玩法比較少，動畫庫相對不夠豐富。

易企秀--http://www.eqxiu.com/













和MAKA一樣，是一個基礎入門的網(wǎng)站，素材同樣很多，也比較適合新手直接使用練習。

缺點：官網(wǎng)版面很亂，操作不夠舒適

秀米--https://xiumi.us/#/













很多人對秀米的第一印象就是：推文排版。

其實在秀米里，同樣可以制作一些好玩的動態(tài)H5頁面。




但是相比起前兩個網(wǎng)站版面的布局，秀米的設置比較獨立，沒有專門的動畫設置板塊，所有設置都在點擊素材以后才會出現(xiàn)相應按鈕。

二，其次是中級的

挑戰(zhàn)中級的小伙伴其實是追求原創(chuàng)了，在比較熟悉設計，至少是掌握了一定的設計水平，熟悉動畫組合，有一定審美的小伙伴后，可以通過這些平臺創(chuàng)建一些原創(chuàng)的H5頁面。

這個時候我介紹三個功能比較全面的H5制作平臺。

兔展--http://www.rabbitpre.com/







兔展這個平臺的功能比較齊全，動畫樣式也比MAKA，易企秀多，交互組件也足夠滿足一般宣傳。

特點：支持導入PSD文件，只需要將設計好的素材添加動畫即可。

意派?Epub360--http://www.epub360.com/







意派?Epub360，是我使用得比較多的H5平臺。


特點：動畫多，進階玩法比較多，例如重力感應，Layer頁面等，這些玩法需要有一定的是動畫設計與其他技能支撐~ 可以做出很多不錯的效果。










動態(tài)流程圖




PP匠--http://www.ppj.io/










PP匠名字就帶了兩個P字，想必也是與PPT有關了。

沒錯，利用這個網(wǎng)站，我們可以直接在PPT中放置好素材，設置好動畫，然后直接在PP匠這個網(wǎng)站上傳PPT源文件即可。

以下是一周的好朋友@杜老師（為卡姐）做的簡易潮州美食攻略。







http://h5.ppj.io/afZCT1WP/index.html?v=5 (二維碼自動識別)







P.s: 除了以上介紹的H5制作平臺以外，還有包括iH5，人人秀，木疙瘩等很多平臺可以了解以下。




【04】結語


關于簡易的動態(tài)H5頁面，今天介紹了基本的頁面構成以及相關的制作平臺，在試著操作幾個平臺之后，相信大家會找到一個適合自己的制作平臺。

在本期推文的最后留了一個小技能點：通過PPT制作H5頁面。

具體如何通過PPT制作，除了網(wǎng)站安利意外還有一些細節(jié)需要注意，由于文章篇幅有限，在今天賣個關子，暫時不做介紹。

分享完畢，希望有助。




----




寫在最后：




其實，H5的功能非常強大。

在很多人的印象中，H5也許只是一個圖文展示工具，最多加一些特效。實則不然，H5也能做游戲做測試做非常炫酷的效果，而且非常簡單。




比如，很久以前大夢老師做過的一個小測試，就是用H5做得：




使用工具：iH5













掃碼二維碼文直接進入

▼▼▼







https://file68a0082b850c.h5sys.cn/idea/gPePHs5 (二維碼自動識別)







而且還可以自動生成測試結果、分數(shù)，只需要設置一個計數(shù)器就可以了。之后有機會詳細寫教程。













這樣的例子在iH5上還有很多，也有很多用H5制作的精良游戲，比小程序好玩多了。













記得做測試題哦！






















#你的小哥哥忽然出現(xiàn)#







一周進步〡讓年輕轟炸你的每個興趣點。

微信公眾號：關注「一周進步」（weekweekup）

青年興趣課堂，每周一場訓練營，歡迎關注，讓我們一起進步

更多干貨歡迎閱讀：一周進步文章精選