營(yíng)銷代有手段出，各領(lǐng)風(fēng)騷數(shù)百天。要論2014年的傳播業(yè)哪些方式最“風(fēng)騷”，屢屢刷爆朋友圈的HTML 5（簡(jiǎn)稱H5）炫酷頁面絕對(duì)獨(dú)占鰲頭，今天@TopMarketing?的同學(xué)挑出了10個(gè)最經(jīng)典的案例，來看你玩過哪些？

先來一段背景介紹：正像大家知道的那樣，移動(dòng)互聯(lián)網(wǎng)的江湖上，APP派和Web派爭(zhēng)斗已久。起初是App以良好的用戶體驗(yàn)迅速俘獲用戶芳心，沐浴無盡恩寵。不甘失落的Web派逐漸放棄了傳統(tǒng)Wap，推出了更加方面快捷的H5技術(shù)，但在強(qiáng)大的App面前曾長(zhǎng)期不溫不火。直到后來微信和朋友圈的快速發(fā)展，H5靠著無需下載、即點(diǎn)即用的屬性迅速上位，一躍變成當(dāng)紅炸子雞，Web終于成功逆襲。

話說H5滿天飛，質(zhì)量也是參差不齊，虧得Top 君有火（ao）眼（ye）金（jia）睛（ban），才在沙子堆里翻揀出10塊金子，集成此篇泣血之作，以饗粉絲。

1、圍住神經(jīng)貓

入選理由：堪稱一代流行小游戲之標(biāo)本。

其實(shí)HTML5技術(shù)在幾年前就基本成熟，但一直不溫不火，今年能從“二三線小明星”搖身一變成“移動(dòng)營(yíng)銷一姐”，它必需感謝一只欠抽的神經(jīng)貓——它體態(tài)妖嬈，表情風(fēng)騷，不斷在屏幕中扭來扭去，勾引玩家發(fā)起毫不留情地圍剿。

這只貓完美得能做微信流行小游戲的標(biāo)本：形象賤萌，讓人忍俊不禁；上手簡(jiǎn)單，又有一定的數(shù)學(xué)挑戰(zhàn)性；在醒目位置添加網(wǎng)絡(luò)流行俗語；引入競(jìng)爭(zhēng)機(jī)制，撩撥玩家的攀比心態(tài)。

但因?yàn)槭恰盁o心插柳”，《圍住神經(jīng)貓》的營(yíng)銷指數(shù)相對(duì)較弱，在它短短幾天的生命里，只在火起來之后接入了廣告文字鏈，也很快就銷聲匿跡了。

2、全民找祖名

入選理由：熱點(diǎn)新聞催生出的單細(xì)胞生物。

除了神經(jīng)貓這類“平地起風(fēng)波”的，更多的微信小游戲借熱點(diǎn)而生。

比如8月份，柯震東、房祖名相繼跳入毒坑，在網(wǎng)友們“絕不放過任何角度”的調(diào)侃大潮中，HTML5的技術(shù)男們也不甘落后，推出了《全民尋找房祖名》：“雖然柯少向龍叔保證不會(huì)帶壞房祖名，但龍叔實(shí)在不放心，現(xiàn)在請(qǐng)求你幫忙在一群柯震東的頭像里撈出唯一一個(gè)房祖名”。

還好不是從一堆張默里找出一個(gè)房祖名。。。。

如果說類似五子棋的神經(jīng)貓還需考校智商的話，那么和“看你有多色”玩法相同的“找祖名”則更傾向于眼力的比拼——也就是說，更弱智（#咳咳，此處并無歧視之意#）。然而越傻瓜，就越流行，在它身后涌現(xiàn)出了一大批的追隨者，例如前些天的“在霧霾里找北京”。

盈利問題當(dāng)然也是這類H5心中的痛，但好在至少可以讓它的開發(fā)者暫時(shí)脫穎而出。

3、杜蕾斯 一夜N次郎

入選理由：小杜杜就是個(gè)品牌游戲定制狂。

