寫給大家看的H5頁面制作入門指南

1、精選文檔寫給大家看的H5頁面制作入門指南。 H5是最近兩年格外火的一個東西，什么是H5呢？通俗的說就是那些經(jīng)常刷爆微信伴侶圈的手機(jī)網(wǎng)頁了。給大家舉個例子，長按識別二維碼就可以查看。信任大家在這之前都或多或少有看到過這樣的頁面。無論是企業(yè)宣揚(yáng)，制作簡歷、邀請函，還是制作紀(jì)念冊、表白，H5有著其格外廣泛的應(yīng)用。那這樣的頁面是怎么做出來的呢？其實一般人也可以輕松上手，今日三頓就來和大家共享一些H5制作的入門技巧，教大家如何做出酷炫的酷炫的H5頁面。-國際慣例放一個機(jī)靈的名目：工欲善其事必先利其器，不管是專業(yè)的設(shè)計師還是小白，制作H5頁面都會不行避開的用到一些在線制作工具。然而目前的H5在線制作工具層

2、出不窮，不說成百上千也有幾十種之多，三頓在這里為大家推舉幾款基礎(chǔ)和有用的。-MAKA（maka.im）要說小白用哪一款H5制作工具比較好，我覺得首推的就是MAKA了。為什么這么說呢？首先MAKA的操作頁面格外簡潔，乍一看和PPT還有幾分相像。添加文字圖片都格外便利，輕松上手。其次MAKA中有大量做好的免費模板，不需要大家設(shè)計，就可以通過模板來進(jìn)行制作。而且免費模板的質(zhì)量也都格外的高，放張截圖你們感受一下。不僅有模板，內(nèi)置的素材也是一應(yīng)俱全。高清圖片、矢量圖標(biāo)，甚至連PPT中常用的數(shù)據(jù)圖表都可以直接套用。除此之外還有很多好玩的玩法，比如投票、倒計時、呼叫撥號等等的交互效果都可以一鍵實現(xiàn)，格外傻瓜

3、，大家可以自己去嘗試一下。最終，它還支持PSD格式的文件一鍵導(dǎo)入，大家可以用PS來制作頁面后直接導(dǎo)入到MAKA，生成H5頁面。-iH5（）MAKA可以說是入門級的H5制作工具，秉承著少而精的原則，我覺得MAKA也是最適合大家使用的。那么除此之外呢也有很多專業(yè)設(shè)計師會用到的H5制作工具，支持制作各種動效和交互效果，而我要給大家推舉的是這款叫ih5的在線工具。看頁面就可以發(fā)覺有一種PS的既視感，所以格外專業(yè)，而我推舉給大家的緣由是里面預(yù)備了很多好的H5教程，從新手到進(jìn)階一應(yīng)俱全。同時它也預(yù)備了很多素材和案例供大家學(xué)習(xí)，所以假如真的想好好學(xué)一下H5的話建議大家可以嘗試這個平臺。H5工具我只推舉這兩款

4、，他們之間好比就是會聲會影和AE的關(guān)系，前者簡潔易學(xué)后者高端專業(yè)卻內(nèi)置了很多教程，便利大家學(xué)習(xí)。然而其實使用這些工具也存在一些問題，比如由于都是在網(wǎng)頁上制作，會消滅卡頓。另外工具中內(nèi)置的字體也不是很多，有時候沒有方法達(dá)到我們的效果。那么作為一個“堅信PPT是萬能的”的三頓，我們完全可以利用PPT輕松的制作出H5頁面。之前三頓有寫過一篇文章，教大家用PPT中修改頁面尺寸的方法制作微信封面圖，二維碼頁等等。其實一樣的方法也可以用來做H5。-接下來就為大家送上完整的PPT制作H5教程。首先我們需要在設(shè)計選項卡幻燈片大小中修改頁面尺寸，頁面尺寸調(diào)整為全屏顯示（16:10），然后頁面方向設(shè)置縱向。這樣以

5、后一個H5頁面的樣子就消滅在我們眼前了，我們要做的就是在這個頁面上添加所需的元素。在這里做一個舉例，在頁面上添加簡潔的元素。其實這樣一個頁面就完成了，我們之后要做的是把頁面搬運(yùn)到H5在線生成工具中，這里以MAKA為例。方法也很簡潔，在左上角的文件選項卡中選擇另存為，屬性勾選JPG格式，點擊保存。然后將保存好的圖片上傳到MAKA中，一個頁面就輕松的完成了。當(dāng)然每個平臺所需的PPT頁面尺寸不同，大家可以生成之后在網(wǎng)站上進(jìn)行進(jìn)一步的調(diào)整。這個方法適合做一些簡潔的靜態(tài)頁面，假如大家想為頁面中的元素比如說剛剛圖片中的文字加一些動畫效果，那么處理就略微麻煩一些。我們需要在PPT中，將元素逐個保存為圖片，然

6、后導(dǎo)入MAKA，需要留意的是保存時要選擇保存為PNG格式，這樣元素背景才是透亮的。文字處理也是一樣，處理完后按PPT中的版式原封不動搬運(yùn)到MAKA，然后逐個添加動畫效果就可以了。學(xué)會PPT，走遍天下都不怕。真的是這樣，用最基礎(chǔ)的PPT技巧完全可以制作一個酷炫的H5頁面，讓你橫行整個公司。當(dāng)然雖然和PPT制作類似，但有幾個留意事項還是要在這里提示一下大家。首先是每個頁面上的元素不宜過多，這個和PPT道理一樣，要做到讓人一劃就過卻可以輕松地記住頁面上的信息。其次，頁面底部要適當(dāng)留空，由于每個頁面都有一個滑動的效果，雖然很常用但也會有很多人不知道。所以大家要留意留出這個空間，讓觀眾可以看得清楚。除此之外也有很多可以一鍵實現(xiàn)PPT到H5頁面轉(zhuǎn)換的工具，我給大家推舉其中的一個，PPJ.JO，上傳PPT后可以之間生成H5格外便利。經(jīng)過測試，PPT中大部分動畫效果都可以保留下來。但這個網(wǎng)頁還屬于測試階段，對于有的頁面轉(zhuǎn)化效果并不是特殊好。認(rèn)真看完今日的教程，我信任大家都可以輕松的做出一份還不錯的H5頁面，當(dāng)然這些只是最基礎(chǔ)的技巧，做出專業(yè)水準(zhǔn)的H5還需要大家去嘗試和探究。但是用這些基礎(chǔ)的技巧去應(yīng)付我們經(jīng)常需要做的邀請函、簡歷等等那確定是綽綽有余了。類似的H5制作平臺還有很多，比如Epub360、易企秀等等，