H5不是High 5

徐少遲

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

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

H5是什么？

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

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

“神經貓”的一夜爆紅，也使H5走進了廣大公關人的視野。

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

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

別把H5當神藥

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

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

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

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

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

根據騰訊2015年5月發布的《移動頁面用戶行為報告》：“H5頁面加載時間超過5秒會使74%的用戶離開頁面；只有不到50%的用戶會瀏覽到第5頁的頁面，層級越深，用戶流失越多。”可想而知，該H5宣傳頁面在無形中流失了多少用戶。

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

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

靈活運用H5

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

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

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

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

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

如果確定要用H5

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

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

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

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

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

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

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

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