随着H5开发技（jì）术（shù）的成熟，H5页面能（néng）支持丰富更能和（hé）视觉效果，实现不同的（de）H5玩（wán）法设计，比如H5互动（dòng）游戏、H5漫画、答题测试H5、年（nián）度H5账单等等。蓝（lán）橙互动精选（xuǎn）H5案（àn）例合集分（fèn）享08期，就给大家（jiā）分（fèn）享一下各种不同玩法的（de）H5案例。

案例（lì）名（míng）称：鱿鱼游戏

案（àn）例品牌：MEO

结合当下流行的（de）影视（shì）作品“鱿鱼游戏”创（chuàng）作的H5交（jiāo）互小（xiǎo）游戏，各种（zhǒng）限（xiàn）制，让用户（hù）体验人（rén）性的善恶，欲罢不能的一（yī）次次去挑战，最（zuì）后通关（guān）的（de）人，获得通过的（de）“乐趣”。

鱿鱼游戏共（gòng）6关（guān），每关是一个独立游戏（xì）。每一关开始（shǐ）前都（dōu）有操作和规则提（tí）示（shì），限时游戏。违犯规则和突破限定（dìng）时间（jiān），都算Game Over。最后（hòu）通关的者，会有通（tōng）关祝贺：消耗（hào）命数+引（yǐn）发（fā）思考的文案。

巨难无比，即使了解《鱿（yóu）鱼游戏（xì）》剧情的人，通（tōng）关也得操作几十遍，小编开始就以为这个（gè）游戏有（yǒu）bug，根（gēn）本玩不过（guò）去（qù）。引发思考（kǎo）：如果有坚（jiān）持（chí）不懈（xiè）通关的韧性和决心（xīn），天（tiān）下什么（me）事，搞（gǎo）不定？

案例（lì）名称：警惕身边的TA

案例品（pǐn）牌：人民日报新媒体

人民日报（bào）新媒体出品（pǐn），用根据真实案例（lì）改编（biān）的情节（jiē）故事，告（gào）知用户间谍的常用套路与作案目标，测试和提高全民反奸防谍意识。

打开作品后，在三个（gè）故事中（zhōng）任（rèn）选一个进入，在故（gù）事节点选择自己是（shì）否接受情境（jìng）中对方的要求，“天上（shàng）的（de）馅饼（bǐng）”讲述（shù）了（le）境外（wài）间谍势力利用高薪（xīn）网络兼职，企（qǐ）图让“你（nǐ）”帮他拍摄军港（gǎng）和军事基（jī）地照（zhào）片；“美丽的（de）陷阱”是（shì）美女间谍利（lì）用美色，结识（shí）男性，收集尖端机械的相关信息；“坑人的（de）朋友”是间谍势（shì）力渗入朋友群（qún），通过转介（jiè）绍（shào）企图（tú）套取国（guó）家机密信息。最后间谍都无（wú）一例外被依法逮（dǎi）捕，作品也（yě）会根据用户的选择给出反奸（jiān）防谍意识测（cè）试（shì）结（jié）果。

案例名称（chēng）：消灭全（quán）民公敌

案例（lì）品牌：淘宝（bǎo）特价版（bǎn）

网购盛行，但（dàn）是陷（xiàn）阱和套路也很多，淘（táo）宝特价（jià）版（bǎn）在故（gù）事中化身江湖侠（xiá）客，行（háng）侠仗义，戳破各种（zhǒng）消费（fèi）诡计，具象化购物的各种不良现（xiàn）象，表明自身态（tài）度，有针对（duì）性（xìng）的（de）宣（xuān）传（chuán）自身（shēn）优势，吸引用户使用。

下滑（huá）浏（liú）览长图，内（nèi）容是（shì）一位婴儿降生，被（bèi）麒麟赐予神秘美玉，长大后行走江湖，看到村民收到（dào）货不（bú）对版的物（wù）品，帮助村民赶走旗号为“拼”的（de）帮派，看到低（dī）价大甩（shuǎi）卖，怒揭黑心（xīn）商人原（yuán）价更低的真相，遇到套路似迷（mí）宫的开业大酬宾，一剑毁掉，又打败（bài）了假装一手货源的中间商，获得群众（zhòng）支持，最后（hòu）杀掉了（le）集“假（jiǎ）冒”“套路”“高价”“伪劣”于一身的黑心头目，完成使命，屏幕出现“为（wéi）消（xiāo）费平权而斗”“为杀价而生（shēng）”的（de）标语。

