相關(guān)新聞
相信打開這篇文章的朋友，或多或少都對 H5頁面有一定了解，即便你不知道它為什么叫 H5，但你也一定在朋友圈看到過類似這樣的玩意兒。
或者看看這個：
當(dāng)然，還有比這個炫酷一百倍的 H5案例，在這里先不放了，免得讓大家覺得做這玩意兒挺費勁，而且呢，一般來說，那些復(fù)雜的案例，大多是專業(yè)團隊來協(xié)力完成，一己之力，很難完成，所以，咱們就聊點簡單的。
如何做一個簡單的，能上下自由滑動的 H5頁面呢？
其實做這玩意兒，道理跟 PPT 制作有相通之處，需要有內(nèi)容、素材、頁面、交互（動畫）效果以及支撐以上元素的軟件（或者網(wǎng)站）。
關(guān)于內(nèi)容和素材，主要看你要做的 H5 是干嘛用的，具有特殊性，在這里，先不多說，主要說說頁面、動畫以及相關(guān)平臺這3個方面。
1、頁面。
我們知道， H5頁面一般是在手機上瀏覽的，而 PPT 則在電腦上瀏覽的多一點，所以，頁面就肯定會發(fā)生相應(yīng)變化。
我查閱了很多資料，手機頁面一般支持640px * 1080px，不懂這是什么意思也沒關(guān)系，我在這里想說的是，如果你想用 PPT 來做 H5頁面，那么，就按照下面的這個厘米數(shù)來設(shè)置頁面：
也就是說，你要從制作 PPT 時橫屏的習(xí)慣，改為豎屏：
咋一看很簡單，不就是從橫著做東西，轉(zhuǎn)變?yōu)樨Q著做東西嗎？
雖然這是一個很簡單的轉(zhuǎn)變，但真的沒有你想象中的容易，我見過很多做畫冊的設(shè)計師，因為習(xí)慣了一種設(shè)計方式，當(dāng)讓他改為做海報時，短時間就很難適應(yīng)過來。
在這里提醒一下。
2、動畫與平臺。
之所以把這兩部分合在一起來說，是因為不同的平臺，有不同的動畫效果，如果你想做的簡單一點，那推薦你使用以下兩個平臺：
MAKA，這名字起的挺魔性，網(wǎng)址是：http://www.maka.im
易企秀，這個平臺比較容易上手，網(wǎng)址是：http://eqxiu.com/home
給大家看一下他們后臺的操作界面，拿 MAKA 為例，基本上跟 PPT 一樣，選中元素，添加動畫，或鏈接。
可以使用的動畫效果有：
看起來非常的直觀，簡單。
當(dāng)然，如果你想做復(fù)雜的動畫，你可以去這個平臺, ih5.cn。
看看這后臺的操作界面，就能感受到復(fù)雜程度：
不過，復(fù)雜的好處是能做出更酷的效果，而這，正是上面兩個簡單平臺做不了的。
好了，以上就是關(guān)于 H5 制作前，需要了解的基本常識，接下來，咱們就動手，做一個完整的 H5。
考慮到我使用 PPT 比較順手，就拿它給大家做演示。
1、首先呢，先建一個頁面，不知道怎么修改頁面尺寸的可以看我之前寫的這篇文章：如何制作一份高清版的幻燈片？
2、準(zhǔn)備相關(guān)的內(nèi)容和素材，這一部分，就看你想做什么方面的內(nèi)容了。我在蘋果官網(wǎng)找了一些關(guān)于 APPLE WATCH 的資料。
蘋果手表還是很酷的。
3、把 PPT 頁面保存為 PNG 格式的圖片。為什么是這個格式呢？因為相較于其他格式，如jpg，gif等而言，這個是質(zhì)量最高的。
這時候，咱們就能得到幾張圖片型的 PPT 頁面：
好了，第一大部分工作搞定，開始第二部分，選擇合適的平臺，發(fā)布出來。
咱們當(dāng)然選一個簡單易上手的，易企秀或 MAKA 都行，我還是用后者示范吧。
4、進入后臺，看到這個界面，跟 PPT 的操作界面是不是很相似？左邊是 PPT 頁面的普通視圖，中間是頁面，右邊是相關(guān)操作功能：
5、點擊紅線圈著的這個按鈕，把圖片依次上傳到相關(guān)頁面中：
又看到了 PPT 界面的樣子：
6、選擇右上角的保存/發(fā)布，即可搞定一份簡單的，可上下滑動的H5頁面，可以按住下面的圖片，看一下我做的：
但注意，這時候，你的 H5 頁面還沒有被命名和提供介紹，如果發(fā)給朋友或發(fā)到朋友圈時，會看到是這樣的：
所以呢，我們需要個性化命名，在這里可以對 H5進行相關(guān)介紹，并且可以更換頭像：
當(dāng)我們更換之后，再次發(fā)送，就變成了這樣：
以上，就是一份 H5頁面誕生的一些流程，如果你也想動手實踐一下，可以在公眾號對話界面回復(fù)【H5】倆字，我把我做的頁面給你。
