H5不是High 5

徐少遲

2015年5月11日，相信不少人都收接到了一通“神秘來電”：選擇“接聽”后，五位“復(fù)仇者”輪番登場，企圖與接聽者進行一場“惡戰(zhàn)”——其實，這是大眾點評為《復(fù)仇者聯(lián)盟2》上映制作的H5營銷頁面。精美的頁面設(shè)計加上末尾的購票鏈接，在引爆微信朋友圈轉(zhuǎn)發(fā)的同時，也促成了良好的轉(zhuǎn)化效果。

相信對于絕大多數(shù)公關(guān)人來說，H5已經(jīng)不是什么新鮮話題了——酷炫的頁面效果、新鮮的交互方式，讓很多公關(guān)人越來越傾心于H5。然而，在H5“華麗”的背后，是否存在著盲目跟風(fēng)與虛假繁榮呢？

H5是什么？

如今在社交營銷圈里，只要聊起H5，必會提到“圍住神經(jīng)貓”。

2014年7月22日上線后，這個基于H5、火爆于微信朋友圈的小游戲僅3天便創(chuàng)造了“用戶500萬，訪問量超1億”的紀錄，更重要的是“這款游戲由一名美工及一名程序員僅用1.5天開發(fā)完成”——“圍住神經(jīng)貓”似乎上演了一出四兩撥千斤的“奇跡”。

“神經(jīng)貓”的一夜爆紅，也使H5走進了廣大公關(guān)人的視野。

“H5”全稱為“HTML5”，是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言（HTML）的第五次重大修改（引自百度百科）。其實從學(xué)術(shù)角度去了解“H5”到底是什么，對于公關(guān)人來說并無必要。從業(yè)務(wù)角度來說，只需要記得H5頁面“效果炫、交互強、成本（相對）低、對移動設(shè)備支持好”就好了。

其實早在幾年前就已經(jīng)有很多公司將H5運用在了品牌傳播中，只是一直顯得有些不溫不火。而隨著智能移動設(shè)備的普及，H5對于移動端良好支持的特性得以凸顯，H5的走紅也就不足為奇了。

別把H5當(dāng)神藥

“神經(jīng)貓”一夜爆紅，營銷圈歡聲雷動，似乎看到了品牌傳播的新未來；甲乙雙方蠢蠢欲動，一輪輪新的傳播戰(zhàn)役即將打響。

可是，縱觀2014年7月底——“神經(jīng)貓”上線至今，與“神經(jīng)貓”同等量級的案例有幾個？“神經(jīng)貓”創(chuàng)造的是“新未來”，還是新一輪的“虛假繁榮”？

或許我們不應(yīng)該過于樂觀，曾幾何時，大家一股腦地將精力投入在病毒視頻、微電影、APP、Social等傳播手段上，當(dāng)這些手段并未取得想象中的良好效果，并已經(jīng)“疲態(tài)盡顯”的時候，H5出現(xiàn)了。

其實在此并非看低H5以及上述提到的各種傳播手段，而是提醒大家思考：近到“神經(jīng)貓”，遠到“血饅頭”，傳播手段在短短幾年內(nèi)不斷花樣翻新，但是傳播的目標(biāo)只有一個——擴大品牌聲量，解決品牌面臨的問題。過于重視手段的運用、盲目追求熱點其實是一種本末倒置。

近期，某著名汽車品牌推廣了其H5宣傳頁面，講述了品牌與車主間幾個感人的故事，展現(xiàn)了其品牌內(nèi)涵與品牌主張。在觀看頁面時，用戶如果想觀看下一個故事，則需要將前一個故事的內(nèi)容看完。整個頁面完整觀看完，大概需要3分鐘的時間——這還不包括頁面加載的時間（筆者在WIFI環(huán)境下用了大約30秒加載）。

根據(jù)騰訊2015年5月發(fā)布的《移動頁面用戶行為報告》：“H5頁面加載時間超過5秒會使74%的用戶離開頁面；只有不到50%的用戶會瀏覽到第5頁的頁面，層級越深，用戶流失越多?！笨上攵?，該H5宣傳頁面在無形中流失了多少用戶。

既然如此，一段時長3分鐘的視頻是否會比H5展示效果更好呢？這樣用戶對當(dāng)前內(nèi)容失去興趣，也可以選擇“快進”；而在現(xiàn)在的情景下，除了“關(guān)閉頁面”，用戶沒有任何選擇。

舉這個例子是想說明，不能將注意力僅僅放在形式的“炫酷”上，而應(yīng)該冷靜思考，客觀看待各種傳播手段：最火的未必是最好的，最合適的才是最好的。所以，不如回到起點——客戶的需求是什么？品牌的問題是什么？產(chǎn)品、品牌的特性如何才能與傳播手段相結(jié)合，達到最好的傳播效果？

靈活運用H5

如果僅僅將H5作為“媒介”進行信息的傳播，其實有些大材小用。如能將手機原生應(yīng)用開發(fā)的思維應(yīng)用于H5開發(fā)，你將發(fā)現(xiàn)一片新天地。

