熱點資訊

如何玩轉H5

  在2014年,一項本來還不太成熟的技術在微信的社交舞臺下大放異彩,讓我們見識了“移動+社交”爆發的巨大能量。
  然而這不是偶然,而是趨勢。
  相比電視、雜志、戶外廣告等傳統媒體呈逐年下降的趨勢,品牌營銷在數字和移動方面的投入在逐年上升。而且,在所有渠道預算中移動技術的投入增長最快,遠遠高于其他渠道的增長。當然,這樣的結論你應該不會感到驚訝,因為我們早已習慣了24小時手機陪伴的生活,而品牌最關注的就是消費者“在哪”的問題。
據美國的調查數據顯示,我們每天要查看手機150次,44%的人睡覺都把手機放在身邊……毫無疑問,手機是有史以來最強大的媒介,從早上醒來到臨睡前的一秒,這個幾英寸的屏幕都在和我們“交流”。
  顯然,移動營銷已是大勢所趨,我們可以看到已經廣泛應用的簽到、二維碼技術,正在興起的iBeacon、微信的Wifi連接,還有就是H5技術。那些百萬PV的H5都是怎么做的?H5能做什么,有哪些玩法?精心打造的H5要如何推廣?H5技術將如何發展?
  H5能怎么玩?
  1.幻燈片式玩法
  以下這個特斯拉的例子相信很多人都看過,精美的圖片設計+簡單的翻頁效果,在我的印象中大概3、4月份看到特斯拉這個H5的時候,大家還不知道原來微信營銷可以這么玩,記得那時候我們看到之后就在一周內做了一個類似的H5,用于STC的品牌展示。當然,在這之后H5就千樹萬樹梨花開了。
\
  這是H5最早期也是最典型的玩法,因為簡單、實用,所以至今還很流行。其效果就是簡單的圖片展示&翻頁交互,最終整體的表現很像幻燈片展示。
其實幻燈片式的H5現在已經出現了很多在線制作軟件供大家使用,所以制作成本在現在看來幾乎是等于零的,而在之前這樣一個應用的開發可能要將近一萬(再一次見證了互聯網思維的破壞力)。當然啦,這對于品牌主來說是一個好事,因為很多時候這種簡單的展示已經能滿足需求了,不需要花不必要的錢。
  ★ 應用場景
  由于制作簡單,周期短,這種H5展現形式適用于頻繁、小型的需求。用在線編輯器的話,不需要任何開發,你只需要要配備一名設計和文案。(老規矩,需要在線H5編輯器推薦的,可以在后臺留言)
  總結得不全,幻燈片式H5可能有以下的應用場景:
  1、定期發布的內容,幾乎零預算。這些內容相對而言比較常規,但是有時微信圖文又無法達到理想的效果,通過H5的形式會更易于傳播,當然前提是要有好的設計。比如數據報告、頻繁上線的新產品或功能、小型線下活動邀請、活動相冊等等。
  2、結合熱點的營銷,周期極短。這種情況下,時效性是非常重要的,如果開發一個H5用了半個月,熱點想必也結冰了。所以,應該以最快的速度推出才是明智的選擇,而這時候引起廣泛傳播的關鍵就在于文案和設計。
  此外,大家不要輕視這種短頻快的傳播,有時候它要比很多大投入的傳播來得有效。沒有人能完全掌握受眾的興趣點,所以一次大投入的傳播不一定就能出效果,但是多次熱點傳播出效果的概率從統計學的角度也要高一些。如上文所述,我們可以實現用戶在H5中所有交互行為的監測,因此,如果短頻快的傳播能配合有效的數據監測,便可以進行持續優化,降低不確定性。
  2.交互式動畫
  可口可樂這個案例在之前的風云榜中推薦過,是運用H5繪圖功能的典型例子。當然這里面的交互還是比較簡單的,只不過它基本體現了交互式動畫的感覺。整個可口可樂的時間軸是隨著用戶向上滑動頁面“繪制”出來的。
\
  其實除了這種敘事型的H5動畫,我們能看到的大多數H5游戲也都都屬于這一類,比如神經貓、打企鵝、2048等等。最近也有一個比較火的H5游戲叫“財務包子鋪”,在這個游戲中用戶扮演包子鋪的創業老板,在事業發展的不同階段做出經營決策,最終登上人生巔峰。雖然游戲中植入了赤裸裸的產品推廣(知乎的一本新書),但最后還是取得了3天破300萬PV的成績。
\
 
  這些類型各異的H5應用,本質上都是基于H5的動畫技術做的。它們所涉及的相關動畫技術主要有H5的Canvas/SVG,以及JS、CSS3,目前大部分H5的動畫效果還是用JS實現的,實現的效果類似PPT中的動畫功能,只能實現元素的平移、旋轉、隱現等等。事實上通過JS+Canvas/SVG+CSS3可以實現非常復雜的交互式動畫,最直觀的就是H5游戲,比如神經貓,還有上文提到的3D版坦克大戰。
那么,H5到底能實現什么樣的動畫效果呢?我想這應該是大家在做H5時最頭疼的問題,因為不知道能做成什么樣,你也就不知道從何下手。所以下面我給大家介紹一個網站:http://fff.cmiscm.com,在這個網站中,你幾乎能看到所有H5能夠實現的動畫效果,下次如果需要做H5的時候就可以跟客戶說“你看,就是這個效果”。
\
種樹:在屏幕任意地方點擊都會在相應的地方種一顆樹,你可以看到樹的生長過程。
\
3D罐頭:CSS3 3D的完美展示,你可以看到三維罐頭的任意角度。
\
  照片處理:你可以把照片藝術化,圖示為處理過程截圖。
  ★ 應用場景
  交互式動畫類型的H5制作周期和成本比較高,需要提前規劃。除了創意、文案、設計這些以外,開發周期較長,優質的H5大約在兩周到4周左右,也有可能更長。
  這種類型的H5要找靠譜的供應商,因為復雜交互做出來的效果,在用戶看來只有完美和垃圾兩種層次,所以慎重。當然如果你自己要花血本自建團隊也不是不行——產品經理、設計師、前端工程師、PHP工程師(涉及表單、登錄、評論等元素的時候需要),各一枚就夠了。