既然神經(jīng)貓和找祖名們都這么火了，品牌們又怎么會(huì)想不到開發(fā)專屬的小游戲呢？自己動(dòng)手得來的高級(jí)定制，首先肯定合身，然后款式也多選——既可以根據(jù)品牌特性開發(fā)原創(chuàng)游戲，也可以選擇在經(jīng)典游戲中融入品牌元素。

在微博上大名鼎鼎的“小杜杜”就是游戲“高定”的瘋狂愛好者，推出過《我要持久》、《杜杜line一發(fā)》《一夜N次郎》等多款作品。（#瞅瞅這些香艷的名字#）以“N次郎”為例，其實(shí)是經(jīng)典游戲“別踩白塊兒”的山寨版，然后把黑白塊替換為五顏六色的杜蕾斯套套，玩家只要努力踩TT就夠了，別的什么禁區(qū)都沒有。

照這個(gè)拆套套的速度，一夜包你-嗶-盡人亡。

4、維多利亞的秘密

入選理由：“摩擦摩擦”技能首創(chuàng)者。

以上羅列的是H5國(guó)度中的“游戲派”，利用“曬成績(jī)”心理誘惑用戶上癮并分享是它們的立身之本。而接下來將為大家介紹劃江而治的另一大門派——“互動(dòng)體驗(yàn)派”，它們是一群標(biāo)準(zhǔn)的技術(shù)宅，篤信“科技改變營(yíng)銷”。

“互動(dòng)體驗(yàn)派”的大師姐是內(nèi)衣品牌維多利亞的秘密，她出師早，名聲也響，成名技為“摩擦有驚喜”。7月初為預(yù)熱七夕，維秘上線了一款形式炫酷的輕應(yīng)用：首頁是一幅經(jīng)過霧化處理的照片，用戶只需用手指摩擦屏幕，就會(huì)有一位性感女郎浮出水面，繼續(xù)瀏覽下去則是品牌介紹，最后到達(dá)內(nèi)衣?lián)屬?gòu)頁面。

這項(xiàng)技能后來被多個(gè)品牌效法，現(xiàn)已發(fā)揚(yáng)光大?？v然是神通廣大的小編，也沒能找到原版鏈接，╮(╯▽╰)╭。這里有一個(gè)都市麗人的模仿版，小伙伴們湊合湊合吧。

5、百度智呼吸，吹一口神仙氣

入選理由：非一般的重力感應(yīng)。

重力感應(yīng)則是繼“觸屏指”之后的另一套神功，這里小編選擇了“技術(shù)大拿”百度的“智呼吸”應(yīng)用作為正面教材進(jìn)行展示。

這是一款神奇的輕應(yīng)用——你只要對(duì)著手機(jī)吹口氣，就能知道自己的健康值（比孫悟空還厲害呢？）：第一步，把手機(jī)水平放好（實(shí)際上是利用重力感應(yīng)糾正手機(jī)平衡）；第二步，深呼吸（#閉上你的眼睛，全世界有最清新洋氣#）；第三步，對(duì)著手機(jī)下方吹一口氣。幾秒鐘后，你的健康值就出來了，同時(shí)附有這口氣各種成分的數(shù)值，非常全面。

估計(jì)吃頭大蒜，顯示的就是被全國(guó)67.6%的人打敗了。

6、可口可樂 我們?cè)诤?/strong>

入選理由：這是一份“會(huì)動(dòng)”的CRS報(bào)告。

雜糅圖片、文字和視音頻等多媒體是H5的又一大優(yōu)勢(shì)。而當(dāng)這種生動(dòng)的形式與一些嚴(yán)肅的內(nèi)容相遇，往往發(fā)生出人意料的化學(xué)反應(yīng)。

