了解H5帶來的新能力及其帶來的玩法，多看案例，在構(gòu)思策劃活動時也可以翻看一下這篇文章，你就找到靈感了，然后就是升職加薪，走向人生巔峰……

html 5 從2014年底的初露鋒芒到2015年的全面火爆，再到2016的沉淀，2017年，H5依然是品牌Social傳播的首選。因為是一種新技術(shù)，很多策劃的朋友往往不知道怎么策劃，或者或不知道天馬行空的想法能不能實現(xiàn)，所以在策劃的時候，每有一個想法都在咨詢下技術(shù)人員，沒有技術(shù)人員的，就需要供應(yīng)商提供技術(shù)咨詢服務(wù)了，但是這樣的策劃周期就有點(diǎn)痛苦了。還是那句話，“夫源遠(yuǎn)自流長，根深者葉茂”。一個好的策劃人員（運(yùn)營人員、設(shè)計師，這個視不同公司，崗位不同），若要做一個優(yōu)秀的創(chuàng)意方案，必須得了解自html5發(fā)布以來的新玩法。本文也適合做大家在策劃H5活動的必備參考文檔，想靈感的時候翻來看看。

我對2000個H5案例深入剖析之后，歸納總結(jié)，其玩法無外乎4類：基于傳感器、基于觸摸屏操作、基于畫面呈現(xiàn)、基于內(nèi)容。4類之中可再分小類，實際使用中可以只用一種，也可以多個類別穿插起來使用，這個看天賦了，招式有了，實戰(zhàn)中又可以有諸多變化的。前三種類型是基礎(chǔ)，本文也會從這三種類型進(jìn)行展開，分別介紹一下各類型下有什么玩法，而基于內(nèi)容的玩法主要是圖文混排展示內(nèi)容，答題類游戲等與內(nèi)容強(qiáng)相關(guān)的玩法，實際上他們也會多多少少與另外三類搭上點(diǎn)關(guān)系的。

整體的綱要：

1、基于傳感器

2、基于觸摸屏操作

3、基于畫面呈現(xiàn)

讀者也可以直接跳到感興趣的部分去閱讀。此外如手機(jī)震動、光線傳感器（探測環(huán)境光照強(qiáng)度，決定是否開啟鍵盤燈及屏幕背光）、距離傳感器（擁有距離感應(yīng)器的手機(jī)在我們撥打電話以后將聽筒放在臉上的時候屏幕就黑了）等，這些功能不常用，暫不作展開介紹，讀者可以自行查找相關(guān)資料。

手機(jī)上的傳感器有陀螺儀、GPS、攝像頭、麥克風(fēng)、震動傳感器、光線傳感器、距離傳感器等。現(xiàn)在智能手機(jī)普及率很高，可以放心設(shè)計玩法，但要注意結(jié)合業(yè)務(wù)本身選用相關(guān)的合適的傳感器，不要隨意搭配或隨意疊加多個傳感器，避免畫蛇添足。例如做位置相關(guān)的，就選用GPS，做VR的需求就選用陀螺儀。

陀螺儀和重力感應(yīng)在體感H5中用的比較多，比如打籃球、打網(wǎng)球，舉啞鈴、控制風(fēng)車轉(zhuǎn)動、檢查手機(jī)是否平躺/豎直、全景圖/AR轉(zhuǎn)換角度，舉啞鈴就是一個簡單直接有效的健康類H5活動創(chuàng)意。很多人分不清陀螺儀和重力感應(yīng)區(qū)別是什么，簡單的說明下，陀螺儀是可以追蹤手機(jī)在XYZ三維空間的運(yùn)動，而重力感應(yīng)呢，你本來把手機(jī)拿在手里是豎著的，你將它轉(zhuǎn)90度，橫過來，它的頁面就跟隨你的重心自動反應(yīng)過來。假如你想用手機(jī)控制星戰(zhàn)中的激光劍的揮動，那就一定要用到陀螺儀。

（1）動我試試？

用戶通過使勁搖動手機(jī)喚醒呆坐的TA，隨即驚爆出的帶感動態(tài)畫面，使原本呆坐的TA，神采飛揚(yáng)，奔跑又沖浪，隨后跳入別克威朗車內(nèi)

（2）來玩點(diǎn)耐心吧

一個考驗用戶耐心的小游戲。用戶保持握住手機(jī)不變的姿勢并且計時。一旦姿勢變動，則游戲結(jié)束。

（3）一“陸”狂飆，極速挑戰(zhàn)

