藍(lán)橙互動(dòng)精選H5案例合集第三期來(lái)了，一起來(lái)體驗(yàn)一下各種不同的H5，尋找全新的創(chuàng)意靈感吧。如果想對(duì)下面的H5案例有一個(gè)詳細(xì)的了解，可以在線咨詢我們藍(lán)橙互動(dòng)。好了，話不多說(shuō)，大家接著往下看吧！

案例名稱：耳朵里的小怪獸

案例品牌：QQ音樂(lè)

QQ音樂(lè)給人們帶來(lái)美好聆聽(tīng)體驗(yàn)，同時(shí)也關(guān)注著有聽(tīng)力損失困擾的孩子們，本作品讓用戶了解聽(tīng)力損失給孩子們帶來(lái)的影響，動(dòng)動(dòng)手改變他們的世界，制作公益海報(bào)，宣傳公益項(xiàng)目，傳播愛(ài)心力量。

開(kāi)始是一小段黑白動(dòng)畫(huà)，講述了一個(gè)愛(ài)找孩子麻煩的小怪獸，跟聽(tīng)力受損后孩子耳中的音樂(lè)一樣不被孩子喜歡，根據(jù)提示拉動(dòng)名為“制作低頻音樂(lè)”的滑竿，被滑竿橫向延伸到的區(qū)域會(huì)變成彩色，下方有制作進(jìn)度，滑竿拉完畫(huà)面完全變成彩色，用戶點(diǎn)擊下一步，選擇孩子們繪制的封面，內(nèi)容，和標(biāo)題，輸入名字，生成海報(bào)，包括公益宣傳官證書(shū)名稱，效果圖，參與人數(shù)，感謝語(yǔ)，用戶可保存海報(bào)或收聽(tīng)公益專輯。

案例名稱：一只小象的非正常死亡

案例品牌：99公益日X局部氣候X騰訊新聞X騰訊公益

由于人類的濫砍濫伐，以及偷獵狀況的存在，熱帶雨林面積急劇縮小，象群也掙扎在生存的邊緣，本作品用一只天真可愛(ài)的小象被虐待和死亡的故事，引發(fā)人們的思索與共情，用弱小無(wú)辜者的被害引發(fā)人們的惻隱之心，號(hào)召更多的人宣傳象群保護(hù)公益項(xiàng)目，加入象群保護(hù)行動(dòng)。

一個(gè)比較長(zhǎng)的故事，詳細(xì)講述了一只可愛(ài)單純小象短暫的快樂(lè)瞬間，和痛苦的漫長(zhǎng)生活，凄愴的背景音樂(lè)，除了短暫出現(xiàn)的綠色森林和小伙伴陪伴以外，都是暗色背景下小象的茫然行走，孤獨(dú)生活，和可憐的掙扎，以及被虐待后流著血死在了“熱帶雨林歡迎您”的招牌下，招牌上象群的微笑吟吟，與慘死的小象形成諷刺的對(duì)比，讓用戶深刻體會(huì)人類的自私給象群帶來(lái)的沉重傷害 

案例名稱：尋牛好運(yùn)圖

案例品牌：人民日?qǐng)?bào)新媒體X騰訊影業(yè)

點(diǎn)開(kāi)畫(huà)卷，左滑瀏覽，找到隱藏在畫(huà)里的牛，點(diǎn)擊后出現(xiàn)牛的名片，包括名稱，學(xué)業(yè)牛，事業(yè)牛，運(yùn)勢(shì)牛，愛(ài)情牛等，與寓意吉祥的簡(jiǎn)短古文講解，右上角有一分鐘倒計(jì)時(shí)和已找到的牛的數(shù)量，八頭牛全部找出后，可以合成金色?？?，最后用戶在金色?？ê桶藗€(gè)普通?？ㄖ羞x擇一個(gè)，生成祝福海報(bào)。

橫幅作品，畫(huà)幅較長(zhǎng)，棕黃色調(diào)為主，是傳統(tǒng)古畫(huà)的風(fēng)格。近景是年畫(huà)中的各種胖娃娃在玩耍嬉鬧，稚氣可愛(ài)福氣滿滿，遠(yuǎn)景是現(xiàn)代化建設(shè)的諸多產(chǎn)物，5G信號(hào)塔，高鐵動(dòng)車(chē)，鋼索斜拉橋等，表現(xiàn)了祖國(guó)高速建設(shè)發(fā)展下的繁榮景象。

案例名稱：平安銀行2021年中報(bào)高能來(lái)襲

案例品牌：平安銀行

平安銀行2021年中財(cái)報(bào)，結(jié)合奧運(yùn)會(huì)比賽項(xiàng)目把各財(cái)報(bào)數(shù)據(jù)動(dòng)態(tài)展現(xiàn)出來(lái)，交互簡(jiǎn)單，動(dòng)效簡(jiǎn)潔，把各個(gè)運(yùn)動(dòng)項(xiàng)目經(jīng)典動(dòng)作融合其中，讓用戶在輕松中，瀏覽數(shù)據(jù)，閱讀財(cái)報(bào)。

