H5是什麼？ 5分鐘就能全面了解什麼是html5頁面

H5突然火了

透過微信和朋友圈的快速發展，H5靠著無需下載、即點即用的屬性迅速上位，一躍變成炙手可熱的小鮮肉。相較於電視、雜誌、戶外廣告等傳統媒體逐年下降的趨勢，品牌行銷在數位和行動方面的投入在逐年上升，而且，在所有通路預算中行動科技的投入成長最快，遠高於其他管道的增長。行動行銷已是大勢所趨。

那麼，H5是什麼技術？

H5是什麼意思？ H5，是HTML5的簡稱，它就是一種高階網頁技術。

html與html5有什麼差別？

只不過大家普遍接受的那個網頁技術版本是HTML4，而這個版本是在1997年發行的。相較於H4，H5有更多的互動和功能，最大的優點之一是在行動裝置上支援多媒體。

還是沒聽懂？

這麼說吧，我們平常看到那些邀請函、投影片、小遊戲…都是H5網頁，它跟我們平常上網看到的那些網頁本質上沒有任何差別。

H5能做什麼?

這邊我大致做了三個分類：

1、品牌傳播：形式一般為品牌發布、總結報告、公益傳遞、人事招募；

2、活動推廣：形式一般為賀卡邀請、遊戲互動、答題有獎；

3、產品展示：形式一般為故事敘述、表演展示。

下面跟大家談談這3種類型的H5頁面

品牌傳播型H5－等同於一個品牌的微官網，更傾向於品牌形象塑造，向使用者傳達品牌的精神態度。在內容上倡導一種態度、一個主旨，在設計上則需要運用符合品牌氣質的視覺語言，讓使用者對品牌留下深刻印象。例如，品牌傳播之品牌發布型、品牌傳播之總結報告型、品牌傳播之公益傳遞型、品牌傳播之人事招募型等

如何設計品牌傳播型H5頁？

關於內容

適當借力－尋找共鳴

#熱點結合－業務板塊完美融合

#關於視覺

整體－氛圍渲染

細節刻畫－人物、元素配合

H5案例欣賞範例：

品牌傳播之品牌發布型

#騰訊－生命之下，想像之上

###############活動推廣型H5#######－活動營運頁面需要有更強的互動、更高品質、更具話題性的設計來促成使用者分享傳播，行成爆炸性的傳播效應。 ###活動推廣之賀卡邀請型、###活動推廣之遊戲互動型###、###活動推廣之答題有禮型等############如何設計###活動推廣型H5###頁？ ###

關於內容

標題黨－做個妥妥的標題黨，先到碗裡來再說

#參與感－門檻低易參與，內容引發共鳴，利益驅使轉發

關於視覺

細節與統一－復古擬物的視覺風格，那字體就不能過於現代；幽默調侃的調調，那文案措辭就不能太嚴肅；打情緒內容牌的，動效就不能太花俏。

衝擊性－最好閃瞎你的鈦金狗眼，讓使用者忍不住帶著「矮油不錯，這個頁面有點diao噢」的心情點擊分享

舉例：

活動推廣之答題有禮型

途風旅遊網：時光倒回9年，你會選擇怎樣人生？

產品展示型H5－聚焦於產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。例如，產品展示之故事敘述型、產品展示之性能展示型等

如何設計 #產品展示型H5頁面？

關於內容

講個好故事－引起共鳴

差異化展示－尋找產品個性與調性

關於視覺

#

整體－清晰、簡潔

細節刻畫－產品為主，效能刻畫

舉例：

產品展示之故事敘述型

一封來自1947年的明信片

#H5頁面從形式上和內容上如何設計走入人心？

形式上－

1、投影片式：適用於頻繁、小型的需求。 例如：定期發布的內容，幾乎零預算；結合熱點的行銷，週期極短。

2、互動式動畫：製作週期和成本比較高，需要事先規劃。優質的H5大約在兩週到4週左右，也有可能更長。適用於例如： 中小型活動/品牌事件的傳播；大型活動/品牌事件的傳播。

3、功能型：輕交互重功能的功能型H5製作週期較短、成本也不高，成功的關鍵不在於酷炫的交互，而在於用戶需求的掌握以及後續的運作。適用於例如： 品牌帳號的粉絲經營。