內(nèi)容分兩個部分展現(xiàn)，前半部分借助視頻的形式展開，點(diǎn)擊首頁的“ENGINE START“進(jìn)入視頻部分，將速度與激情電影情節(jié)和陸金所引入朋友圈、今日頭條等場景中，視頻部分的結(jié)尾給出了游戲挑戰(zhàn)和游戲規(guī)則，緊接著進(jìn)入游戲環(huán)節(jié)，通過左右遙控手機(jī)躲避行駛過程中的障礙物，最后進(jìn)行排名和抽獎。

（4）中秋的正確打開方式

案例以中秋的正確打開方式為主題，通過“聚”“獨(dú)”兩種狀態(tài)，體現(xiàn)中秋的不同狀態(tài)，也是生活中的不同狀態(tài)，達(dá)到共鳴。對比的時候，翻轉(zhuǎn)手機(jī)180度，切換狀態(tài)，非常有特色。

結(jié)合位置提供LBS服務(wù)，百度地圖之前做過一個在地圖上找附近的麥當(dāng)勞的活動；也可以與運(yùn)動結(jié)合，如記錄用戶的跑步軌跡，但是H5不是APP，如果關(guān)閉了就不能檢測了，如果真的檢測運(yùn)動軌跡的話，建議還是到點(diǎn)打卡的方式會更合適。游戲可參考 pokemon go的玩法，在用戶的位置附近散落獎品，讓用戶走到目的地收集獎勵。

案例：杜蕾斯全民抓喜鵲

點(diǎn)擊GO!!!!!進(jìn)入游戲，游戲與地圖結(jié)合在地圖可以隨時看見自己的位置，如果發(fā)現(xiàn)了小喜鵲，只要走向它，用籃圈將其圈住，點(diǎn)擊捕捉即可。可以再隨時看到附近的游戲在線人數(shù)和可愛的小喜鵲，集齊一定數(shù)量的喜鵲還可以兌換獎品哦！！

用人臉和H5進(jìn)行互動，玩法有根據(jù)人臉猜測年齡、猜情緒，測試與明星臉的匹配度，將人臉和游戲電影人物相結(jié)合（電影宣傳用），將人臉變成小時候的樣子（生成高考證），將人臉變成年老的樣子（這個創(chuàng)意適合做美容美妝行業(yè)），根據(jù)人臉的動作做出反饋（比如嘴巴噴火、眼睛放閃電）等，通常跟AR和圖片合成技術(shù)搭配使用。相關(guān)技術(shù)主要是人臉識別和人臉動作捕捉的技術(shù)，騰訊有提供優(yōu)圖識別技術(shù)，微軟也有提供人臉識別技術(shù)。

案例：

（1）騰訊：我的魔獸我主演

H5主題是主演你自己的魔獸，在兩幅海報中選擇自己喜歡的海報風(fēng)格，上傳自己露出五官的照片，在成型的海報上加上傷疤、眼睛等裝飾物，點(diǎn)擊完成，即完成海報制作，可以生成海報并可以分享朋友圈。

（2）我的小學(xué)生證件照

點(diǎn)擊上傳自己的自拍照片就可以生成屬于自己的小學(xué)證件照，而且可以點(diǎn)擊屏幕右側(cè)的“換基因”生成不同造型的證件照。亮點(diǎn)：黃色背景和藍(lán)色底片雖然產(chǎn)生了及其強(qiáng)烈的撞色，但是并沒有給人突兀的感覺，人臉識別合成的照片還原非常真實。

（3）Snapchat佳得樂飲料迎頭澆灌AR濾鏡

佳得樂在Snapchat上推出了一款基于AR技術(shù)的濾鏡，能讓球迷感受在贏球時刻被佳得樂飲料迎頭澆灌的興奮感。與廣告商進(jìn)行合作方面，在《史努比花生大電影》的廣告投放中，史努比本身就很受喜愛，用戶很樂意與之“合照”，嘴中也可以吐出類似彩虹特效的糖果，UGC的傳播效果非常好。

WebRTC，是一個支持網(wǎng)頁瀏覽器進(jìn)行實時語音對話或視頻對話的技術(shù)，是谷歌2010年以6820萬美元收購Global IP Solutions公司而獲得的一項技術(shù)，可見Google布局之深遠(yuǎn)。WebRTC提供視頻處理和音頻處理技術(shù)，Web開發(fā)者也無需關(guān)注多媒體的數(shù)字信號處理過程，只需編寫簡單的Javascript程序即可實現(xiàn)。由于受到硬件條件的限制，目前的任何想法都實現(xiàn)不了，更傳播不了，但大家可以持續(xù)關(guān)注，不久的將來就能用上了。