以平安銀行的橙色為主色調(diào)，巧妙的結(jié)合了奧運(yùn)會(huì)的運(yùn)動(dòng)項(xiàng)目，將業(yè)務(wù)和運(yùn)動(dòng)，交互和動(dòng)效，完美結(jié)合。讓大家在觀賞奧運(yùn)的同時(shí)，愉悅體驗(yàn)品牌方的年中財(cái)報(bào)數(shù)據(jù)，動(dòng)感，有趣，數(shù)據(jù)和效果，都很亮眼。

整體感覺(jué)很有意思，本來(lái)枯燥的財(cái)務(wù)數(shù)據(jù)，用體育項(xiàng)目、動(dòng)效、簡(jiǎn)潔的數(shù)據(jù)圖表和輕松的交互，把平安銀行的業(yè)績(jī)、增勢(shì)生動(dòng)的表達(dá)了出來(lái)，不明覺(jué)厲。

案例名稱：太空跳躍

案例品牌：新華網(wǎng)X波克城市X我是航天員X太空跳躍

新華網(wǎng)與波克城市聯(lián)合出品，普及中國(guó)航天事業(yè)進(jìn)程，相關(guān)技術(shù)，以及用戶比較關(guān)心的問(wèn)題答疑。用戶參與有趣的闖關(guān)H5小游戲，解鎖航天視頻，帶太空員回家。

打開(kāi)作品，選擇角色，男生或女生，開(kāi)始闖關(guān)，一共五關(guān)，每關(guān)開(kāi)始前，會(huì)有此階段航空成績(jī)簡(jiǎn)述，角色與此階段宇航主角對(duì)話解疑，他們分別是科學(xué)家，航天員，玉兔號(hào)，祝融號(hào)。然后開(kāi)始跳躍層級(jí)接星星游戲，右方有進(jìn)度條，第三關(guān)通過(guò)后可解鎖宇航服皮膚，右上角有關(guān)卡進(jìn)度。通過(guò)五關(guān)后，總得分跳出，一段30秒的動(dòng)畫(huà)視屏自動(dòng)播放，內(nèi)容是宇航員飛向太空飛船，降落倉(cāng)緩緩落地，四位宇航員出倉(cāng)，點(diǎn)擊觸點(diǎn)生成合影海報(bào)。

系統(tǒng)的介紹了中國(guó)航天事業(yè)的發(fā)展，作品的節(jié)奏把握得很好，問(wèn)答與游戲交叉進(jìn)行，時(shí)間長(zhǎng)度的分配讓用戶玩起來(lái)既不會(huì)覺(jué)得科普太多，也不會(huì)覺(jué)得游戲太長(zhǎng)有很難完成的壓力，最后的大合影也會(huì)有為國(guó)驕傲的親切感。

案例名稱：你可曾留意過(guò)那團(tuán)微光

案例品牌：PICC中國(guó)人民保險(xiǎn)

中國(guó)人保“微光開(kāi)啟計(jì)劃”宣傳作品，講述生活中暖心的小故事，號(hào)召用戶一起守護(hù)微光力量，助力溫暖延續(xù)。

上滑屏幕查看豎型長(zhǎng)幅漫畫(huà)，三個(gè)小故事，分別是給女兒買(mǎi)了生日禮物的出租車(chē)司機(jī)爸爸為了送早產(chǎn)的孕婦去醫(yī)院而錯(cuò)過(guò)了女兒生日;2020年情人節(jié)，因疫情爆發(fā)而沒(méi)能如期履行婚禮諾言的男醫(yī)生在病房給醫(yī)生女友準(zhǔn)備驚喜，兩人穿著防護(hù)服深情相擁；暴雨引發(fā)的洪水將至，一位老奶奶救助流浪貓一家，帶著它們一起上救生艇。最后是微光宣傳語(yǔ)，用戶輸入名字，生成參加活動(dòng)海報(bào)。

案例名稱：原來(lái)，TA們也會(huì)變成小孩

案例品牌：網(wǎng)易新聞X鎂信健康

網(wǎng)易新聞與鎂信健康聯(lián)合出品，呼吁大家關(guān)注身邊的老年人，像小時(shí)候他們悉心照顧我們一樣去照顧他們，選擇生活注意事項(xiàng)細(xì)則，生成關(guān)愛(ài)手冊(cè)。

手繪的構(gòu)圖相同的漫畫(huà)，讓用戶體會(huì)阿爾茨海默癥老人與一些年邁老人的小孩兒化行為，理解像對(duì)待小孩兒一樣去照顧他們的呼吁。關(guān)愛(ài)手冊(cè)的制作環(huán)節(jié)，既是心意表達(dá)，也是預(yù)防指南，可以仔細(xì)學(xué)習(xí)一下，家中有老人的可以應(yīng)用到實(shí)踐中，將關(guān)愛(ài)老人的倡導(dǎo)落實(shí)到行動(dòng)中，增進(jìn)親情互動(dòng)，也幫助老人預(yù)防阿爾茨海默癥。 

相關(guān)閱讀：

創(chuàng)意H5案例合集NO.1

創(chuàng)意H5案例合集NO.2