創(chuàng)新互聯(lián)今天為大家推出的是《html5頁面設(shè)計最新玩法》,希望能給你帶來HTML5頁面設(shè)計帶來靈感！

html5從2014年底的初露鋒芒到2015年的全面火爆，再到2016的沉淀，2017年，H5依然是品牌Social傳播的選。因為是一種新技術(shù)，很多策劃的朋友往往不知道怎么策劃，或者或不知道天馬行空的想法能不能實現(xiàn)，所以在策劃的時候，每有一個想法都在咨詢下技術(shù)人員，沒有技術(shù)人員的，就需要供應(yīng)商提供技術(shù)咨詢服務(wù)了，但是這樣的策劃周期就有點痛苦了。還是那句話，“夫源遠(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)的玩法，實際上他們也會多多少少與另外三類搭上點關(guān)系的。

先給大家看看整體的綱要：

基于傳感器：

基于觸摸屏操作：

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

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

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

基于傳感器

手機(jī)上的傳感器有陀螺儀、GPS、攝像頭、麥克風(fēng)、震動傳感器、光線傳感器、距離傳感器等?，F(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)來玩點耐心吧

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

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

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

(4)中秋的正確打開方式

案例以中秋的正確打開方式為主題，通過“聚”“獨”兩種狀態(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)動軌跡的話，建議還是到點打卡的方式會更合適。游戲可參考 pokemon go的玩法，在用戶的位置附近散落獎品，讓用戶走到目的地收集獎勵。

案例：杜蕾斯全民抓喜鵲

點擊GO!!!!!進(jìn)入游戲，游戲與地圖結(jié)合在地圖可以隨時看見自己的位置，如果發(fā)現(xiàn)了小喜鵲，只要走向它，用籃圈將其圈住，點擊捕捉即可?？梢栽匐S時看到附近的游戲在線人數(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)格，上傳自己露出五官的照片，在成型的海報上加上傷疤、眼睛等裝飾物，點擊完成，即完成海報制作，可以生成海報并可以分享朋友圈。

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

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

(3)Snapchat佳得樂飲料迎頭澆灌AR濾鏡

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

webRTC

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ù)分析，在案例的尾部點擊“查看我的王者之路”按鈕，可以查看自己的王者之路。同時，這個H5案例使用了重力感應(yīng)，體驗的同時搖晃手機(jī)，畫面也會跟著有所晃動。

手勢操作

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

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

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

基于畫面呈現(xiàn)

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

視頻/動畫展示

這類H5會播放一段時間較長但有趣生動的視頻或動畫來吸引用戶關(guān)注其宣傳內(nèi)容。視頻/動畫生動酷炫有趣味，以及常常有明星參與演出，用戶一般不會太抗拒這樣的廣告，反而會喜歡點贊，甚至主動向朋友分享。這個玩法適合用于產(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)勞斯萊斯Black Badge化身黑暗騎士

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

案例：

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

以吳亦凡陷入黑客門為引子，通過用戶的好奇心,引導(dǎo)用戶觀看，順便進(jìn)行品牌宣傳。

(2)我們i音樂

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

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

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

進(jìn)入頁面選擇體驗KFC公益藝術(shù)虛擬體驗館的方式：360度全景模式orVR眼睛模式,進(jìn)入體驗館之后點擊地面上的展廳地圖可以知道體驗館主要分為四個區(qū)：體驗館大廳，公益藝術(shù)畫作展，我的微信好友廳，公益藝術(shù)畫作展。點擊畫作展上的畫作即可更好的欣賞畫作，點擊畫作右下角按鈕，可了解畫作詳細(xì)信息，進(jì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點擊開始，A打怪，同單人模式，B“裝彈”，即不停向上滑動“薯片”，裝到包裝里，為A提供彈藥;④ 根據(jù)游戲成績(單人/雙人)，獲得積分禮包/下載CF手游。

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

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

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

(3)愛9就在一起

打開案例就是一個愛不停燉的愛就在一起的畫面，點擊畫面就會進(jìn)入到下一個頁面，點擊圖標(biāo)可從兩種性別中選擇其中一種，然而點擊不同的性別視頻里的內(nèi)容也不相同。點擊后進(jì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)，典型的線下吸粉神器。

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

操千曲而后曉聲，觀千劍而后識器。

要有好的想法，平時就要見多識廣，多看看別人的案例，積累一定量的創(chuàng)意。199case網(wǎng)站收錄了很多優(yōu)秀的H5，可以看到完整的鮮活的設(shè)計，從加載動效、到交互到分享指引的每個細(xì)節(jié)都值得借鑒。至于積累H5特效， fff這個網(wǎng)站，里面有一些酷炫有趣的特效可以參考。

總結(jié)

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

新聞標(biāo)題：html5營銷最新玩法
網(wǎng)站URL：http://jinyejixie.com/news29/162629.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計、域名注冊、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)