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應用開發工具推薦#######