H5玩法知多少？騰訊超多實戰(zhàn)案例讓你大開眼界！

html5的發(fā)布讓移動端web增添了很多新的能力，這些能力給我們帶來了很多新的玩法，不知你知道了多少呢？下面我將結(jié)合案例羅列一些自H5發(fā)布以來出現(xiàn)的新玩法，給大家溫故而知新。本文也適合大家在策劃H5活動的時候作為參考，說不定在這兒就找到靈感了。

構(gòu)思H5的玩法該從何入手呢？網(wǎng)上的H5五花八門，其玩法大多都可以歸納到基于傳感器、基于觸摸屏操作、基于畫面呈現(xiàn)、基于內(nèi)容這四類來考慮。它們既有基于其中一類來構(gòu)思玩法，又有將多個類別組合起來創(chuàng)造更復(fù)雜豐富的玩法。與H5新能力相關(guān)的是前三種類型，本文也會從這三種類型進行展開，分別介紹一下各類型下有什么玩法，而基于內(nèi)容的玩法主要是圖文混排展示內(nèi)容，答題類游戲等與內(nèi)容強相關(guān)的玩法，實際上他們也會多多少少與另外三類搭上點關(guān)系的。

接下來你將會看到這些玩法：

如果以場景為維度來展開推薦玩法，則可參考下圖所示：

接著我會逐一介紹一下這些玩法，讀者也可以直接跳到感興趣的部分去閱讀。除上表外還有一些目前還不太能用的H5能力，如手機震動、光線傳感器、距離傳感器等，由于邊幅原因，暫不作展開介紹，讀者可以自行查找相關(guān)資料。部分案例如沒有貼上二維碼，是因為該案例已下線了。

基于傳感器

這類玩法依靠手機上的傳感器實現(xiàn)，這些傳感器有陀螺儀、gps、攝像頭、麥克風、震動傳感器、光線傳感器、距離傳感器等。大家在設(shè)計玩法的時候，要結(jié)合業(yè)務(wù)本身選用相關(guān)的合適的傳感器，不要隨意搭配或隨意疊加多個傳感器，避免畫蛇添足。例如做周邊生活類的需求，就應(yīng)該選用gps傳感器獲取地理位置，做全景圖的需求就選用陀螺儀來提供便捷的交互。

陀螺儀、重力感應(yīng)

這類交互在體感游戲中比較常見，如控制射箭的方向、揮劍、打乒乓球等，而在H5中則可用于搖一搖、控制賽車左右前進、檢查手機是否平躺/豎直、全景圖/AR轉(zhuǎn)換角度等，也可以用于制造視差效果（如王者榮耀的登錄界面），使畫面富有層次感。

案例：

降溫搖可樂：

該H5在模擬搖可樂的情景，玩家需要不停地搖動手機，盡快使可樂噴出來。個人認為可以換另一種玩法，讓朋友互相傳遞手機搖，誰搖爆了可樂就算輸。

來玩點耐心吧：

這是騰訊互動娛樂2017年度發(fā)布會的預(yù)熱H5，提倡用戶做事要多點耐心，因而玩法是耐心地豎立手機，看著一幅漂亮繁復(fù)的畫慢慢地畫完。

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

該H5與速度與激情8聯(lián)動，先播放一段在朋友圈上飚車的視頻，然后開始賽車游戲，通過左右傾側(cè)手機來控制賽車左右前進、躲避障礙，最后根據(jù)行使的距離進行排名和抽獎。

天貓：地球上的另一個你

該H5同時播放代表理想與現(xiàn)實的兩個視頻，利用重力感應(yīng)來切換看到的畫面，向上轉(zhuǎn)動手機模擬抬頭看到理想的畫面，向下轉(zhuǎn)動手機模擬低頭看到現(xiàn)實的畫面，也可以轉(zhuǎn)到一半的位置同時看兩個視頻同時播放，比較有新意，也較好表達出理想和現(xiàn)實之間的對比。

地理位置

這類H5結(jié)合用戶所處的位置，可以提供比較方便的周邊生活服務(wù)，如查找附近的摩拜單車、獲取附近的餐飲信息和前往路線；也可以與運動結(jié)合，如記錄用戶的跑步軌跡。如果用于辦公，則可以做上班打卡功能、外勤人員的工作監(jiān)控等。如果用于游戲，則可以創(chuàng)造出類似pokemon go的玩法，在用戶的位置附近散落獎品，讓用戶走到目的地收集獎勵。

案例：