除了利用傳感器創(chuàng)造特別的玩法外，在觸摸屏上的操作也有多種玩法，如單屏滾動、手勢操作、全景交互及多屏互動。在觸摸屏上的操作要符合用戶的正常習(xí)慣，例如滑動屏幕可以翻頁、移動場景，雙指拉開表示放大操作。默認(rèn)提供操作示范，切記！切記！此外，可操作區(qū)域也要弄大些，方便用戶操作，不要想象玩家是專業(yè)級玩家，這在策劃和測試的時候要注意。

這是一種很常見的交互形式。翻屏?xí)r可以加上一些轉(zhuǎn)換的動畫，如漸入漸出，使得翻頁效果生動不單調(diào)，也可以加上重力感應(yīng)，讓手機(jī)在轉(zhuǎn)動時產(chǎn)生視差效果。單屏滾動的應(yīng)用場景比較廣泛，很多主頁、產(chǎn)品介紹、報告總結(jié)、邀請函都應(yīng)用了這種形式。

案例：

（1）in一周年慶邀請函

用色彩講述故事，一次滑動之后全屏自動切換，美輪美奐，并有真聲留言，最后送出邀請函，邀你參加一周年慶典。

（2）我的S7王者之路

這是一只圖文展示類型的H5,頁面加載完成以后不斷的向上滑動屏幕，就可以查看Initial的王者S7賽季的賽季稱號、獲得的星數(shù)、戰(zhàn)場榮耀、本命英雄、給力搭檔、賽季神坑、開黑CP，以及自己的作戰(zhàn)小伙伴，和具體的數(shù)據(jù)分析，在案例的尾部點(diǎn)擊“查看我的王者之路”按鈕，可以查看自己的王者之路。同時，這個H5案例使用了重力感應(yīng)，體驗的同時搖晃手機(jī)，畫面也會跟著有所晃動。

我們和屏幕交互，除了有點(diǎn)擊、滑動外，還有很多手勢操作，如拖拽、放大、所轄、旋轉(zhuǎn)、畫圖。切水果和憤怒的小鳥都是非常不錯的手勢操作典型案例。

案例：腦洞大過天，月餅究竟能做啥？

月餅究竟能做啥，打開看到白熊和冰皮月餅，通過點(diǎn)選和拖拽的方式將冰皮月餅放到白熊頭上做耳朵（你的第一反應(yīng)真的是耳朵嗎？嘻嘻）進(jìn)入下一環(huán)節(jié)，將月餅放入禮盒即可送心意，并有腦洞指數(shù)，最后附有相應(yīng)的月餅購買鏈接。

這類玩法一般就是展現(xiàn)一段比較酷炫有趣的畫面內(nèi)容，如視頻、動畫、特效，給用戶帶來視覺上的感官享受，用戶也可以通過與畫面內(nèi)容互動，看自己想看的內(nèi)容。

這類H5會播放一段時間較長但有趣生動的視頻或動畫來吸引用戶關(guān)注其宣傳內(nèi)容。視頻/動畫生動酷炫有趣味，以及常常有明星參與演出，用戶一般不會太抗拒這樣的廣告，反而會喜歡點(diǎn)贊，甚至主動向朋友分享。這個玩法適合用于產(chǎn)品、節(jié)日、游戲、電影等宣傳場景及敘述內(nèi)容比較多的場景。

這個玩法的主要制作方式有：

視頻。主要用AE實現(xiàn)，能制作出很炫的效果，但成本較高，業(yè)內(nèi)都是按秒計算。

使用canvas制作，這種方式可以制作出像以前的flash一樣的動畫，效果沒視頻酷炫，但這類動畫既可以看，又可以在播放途中自然地添加交互，用原生代碼來寫，難度非常大，推薦使用createjs、egret、layabox和cocos引擎工具等。

使用H5+css3制作，這種方式也能像方式2一樣制作出動畫，但制作難度和復(fù)雜度都比方式2大，而且但是受限于手機(jī)硬件問題，暫不推薦這種方式。

案例：

（1）薛之謙史上最瘋狂的廣告

首頁是模擬的薛之謙微博界面，開始滑動不幾下至后畫面一黑，薛之謙出現(xiàn)在畫面里開始講導(dǎo)演讓他代言騰訊動漫的原因和過程，內(nèi)容結(jié)合了二次元世界人民喜歡的腐（兩個男的在一起）、騷（因為一個巧克力少年被全校女生喜歡）、逗（被面癱少女報復(fù)），最后煽情得抱著一個動畫女主走向千山萬水，原來這時候才是正式開拍宣傳海報，一聲action薛之謙被定格在海報上。