以前段時(shí)間席卷朋友圈的可口可樂“我們?cè)诤酢睘槔?，它的真身本是一份肩?fù)企業(yè)CSR重任的“可持續(xù)發(fā)展報(bào)告”，內(nèi)容雖力求形象但扔難掩厚重。為了在社交時(shí)代更接地氣，可口可樂嘗試用H5為報(bào)告“瘦身美容”：選取報(bào)告中的部分核心數(shù)據(jù)，共十五頁畫面，直觀展現(xiàn)可口可樂的努力，變成適應(yīng)網(wǎng)絡(luò)傳播特點(diǎn)、特別是移動(dòng)端觀看及分享需求的形式。

7、2014百度世界

入選理由：美輪美奐的邀請(qǐng)函。

集視聽多重感官于一體的H5還改造了千人一面的邀請(qǐng)函。

標(biāo)桿案例如今年的百度世界大會(huì)，將會(huì)議邀請(qǐng)和星空元素緊密結(jié)合：在一片唯美的星空背景之上，每劃過一道流星，就浮現(xiàn)出一位意見領(lǐng)袖對(duì)移動(dòng)互聯(lián)網(wǎng)的看法和愿景，最后是會(huì)議的時(shí)間地點(diǎn)，并可進(jìn)行在線搶票。（#納尼，又是百度的？！小編就不展開說了，夸那么多一分錢沒收到何必呢？#）

8、巴寶莉 從倫敦到上海的旅程

入選理由：堪稱互動(dòng)體驗(yàn)派的集大成者。

前面幾個(gè)例子都是“專業(yè)人才”，在技術(shù)的運(yùn)用上各精一道，或是觸屏，或是多媒體，或是重力感應(yīng)。當(dāng)然還有集各項(xiàng)技術(shù)于一身的“全才”，這里最有名的要數(shù)巴寶莉“從倫敦到上?！钡穆贸?。

要進(jìn)入這個(gè)渾身上下散發(fā)著濃濃文藝氣息的H5，第一步，得先“搖一搖”；第二步，點(diǎn)擊屏幕進(jìn)入油畫般的倫敦清晨；第三步，摩擦屏幕使晨霧散去；第四步，點(diǎn)擊“河面”，河水泛起漣漪；最后點(diǎn)擊屏幕上的白點(diǎn)，達(dá)到終點(diǎn)站上海。

總而言之，你能想到的互動(dòng)方式，burberry都用在里面了。

10、央視春晚 家和萬事興

入選理由：內(nèi)容的共鳴才是王道。

當(dāng)然，不管形式如何花樣百出，最終還得仰仗過硬的內(nèi)容才能成大氣候。

典型例證就是央視春晚的“家和萬事興”：“我們對(duì)世界微笑，彬彬有禮，卻帶著一身疲憊和抱怨回到家里；我們?cè)谕馄疵圪u自己的觀點(diǎn)，卻懶得和父母解釋我在忙什么（#講真，內(nèi)斂含蓄的小編聽這臺(tái)詞肉麻兮兮的#）……”H5從一個(gè)與父母聚少離多的小故事講起，通過催人淚下的文案和煽動(dòng)人心的音樂引發(fā)共鳴，然后與“家和萬事興”的主題緊密貼合，最終號(hào)召網(wǎng)友“按手印”表達(dá)支持。

呃，按手印的時(shí)候有木有一種簽字畫押的趕腳？

總結(jié)完畢，來關(guān)注Top 君的微信號(hào)：TMarketeting

【會(huì)營(yíng)銷的設(shè)計(jì)師才是好文案】

文案篇：搞定文案的集大成篇！
《年度最佳教程！7招教你寫出互聯(lián)網(wǎng)頂尖文案！》

營(yíng)銷篇：大眾點(diǎn)評(píng)的頂尖營(yíng)銷案例！
《重磅推薦！如何設(shè)計(jì)傳單才不會(huì)被人隨手扔掉？》

設(shè)計(jì)篇：了解網(wǎng)頁設(shè)計(jì)的前世今生！
《漲姿勢(shì)！寫給網(wǎng)頁設(shè)計(jì)師的網(wǎng)頁設(shè)計(jì)簡(jiǎn)史》

原文地址：itopmarketing

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量87萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：