杜蕾斯全民抓喜鵲：

該游戲H5類似pokemon go，在地圖上散落各種喜鵲，用戶需走到散落點附近，將喜鵲劃入籃圈內(nèi)，然后點擊捕獲，捕獲夠一定數(shù)量就可以兌換獎品。

人臉識別

顧名思義，就是用人臉和H5進行互動，玩法有根據(jù)人臉猜測年齡、猜情緒，測試與明星臉的匹配度，將人臉和游戲電影人物相結(jié)合，將人臉變成小時候的樣子，根據(jù)人臉的動作做出反饋（如張嘴時從嘴里飛出企鵝、眨眼睛拍照）等，通常跟AR和圖片合成技術(shù)搭配使用。這類方式比較適合用于游戲電影宣傳、個性化用戶樣貌、圖片類產(chǎn)品推廣的場景。合成的圖片可以在邊角加上活動二維碼，使得其他用戶看到這張圖片時也可以參與活動。

相關(guān)技術(shù)主要是人臉識別和人臉動作捕捉的技術(shù)，騰訊有提供優(yōu)圖識別技術(shù)，微軟也有提供人臉識別技術(shù)。

案例：

騰訊：我的魔獸我主演

這個H5將人臉和魔獸電影相結(jié)合。用戶上傳自己的照片，選擇喜歡的模板和添加一些刀疤之類的裝飾后，就可以生成一張用自己臉制作出來的的魔獸海報了。

我的小學(xué)生證件照：

用戶上傳照片生成小學(xué)生證件照，并可以通過”換基因“換一下生成的樣子。

QQ錢包三周年活動之掃臉獲紅包：

用戶在活動頁張大嘴巴說”FUN開付“后，會有企鵝從嘴里探出來跳舞，然后發(fā)紅包給用戶。

webRTC

webRTC是H5的一個新特性，它可以在web上訪問攝像頭和麥克風，進行視頻和音頻的實時通訊，用途有視頻會議、視頻聊天、在線教育、在線問診等，以前只能客戶端才能實現(xiàn)的視頻類應(yīng)用也可以應(yīng)用到web上了。兼容性方面，移動端瀏覽器的支持程度很差，安卓5.x以上的chrome才支持，而ios直至safari11發(fā)布才終于得到了支持，但這個發(fā)展表明web端也逐漸具備這個能力了，我們可以預(yù)先想想這方面的策劃，說不定不久的將來就能用上了。

案例：

Chatroulette：

這是一個隨機視頻聊天網(wǎng)頁，你可以隨機和地球上的陌生人視頻聊天，一般遇到的都是外國人，我也是從這個網(wǎng)頁第一次真實地感受到真的有外國人的存在。可惜現(xiàn)在不能訪問了。

基于觸摸屏操作：

除了利用傳感器創(chuàng)造特別的玩法外，在觸摸屏上的操作也有多種玩法，如單屏滾動、手勢操作、全景交互及多屏互動。在觸摸屏上的操作要符合用戶的正常習(xí)慣，例如滑動屏幕可以翻頁、移動場景，雙指拉開表示放大操作。如果預(yù)料到用戶可能不清楚如何操作，則需要提供操作示范。此外，可操作區(qū)域也要弄大些，方便用戶操作，例如當前畫面只是操作一只貓爪上下移動，那么除了可以在貓爪上滑動外，在其他空白區(qū)域上下滑動也應(yīng)該可以讓貓爪上下移動。

單屏滾動

這是一種很常見的交互形式。如幻燈片一樣，網(wǎng)頁上的每一頁內(nèi)容都是占滿全屏的。當用戶滑動屏幕翻下一頁后，當前整個屏幕的內(nèi)容都會翻走，然后再展示下一頁全屏的內(nèi)容。翻屏?xí)r可以加上一些轉(zhuǎn)換的動畫，如漸入漸出，使得翻頁效果生動不單調(diào)，也可以加上重力感應(yīng)，讓手機在轉(zhuǎn)動時產(chǎn)生視差效果。單屏滾動的應(yīng)用場景比較廣泛，很多主頁、產(chǎn)品介紹、報告總結(jié)、邀請函都應(yīng)用了這種形式。

案例：

騰訊互娛發(fā)布會邀請函：

邀請函采取單屏滾動的形式展示，同時利用重力感應(yīng)，轉(zhuǎn)動手機時會看到頁面上的裝飾圖片也會跟著移動，制造視差，增添了樂趣。

王者榮耀S7賽季總結(jié)：