（2） 一鏡到底，一刀未剪的大劇發(fā)布

跟隨視線的深入，在色彩斑斕的畫面中回顧那些很火很熱的劇集和綜藝，輕松愉快的BGM，個性分明的大咖，光彩奪目的熒屏巨星逐一呈現(xiàn)在畫面中。在屏幕下方戳一戳優(yōu)酷圖標(biāo)，畫面就會變換為萬花筒。在H5的最后呈現(xiàn)YOUKU會員推廣的界面。

（3）勞斯萊斯BlackBadge化身黑暗騎士

這是一個目前來看非主流的快閃類型，提供給大家以啟發(fā)思路。本H5案例采用快閃加圖文切換的形式來展現(xiàn)，黑色的主色調(diào)以大氣和高貴唯美的存在整個案例中，配合諸多經(jīng)典黑色美學(xué)電影的精彩片段，即體現(xiàn)了對黑色美學(xué)的致敬又突出了新車型BlackBadge也融入了黑色美學(xué)的特質(zhì)。

全景交互指將用戶置于一個360度環(huán)繞的圖片/視頻環(huán)境下進(jìn)行沉浸式的體驗，用戶可以通過轉(zhuǎn)動手機(jī)或滑動屏幕來看這個環(huán)境里不同角度的內(nèi)容并進(jìn)行交互。如果將內(nèi)容分成左右兩個屏，帶上VR眼鏡，則可以進(jìn)行VR體驗。此玩法比較適合的場景有虛擬全景展示、身臨其境的實景展示或活動現(xiàn)場展示。與此類似的還有商品的360度展示，用戶拖動商品即可看到不同角度下商品的樣子。

相關(guān)技術(shù)主要是3d旋轉(zhuǎn)操作、陀螺儀方面的技術(shù)，全景圖插件有造物節(jié)使用的css3d-engine，全景視頻組件有Valiant360，還有一些收費(fèi)組件如krpano。

案例：

（1）吳亦凡陷黑客門，化妝間私密外泄

以吳亦凡陷入黑客門為引子，通過用戶的好奇心,引導(dǎo)用戶觀看。

（2）我們i音樂

進(jìn)入頁面是宣傳海報，提示框內(nèi)滾動顯示品牌相關(guān)消息，點(diǎn)擊進(jìn)入3D場景，360度旋轉(zhuǎn)手機(jī)可以全景觀看，按照場景提示操作，4個不同場景會播放不同的音樂，在場景中的很多元素上設(shè)置了品牌LOGO，實現(xiàn)宣傳推廣，點(diǎn)擊“查看詳情”跳轉(zhuǎn)到官方微博。

亮點(diǎn)：3d全景的畫面效果顏色鮮艷豐富，4個場景都有小互動，細(xì)節(jié)之處做得很精致。人物也畫得相當(dāng)細(xì)致，加上點(diǎn)擊播放的音樂，整體風(fēng)格很活潑生動。

（3）肯德基VR虛擬公益藝術(shù)體驗館

進(jìn)入頁面選擇體驗KFC公益藝術(shù)虛擬體驗館的方式：360度全景模式orVR眼睛模式,進(jìn)入體驗館之后點(diǎn)擊地面上的展廳地圖可以知道體驗館主要分為四個區(qū)：體驗館大廳，公益藝術(shù)畫作展，我的微信好友廳，公益藝術(shù)畫作展。點(diǎn)擊畫作展上的畫作即可更好的欣賞畫作，點(diǎn)擊畫作右下角按鈕，可了解畫作詳細(xì)信息，進(jìn)入微信好友廳，即可看到自己分享出去的好友頭像。

亮點(diǎn)：兩種可選擇的體驗方式都是很有身臨其境感的，體驗館讓人感覺就在眼前，很真實，還有李宇春做導(dǎo)游。

多屏互動指在多個屏幕上體驗活動，各自的操作會同時反應(yīng)到其他屏幕上，一般以雙屏互動為主。玩法有多人合作或競技、你畫我猜、一問一答、情侶互動、線下與現(xiàn)場觀眾互動、多個屏幕拼起來看視頻等，也可以把手機(jī)作為遙控手柄，用大屏幕來顯示。制作此類活動時，切記注意場景，上百人的大場和十幾個人的中場和幾個人的小場是不同的，策劃上完全不同，大屏只有一個，人一多就要考慮到展示的問題，要么只實時展示戰(zhàn)績，要么只展示一瞬間的頭像（主區(qū)域，視動作而定，比如一次擊殺、一次搶贏，夜店霸屏也是不錯的參考）。十幾人和幾人的場基本展示上不用擔(dān)心，可以全部展示。接下來就是形式，其實很多都可以借鑒其他實體游戲或現(xiàn)有的游戲，比如貪吃蛇大戰(zhàn)。信步互動是國內(nèi)最早嘗試多屏互動的公司之一，很多案例做的也不錯。

