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

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

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

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

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

5、這樣以后一個H5頁面的樣子就出現(xiàn)在我們眼前了，我們要做的就是在這個頁面上添加所需的元素。在這里做一個舉例，在頁面上添加簡單的元素。其實(shí)這樣一個頁面就完成了，我們之后要做的是把頁面搬運(yùn)到H5在線生成工具中，這里以MAKA為例。方法也很簡單，在左上角的文件選項(xiàng)卡中選擇另存為，屬性勾選JPG格式，點(diǎn)擊保存。然后將保存好的圖片上傳到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制作類似，但有幾個注意事項(xiàng)還是要在這里提醒一下大家。首先是每個頁面上的元素不宜過多，這個和PPT道理一樣，要做到讓人一劃就過卻可以輕松地記住頁面上的信息。第二，頁面底部要適當(dāng)留空，因?yàn)槊總€頁面都有一個滑動的效果，雖然很常用但也會有很多人不知道。所以大家要注意留出這個空間，讓觀眾可以看得清楚。除此之外也有很多可以一鍵實(shí)現(xiàn)PPT到H5頁面轉(zhuǎn)換的工具，我給大家推薦其中的一個，PPJ.JO，上傳PPT后可以之間生成H5非常方便。經(jīng)過測試，PPT中大部分動畫效果都可以保留下來。但這個網(wǎng)頁還屬于測試階段，對于有的頁面轉(zhuǎn)化效果并不是特別好。仔細(xì)看完今天的教程，我相信大家都可以輕松的做出一份還不錯的H5頁面，當(dāng)然這些只是最基礎(chǔ)的技巧，做出專業(yè)水準(zhǔn)的H5還需要大家去嘗試和探索。但是用這些基礎(chǔ)的技巧去應(yīng)付我們經(jīng)常需要做的邀請函、簡歷等等那絕對是綽綽有余了。類似的H5制作平臺還有很多，比如Epub360、易企秀等等，我