Facebook加入
LINE加入
2021/12/25
html5的發布讓移動端web增添了很多新的能力，這些能力給我們帶來了很多新的玩法，不知你知道了多少呢？下面我將結合案例羅列一些自H5發布以來出現的新玩法，給大家溫故而知新。本文也適合大家在策劃H5活動的時候作為參考，說不定在這兒就找到靈感了。
構思H5的玩法該從何入手呢？網上的H5五花八門，其玩法大多都可以歸納到基於感測器、基於觸摸屏操作、基於畫面呈現、基於內容這四類來考慮。它們既有基於其中一類來構思玩法，又有將多個類別組合起來創造更複雜豐富的玩法。與H5新能力相關的是前三種類型，本文也會從這三種類型進行展開，分別介紹一下各類型下有什麼玩法，而基於內容的玩法主要是圖文混排展示內容，答題類遊戲等與內容強相關的玩法，實際上他們也會多多少少與另外三類搭上點關係的。
接下來你將會看到這些玩法：
如果以場景為維度來展開推薦玩法，則可參考下圖所示：
接著我會逐一介紹一下這些玩法，讀者也可以直接跳到感興趣的部分去閱讀。除上表外還有一些目前還不太能用的H5能力，如手機震動、光線感測器、距離感測器等，由於邊幅原因，暫不作展開介紹，讀者可以自行查找相關資料。部分案例如沒有貼上二維碼，是因為該案例已下線了。
基於感測器
這類玩法依靠手機上的感測器實現，這些感測器有陀螺儀、gps、攝像頭、麥克風、震動感測器、光線感測器、距離感測器等。大家在設計玩法的時候，要結合業務本身選用相關的合適的感測器，不要隨意搭配或隨意疊加多個感測器，避免畫蛇添足。例如做周邊生活類的需求，就應該選用gps感測器獲取地理位置，做全景圖的需求就選用陀螺儀來提供便捷的交互。
陀螺儀、重力感應
這類交互在體感遊戲中比較常見，如控制射箭的方向、揮劍、打乒乓球等，而在H5中則可用於搖一搖、控制賽車左右前進、檢查手機是否平躺/豎直、全景圖/AR轉換角度等，也可以用於製造視差效果（如王者榮耀的登錄界面），使畫面富有層次感。
案例：
降溫搖可樂：
該H5在模擬搖可樂的情景，玩家需要不停地搖動手機，儘快使可樂噴出來。個人認為可以換另一種玩法，讓朋友互相傳遞手機搖，誰搖爆了可樂就算輸。
來玩點耐心吧：
這是騰訊互動娛樂2017年度發布會的預熱H5，提倡用戶做事要多點耐心，因而玩法是耐心地豎立手機，看著一幅漂亮繁複的畫慢慢地畫完。
一「陸」狂飆，極速挑戰：
該H5與速度與激情8聯動，先播放一段在朋友圈上飈車的視頻，然後開始賽車遊戲，通過左右傾側手機來控制賽車左右前進、躲避障礙，最後根據行使的距離進行排名和抽獎。
天貓：地球上的另一個你
該H5同時播放代表理想與現實的兩個視頻，利用重力感應來切換看到的畫面，向上轉動手機模擬抬頭看到理想的畫面，向下轉動手機模擬低頭看到現實的畫面，也可以轉到一半的位置同時看兩個視頻同時播放，比較有新意，也較好表達出理想和現實之間的對比。
地理位置
這類H5結合用戶所處的位置，可以提供比較方便的周邊生活服務，如查找附近的摩拜腳踏車、獲取附近的餐飲信息和前往路線；也可以與運動結合，如記錄用戶的跑步軌跡。如果用於辦公，則可以做上班打卡功能、外勤人員的工作監控等。如果用於遊戲，則可以創造出類似pokemon go的玩法，在用戶的位置附近散落獎品，讓用戶走到目的地收集獎勵。
案例：
杜蕾斯全民抓喜鵲：
該遊戲H5類似pokemon go，在地圖上散落各種喜鵲，用戶需走到散落點附近，將喜鵲划入籃圈內，然後點擊捕獲，捕獲夠一定數量就可以兌換獎品。
人臉識別
顧名思義，就是用人臉和H5進行互動，玩法有根據人臉猜測年齡、猜情緒，測試與明星臉的匹配度，將人臉和遊戲電影人物相結合，將人臉變成小時候的樣子，根據人臉的動作做出反饋（如張嘴時從嘴裡飛出企鵝、眨眼睛拍照）等，通常跟AR和圖片合成技術搭配使用。這類方式比較適合用於遊戲電影宣傳、個性化用戶樣貌、圖片類產品推廣的場景。合成的圖片可以在邊角加上活動二維碼，使得其他用戶看到這張圖片時也可以參與活動。
相關技術主要是人臉識別和人臉動作捕捉的技術，騰訊有提供優圖識別技術，微軟也有提供人臉識別技術。
騰訊：我的魔獸我主演
這個H5將人臉和魔獸電影相結合。用戶上傳自己的照片，選擇喜歡的模板和添加一些刀疤之類的裝飾后，就可以生成一張用自己臉製作出來的的魔獸海報了。
我的國小生證件照：
用戶上傳照片生成國小生證件照，並可以通過」換基因「換一下生成的樣子。
QQ錢包三周年活動之掃臉獲紅包：
用戶在活動頁張大嘴巴說」FUN開付「后，會有企鵝從嘴裡探出來跳舞，然後發紅包給用戶。
webRTC
webRTC是H5的一個新特性，它可以在web上訪問攝像頭和麥克風，進行視頻和音頻的實時通訊，用途有視頻會議、視頻聊天、在線教育、在線問診等，以前只能客戶端才能實現的視頻類應用也可以應用到web上了。兼容性方面，移動端瀏覽器的支持程度很差，安卓5.x以上的chrome才支持，而ios直至safari11發布才終於得到了支持，但這個發展表明web端也逐漸具備這個能力了，我們可以預先想想這方面的策劃，說不定不久的將來就能用上了。
案例：
Chatroulette：
這是一個隨機視頻聊天網頁，你可以隨機和地球上的陌生人視頻聊天，一般遇到的都是外國人，我也是從這個網頁第一次真實地感受到真的有外國人的存在。可惜現在不能訪問了。
基於觸摸屏操作：
除了利用感測器創造特別的玩法外，在觸摸屏上的操作也有多種玩法，如單屏滾動、手勢操作、全景交互及多屏互動。在觸摸屏上的操作要符合用戶的正常習慣，例如滑動屏幕可以翻頁、移動場景，雙指拉開表示放大操作。如果預料到用戶可能不清楚如何操作，則需要提供操作示範。此外，可操作區域也要弄大些，方便用戶操作，例如當前畫面只是操作一隻貓爪上下移動，那麼除了可以在貓爪上滑動外，在其他空白區域上下滑動也應該可以讓貓爪上下移動。
單屏滾動
這是一種很常見的交互形式。如幻燈片一樣，網頁上的每一頁內容都是佔滿全屏的。當用戶滑動屏幕翻下一頁后，當前整個屏幕的內容都會翻走，然後再展示下一頁全屏的內容。翻屏時可以加上一些轉換的動畫，如漸入漸出，使得翻頁效果生動不單調，也可以加上重力感應，讓手機在轉動時產生視差效果。單屏滾動的應用場景比較廣泛，很多主頁、產品介紹、報告總結、邀請函都應用了這種形式。
騰訊互娛發布會邀請函：
邀請函採取單屏滾動的形式展示，同時利用重力感應，轉動手機時會看到頁面上的裝飾圖片也會跟著移動，製造視差，增添了樂趣。
王者榮耀S7賽季總結：
該遊戲總結報告也使用了單屏滾動的方式，展示了用戶在該賽季各方面的成績，如獲得星數、本命英雄、給力搭檔等。翻頁時酷炫的動畫效果使得這份報告更加生動有趣。該報告亦使用了重力感應，擺動手機時頁內元素也會跟著擺動。
手勢操作
我們和屏幕交互，除了有點擊、滑動外，還有很多手勢操作，如拖拽、雙指拉開放大、雙指畫圈旋轉物體，畫圖形表示某個動作等。手勢操作可用於放大查看圖片、對圖片進行拖拽/放大/旋轉等編輯、手勢解鎖、也可以用於遊戲上，如拼圖遊戲時拖拽、旋轉拼圖碎片。
在實現上，H5有一個手勢操作庫hammer.js，可以實現常用的手勢操作。
基於畫面呈現：
這類玩法一般就是展現一段比較酷炫有趣的畫面內容，如視頻、動畫、特效，給用戶帶來視覺上的感官享受，用戶也可以通過與畫面內容互動，看自己想看的內容。
視頻/動畫展示
這類H5會播放一段時間較長但有趣生動的視頻或動畫來吸引用戶關注其宣傳內容。由於視頻內容比較生動酷炫有趣味，以及常常有明星參與演出，用戶一般不會太抗拒這樣的廣告，反而會喜歡點贊，甚至主動向朋友分享。有很多刷屏H5都是這個類型的，例如薛之謙XQQ動漫、韓寒X使命召喚等。這個玩法適合用於產品、節日、遊戲、電影等宣傳場景及敘述內容比較多的場景。
這個玩法的主要製作方式有：
- 視頻。這種方式需要前期拍攝、後期使用專門的視頻軟體（如AE）製作，能製作出很炫的效果，但成本較高，用戶通常只能被動地觀看完整段視頻。
- 使用canvas製作，這種方式可以製作出像以前的flash一樣的動畫，效果沒視頻酷炫，但這類動畫既可以看，又可以在播放途中自然地添加交互，相關組件有createjs、egret等。
- 使用H5+css3製作，這種方式也能像方式2一樣製作齣動畫，但製作難度和複雜度都比方式2大，而且也有可能帶來性能問題。
薛之謙XQQ動漫：
這支H5找來薛之謙拍視頻，講關於騰訊動漫作品的段子。視頻內容十分有趣，成為了當時的現象級刷屏H5。
生命之下，想象之上——2015年騰訊互動娛樂發布會品牌H5：
這支H5使用createjs製作，以卡通動畫的方式展示了男孩探尋想象力的旅程。動畫分段播放，用戶可以體會完每段動畫的思想后，再點擊繼續播放下一段動畫。
這是成年人不敢打開的童年：
這個H5動畫屬於一鏡到底式的動畫，用戶一邊滑動屏幕，動畫一邊順序播放，而往相反方向滑動則會讓動畫倒序播放，滑動的速度會影響動畫播放的速度，感覺就像是一邊抽捲筒廁紙一邊看到廁紙上畫的逐格漫畫一樣。
費玉清唱誅仙主題曲：
這個視頻h5最大的特色是觀看過程中長按按鈕時會換了另一種魔性的畫風，讓用戶不再只是被動地觀看視頻，而是通過操作發掘到更多有趣的內容，增強了用戶的參與感和吸引力。
全景交互
全景交互指將用戶置於一個360度環繞的圖片/視頻環境下進行沉浸式的體驗，用戶可以通過轉動手機或滑動屏幕來看這個環境里不同角度的內容並進行交互。如果將內容分成左右兩個屏，帶上VR眼鏡，則可以進行VR體驗。此玩法比較適合的場景有虛擬全景展示、身臨其境的實景展示或活動現場展示。與此類似的還有商品的360度展示，用戶拖動商品即可看到不同角度下商品的樣子。
相關技術主要是3d旋轉操作、陀螺儀方面的技術，全景圖插件有造物節使用的css3d-engine ，全景視頻組件有Valiant360 ，還有一些收費組件如krpano。
小爺吳亦凡，凡心所向:
之前很火的吳亦凡打籃球全景視頻H5，通過旋轉手機看他風騷地帶球，鏡頭對著他代表正在防守他，結束后遊戲會算出玩家的防守有效率。
vivo-我們i音樂：
類似造物節的案例，用戶在一個360度的虛擬空間里拖動畫面和旋轉手機看各角度下的樣子，並可點擊裡面的物品進行互動。
深圳歡樂谷實景地圖：
在這個地圖裡，遊客可以從高處欣賞歡樂谷的風景，切換各區域尋找遊玩設施的位置，還可以發表評論留下足跡。該地圖除了可以滑動、轉動手機來瀏覽地圖，還支持VR模式，將區域切換按鈕移動到屏幕中間的錨點上一會兒便可切換遊玩區域。
多屏互動
多屏互動指在多個屏幕上體驗活動，各自的操作會同時反應到其他屏幕上，一般以雙屏互動為主。玩法有多人合作完成任務/互相競技、你畫我猜、一問一答、情侶互動小遊戲、線下與現場觀眾互動、多個屏幕拼起來看視頻等，也可以把手機屏幕當成控制器，用大屏幕來顯示，例子有手機遙控器、谷歌的多人競跑遊戲。製作此類活動時，要注意兼顧好只有單人玩時的情況，此時可以將體驗流程簡單化，或者加上電腦一起參與。
相關技術主要是通過websocket或輪詢介面進行同步通信和更新畫面的內容。
CF手游&品客組隊大戰殭屍：
這個遊戲是用手榴彈炸殭屍，既可單人玩，也可雙人玩，雙人玩的時候一人負責裝洋芋片彈藥，一人負責扔手榴彈。
賓士搶車拔河：
2人拼手速點擊屏幕，將賓士拉到自己那邊為贏。
愛9就在一起：
一個關於愛情的視頻，需要使用2台手機才能看到完整的內容，視頻會在2台手機上同步播放。和心愛的TA一起把手機拼起來看吧。我覺得這個h5在只有一個手機觀看的時候，應該提供一個滑動屏幕或轉動手機時可以看到另一半視頻的功能。
微信線下多人飛機遊戲：
微信無現金日的活動現場提供了一個可以讓多人同時玩的飛機遊戲。遊客用手機操作飛機射擊，當達到了一定分數就可換取禮物。在大屏幕上會顯示多人一起玩的遊戲畫面。這種方式增強了主辦方與遊客、遊客之間的互動，也減少了遊客的排隊時間。飛機遊戲的設計，也讓人想起了第一款微信遊戲就是飛機遊戲，有一種回歸初心的感覺。
谷歌多人在線運動小遊戲：
總共有三個競賽小遊戲，分別是跑步、騎腳踏車和游泳，最多能同時讓四個人加入遊戲。玩家在手機上按照操作指示去玩，電腦上則同時顯示遊戲畫面。當只有單人玩的時候，會有電腦參與遊戲。
圖片裁剪和形變
css的clip-path和svg的clipPath方法可以使圖形或圖片裁剪成三角形、五邊形等自定義的形狀。利用這個能力，我們可以使圖片如碎片似的組合起來或散開，或者將多邊形像拼七巧板一樣動態地組合成各種形狀，或者將一個圖標以動畫的形式自然地轉換到另一個圖標。這個玩法適合用於圖片的酷炫展示、切換及如變形金剛一樣有變形需求的項目中。目前性能一般的手機運行這效果時並不太流暢。
pieces:
這個網站用多邊形動態地拼出各種很生動的動物，切換動物時多邊形的變換過程也十分自然。訪問地址：
pasition：
這是騰訊AlloyTeam發布的給圖標製作酷炫過渡動畫的插件，可以讓圖標以動畫的形式自然地轉換成另一個圖標。訪問地址：
SVG Morpheus：
這個插件也是實現了如pasition的效果，但風格不相似的圖標在轉換時不夠自然，會出現扭麻花似的強硬轉換效果。訪問地址：
如何創意如泉涌？
每個人都想在策劃活動時能快速想出合適的方案，但方案不是說憋就能憋出來的。正所謂厚積薄發，要有好的想法，平時就要見多識廣，多看看別人的案例，積累一定量的創意。在此推薦一下H5案例分享這個網站，它收錄了很多比較優秀的H5，很多新出的較好的H5都會及時收錄和點評，有空時可以多逛逛。此外，可以多嘗試那些充滿創意的遊戲，例如任天堂的遊戲。他的遊戲IP經歷了十多年依然經久不衰，就是因為他一直以來都在創造很多充滿遊戲性和創意的遊戲。以最近推出的《1-2-switch》為例，其內置的28個體感遊戲都十分有趣，有些遊戲創意還是能應用到H5上的。大家可以從下面的視頻里了解一下這些遊戲的玩法。
至於積累H5特效創意，大家可以訪問一下fff這個網站，裡面有一些酷炫有趣的特效可以參考，下次如果需要做H5的時候，產品就可以一臉傲嬌的指著屏幕跟開發說：你看，就是要這個效果。而開發也可以偷偷在這參考和學習各種特效的製作方法，當你做出超出產品預期的酷炫的H5時，產品肯定會喜出望外，對你好感度大增，甚至暗許芳心。。。訪問地址：
總結
H5的出現讓移動web具備了更多的能力，使我們有更多的空間去創作和策劃。本文列舉了一些H5帶來的新能力及其帶來的玩法，指出H5的玩法構思可以基於感測器、基於觸摸屏操作、基於畫面呈現、基於內容來考慮，接著對這些類別下列舉的玩法從應用場景、案例方面進行介紹，意在給讀者多一些玩法上的靈感。大家在構思策劃活動時也可以翻看一下這篇文章，說不定在裡面就找到合適的參考方案了。
熱門推薦
留言回覆