該游戲總結(jié)報告也使用了單屏滾動的方式，展示了用戶在該賽季各方面的成績，如獲得星數(shù)、本命英雄、給力搭檔等。翻頁時酷炫的動畫效果使得這份報告更加生動有趣。該報告亦使用了重力感應(yīng)，擺動手機時頁內(nèi)元素也會跟著擺動。

手勢操作

我們和屏幕交互，除了有點擊、滑動外，還有很多手勢操作，如拖拽、雙指拉開放大、雙指畫圈旋轉(zhuǎn)物體，畫圖形表示某個動作等。手勢操作可用于放大查看圖片、對圖片進行拖拽/放大/旋轉(zhuǎn)等編輯、手勢解鎖、也可以用于游戲上，如拼圖游戲時拖拽、旋轉(zhuǎn)拼圖碎片。

在實現(xiàn)上，H5有一個手勢操作庫hammer.js，可以實現(xiàn)常用的手勢操作。

基于畫面呈現(xiàn)：

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

視頻/動畫展示

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

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

• 視頻。這種方式需要前期拍攝、后期使用專門的視頻軟件（如AE）制作，能制作出很炫的效果，但成本較高，用戶通常只能被動地觀看完整段視頻。
• 使用canvas制作，這種方式可以制作出像以前的flash一樣的動畫，效果沒視頻酷炫，但這類動畫既可以看，又可以在播放途中自然地添加交互，相關(guān)組件有createjs、egret等。
• 使用H5+css3制作，這種方式也能像方式2一樣制作出動畫，但制作難度和復(fù)雜度都比方式2大，而且也有可能帶來性能問題。

案例：

薛之謙XQQ動漫：

這支H5找來薛之謙拍視頻，講關(guān)于騰訊動漫作品的段子。視頻內(nèi)容十分有趣，成為了當時的現(xiàn)象級刷屏H5。

生命之下，想象之上——2015年騰訊互動娛樂發(fā)布會品牌H5：

這支H5使用createjs制作，以卡通動畫的方式展示了男孩探尋想象力的旅程。動畫分段播放，用戶可以體會完每段動畫的思想后，再點擊繼續(xù)播放下一段動畫。

這是成年人不敢打開的童年：

這個H5動畫屬于一鏡到底式的動畫，用戶一邊滑動屏幕，動畫一邊順序播放，而往相反方向滑動則會讓動畫倒序播放，滑動的速度會影響動畫播放的速度，感覺就像是一邊抽卷筒廁紙一邊看到廁紙上畫的逐格漫畫一樣。

費玉清唱誅仙主題曲：

這個視頻h5最大的特色是觀看過程中長按按鈕時會換了另一種魔性的畫風，讓用戶不再只是被動地觀看視頻，而是通過操作發(fā)掘到更多有趣的內(nèi)容，增強了用戶的參與感和吸引力。

全景交互

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

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

案例：

小爺吳亦凡，凡心所向:

之前很火的吳亦凡打籃球全景視頻H5，通過旋轉(zhuǎn)手機看他風騷地帶球，鏡頭對著他代表正在防守他，結(jié)束后游戲會算出玩家的防守有效率。

vivo-我們i音樂：

類似造物節(jié)的案例，用戶在一個360度的虛擬空間里拖動畫面和旋轉(zhuǎn)手機看各角度下的樣子，并可點擊里面的物品進行互動。

深圳歡樂谷實景地圖：

在這個地圖里，游客可以從高處欣賞歡樂谷的風景，切換各區(qū)域?qū)ふ矣瓮嬖O(shè)施的位置，還可以發(fā)表評論留下足跡。該地圖除了可以滑動、轉(zhuǎn)動手機來瀏覽地圖，還支持VR模式，將區(qū)域切換按鈕移動到屏幕中間的錨點上一會兒便可切換游玩區(qū)域。

多屏互動

多屏互動指在多個屏幕上體驗活動，各自的操作會同時反應(yīng)到其他屏幕上，一般以雙屏互動為主。玩法有多人合作完成任務(wù)/互相競技、你畫我猜、一問一答、情侶互動小游戲、線下與現(xiàn)場觀眾互動、多個屏幕拼起來看視頻等，也可以把手機屏幕當成控制器，用大屏幕來顯示，例子有手機遙控器、谷歌的多人競跑游戲。制作此類活動時，要注意兼顧好只有單人玩時的情況，此時可以將體驗流程簡單化，或者加上電腦一起參與。

