亿众互动:网络缩写语大挑战,拿来吧你!

案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分30秒
案例:网络缩写语大挑战,拿来吧你!
品牌:亿众互动
技术实现: HTML5
制作:亿众互动
亮点:
网络语言正逐渐成为人们网络生活中必不可少的一部分,而缩写语往往在特定的网络媒介传播中表达着特殊的意义;网络冲浪时,为了提高网上聊天的效率,为了诙谐、逗乐,为了避免不必要的引战和争端,我们就通常会采用缩写语来表达当时的心境和情绪。
此H5以“网络缩写语大挑战”为主题,以“答题闯关”为创意形式,在线上打造了一个互联网“冲浪世界”;风趣滑稽的火柴人灵活串场,激发用户好奇心,满足沉浸式体验;最后根据用户作答情况给予相应的头衔称号,增强用户独特的互联网属性。
火柴人滑稽生动,伏地、射蛛丝等经典动作唤起强烈的情感共鸣;火柴人在第一关如江湖大侠般身轻如燕、飞檐走壁;在第二关如深海游鱼般肆意徜徉、冲浪,在第三关则变身“你的线上好友”,邀请你进群畅聊。
- 策划逻辑
①Loading页:采用网络热门“地铁老人看手机”表情包,配合刷爆的缩写语弹幕,熟悉的冲浪环境呼之欲出;缩写语如流星下坠落至底部,自动进入【首页】;
②首页:火柴人叉腰刷动手机,缩写语交替更换,给予用户预期;隐藏其中的重力感应技术,给予用户意料之外的小惊喜;点击“接受挑战”后进入【关卡选择页】;
③关卡选择页:火柴人如风般极速窜入,带动卡牌自然翻动,每一张卡牌数字由火柴人形变而成,极富新鲜感;滑动卡牌选择第一关后点击“开始挑战”,火柴人如蜘蛛侠一般向上射出蛛丝,牵引着蛛丝跃入【第一关】;
a.第一关:火柴人来回跳动,轻盈灵活的身姿犹如江湖大侠般飞天遁地;输入昵称点击“查看结果”即可生成关卡海报;未通关,点击“重新挑战”;通关点击“进阶挑战”进入【第二关】;
b.第二关:火柴人在音乐中沉醉,惬意徜徉在快乐的网络世界;点击“查看结果”生成关卡海报;未通关,点击“重新挑战”;通关点击“进阶挑战”进入【第三关】;
c.第三关:火柴人变身微信好友,将用户拉进群尽情畅聊,时不时发送可爱的动态表情包,同时可解锁礼花、烟花等小彩蛋,惊喜连连;点击“查看结果”生成关卡海报;未通关,点击“重新挑战”;通关长按保存当前页海报,点击“炫耀战绩”进入【分享页】;
④通关海报页:结合题目作答的正误多少,用户可获得带有网络属性的头衔称号,如:高质量冲浪选手、冲浪界在逃懂王、互联网缩学家等,新颖又有个性。
⑤分享页:遮层弹窗配合分享文案,引导用户分享至好友或朋友圈。
视觉设计
①整体采用极简的黑白调,以黑灰色线条为主,背景大面积留白,具有丰富的想象空间;
②反馈动效运用明亮的黄、绿、红等暖系色彩,和整体的黑白调产生鲜明的对撞,视觉冲击力强烈,不会感到单调沉闷。
转场及动效
①转场丝滑流畅,题目、关卡间的衔接自然连贯;整体节奏非常明快紧凑,不花哨不喧宾夺主,用户的注意力相对集中;
②动效非常酷炫,火柴人的动作灵活矫健,反馈动效中花朵徐徐盛开、屏幕震动、枯叶凋零、面包机四溢的香气等效果的实现,将交互提到至一个新高度,使整体富有蓬勃活力,为用户创造了一个更加自然的体验。
互动体验
①操作简单,交互简洁,火柴人动作丝滑连贯,给交互增添了几分灵动性;
②题目难度梯级划分明确,体验过程中逐渐升级,充分调动起用户的胜负欲。
③转场及反馈自然流畅,灵敏度非常高。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

微信扫一扫
关注该公众号