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)之類的鏈接费奸，大家點(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)單的稱呼它為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í)都是專業(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à)種類一般都非常豐富箱蟆，只需要選擇合適的動(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)有專門(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é)需要注意县匠，由于文章篇幅有限风科，在今天賣個(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è)試題哦战惊！