例如比較常見的會議輔助系統(tǒng)。利用H5頁面，可以搭建一整套會議報名、簽到、互動系統(tǒng)，達到擴大影響、降低成本、提升活躍度的效果。首先，可以向用戶發(fā)送會議邀請函，利用精心設(shè)計的頁面吸引關(guān)注；然后，通過邀請函中的報名表，完成線上注冊；接下來，在會議簽到時，也可以直接利用H5頁面進行電子簽到，從而減少現(xiàn)場簽到排隊的現(xiàn)象，提升簽到效率及用戶體驗；最后，在會議現(xiàn)場，還可以利用H5頁面進行抽獎、提問、搖一搖等多種活動，活躍現(xiàn)場氣氛。

再如定制化的H5賀卡。創(chuàng)意廣告公司AKQA在去年圣誕節(jié)推出的圣誕水晶球賀卡，利用了重力感應(yīng)及3D效果，配上精美的畫面與背景音樂，給予了用戶十分新奇的使用體驗。在最后，用戶還可以輸入自定義祝福語，并通過社交媒體轉(zhuǎn)發(fā)，形成了良好的傳播效果。

也別忘了像“神經(jīng)貓”一樣的H5小游戲——知乎為推廣其新書《金錢有術(shù)》而制作的“財務(wù)包子鋪”小游戲，可以算得上是2014年的另一個亮點?！柏攧?wù)包子鋪”的游戲形式很簡單，用戶只要點擊不同選項，即可推進游戲進程。該游戲各種“腦洞大開”的結(jié)局，也使得“強勢植入”的產(chǎn)品顯得不那么突兀。據(jù)報道，游戲上線3天后，《金錢有術(shù)》便成為了亞馬遜圖書銷售總榜冠軍。

值得一提的是，2015年1月微信推出了JS SDK，開放了包括分享、圖像、地理位置、微店、微信支付等11個接口，這意味著H5頁面將擁有更加強大的功能，也為我們提供了更加廣闊的想象空間。

如果確定要用H5

在一般情況下，公關(guān)公司會將技術(shù)搭建的工作外包給第三方公司。如果是第一次進行這項工作，可以參考以下工作流程：

1.確定需求，繪制原型圖。這里的“需求”是指頁面需要實現(xiàn)的邏輯與功能。確定需求后，需要用草圖體現(xiàn)出頁面上可能出現(xiàn)的元素及預(yù)計實現(xiàn)的功能。需要強調(diào)的是，要將頁面之間的邏輯梳理清楚，盡可能將所有可能出現(xiàn)的頁面都繪制出來。在這個步驟，可以和技術(shù)方的項目經(jīng)理協(xié)同進行，因為技術(shù)方在技術(shù)搭建方面經(jīng)驗更豐富，考慮更周全，不容易遺漏頁面；而你對于客戶需求更加了解，所以對于需要實現(xiàn)的功能也更加了解。

同時，需要和技術(shù)團隊溝通好服務(wù)器、微信公眾賬號類型，如是訂閱號還是服務(wù)號、是否認證等問題，這些都會影響到接下來的開發(fā)與推廣。

2.設(shè)計效果圖及動態(tài)效果。在客戶確認原型圖后，需要由設(shè)計師根據(jù)原型圖設(shè)計效果圖及動態(tài)效果——也就是頁面最終的展現(xiàn)形式。這里不得不說一下適配問題：對于iPhone來說，由于型號較少，頁面適配相對容易；而安卓、WP及其他系統(tǒng)的手機屏幕尺寸可謂“千變?nèi)f化”，所以對于非iOS系統(tǒng)的手機，會有可能出現(xiàn)頁面圖片變形、錯位等問題。在進行效果圖設(shè)計前，請一定與技術(shù)方進行溝通，了解所需提供的文件尺寸，方便其進行畫面適配的調(diào)整。

3.技術(shù)開發(fā)。在客戶確認效果圖后，就可以將效果圖的分層文件發(fā)送給技術(shù)團隊，進行技術(shù)開發(fā)了。在技術(shù)開發(fā)前，一定要設(shè)計好詳細的時間表，確定每一階段完成的成果及時間點，并留下充足的時間進行測試及BUG修改。

4.上線推廣。利用盡可能多的方式——如二維碼、微信菜單、微信頁面中的“閱讀原文”、KOL等，將頁面推廣出去。

如果不是與專門的團隊進行定制化開發(fā)，可以考慮利用一些第三方平臺——如“MAKA”、“初頁”、“最酷”等進行頁面搭建。這些平臺的基本功能都是免費的，但是會出現(xiàn)這些平臺的Logo或推廣頁面，付費后即可去掉。即使是定制化開發(fā)，在向客戶提案的時候，也可以將效果圖上傳到這些平臺進行演示，提升提案的生動性。

另外，微信會議系統(tǒng)、微信賀卡等，均已有成熟、穩(wěn)定的第三方平臺可以使用。利用得當(dāng)，可以省卻可觀的資金及時間成本。