开云(中国电子) KAIYUN





  • H5游戏制作
    H5游戏(xì)制作(zuò)
    H5游戏(xì)制作
    H5案例(lì)
    H5开发
    扫一(yī)扫
    h5定制
    h5定制

    回到顶部

    精选(xuǎn)H5案例合(hé)集分享-01期

    H5案例 2021年09月(yuè)28日

    对(duì)于(yú)互(hù)联网创意工作者而言(yán),永远保持(chí)充沛的精力和灵感可并不轻松,他们(men)平(píng)时向外界(jiè)输出智(zhì)慧成果,迎接一轮又一轮的(de)头脑风暴,面对高强度的作(zuò)业需求,还要努(nǔ)力维持着工作状态。在这样的情况(kuàng)下(xià),大家期盼着(zhe)有(yǒu)一座创意加油站出现,能(néng)够为我们提供取之不竭的灵感(gǎn)源泉。本期小编(biān)给大家带(dài)来的(de)就是(shì)全网最新(xīn)的H5案例分享,希望能给大家带来一些创意灵感。

     

    案(àn)例名称:建党100周年互(hù)动微电影《抉择》


    品牌(pái):人(rén)民日报(bào)新媒体×Bilibili


     H5案(àn)例

     H5案(àn)例

    H5案(àn)例


    人民日报新媒体联合(hé)Bilibili在建党100周年之际推出的作品,用户化身为剧中人物,在(zài)电影中(zhōng)选择情节走(zǒu)向,感受建(jiàn)党(dǎng),建国,科研和祖国建设的艰(jiān)辛之路和胜利之路,为党献出真挚的祝福(fú)。

     

    打开(kāi)作(zuò)品(pǐn)后,从“红色起点(diǎn)”“归国巨轮”“圆梦茶乡”中选择一(yī)个,开启体验,在出现选择时点击(jī)自己(jǐ)想要的(de)剧(jù)情走向(xiàng)即可,电影播放完(wán)毕后,用户可以(yǐ)看到自己的故事梗概,和剧(jù)情(qíng)解锁图,三个电影对应了建党前,建国时,和建国(guó)后的时(shí)间段(duàn)。

     

    案例(lì)名称(chēng):欢迎(yíng)来到(dào)特区金色大(dà)道


    品牌:深圳银保监局(jú)


     H5案例

     H5案例

    H5案例


    通过(guò)对(duì)深圳经济特区四十年发展过程(chéng)中(zhōng),银行保险(xiǎn)重(chóng)点企业的重大(dà)事件回顾,展示银行保(bǎo)险行(háng)业支持(chí)特(tè)区建设(shè),发挥了巨大的金(jīn)融作用。特别是深(shēn)圳银保(bǎo)监局成立以来(lái),银行保险行(háng)业(yè)继续发扬敢闯敢试、敢为人先、埋头苦(kǔ)干的(de)特区精神,永葆“闯”的(de)精神、“创”的劲头、“干”的作风,续写更多春天的故事!

     

    画面以时间为(wéi)顺序,从(cóng)80-90-00-10-至今,画面元素也(yě)会随着时代而变化,比如车辆、道路、人物和(hé)建筑风格等(děng);事(shì)件详(xiáng)情页背景也(yě)选用了三个不同时(shí)期的深南(nán)大道风景,与深圳金色大道呼应。

     

    案(àn)例名称:清华大(dà)学美(měi)术学院(yuàn)线上毕业展


    品牌:清华大学(xué)美(měi)术学院


     H5案(àn)例(lì)

     H5案例

    H5案例


    这是(shì)清(qīng)华大(dà)学美术设计研究院联合(hé)清华(huá)大学(xué)-阿(ā)里巴(bā)巴人机自然交互体验实(shí)验室、阿里(lǐ)云制作的(de)一场(chǎng)线上毕业展,通过线上展览(lǎn)的方式让更多的人看到清华美院学生(shēng)们的设计(jì)理念、艺(yì)术设(shè)计技能、执着理(lǐ)想、求真务实(shí)、自信的文化态度。

     

    在展览中,用户左滑屏(píng)幕依(yī)次浏览展位(wèi),每个展位首先是作者名字,照片,作(zuò)品名称,设计理念阐述,然后是作品展览,展(zhǎn)览包括图像和视频两种方(fāng)式,有的会有一些简(jiǎn)单(dān)的(de)小互动,让作者更直观的感受作品(pǐn)主旨,点(diǎn)击右下(xià)角作者名字会弹出(chū)作品图选,细节欣赏(shǎng),或其他平台的个人二维码,左下角有(yǒu)展(zhǎn)位序列号。用户在欣(xīn)赏过程中可(kě)随时点击左(zuǒ)侧列表,跳转至其(qí)他(tā)展(zhǎn)区或系别。

     

    案例名称:CHOCAPIC® Nutri-Game


    品牌:雀巢 Nestlé


     1632470340848240.jpg

    H5案例(lì)


    这是(shì)雀巢的chocapic产品宣传H5,目的是通过小(xiǎo)游戏(xì)的形式黏连年轻用户(hù)。


    H5采用小游戏的(de)形式,首(shǒu)屏是chocapic的产品介绍和游戏(xì)说明,点击(jī)“OK”按(àn)钮,进入游戏机界面; 


    游戏机界面,提示点(diǎn)击右(yòu)侧黄色“X”按钮,开(kāi)始游戏,而后是对(duì)话完毕(bì),点击(jī)屏(píng)幕左侧(cè)上下(xià)左右键小狗运动;点击(jī)右侧黄色“X”按钮,小狗跳(tiào)跃,游戏有点像小时候玩的超级马(mǎ)里奥;游戏过(guò)程中(zhōng),小怪物(wù)可以跳跃踩,谷物形式的(de)动(dòng)态元素碰到后让右上角的小(xiǎo)条一点点颜色充满。

     

    案例名称:小小星途揽月人


    品牌(pái):网易新闻 X EXEED星途


     H5案例

     H5案例


    神州十二号成功发(fā)射的新闻相信也点燃了许多小朋(péng)友(yǒu)的太空梦想,网易新(xīn)闻与(yǔ)星途汽车联合制作了此作品,根据孩(hái)子的性格生成小小探险家海报(bào),呼应最近关注度(dù)极高(gāo)的神舟(zhōu)十二号(hào)成功发射事(shì)件,表(biǎo)达对(duì)中(zhōng)国航天事业的尊重与自豪。

     

    点击导语下的“立刻出(chū)道”,回答问题(tí),包括孩(hái)子遨游太空会被什么吸引,遇到外星人会怎么做,然后输入名字,上传照片,选择(zé)海报背景(jǐng),调整照片在背(bèi)景中的大小和位置,即可(kě)生成(chéng)海报(bào),包括报头“小(xiǎo)小星途揽月人”,成(chéng)品效果图,和根据用户选择授予(yǔ)的(de)称号“人见(jiàn)人爱的(de)月球(qiú)御用(yòng)小摄影家”“深藏blue的太空救援小能手”等,用户可保存海(hǎi)报,或(huò)点(diǎn)击分(fèn)享参与抽奖。也(yě)可点击(jī)跳(tiào)转页面,了解相关活动和预约新款星途汽车的试驾。

     

    案(àn)例名称:你能通过公司实(shí)习期的考(kǎo)验吗?


    品牌:南方+


     H5案(àn)例

     H5案例


    这家“创业(yè)公(gōng)司”,史上(shàng)最强!以进公司实习(xí)互动为主题,设定不同的(de)场景和问题让用户选(xuǎn)择“继续(xù)实习”还(hái)是“歇一歇”进行游(yóu)戏


    每个环节出现4次对话(huà)框考验,结果页(yè)分别为“这就放弃了,XXXX”与“恭喜(xǐ)你通过(guò)第X关”两种情(qíng)况,制造反差,放弃后则弹出(chū)中国共(gòng)产(chǎn)党人的初心使命,让大家了解和关心党员群体背后的(de)坚持与奉献。    最(zuì)终结(jié)果(guǒ)页显示你拿到世界(jiè)最(zuì)牛创(chuàng)业公(gōng)司(sī)offer的潜力值结果(guǒ),设(shè)置(zhì)两个按(àn)钮(niǔ),一个为查看完整故事(三个(gè)故事党员群像(xiàng)合并),一个为(wéi)生成结果页,进(jìn)一步分享传(chuán)播。

     

    案(àn)例名称(chēng):壳牌“0”收益投资计(jì)划


    品牌:壳牌


     H5案(àn)例

     H5案例


    壳牌(pái)的环保主题作(zuò)品,模拟在地球上种树(shù),消灭二氧化碳的过程(chéng),让用户(hù)参与环保行动(dòng),提高(gāo)环保(bǎo)意识。


    主页点击接受挑战,在(zài)20秒倒计时内尽(jìn)量多(duō)的点击不断冒出的二氧化碳标志,让其变(biàn)成小树,倒计时结束,用(yòng)户可以看到自(zì)己的种树(shù)数量,获得的称号(hào)和(hé)排名,点击跳转到最后页(yè)面,可以看到最终(zhōng)种树数量对应(yīng)的二氧化碳吸收量,排行(háng)榜,和1分(fèn)52秒的主题视频。

     

    案例名(míng)称:欧罗巴(bā)蹴鞠(jū)大赛画传


    品牌:Formovie峰米X网(wǎng)易文创X哒哒


     H5案例

     H5案例

    H5案例


    峰米宣传作品,将现代足球报导与古代蹴鞠画面结合(hé),宣传传统文化和峰米产品优势,为店铺引流。

     

    横屏浏览,点击打开长轴画卷,卷首是标(biāo)语和简(jiǎn)约导语,点击(jī)蹴鞠球逐幅浏览,画(huà)面内(nèi)容有(yǒu)场(chǎng)上伤员急救,比赛引(yǐn)发企业股价波动,疫苗立大功,乌(wū)龙球,名流云集看台,国家队赶赴球场(chǎng),头(tóu)球(qiú)进决赛,点球争议(yì),最(zuì)后用户选择一副主图(tú)生(shēng)成收藏海报,海报右方有峰米(mǐ)产品优势描述(shù),用户可(kě)重选主图(tú)和登(dēng)陆店铺。



    联系QQ:2899301896

    开云和蓝橙互动·致力于(yú)为(wéi)企业提供更高效的开(kāi)发服务

    开云(中国电子) KAIYUN

    开云(中国电子) KAIYUN