以下是總結的應用場景:
  1、中小型活動/品牌事件的傳播,預算不多、周期較短。這種情況一般就是某些新品發布、企業招聘、公關事件、中型會議等的傳播。此時你需要權衡周期和成本的因素。一般來說一周以內的時間不太可能做出優質的H5,這時候你可能要考慮幻燈片式的簡易開發或者參考已有的作品,然后著重從設計和文案上下功夫。如果有一到兩周的時間可以嘗試做一些輕交互的H5,除了常見的那些平移、縮放、淡入淡出的動效以外,在這里我比較建議大家嘗試一下CSS3 3D的效果,這是一個趨勢,當然成本也會相應的上升一個量級。
  2、大型活動/品牌事件的傳播,預算充足、計劃性強、周期較長。一般大家看到的那些美輪美奐并且極具傳播性的H5基本上都屬于這一類,比如上文提到的可口可樂“分享快樂128年”,以及我們之前分享過的潘婷“一封來自1947年的明信片”。像這一類在美學、交互和故事性上都表現突出的案例,都不是一兩周的功夫能做出來的,不計算創意、設計和文案的時間,光是開發和調試也要小一個月。
因此大家看到好的作品要理性看待,不能覺得很牛或者老板說好就想著也做一個,其實像這種交互與故事一體的應用,如果時間不夠只完成一半,整個H5基本是沒法用的,也就是所有之前的投入都是無用功。這也是為什么有很多供應商無法在指定時間交付的原因,可能一開始就在做一個完不成的任務。
\
  3.功能型H5
  看一下以下的兩個例子,第一個是百度針對地鐵漲價做的H5,它可以計算你每天坐地鐵要多少錢并且實時顯示大家的評論;第二個是STC的社交移動風云榜,很簡單,就是精品H5的展示:
\
  這兩個H5都有一個特點,除了針對受眾的熱點內容傳播以外,它們很像一個“供用戶重復使用”的產品,這就是所謂的功能型H5。其實大家看到風云榜可能會覺得它只是一個再簡單不過的網頁,但如果從它滿足用戶需求并產生重復“使用”行為的角度,它其實是一個產品,事實上我們從一開始就是把它當產品來運營的,關注Social Talent的朋友可能會有所感受——每周更新、定期群發推薦H5的圖文、欄目更新通知等等。
  功能型H5的獨特價值在于,除了具備傳播性以外,它通過用戶的重復使用行為使得H5的傳播是一個持續不斷的過程,這一點是一般的H5所不具備的。風云榜首次發布時轉發6w+多,目前每月的訪問量都在10w左右,不算多,但是給我們帶來的流量轉化都是精準的,關注我們的大多還是從事營銷相關職業的朋友。
  個人覺得web應用肯定是未來發展的方向,就像上文所說的,很有可能未來的操作系統將被瀏覽器所取代,服務和應用將進入完全的云世界。當然距離這種假設還比較遠,但唯一大家可以放心遵守的原則,就是聚焦于用戶需求。
  我所說的功能型H5,是同時聚焦于用戶需求并且注重傳播性的H5輕應用,也就是在設計H5的時候除了考慮傳播的問題以外,也要思考如何把它變成一個持續運營的產品。這里面其實是思考角度的問題,從“我要傳播什么”到“我希望用戶傳播什么”的轉變。
  ★ 應用場景
  輕交互重功能的功能型H5制作周期較短、成本也不高,成功的關鍵不在于酷炫的交互,而在于用戶需求的把握以及后續的運營。
  因此,這一類H5需要的是一名高水平的的產品經理,而以設計、開發為輔。功能型H5目前沒有太多成熟的例子,不過我認為離線存儲的技術可能會是功能型H5的應用重點,大家可以關注一下。
  以下是總結的應用場景:
  1、品牌賬號的粉絲運營。功能型H5由于具備一定的產品特性,其最大的價值就是提高粉絲活躍度和忠誠度。我們需要根據本身品牌的形象定位以及受眾的特性設計功能型H5,要將品牌或產品的功能性特征抽象到生活方式或者精神追求的層次。
  舉個例子,賣洗手液的可以抽象為健康生活方式,設計一個改善生活健康狀態的功能型H5;服裝品牌可以抽象為追求時尚前沿,設計一個定期更新時尚潮流資訊的功能型H5。事實上,以粉絲需求為中心的功能型H5將潛移默化的提升品牌影響力,在提升忠誠度的同時帶來持續的口碑傳播。
  2、結合熱點內容的品牌傳播。這種類型的傳播是最常見的,但是往往很多結合熱點的H5傳播都是一次性娛樂消費,大家看過就忘了。其實如果能從用戶需求挖掘和產品運營的角度去思考,許多針對熱點的H5傳播都有很大提升的空間。
  近來大家都喜歡報道習大大和彭麻麻的“私生活”或者非正式領導會晤之類的,如果有人能做一個類似微博“學習粉絲團”那樣,定期更新“學習資訊”的功能型H5,想來必火。

极速飞艇全天计划