相關(guān)技術(shù)主要是通過websocket或輪詢接口進行同步通信和更新畫面的內(nèi)容。

案例：

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

這個游戲是用手榴彈炸僵尸，既可單人玩，也可雙人玩，雙人玩的時候一人負責裝薯片彈藥，一人負責扔手榴彈。

奔馳搶車拔河：

2人拼手速點擊屏幕，將奔馳拉到自己那邊為贏。

愛9就在一起：

一個關(guān)于愛情的視頻，需要使用2臺手機才能看到完整的內(nèi)容，視頻會在2臺手機上同步播放。和心愛的TA一起把手機拼起來看吧。我覺得這個h5在只有一個手機觀看的時候，應(yīng)該提供一個滑動屏幕或轉(zhuǎn)動手機時可以看到另一半視頻的功能。

微信線下多人飛機游戲：

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

谷歌多人在線運動小游戲：

總共有三個競賽小游戲，分別是跑步、騎單車和游泳，最多能同時讓四個人加入游戲。玩家在手機上按照操作指示去玩，電腦上則同時顯示游戲畫面。當只有單人玩的時候，會有電腦參與游戲。

圖片裁剪和形變

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

案例：

pieces:

這個網(wǎng)站用多邊形動態(tài)地拼出各種很生動的動物，切換動物時多邊形的變換過程也十分自然。訪問地址：http://species-in-pieces.com

pasition：

這是騰訊AlloyTeam發(fā)布的給圖標制作酷炫過渡動畫的插件，可以讓圖標以動畫的形式自然地轉(zhuǎn)換成另一個圖標。訪問地址：https://alloyteam.github.io/pasition/

SVG Morpheus：

這個插件也是實現(xiàn)了如pasition的效果，但風格不相似的圖標在轉(zhuǎn)換時不夠自然，會出現(xiàn)扭麻花似的強硬轉(zhuǎn)換效果。訪問地址：http://alexk111.github.io/SVG-Morpheus/

如何創(chuàng)意如泉涌？

每個人都想在策劃活動時能快速想出合適的方案，但方案不是說憋就能憋出來的。正所謂厚積薄發(fā)，要有好的想法，平時就要見多識廣，多看看別人的案例，積累一定量的創(chuàng)意。在此推薦一下H5案例分享這個網(wǎng)站，它收錄了很多比較優(yōu)秀的H5，很多新出的較好的H5都會及時收錄和點評，有空時可以多逛逛。此外，可以多嘗試那些充滿創(chuàng)意的游戲，例如任天堂的游戲。他的游戲IP經(jīng)歷了十多年依然經(jīng)久不衰，就是因為他一直以來都在創(chuàng)造很多充滿游戲性和創(chuàng)意的游戲。以最近推出的《1-2-switch》為例，其內(nèi)置的28個體感游戲都十分有趣，有些游戲創(chuàng)意還是能應(yīng)用到H5上的。大家可以從下面的視頻里了解一下這些游戲的玩法。

至于積累H5特效創(chuàng)意，大家可以訪問一下fff這個網(wǎng)站，里面有一些酷炫有趣的特效可以參考，下次如果需要做H5的時候，產(chǎn)品就可以一臉傲嬌的指著屏幕跟開發(fā)說：你看，就是要這個效果。而開發(fā)也可以偷偷在這參考和學(xué)習(xí)各種特效的制作方法，當你做出超出產(chǎn)品預(yù)期的酷炫的H5時，產(chǎn)品肯定會喜出望外，對你好感度大增，甚至暗許芳心。。。訪問地址：http://fff.cmiscm.com/

總結(jié)

H5的出現(xiàn)讓移動web具備了更多的能力，使我們有更多的空間去創(chuàng)作和策劃。本文列舉了一些H5帶來的新能力及其帶來的玩法，指出H5的玩法構(gòu)思可以基于傳感器、基于觸摸屏操作、基于畫面呈現(xiàn)、基于內(nèi)容來考慮，接著對這些類別下列舉的玩法從應(yīng)用場景、案例方面進行介紹，意在給讀者多一些玩法上的靈感。大家在構(gòu)思策劃活動時也可以翻看一下這篇文章，說不定在里面就找到合適的參考方案了。

「騰訊的Html 5經(jīng)典案例」

• 《親歷者說！火爆的“吳亦凡入伍”HTML5背后有哪些設(shè)計故事？》
• 《《全民突擊》HTML5設(shè)計全程回顧及經(jīng)驗總結(jié)》

原文地址：騰訊ISUX

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

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com