H5頁面的三種設(shè)計(jì)原理及玩法

一個(gè)好的策劃人員（運(yùn)營人員、設(shè)計(jì)師，這個(gè)視不同公司，崗位不同），若要做一個(gè)優(yōu)秀的創(chuàng)意方案，必須得了解自html5發(fā)布以來的新玩法。下面H5游戲制作公司小編就來給大家科普一下H5頁面的三種設(shè)計(jì)原理及玩法。

一、基于傳感器

1、地理位置

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

2、人臉識(shí)別

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

二、基于觸摸屏操作

1、單屏滾動(dòng)

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

2、手勢操作

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

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

1、視頻/動(dòng)畫展示

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

2、全景交互

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

3、多屏互動(dòng)

多屏互動(dòng)指在多個(gè)屏幕上體驗(yàn)活動(dòng)，各自的操作會(huì)同時(shí)反應(yīng)到其他屏幕上，一般以雙屏互動(dòng)為主。玩法有多人合作或競技、你畫我猜、一問一答、情侶互動(dòng)、線下與現(xiàn)場觀眾互動(dòng)、多個(gè)屏幕拼起來看視頻等，也可以把手機(jī)作為遙控手柄，用大屏幕來顯示。制作此類活動(dòng)時(shí)，切記注意場景，上百人的大場和十幾個(gè)人的中場和幾個(gè)人的小場是不同的，策劃上完全不同，大屏只有一個(gè)，人一多就要考慮到展示的問題，要么只實(shí)時(shí)展示戰(zhàn)績，要么只展示一瞬間的頭像（主區(qū)域，視動(dòng)作而定，比如一次擊殺、一次搶贏，夜店霸屏也是不錯(cuò)的參考）。

以上就是我們H5頁面定制開發(fā)的三種原理，并附帶了幾種玩法，如果你對這種宣傳工具比較感興趣，可以咨詢我們藍(lán)橙互動(dòng)網(wǎng)站客服，為你定制開發(fā)H5頁面，藍(lán)橙互動(dòng)專注H5開發(fā)服務(wù)長達(dá)7年，精通各類型H5頁面開發(fā)，相信能夠滿足你的需求。