案（àn）例名称（chēng）：灵（líng）魂试香纸（zhǐ）

案例品牌：天猫

灵魂（hún）也是有香气的，听起来是不是（shì）很新颖？天猫（māo）超（chāo）级品牌日做品牌推广，根（gēn）据用户性格测试结果，推荐不（bú）同品牌的产品，提（tí）高品牌（pái）日（rì）知名度，加（jiā）深用户（hù）对各（gè）大品牌的印象，促进消费。

点击标题页的触点，开始测试，主题（tí）是在一座古堡里探险，跟着作品来（lái）到不（bú）同情境，回答相关问题（tí），包括是否带上舞会面具，对墙上的空画框做（zuò）何感想，选择一幅画拖入，来到花（huā）园会如何摆放花盆，听（tīng）到受伤的猫（māo）喊“疼”第一反应是什么，选择一个（gè）传送门结束旅程。输（shū）入名字生成海报，包括“你”的灵魂（hún）香气形（xíng）容词，两个关键词和（hé）解说，主图，“魂器推荐”是一（yī）件商品，旁侧有（yǒu）具体（tǐ）的商品名称，报头（tóu）是（shì）天猫超级品牌日logo与商（shāng）品品牌logo。

案例名称：壳牌电子会员2周年庆

案（àn）例品（pǐn）牌：壳牌（pái）

这款（kuǎn）H5是由（yóu）‘壳牌’开（kāi）发的盘点类H5，旨（zhǐ）在通过展现用户（hù）与壳牌（pái）的（de）大数据信息（xī），让用户了解自己与壳牌的消费记（jì）录（lù），从（cóng）而（ér）宣（xuān）传品牌（pái）信息。进入（rù）H5后，出现（xiàn）动态（tài）横条（tiáo）插画形式的（de）主题（tí）‘8月（yuè）壳粉节，2周（zhōu）年’，下面点击（jī）启动引擎进入游戏；进（jìn）入游戏后通过滑动（dòng）翻页查看各种自己（jǐ）与壳牌的经历，从认识到（dào）第一（yī）次加油，然后（hòu）是最（zuì）早的（de）加油时间，最晚的加油时间，去过的壳牌门店；最（zuì）后（hòu）形成一张发条（tiáo）形式的信息展示页，可以分（fèn）享（xiǎng）到朋友（yǒu）圈；再次下滑则会进入红包雨游戏中，只有壳（ké）牌会员（yuán）才能（néng）参与。

案例（lì）名称：成都天府通-年（nián）度账单（dān）H5

案例品牌：天（tiān）府（fǔ）通

2019成都公共交通大数（shù）据报告发布后，天（tiān）府通公司正式上线年度个人出行账单查询功能（néng），用（yòng）户可打开天（tiān）府通APP，点击首（shǒu）页顶部（bù）活动入口即可（kě）查询到（dào）自（zì）己的年度（dù）出（chū）行账单。

本H5、“公共交（jiāo）通（tōng）年终总结”的主题更具个性（xìng）化和趣味性（xìng），内容包括用户全年的公共交通消费（fèi）、搭乘公交和（hé）地铁的“成（chéng）绩”、最早（zǎo）乘车与最晚乘车时间、个人减碳（tàn）量（liàng）等数据，直观地反应了用户与城市（shì）的密切互动。

以上就是本期为（wéi）大家带（dài）来H5案例分享（xiǎng），感兴趣的朋友（yǒu）可以持续关注我们蓝（lán）橙互动（dòng）官网的新闻动态，或是关（guān）注蓝（lán）橙（chéng）互动官方微信公众号，我们会（huì）不定时向大家分享最（zuì）新的优秀案例（lì）。

相关（guān）阅（yuè）读：《精（jīng）选H5案例合集分享-07期》