4、H5能在你心中待多久？

根據騰訊今年發布的《行動頁面使用者行為報告》提出的幾個數據，可以給到大家一些參考：

• H5頁面熱度一般只能持續兩天；

• 載入超過5秒就會有74%的使用者離開頁面；

• 中午12點和晚上10點是頁面訪問的高峰期；

• #用戶大部分（89.9%）喜歡上下滑動或右點擊，只有10.1%會左點擊；

• 層級越深流失越多，在第五頁的時候只剩下一半不到（48.2%）；

• 平均分享率12.68%。

• 怎麼跟H5保持熱戀關係？

內容上—

1、故事化：不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅裡，學會說故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。

2、場景化：H5的設定中，融入如辦公大樓、地鐵站這些場景，一是讓使用者能在參與中，找到熟悉感以更容易的接受裡面的訊息，二是也是最重要的，場景承載的品牌訊息，能在使用者過後在某個特定場所裡，喚起他們的認知，從而加深使用者對品牌的印象。

3、強互動：加入互動機制，能讓使用者進一步感知體驗H5宣傳的品牌產品，提升對產品的購買慾望。

4、參與感：結合產品本身的特性、使用者的喜好進行參與機制的設定。

5、社交性：要讓品牌能傳播得更遠還需在H5上融入社交性，借助用戶的社交關係鏈傳播。社交需求是用戶存在社群媒體的核心，通常用戶會透過談資、幫助、比較、炫耀、窺視.....

#與好友維持或促進社交關係。因此，在H5設計中，應融入了這些能讓使用者分享的動機。

說了這麼多H5頁面種類，那麼如何製作H5頁面？

#

現在製作H5頁面其實已經很簡單了，不懂技術的也能製作，可以利用線上的H5製作網站，具體可以參考：2017年最新、最全的html5開發工具推薦（含國內外）

在製作之前，先確認H5頁面的主題目標，你是想製作活動營運型H5頁面？還是想製作品牌宣傳型H5頁？是想製作產品介紹型H5頁面？還是想製作總結報告型H5頁面？

當確認好主題後，就是準備素材，包括圖片，音樂，文案等。當素材準備好後，就可以開始製作H5頁了。

然而一個H5頁面設計品質的出眾與否，會直接影響其傳播效果，甚至影響到使用者對品牌形象的認知。

在這裡總結出以下的設計要點：

1、緊跟熱點，利用話題效應

想要你的H5專題頁一夜爆紅，第一時間抓住熱點並火速上線，借機進行品牌宣傳也不失為一條捷徑。

2、講個好故事，引發情感共鳴

#不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅裡，學會說故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。

3、細節與統一

#要成就高品質的使用者體驗，必須考慮到細節與整體的統一性。復古擬物的視覺風格，那字體就不能過於現代；幽默調侃的調調，那文案措辭就不能過於嚴肅；打情感內容牌的，動效就不能過於花哨。

4、合理運用技術，打造流暢的互動體驗

隨著科技的發展，現今的HTML5擁有眾多出彩的特性，讓我們能輕鬆實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。 （有興趣的話可以點擊這個網站 http://www.php.cn/xiazai/js/html5關於H5 動態效果的展示）。相較於塞入各種不同種類的動效導致頁面混亂臃腫，我們更提倡的是合理運用技術 ，用心專注於為用戶提供流暢的互動體驗。具體的製作教程，請看：6個適合初學者的零基礎html5入門自學教程推薦

####### ##隨著手機硬體的升級、HTML5技術的發展以及微信平台的開放，HTML5的跨平台、低成本、快迭代等優勢被進一步凸顯，這對身處於行動互聯網大潮的企業主、品牌、設計師和開發者來說，都將會是最好的時代。未來必將湧現更多優秀的H5頁面，讓我們拭目以待。 ######【相關推薦】######1.###2017年最受歡迎的5個html5影片教學推薦#########2.###web前端開發工具排行：8款html開發工具推薦下載#########3.###h5開發工具哪個好?三款頂尖html5頁製作工具使用評測#########4. ###【H5開發工具】2017最好用的10種HTML5應用開發工具推薦#######