1. 祖拉迪拜祈祷小组赛
  2. 產品運營

塞尔达传说——梅祖拉假面:網易爆款H5交互玩法!

祖拉迪拜祈祷小组赛 www.exjyiw.com.cn 網易爆款H5交互玩法!

 

在早些年,H5其網易爆款H5交互玩法!實更像是手機上的PPT,只支持點擊、滑動這些基礎手勢操作。以內容展示為主,交互形式為輔。

但到了今天,H5的玩法已經有了質的突破。不僅交互形式超多,形式與內容也能緊密結合,產生1+1大于2的效果。

本期我們就來匯總一下當下最熱門的H5交互手勢

01 單擊交互

網易爆款H5交互玩法!

點擊是最常見的手勢之一,可以用在頁面轉場上。這種交互手勢,一般需要設置點擊引導。

引導可以作為注釋幫助用戶理解H5,讓用戶跟著H5的思路行動,推動劇情發展。與主題相符的個性化的引導設計,能快速將用戶帶入情境。

比如紅網的《帶上“希望的種子”去北京》中,用戶可以點擊行李傳送帶上的行李“開箱驗貨”,查看代表們的建議,聆聽他們的故事。

H5用行李箱作為點擊按鈕,為用戶搭建去北京的場景。即使不能親臨現場,也可以“參與”會議,了解到會議內容。

網易爆款H5交互玩法!

點擊手勢也常用在測試型H5上,用戶點擊屏幕選擇不同選項,生成專屬測試結果。

網易噠噠的《測測你的哲學氣質》、《測測你是歡樂頌里的誰》、《飼養手冊》都是測試型H5,只需簡單的點擊交互即可完成。

02 連擊交互

網易爆款H5交互玩法!

連擊交互主要應用在游戲類H5中。連續點擊屏幕的節奏感比較強,關聯點擊次數與積分排名,則會帶有競技性,能刺激分享、吸引更多人參與。

這種單一的交互方式操作比較簡單,所以會搭配限時、限次等玩法。

網易噠噠的《漫威電影十周年》H5設計了一個“揍”滅霸的環節,用戶需要猛點屏幕,記錄10秒內時間“揍”滅霸的次數。10秒結束后,用戶可看到連擊的次數和自己全網排名。

網易爆款H5交互玩法!

《守護你的幸運足球》屬于不設置連擊次數限制的H5。連擊求精準不求數量,需要點擊屏幕控制足球高度,不能“飛”得太高撞上飛鳥和石柱,也不能掉在地上。

網易爆款H5交互玩法!

《穿越中國70年》是網易噠噠出品的一支“慶祝新中國成立70年周年”的視頻型H5。

其中“為祖國點贊”環節需要用戶連擊屏幕,每點擊一次記為一分。連擊時產生的愛心特效會變色,畫面給用戶新鮮感。

點贊創意來自短視頻點贊,交互手勢是用戶熟悉的形式,有利于帶動為祖國“打call”的積極情緒,增強體驗感和沉浸感。

網易爆款H5交互玩法!

03 長按交互

網易爆款H5交互玩法!

長按需要用戶根據引導,長時間接觸H5頁面中的某處按鈕,保證畫面的連續播放和順利轉場。

由于長按需要用戶的手指保持靜止的停頓狀態,用戶可能會感到無聊乏味。在設計時,最好可以提示H5的播放進度,給予用戶時長參考。

長按交互常用于一鏡到底形式的H5。往往考驗故事的銜接和鏡頭的轉換,運用得當可以帶給用戶很好的體驗,讓用戶精神更加集中,從而提升完播率。

《你我當年》利用長按動作,用戶可以用畫中畫形式暢快觀看所有內容。

《武林外傳》、《仙劍奇俠傳》、《少年包青天》……H5回顧90后的童年暑期檔,瞬間喚起童年記憶。

網易爆款H5交互玩法!

《1分鐘漫游珠港澳大橋》也是通過長按前進,展示港珠澳大橋的風景。為了不讓用戶感到無聊,H5每隔一段距離會顯示“走過”的公里數,提示播放進度。

網易爆款H5交互玩法!

04 長圖視差交互

網易爆款H5交互玩法!

長圖視差交互常搭配滑動手勢進行,帶動H5連貫播放。

視差動畫由于運動速率與主視覺畫面不同,空間層次感更加鮮明。

這可以增加畫面的新鮮感,緩解高密度內容帶來的的視覺疲勞。減少閱讀長圖文時的乏味,從畫面效果上輔助H5流暢轉場。

網易噠噠的《自白》利用這種方式,向下滑動推進故事劇情,把主人公的變化呈現給用戶。借用滑動手勢控制故事的播放,讓用戶更有參與感。

網易爆款H5交互玩法!

《你想要的每個好,我們都努力做好》用滑動長圖+視差動畫的形式,帶領用戶從1988年穿越到2018年,串聯起興業銀行的30年發展歷史。

網易爆款H5交互玩法!

《我在童話里遇到你的時光》使用一張長圖,滑動時會有一些小元素穿插過場,使得整支H5看起來炫酷又豐富。

網易爆款H5交互玩法!

