中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

基于傳感器：

基于觸摸屏操作：

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

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

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

基于傳感器

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

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

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

案例：

（1）降溫?fù)u可樂

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

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

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

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

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

（4）天貓：地球上的另一個(gè)你

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

地理位置

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

案例：杜蕾斯全民抓喜鵲

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

人臉識別

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

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

案例：

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

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

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

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

（3）QQ錢包三周年活動之掃臉獲紅包

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

webRTC

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

案例：Chatroulette

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

基于觸摸屏操作

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

單屏滾動

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

案例：

（1）騰訊互娛發(fā)布會邀請函

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

（2）王者榮耀S7賽季總結(jié)

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

手勢操作

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

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

基于畫面呈現(xiàn)

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

視頻/動畫展示

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

這個(gè)玩法的主要制作方式有：

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

案例：

（1）薛之謙XQQ動漫

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

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

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

（3）這是成年人不敢打開的童年

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

（4）費(fèi)玉清唱誅仙主題曲

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

全景交互

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

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

案例：

（1）小爺吳亦凡，凡心所向

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

（2）vivo-我們i音樂

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

（3）深圳歡樂谷實(shí)景地圖

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

多屏互動

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

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

案例：

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

這個(gè)游戲是用手榴彈炸僵尸，既可單人玩，也可雙人玩，雙人玩的時(shí)候一人負(fù)責(zé)裝薯片彈藥，一人負(fù)責(zé)扔手榴彈。

（2）奔馳搶車拔河

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

（3）愛9就在一起

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

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

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

（5）谷歌多人在線運(yùn)動小游戲

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

圖片裁剪和形變

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

案例：

（1）pieces

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

（2）pasition

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

（3）SVG Morpheus

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

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

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