首頁 > 頭條 > 主體

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

PHPz
發布: 2017-06-05 17:20:09
原創
90834 人瀏覽過

H5突然火了

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

那麼,H5是什麼技術?

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

html與html5有什麼差別?

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

還是沒聽懂?

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

H5能做什麼?

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

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

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

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

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

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

如何設計品牌傳播型H5頁

關於內容

適當借力-尋找共鳴

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

#關於視覺

整體-氛圍渲染

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

H5案例欣賞範例:

品牌傳播之品牌發布型

#騰訊-生命之下,想像之上

H5页面 产品运营

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

關於內容

標題黨-做個妥妥的標題黨,先到碗裡來再說

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

關於視覺

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

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

舉例:

活動推廣之答題有禮型

途風旅遊網:時光倒回9年,你會選擇怎樣人生?

H5页面 产品运营

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

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

關於內容

講個好故事-引起共鳴

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

關於視覺

#

整體-清晰、簡潔

細節刻畫-產品為主,效能刻畫

舉例:

產品展示之故事敘述型

一封來自1947年的明信片

H5页面 产品运营

#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應用開發工具推薦#######
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!