经典测试类H5案例合集


从H5刷屏的情况来看,测试类型的H5更容易刷屏,这也是深受商家们喜欢的原因。假如你也想制作一款测试H5,不妨先看看这些H5定制案例。

 

 1、测试你的黑夜人格  


  1.png

创意

报复性熬夜和习惯性熬夜已经成为9102年的亚健康第一杀手了,本案例就是由丁香医生和即刻APP联合出品的,探寻为什么你会熬夜的测试型H5。

 

策划

加载页面是一只熬红了眼的漫画猫,首屏是一张主题海报,中间赫然写着“测试你的黑夜人格”,点击屏幕下方的“点击进入”,出现了一个小动画,画面中是一只发誓今天一定要早睡的漫画猫,当漫画猫躺好后,用户需要点击屏幕左下角的“盖好你的小被子”,才能继续。盖好被子的漫画猫开始数羊催眠,但是始终辗转反侧没有睡着,此时界面中弹出一个对话框,点击继续,根据提示点击画面中的弹幕,选中三条弹幕后即可生成专属的黑夜人格海报。

 

设计

紫黑色为主色调,黄色为辅,展现着黑夜的场景盖好小被子的交互做的温馨可爱,主角虽是一只漫画猫,但跟失眠的每一个人都有点像。

 

 2、你的内心住着谁? 


2.png

 

创意

咪咕阅读推出的一支测试类的H5,为宣传中国数字阅读大会与咪咕阅读联合在杭州举办的“阅见未来 1+1+1+1=Future”的活动,预约直播,可以免费阅读四位大咖作品。

 

策划

①过渡的时候显示进入梦境,梦境反映最真实的你,潜意识的选择投射出内在的特质,点击“进入梦境”按钮。②一共有八道测试题。③落地页是你内心中住着的3位作家,各占百分之多少的比率,下方还有雷达图和分享按钮。


设计

仿佛身在梦境中,整体以蓝紫色为主色调,星空也是很梦幻的颜色。

 

 3、没想到明日城 


3.png


创意

36氪为宣传自己的“没想到明日城”体验馆,制作的线上问答测试类型的作品,用户在作品中穿梭于“明日城”当中,对遇到的事件进行结果上的选择,最后生成海报,抽取优惠券,也可以点击链接了解“明日城”的具体建设理念和各个场馆的创意布置,以此引起用户兴趣,增加参观人数。

 

策划

加载完毕后,有大致三个环节①导入页面,随着镜头从宇宙,夜空,落向城市,结合字幕对现在和未来进行发问和创想。②在一扇半敞开的舱门下,点击“前往没想到明日城”,选择性别,输入名字,进入城内,在各个街道穿梭,一个场景一个问题,问题内容包括引路人身份,街头播放的音乐,图腾物件等,用户点击选项后画面会出现相应效果。③回答完毕,生成结果海报,包括综合指数,运气,努力,欲望等各方面的值数和简单解析,用户可以在此界面抽取合作品牌的优惠券,或者登陆购票平台。

 

设计

蓝色系的主色,比较暗的场景,街头的字体和灯光则比较明亮,有霓虹的效果,让作品充满了未来感,符合“明日城”的主题。

 

 4、没想到,你竟然是这种设计师!

 4.png 

创意

一格一物推出的测试类的H5,表达了设计师在做完工作后,需求方非要改方案,内心的性格会是什么样的,与其他设计师产生共鸣。


策划

①首先标题是“你竟然是这种设计师!”点击下方的“什么”按钮,去一探究竟。②一共有七个问题。③最后生成一张你是什么性格的人,下方有二维码,形成回流,两个按钮,“再测一次”,“寻找同类”进入一格一物的文章页面。


设计

整体色调以白色为主,手绘漫画风格。


注:想要查看更多的H5案例,可以加我们QQ:3513138755,我们会把最新的案例发给你哟

 

相关链接:H5制作|微信小程序|微信小游戏|H5开发|行业H5制作

更多疑问 全面解答

全面解答全面解答全面解答全面解答

了解更多

方案咨询

价格咨询

工期咨询