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