相關(guān)技術(shù)主要是通過websocket或輪詢接口進(jìn)行同步通信和更新畫面的內(nèi)容，對實時在線要求不高的，可以不用websocket技術(shù)。我們在實際制作中后端一般采用node.js。

案例：

（1）CF手游&品客組隊大戰(zhàn)僵尸

劇情介紹，手游打僵尸，用高能量“薯片”做彈藥，急需支援彈藥；

選擇模式-單人模式，左手“瞄準(zhǔn)”怪獸，右手“扔”手雷，限時殺怪得分，根據(jù)游戲成績決定是否獲禮包；

選擇模式-雙人模式，角色A選擇“雙人模式”生成二維碼，角色B掃碼進(jìn)入，角色A點(diǎn)擊開始，A打怪，同單人模式，B“裝彈”，即不停向上滑動“薯片”，裝到包裝里，為A提供彈藥；

根據(jù)游戲成績（單人/雙人），獲得積分禮包/下載CF手游。

體驗：“雙人雙手操作”，雖然有時候左手“瞄準(zhǔn)”會有一些卡頓，但“雷爆”的那一刻體驗還是蠻爽的！H5小游戲雖然與原生H5手游體驗上有一定差距，但在H5營銷案例上，已屬很贊了

（2）七夕節(jié)“梅賽德斯-奔馳”

以鵲橋會為主題，掃碼進(jìn)入頁面，搖動手機(jī)，畫面開始展現(xiàn)，一臺奔馳汽車試過橋面，到達(dá)紅色的愛心交匯的地方，畫面最后是一臺紅色奔馳車朝著畫面外，打開了明亮的車燈。

（3）愛9就在一起

打開案例就是一個愛不停燉的愛就在一起的畫面，點(diǎn)擊畫面就會進(jìn)入到下一個頁面，點(diǎn)擊圖標(biāo)可從兩種性別中選擇其中一種，然而點(diǎn)擊不同的性別視頻里的內(nèi)容也不相同。點(diǎn)擊后進(jìn)入到下一個頁面，這個頁面可選擇單屏也可選擇雙屏，單擊雙屏即可掃碼邀請你的另外一個他與你一起觀看觀看電影，點(diǎn)擊單屏就會進(jìn)入到一個可觀看的視屏。

（4）微信線下多人飛機(jī)游戲

微信無現(xiàn)金日的活動現(xiàn)場提供了一個可以讓多人同時玩的飛機(jī)游戲。游客用手機(jī)操作飛機(jī)射擊，當(dāng)達(dá)到了一定分?jǐn)?shù)就可換取禮物。在大屏幕上會顯示多人一起玩的游戲畫面。這種方式增強(qiáng)了主辦方與游客、游客之間的互動，也減少了游客的排隊時間。飛機(jī)游戲的設(shè)計，也讓人想起了第一款微信游戲就是飛機(jī)游戲，有一種回歸初心的感覺。

（5）信步互動投籃球小游戲

用手機(jī)控制籃球的方向和速度，瞄準(zhǔn)籃框投球，最后15秒，籃框會移動，增加了游戲難度，游戲還可以與公眾號進(jìn)行關(guān)聯(lián)，典型的線下吸粉神器。

css的clip-path和svg的clipPath方法可以使圖形或圖片裁剪成三角形、五邊形等自定義的形狀。利用這個能力，我們可以使圖片如碎片似的組合起來或散開，或者將多邊形像拼七巧板一樣動態(tài)地組合成各種形狀，或者將一個圖標(biāo)以動畫的形式自然地轉(zhuǎn)換到另一個圖標(biāo)。這個玩法適合用于圖片的酷炫展示、切換及如變形金剛一樣有變形需求的項目中。目前性能一般的手機(jī)運(yùn)行這效果時并不太流暢。

H5在未來十年都會是web的主流形式，現(xiàn)在很多APP、VR、AR與H5都有結(jié)合點(diǎn)，對于營銷而言，移動端的富媒體廣告形式，H5更是不二人選。了解H5帶來的新能力及其帶來的玩法，多看案例，在構(gòu)思策劃活動時也可以翻看一下這篇文章，你就找到靈感了，然后就是升職加薪，走向人生巔峰……