2021最新H5案例合集（二）

上期為大家帶來許多優秀的H5案例，反響不錯，很多朋友都希望能再多分享一些。下面，藍橙互動就為大家帶來第二期精選H5案例合集。

案例名稱：跟我到古代云逛廟

案例品牌：餓了么X口碑網X清明上河圖

餓了么與清明上河圖合作，將餓了么上面的商家植入進上河圖里面的商鋪，整幅畫面以動態形式呈現，用戶點擊上河圖中的商家，可以領取優惠券。

標題頁面的進度條加載完畢后，用戶隨著鏡頭穿過云霧，來到清明上河圖中，左滑瀏覽，熙攘街頭有許多熱門店面，和零星分布的講解，以及人物對話框。店面包括外婆家，來伊份，麥當勞，奈雪的茶，海底撈等100多個各類店鋪，店鋪上面有招牌，LOGO和廣告語；零星分布的講解內容有超級品牌日，顧客對美食的感慨，蜂鳥配送，口碑直播等平臺活動和服務內容；人物對話有外賣員送餐，顧客取餐，老板感慨加入餓了么以后訂單很多等生活化內容。用戶點擊喜歡的店鋪，查看大圖，有小二報出店名和歡迎詞，用戶可選擇進店搶貨或繼續逛街。

還原清明上河圖的風格，進行手繪呈現，既有古風美感，又有很多熟悉的現代美食店鋪羅列，點開后各個品牌均有優惠可以領取，對用戶來說都是實打實的省錢，精準迎合需求，同時很詳細的宣傳了平臺各方面的品牌優勢和貼心服務。

案例名稱：秘密花園

案例品牌：餓了么X后浪出版公司《秘密花園》

該案例契合餓了么藍騎士的口號，與知名的涂色繪本《秘密花園》合作，將餓了么上可以點的商戶植入到秘密花園中，凸顯下午茶的概念，用戶可以看到藍騎士與用戶之間發生的故事，凸顯“愛什么來什么”的口號。

點擊打開作品，來到秘密花園風格的橫屏界面，左滑屏幕查看畫作每部分的內容，藍騎士為小朋友送來好吃的，為在公園看書的女生送來奶茶，為聚會慶生的女生們送來蛋糕，為求婚的男生送來花束。用戶點擊發光圖標領取優惠券。

還原《秘密花園》本來的色彩元素和手繪風格，色彩豐富元素繁密，各個場景都很溫暖美好，又有生活氣息，都是生活中人們經常遇到的外賣需求。

案例名稱：燃...燃起來了

案例品牌：新華社客戶端X新華社體育部X新華社技術局X新浪微博

全民健身時代，遠離高熱量食物，用運動消耗卡路里，才能實現身材升級。參與新華社出品的足球游戲，了解運動，卡路里，與實物數量之間的換算，還可以用成績兌換獎品哦！

初始界面有一位身著球服的胖男生背影，上方是標題和該男子肥胖程度，下方是開始觸點，排行榜與游戲方法詳情。

點擊“運動有獎”開始挑戰，男生大腳開球，向前奔跑，用戶點擊跑道讓運動員左右移動，在奔跑時需要注意足球位置，及時挪去帶球，同時接住水，避開高熱量食品和裁判，接住水可以保持左上角身體含水量進度條不枯竭，接住高熱量食品會抵消減掉的卡路里，沒有及時接回球和沖撞裁判會導致游戲結束，奔跑一定距離后男子身材會變瘦一個等級。

案例名稱：東京奧運會 金牌大挑戰

案例品牌：人民日報新媒體 x 中國移動 x 咪咕

這是人民日報新媒體聯合中國移動、咪咕制作的H5案例，旨在傳遞奧運精神，通過互動H5游戲的形式讓用戶體驗不同運動項目的趣味。

加載成功后，用戶可以在首頁看到九種不同的運動項目金牌，只要點擊自己感興趣的項目金牌，即可體驗該運動項目的線上比賽；頁面跳轉后，用戶可以在游戲起始頁了解運動項目的規則、歷史以及中國運動員最早在該項目取得的成就，點擊“我要挑戰”了解線上比賽的規則和比賽方法，在倒計時后開始比賽，結束后會根據你的比賽成績，為你頒發金牌、銀牌、銅牌、謝謝參與四個獎項，用戶可以在頒獎頁面直接保存海報，也可以分享到朋友圈，如果對成績不滿意，可以點擊“再次挑戰”。

整個案例操作簡單，游戲也具有反復參與性，九種不同的運動項目包含全面，有些是用戶平時很難接觸到的，通過游戲體驗是一種很新穎的方式，也能夠增強用戶對該項目真正的運動體驗的好奇心。

案例名稱：我們能一起看奧運么？

案例品牌：人民體育&騰訊看點&QQ瀏覽器

選擇自己最喜歡的奧運項目，發給好友，考驗默契。

點擊打開作品，在紫色系分框圖中點擊自己最喜歡的奧運項目，選五個，被點擊的項目圖片會從紫色系變為彩色系，右下角有已選數量，點好后，用戶可選擇“就這樣猜”看看自己和誰最默契，或選擇“我來出題”，然后發給好友讓好友猜，最后用戶可查看自己的選擇，和登陸QQ瀏覽器查看奧運主題版塊。

色彩統一，每個項目都有相關配圖，讓用戶瀏覽起來有畫面感，從而選出自己的最愛。被選項目會變成別的顏色，視覺突出，方便用戶回顧。

案例：新生代返場 升級新可能

品牌：網易云音樂 X adidas

開學季在即，如果給你個機會重回校園，你會是老師同學心目中怎樣的學生呢？帶上adidas新裝備，一起重溫校園時光吧！

選擇自己的身份，學生，畢業多年，或已為人父母，開始答題，包括書包里的東西，喜歡坐的位置，對一段音樂的聯想，感興趣的新課和如何回復小紙條，輸入姓名，選擇性別，生成海報，包括你所屬的學生類型，頭腦王者，學霸或暖心班長等，以及相關分析，用戶可點擊觸點登陸相關平臺。

校園類作品，顏色清新活躍，畫風青春洋溢有活力，插圖上的人物都身著阿迪達斯服飾，加深用戶對品牌的印象，和感受品牌服飾對青春氣質的加持。除了上課下課這樣的上學正規流程，作品還融入了傳紙條，打球，零食這些學生時代最喜歡的趣味，引發美好回憶。

案例名稱：biubiubiu

案例品牌：新華社技術局&新華社客戶端&新華社體育部出品

新華社出品，用戶在作品中感受射擊樂趣，通過三關，即可參與抽獎，挑戰體育項目，呼應奧運主題。

首頁有獎牌數，五星紅旗和個人最高分，用戶可選擇音效是否打開，查看排行榜和開始游戲，游戲開始后，上方是30秒倒計時，目標38環，中間是瞄準星和靶子，滑動左下方的觸點瞄準，點擊右方射擊，靶子上會出現擊中的環數和槍眼，上方目標欄跳至相應剩余環數，完成38環后進入下一關，靶子會變小或晃動，三關后，總成績和獎杯出現，點擊抽獎。

作品界面很簡潔，瞄準星視角，讓用戶專注射擊，在嚴肅的背景音樂下感受緊張的比賽氣氛。

其他案例：2021最新H5案例合集（一）