05 拖拽交互

網易爆款H5交互玩法!

拖拽區別于滑動,需要按著屏幕不松手,從一個點拖到另一個點,移動速度由用戶控制,適合圖片展示類或敘事類的策劃專題。

網易噠噠的《睡姿大比拼》H5利用了骨骼動畫技術,用戶可以拖動小人的四肢,DIY自己在床上的睡姿。

除了可以選擇場景、人物外貌,H5還提供床上的小物件做搭配,放大或縮小后用來布置臥室。

網易爆款H5交互玩法!

06 雙指縮放交互

網易爆款H5交互玩法!

雙指交互需要用戶兩只手指同時接觸屏幕,比如滑動屏幕放大或縮小某物,也常用于畫面轉場。

這種交互方式對手勢的微操有要求,玩法有些復雜。但互動性比單指點擊、滑動更強,也更具趣味性。

網易新聞的H5《跟貼比新聞更接近真相》采用穿越時空設定,設計了雙指放大手勢進入下一頁,點擊按鈕查看當頁詳情。每頁統一的手勢便于用戶理解。

網易爆款H5交互玩法!

07 聲音交互

除了觸覺交互,還有聽覺交互。聲音交互方式比較少見,大多與錄音有關,按照H5引導錄一段話,DIY生成專屬音頻。

網易云音樂的《有故事的聲活單曲》,就是讓用戶錄音,講出自己的故事,創建錄音文件。錄音結束后,配上文案生成定制海報。

網易爆款H5交互玩法!

用聲音控制H5,還可以表現為自選音樂片段,DIY成一首完整歌曲。

網易云音樂的《玩音樂,我從來沒在怕的》,讓用戶從幾種音效中選出最喜歡的風格,再為原曲調音,生成個性化樂曲。

DIY出來的音樂代表個人喜好,具有一定的社交屬性。

網易爆款H5交互玩法!

08 書寫交互

書寫交互是自由度較高的互動方式,用戶可以根據提示自由創作文字、圖畫。

通過繪畫創作出來的形象個性鮮明,也是用戶情緒的體現,面對自己繪制的角色,用戶也能更用心地投入到H5,流失率往往不高。

網易噠噠的《里約大冒險》給予用戶一定指導,根據提示繪制小人、繩子、降落傘等形象。

這些形象雖然線條有些粗糙,運動起來與背景對比鮮明,但是因為是原創角色,用戶對畫面的包容性也更強。

網易爆款H5交互玩法!

文字部分的書寫交互,常用在測試類H5上。用戶根據提示輸入名字或者想說的話,生成海報得到測試結果。

網易新聞的H5《以你之名,守護漢字》可以輸入自己的名字,找到需要自己守護的瀕危漢字。

H5測試生成的都是日常很少用到的生僻字,主題“守護”漢字,既可以讓用戶認識這些瀕危漢字,也能夠給予用戶一種使命感,將漢字主動分享傳播。

09 重力交互

模擬現成的物理規律能大大降低理解門檻,還能為策劃增添趣味性。

手機在硬件上給出了很多技術發揮的可能性,活用重力感應、陀螺儀、速度加速器等硬件設備可以創新H5玩法,增加代入感。

搖晃手機時,H5會自動判斷手機傾斜的角度。由于技術性比較強,所以重力交互常用在某個特定頁面。

網易新聞的《時空戀愛事務所》就是利用手機重力傳感器,搖晃手機喚醒主人公,開始劇情。

網易爆款H5交互玩法!

10 3D空間交互

3D交互主要利用3D技術,搭建立體化場景,突破畫面扁平化的限制,強調層次感。

但這種交互方式在開發設計環節難度較大,考慮到用戶的使用習慣,3D交互的玩法也比較單一,常搭配點擊、滑動等基礎手勢操作,3D作為H5亮點出現。

《龍貓線上扭蛋機今日營業!》中將“扭蛋機”“金幣”等元素3D化,原本正常比例的動漫人物Q版化。

扭扭蛋是一個動態的過程,如果使用二維平面形象,互動的效果并不明顯;3D物體強調了用戶的臨場感,還原扭扭蛋未知的趣味性,H5玩起來更加真實。

網易爆款H5交互玩法!

11 全景交互

在360°全景形式中,用戶可以上下、左右滑動。

這種H5以類VR的形式承載整個畫面交互,更注重H5場景的設計,空間立體感比較強,要求畫面360°邊界銜接流暢。

不過由于加載內容較多,H5體量較大,很可能會出現播放時畫面卡頓等問題。

網易新聞的《一廿間,二十載》呈現全景向的場景,向用戶介紹網易20周年的發展歷史,用戶可以360°旋轉手機,查看全景畫面,沉浸于H5營造的虛擬場景中。

網易爆款H5交互玩法!

作者:噠噠er

來源:網易H5(wangyih5)

本文由青瓜傳媒發布,不代表青瓜傳媒立場,轉載聯系作者并注明出處://www.exjyiw.com.cn/161716.html

聯系我們

18205969981

在線咨詢:點擊這里給我發消息

郵件:[email protected]

工作日:9:30-18:30,節假日休息

QR code