Hello，早上好。
又見(jiàn)面啦，我是水韜。
上次寫(xiě)了一篇關(guān)于PPT動(dòng)畫(huà)基礎(chǔ)知識(shí)普及的推文，有的小伙伴反映輕動(dòng)畫(huà)確實(shí)是工作型匯報(bào)中需要學(xué)的的內(nèi)容，表示期待更多。
能夠挖掘更多簡(jiǎn)單卻實(shí)用的小技能，幫助大家在日常工作學(xué)習(xí)生活中，我個(gè)人非常開(kāi)心。
相信大家都在微信朋友圈里看到過(guò)一些宣傳招新活動(dòng)之類(lèi)的鏈接，大家點(diǎn)進(jìn)去會(huì)發(fā)現(xiàn)每一頁(yè)內(nèi)容都是動(dòng)態(tài)的，文字素材圖片的出現(xiàn)都有各自的動(dòng)畫(huà)，通過(guò)手指滑動(dòng)切換頁(yè)面。
那么這種看起來(lái)很高級(jí)，閱讀起來(lái)很舒服的鏈接，是怎么做的呢？
其實(shí)很簡(jiǎn)單，今天就和大家分享一下這個(gè)小技能——簡(jiǎn)易微信H5頁(yè)面。
【01】H5頁(yè)面
其實(shí)，外界簡(jiǎn)單的稱(chēng)呼它為H5頁(yè)面，其實(shí)H5這個(gè)詞涉及的知識(shí)遠(yuǎn)超動(dòng)態(tài)頁(yè)面這一說(shuō)法，這一說(shuō)法是不嚴(yán)謹(jǐn)?shù)摹?/p>
但是為了推文閱讀理解，下文所說(shuō)的H5頁(yè)面就是指簡(jiǎn)單的微信動(dòng)態(tài)鏈接頁(yè)面。
-----------
許多小伙伴平時(shí)看到的動(dòng)態(tài)頁(yè)面，可能是這些曾經(jīng)在朋友圈刷屏的H5頁(yè)面。
像以上兩個(gè)復(fù)雜案例，其實(shí)都是專(zhuān)業(yè)的團(tuán)隊(duì)花費(fèi)一定的周期，投入代碼/文案/美工等等完成的，整個(gè)的制作難度與成本都比較大，常用于大型品牌的活動(dòng)宣傳推廣，傳播效果往往也非常爆炸。
但是，今天推文要介紹的是，滿足一般個(gè)人或工作室簡(jiǎn)單宣傳招新展示為目的H5，而這種簡(jiǎn)單傳播動(dòng)態(tài)H5頁(yè)面往往是這樣的。
這種以微信傳播為主要渠道的簡(jiǎn)單的動(dòng)態(tài)宣傳H5頁(yè)面，通過(guò)圖片素材等將文案具象化，賦予了一定的動(dòng)態(tài)效果，結(jié)合了BGM效果，使原本干巴巴的純文字內(nèi)容，寓于了鮮活的生命力，吸引了更多的點(diǎn)擊與傳播。
那怎么做呢？不著急，馬上開(kāi)始今天的分享，關(guān)于H5頁(yè)面構(gòu)成與常見(jiàn)平臺(tái)推薦。
【02】頁(yè)面構(gòu)成
若要學(xué)習(xí)，必先拆解。
我們先來(lái)簡(jiǎn)單拆解一下一般H5頁(yè)面上的構(gòu)成部分，我們可以將其分為以下幾個(gè)部分：
文字內(nèi)容/圖片素材/動(dòng)畫(huà)特效/轉(zhuǎn)場(chǎng)特效/交互工具。
1，文字內(nèi)容 + 圖片素材
文字和素材是搭建整個(gè)H5頁(yè)面的門(mén)面。
①素材運(yùn)用需要與主題內(nèi)容相符合
②內(nèi)容需要經(jīng)過(guò)二次的整理，將重點(diǎn)語(yǔ)提取出來(lái)著重展示。
2，動(dòng)畫(huà)特效
和PPT動(dòng)畫(huà)相似，在H5里動(dòng)畫(huà)同樣包括進(jìn)入/強(qiáng)調(diào)/退出三個(gè)動(dòng)態(tài)效果。
在一般的H5平臺(tái)中，動(dòng)畫(huà)種類(lèi)一般都非常豐富，只需要選擇合適的動(dòng)畫(huà)，設(shè)置好動(dòng)畫(huà)時(shí)間，順序，就可以使整個(gè)頁(yè)面動(dòng)起來(lái)。
進(jìn)入動(dòng)畫(huà)：
強(qiáng)調(diào)動(dòng)畫(huà)：
退出動(dòng)畫(huà)：
轉(zhuǎn)場(chǎng)特效：
默認(rèn)的轉(zhuǎn)場(chǎng)是頁(yè)面向下推動(dòng)，如果我們想要其他切換效果，也可以進(jìn)行設(shè)設(shè)置，不同平臺(tái)的設(shè)置位置不同。
此處以Equb360為例，展示部分切換效果。
3，交互工具
指的是制作H5的人，通過(guò)H5與觀看者互動(dòng)的過(guò)程，基礎(chǔ)的交互主要是信息留存作用，主要包括鏈接跳轉(zhuǎn)，表單功能，二維碼，投票留言，地圖功能等。
在此基礎(chǔ)上，也可以研究研究更高級(jí)的玩法，例如h5小游戲，Layer容器，一鏡到底，重力感應(yīng)，走馬燈等等。
意派 Equb360部分交互組件 · 界面
【03】平臺(tái)推薦
平臺(tái)推薦，以個(gè)人使用的體驗(yàn)出發(fā)，從動(dòng)畫(huà)功能，操作界面，花樣玩法等因素上，將他們分為入門(mén)級(jí)/中級(jí)。
Ps.高級(jí)的這里不介紹…因?yàn)榘硾](méi)達(dá)到。
一，首先是初級(jí)的
初級(jí)網(wǎng)站可以滿足大多數(shù)小伙伴對(duì)動(dòng)畫(huà)頁(yè)面的操作，通過(guò)套用模板，簡(jiǎn)單添加素材，替換文本，設(shè)置動(dòng)畫(huà)，簡(jiǎn)單交互等，比較容易制作出活動(dòng)宣傳，職位招聘，年終回顧等動(dòng)態(tài)頁(yè)面。
MAKA--http://maka.im/home
MAKA是我最早接觸的一個(gè)H5網(wǎng)站，忽略迷一樣的名字。
優(yōu)點(diǎn)：操作比較簡(jiǎn)便，模板數(shù)量多，套用模板的話上手很快，素材庫(kù)里能使用的素材也可直接替換。
缺點(diǎn)：高級(jí)玩法比較少，動(dòng)畫(huà)庫(kù)相對(duì)不夠豐富。
易企秀--http://www.eqxiu.com/
和MAKA一樣，是一個(gè)基礎(chǔ)入門(mén)的網(wǎng)站，素材同樣很多，也比較適合新手直接使用練習(xí)。
缺點(diǎn)：官網(wǎng)版面很亂，操作不夠舒適
秀米--https://xiumi.us/#/
很多人對(duì)秀米的第一印象就是：推文排版。
其實(shí)在秀米里，同樣可以制作一些好玩的動(dòng)態(tài)H5頁(yè)面。
但是相比起前兩個(gè)網(wǎng)站版面的布局，秀米的設(shè)置比較獨(dú)立，沒(méi)有專(zhuān)門(mén)的動(dòng)畫(huà)設(shè)置板塊，所有設(shè)置都在點(diǎn)擊素材以后才會(huì)出現(xiàn)相應(yīng)按鈕。
二，其次是中級(jí)的
挑戰(zhàn)中級(jí)的小伙伴其實(shí)是追求原創(chuàng)了，在比較熟悉設(shè)計(jì)，至少是掌握了一定的設(shè)計(jì)水平，熟悉動(dòng)畫(huà)組合，有一定審美的小伙伴后，可以通過(guò)這些平臺(tái)創(chuàng)建一些原創(chuàng)的H5頁(yè)面。
這個(gè)時(shí)候我介紹三個(gè)功能比較全面的H5制作平臺(tái)。
兔展--http://www.rabbitpre.com/
兔展這個(gè)平臺(tái)的功能比較齊全，動(dòng)畫(huà)樣式也比MAKA，易企秀多，交互組件也足夠滿足一般宣傳。
特點(diǎn)：支持導(dǎo)入PSD文件，只需要將設(shè)計(jì)好的素材添加動(dòng)畫(huà)即可。
意派?Epub360--http://www.epub360.com/
意派?Epub360，是我使用得比較多的H5平臺(tái)。
特點(diǎn)：動(dòng)畫(huà)多，進(jìn)階玩法比較多，例如重力感應(yīng)，Layer頁(yè)面等，這些玩法需要有一定的是動(dòng)畫(huà)設(shè)計(jì)與其他技能支撐~ 可以做出很多不錯(cuò)的效果。
動(dòng)態(tài)流程圖
PP匠--http://www.ppj.io/
PP匠名字就帶了兩個(gè)P字，想必也是與PPT有關(guān)了。
沒(méi)錯(cuò)，利用這個(gè)網(wǎng)站，我們可以直接在PPT中放置好素材，設(shè)置好動(dòng)畫(huà)，然后直接在PP匠這個(gè)網(wǎng)站上傳PPT源文件即可。
以下是一周的好朋友@杜老師（為卡姐）做的簡(jiǎn)易潮州美食攻略。
P.s: 除了以上介紹的H5制作平臺(tái)以外，還有包括iH5，人人秀，木疙瘩等很多平臺(tái)可以了解以下。
【04】結(jié)語(yǔ)
關(guān)于簡(jiǎn)易的動(dòng)態(tài)H5頁(yè)面，今天介紹了基本的頁(yè)面構(gòu)成以及相關(guān)的制作平臺(tái)，在試著操作幾個(gè)平臺(tái)之后，相信大家會(huì)找到一個(gè)適合自己的制作平臺(tái)。
在本期推文的最后留了一個(gè)小技能點(diǎn)：通過(guò)PPT制作H5頁(yè)面。
具體如何通過(guò)PPT制作，除了網(wǎng)站安利意外還有一些細(xì)節(jié)需要注意，由于文章篇幅有限，在今天賣(mài)個(gè)關(guān)子，暫時(shí)不做介紹。
分享完畢，希望有助。
----
寫(xiě)在最后：
其實(shí)，H5的功能非常強(qiáng)大。
在很多人的印象中，H5也許只是一個(gè)圖文展示工具，最多加一些特效。實(shí)則不然，H5也能做游戲做測(cè)試做非常炫酷的效果，而且非常簡(jiǎn)單。
比如，很久以前大夢(mèng)老師做過(guò)的一個(gè)小測(cè)試，就是用H5做得：
使用工具：iH5
掃碼二維碼文直接進(jìn)入
▼▼▼
而且還可以自動(dòng)生成測(cè)試結(jié)果、分?jǐn)?shù)，只需要設(shè)置一個(gè)計(jì)數(shù)器就可以了。之后有機(jī)會(huì)詳細(xì)寫(xiě)教程。
這樣的例子在iH5上還有很多，也有很多用H5制作的精良游戲，比小程序好玩多了。
記得做測(cè)試題哦！
