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

2021-12-14 H5案例分享 H5案例分享
亿众互动:网络缩写语大挑战,拿来吧你!


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

网络缩写语大挑战,拿来吧你!-查阅二维码

完整欣赏此案例大约需要1分30秒


案例:网络缩写语大挑战,拿来吧你!

品牌:亿众互动

技术实现: HTML5

制作:亿众互动

亮点:

网络语言正逐渐成为人们网络生活中必不可少的一部分,而缩写语往往在特定的网络媒介传播中表达着特殊的意义;网络冲浪时,为了提高网上聊天的效率,为了诙谐、逗乐,为了避免不必要的引战和争端,我们就通常会采用缩写语来表达当时的心境和情绪。

此H5以“网络缩写语大挑战”为主题,以“答题闯关”为创意形式,在线上打造了一个互联网“冲浪世界”;风趣滑稽的火柴人灵活串场,激发用户好奇心,满足沉浸式体验;最后根据用户作答情况给予相应的头衔称号,增强用户独特的互联网属性。

火柴人滑稽生动,伏地、射蛛丝等经典动作唤起强烈的情感共鸣;火柴人在第一关如江湖大侠般身轻如燕、飞檐走壁;在第二关如深海游鱼般肆意徜徉、冲浪,在第三关则变身“你的线上好友”,邀请你进群畅聊。

  • 策划逻辑

①Loading页:采用网络热门“地铁老人看手机”表情包,配合刷爆的缩写语弹幕,熟悉的冲浪环境呼之欲出;缩写语如流星下坠落至底部,自动进入【首页】;

②首页:火柴人叉腰刷动手机,缩写语交替更换,给予用户预期;隐藏其中的重力感应技术,给予用户意料之外的小惊喜;点击“接受挑战”后进入【关卡选择页】;

③关卡选择页:火柴人如风般极速窜入,带动卡牌自然翻动,每一张卡牌数字由火柴人形变而成,极富新鲜感;滑动卡牌选择第一关后点击“开始挑战”,火柴人如蜘蛛侠一般向上射出蛛丝,牵引着蛛丝跃入【第一关】;

a.第一关:火柴人来回跳动,轻盈灵活的身姿犹如江湖大侠般飞天遁地;输入昵称点击“查看结果”即可生成关卡海报;未通关,点击“重新挑战”;通关点击“进阶挑战”进入【第二关】;

b.第二关:火柴人在音乐中沉醉,惬意徜徉在快乐的网络世界;点击“查看结果”生成关卡海报;未通关,点击“重新挑战”;通关点击“进阶挑战”进入【第三关】;

c.第三关:火柴人变身微信好友,将用户拉进群尽情畅聊,时不时发送可爱的动态表情包,同时可解锁礼花、烟花等小彩蛋,惊喜连连;点击“查看结果”生成关卡海报;未通关,点击“重新挑战”;通关长按保存当前页海报,点击“炫耀战绩”进入【分享页】;

④通关海报页:结合题目作答的正误多少,用户可获得带有网络属性的头衔称号,如:高质量冲浪选手、冲浪界在逃懂王、互联网缩学家等,新颖又有个性。

⑤分享页:遮层弹窗配合分享文案,引导用户分享至好友或朋友圈。

 视觉设计

①整体采用极简的黑白调,以黑灰色线条为主,背景大面积留白,具有丰富的想象空间;

②反馈动效运用明亮的黄、绿、红等暖系色彩,和整体的黑白调产生鲜明的对撞,视觉冲击力强烈,不会感到单调沉闷。

转场及动效

①转场丝滑流畅,题目、关卡间的衔接自然连贯;整体节奏非常明快紧凑,不花哨不喧宾夺主,用户的注意力相对集中;

②动效非常酷炫,火柴人的动作灵活矫健,反馈动效中花朵徐徐盛开、屏幕震动、枯叶凋零、面包机四溢的香气等效果的实现,将交互提到至一个新高度,使整体富有蓬勃活力,为用户创造了一个更加自然的体验。

互动体验

①操作简单,交互简洁,火柴人动作丝滑连贯,给交互增添了几分灵动性;

②题目难度梯级划分明确,体验过程中逐渐升级,充分调动起用户的胜负欲。

③转场及反馈自然流畅,灵敏度非常高。





以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

【合集】8支国外创意,不同的角度看创意

腾讯创益计划X树洞行动救援团:生命诗歌灯塔

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~