?

? 在早期H5剛剛興起的時(shí)候，人們對(duì)他的印象更像是一個(gè)移動(dòng)的PPT，只支持滑動(dòng)操作，交互是指襯托內(nèi)容的綠葉。但現(xiàn)如今，越來(lái)越多的交互玩法層出不窮，形式與內(nèi)容的影響越來(lái)越緊密，達(dá)到了超前的效果，來(lái)看看有哪些有趣的交互玩法吧！

?

  1. 單擊交互

??點(diǎn)擊是最常見(jiàn)的手勢(shì)，常用于頁(yè)面切換。點(diǎn)擊引導(dǎo)可以作為注釋幫助用戶理解H5內(nèi)容，讓用戶跟著H5的節(jié)奏操作。

??例如《帶上希望的種子去北京》中，用戶可以通過(guò)點(diǎn)擊手勢(shì)對(duì)行李箱進(jìn)行“驗(yàn)貨”，去深入了解H5設(shè)計(jì)的內(nèi)容細(xì)節(jié)。

?

?

  1. 連擊交互

??連擊交互在游戲類應(yīng)用比較多。游戲類H5中通常連續(xù)點(diǎn)擊產(chǎn)生的數(shù)值關(guān)聯(lián)著積分排名，帶有競(jìng)技性質(zhì)的H5更能吸引用戶參與。

??例如《漫威電影十周年》中的“揍”滅霸小游戲，用戶連續(xù)點(diǎn)擊屏幕，十秒內(nèi)的點(diǎn)擊數(shù)量將會(huì)生成全網(wǎng)排名。

?

?

  1. 長(zhǎng)按交互

??長(zhǎng)按是用戶根據(jù)H5引導(dǎo)，長(zhǎng)時(shí)間接觸頁(yè)面。長(zhǎng)按交互用戶需要保持手指靜止?fàn)顟B(tài)，為了避免乏味，應(yīng)在設(shè)計(jì)時(shí)提示H5播放進(jìn)度參考。

??例如騰訊公益的《敦煌未來(lái)博物館》中設(shè)計(jì)的風(fēng)化過(guò)程展示，用戶長(zhǎng)按手機(jī)就能看到壁畫隨著年份推移逐漸風(fēng)化的場(chǎng)景，以此來(lái)喚醒用戶心中的文化保護(hù)意識(shí)。

?

?

  1. 拖拽交互

??拖拽交互需要再長(zhǎng)按交互的基礎(chǔ)上進(jìn)行滑動(dòng)，從一個(gè)點(diǎn)拖到另一點(diǎn)，用戶可自行控制速度。適合圖片展示類的H5。

??例如《睡姿大比拼》中用戶可以拖動(dòng)角色四肢，制作出各種有趣的睡姿。

?

  1. 重力交互

??重力交互是非常直觀的表現(xiàn)形式，用戶可以輕易get到H5的趣味性，這也是手機(jī)硬件升級(jí)給H5設(shè)計(jì)帶來(lái)的更多可能性。活用重力感應(yīng)、陀螺儀、速度加速器等硬件去做H5的玩法創(chuàng)新，增加用戶的代入感。

??例如《一“陸”狂飆，極速挑戰(zhàn)》中設(shè)置的賽車小游戲就是通過(guò)手機(jī)重力傳感來(lái)控制小車的方向。

?

?

  1. 全景交互

??全景交互是在屏幕中360°展示了全部景象，用戶可以通過(guò)滑動(dòng)來(lái)移動(dòng)場(chǎng)景。這種類似VR的H5形式需要注重整個(gè)場(chǎng)景的設(shè)計(jì)，邊界銜接必須足夠流暢，更要注意全景加載內(nèi)容較大，用戶等待和畫面卡頓的問(wèn)題。

??例如華為出品的《我的榮耀5G世界》中用全景交互呈現(xiàn)了未來(lái)的豐富多彩的5G世界。

?

?