亿众互动:2022必达成的66个年终成就,你占几个?

2022-12-28 H5案例分享 H5案例分享
亿众互动:2022必达成的66个年终成就,你占几个?


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

识别图中二维码

2022必达成的66个年终成就,你占几个?-查阅二维码

完整欣赏此案例大约需要2min


案例:2022必达成的66个年终成就,你占几个?

品牌:亿众互动

技术实现: html5

制作:亿众互动

亮点:

每逢跨年之时,大家都会热衷于对过去一年自己的经历做个全盘回顾和总结,通过仪式感满满的复盘告别过去一年的自己,迎来新一年的曙光!

 

此支H5以清单选择为核心玩法,模拟用户就餐点单的场景,让其在学术、事业、健康和娱乐等方面点选自己在2022年有过的奇葩成就,伴随着小票打印机“咔擦咔擦”的声音,从小票机口吐出自己的年度成就小票,生动逼真,场景感十足。

 

这样“搞”又奇葩的成就其实是用户过去一年的平凡经历,平凡小事皆是所成,在年终做一个成就小票这样的总结,仪式感满满,诙谐的夸夸账单也不自觉地让用户想要炫耀一波,具有社交货币的分享属性。

 

同时,海报借小票文学的热潮,以小票的形式承载用户选定的内容,新颖的形式易引发用户分享。

 

一、创意亮点:

1、内容有趣,分享性强:选项内容诙谐搞笑,在用户或赞或丧的生活经历中挖掘出正向的立意点,反差中给用户超出意料的惊喜感,在平凡小事中多角度地夸夸用户,让其乐于分享。选项内容也设置为大众更有可能经历的事情,在引起用户共鸣和不过度暴露隐私信息中实现了很好的平衡,帮助用户树立积极开朗的幽默人设,具有社交货币的分享属性。

 

2、形式新颖,交互有趣将点餐的场景流程套用在用户做年终总结的过程中,将其所选的选项包装在账单小票中,借“小票文学”的热潮,创作出新奇的海报形式,既契合主题,又能超出用户预期,点单的过程交互简单,趣味十足,符合用户体验充满惊喜感。

 

3、设计出彩,画风诙谐整支H5的UI页面设计模仿点单的场景感,用户翻开皮质封皮——点单——结算小票,一套点单操作行云流水,带给用户熟悉感和沉浸感,同时,以拼贴风格和emoji复合小表情来制作与事件相对应的插图,配合事项文案,传递出更多信息和诙谐情绪,用户点选事项后,事件插图会有几秒的反馈动效,及时生动。

 

二、策划逻辑:

 

1、loading页:

努力向前奔跑的黄豆人挥汗如雨,就像辛苦奋斗了一整年的我们一样,带着对具体生活的喜悦热爱和种种魔幻现实的不解与愤怒,走到了2022年的年终岁尾。橙色皮制的封面质感、边缘细密的缝线,使点单pad更加逼真高级,进度条随之加载,下方变化着对过去一年的总结或是吐槽,趣味十足。

 

2、点单页:

Loading页加载结束后,封皮翻开,映入用户眼帘的就是点单页面了,页面模仿就餐点单页面的同时,加入了一些本扣、书签等小元素,拼贴的风格使用户具有场景熟悉感的同时,又有出乎意料的惊喜感。用户可以在打工事业、学术文化、运动健康等左侧的大分类中选择相对应的分类事件,点选后加入购物车,也可以随时点开购物车查看、删减已选事项。除此之外,还设置了部分可选规格的事项,比如在甩锅背锅运动中,用户可以自选是“甩锅”还是“背锅”,更加精准地对标用户经历,切合用户处境,成为其互联网嘴替,也让内容选择更加丰富。


3、人才圈:

在人才圈中,系统预设了数条对过去一年的总结或吐槽文案,让用户一看就觉得说到心里去了,可以上下滑动浏览的过程中动动手指点点赞!

 

4、输入信息页:

用户选择完所有选项之后,在信息输入弹窗中输入名称,下滑选择年度成就感言,就可以一键打印自己的年度成就小票啦!

 

5、海报页:

伴随着咔嚓的小票打印音效,小票打印机口缓缓吐出一张用户选择的小票打印单,其选择的年度成就感言被拓印在主标题下方,专属性和个性化得到很好的体现。用户可以上下滑动查看所有的已选内容,点击“重新打印”可以重新点单,点击“炫耀一波”,则可以分享给好友,同时,用户页也可以长按保存自己的成就小票,生成海报,进行分享和传播。

 

三、视觉设计:

 

1、页面设计包装成就餐或外卖点单的场景,只不过用户点选的不是菜品,而是在22年所获得的成就,通过熟悉的页面场景设计让用户产生熟悉感。同时,在点单页面的设计中融合了缝线、本扣、圆环等与笔记本相关的元素,对应着loading的皮质封面,又给到用户出乎意料的惊喜感,熟悉中带着几分惊喜的陌生,可谓是创意满满!

 

2、橙黄色的主视觉充满跨年的喜庆氛围,banner图绽放的烟花和金奖杯的店铺头像设计也为成就感满满的年终总结增添了几分仪式感。考虑到本支H5的创意亮点主要是在选项内容的文案上,设计时也对内容文案的字体字号进行了斟酌,放大到保证用户看清的程度!

 

四、转场、动效及音效:

1、转场:转场丝滑流畅,翻开皮质封面之后,用户从loading页过渡到点单页,点单结束之后,成就账单会从小票打印机口吐出,避免了用户体验时的割裂感。

 

2、动效:动效精巧,每个事件配图在用户点选后,都会出现一个2s左右的配图动效,反馈及时又能带给用户意想不到的惊喜感,使整个体验流程更加生动有趣,避免用户产生烦躁焦虑的情绪。其次,在生成海报时,小票缓缓从小票打印机中被吐出,5s之后小手将小票拽出,既模拟还原了小票打印的过程,充满仪式感,又不至于让整个体验流程过长。

 

3、音效:背景音乐诙谐中带着喜悦,十分契合奇葩又“搞”的成就账单,使用户在幽默欢乐的氛围中完成点单,减少流程的乏味与枯燥感,结尾生成海报时,打印机咔嚓咔嗞的音效使体验更加真实,直戳用户爽点!

 

五、互动体验

交互提示明确,交互过程符合用户常用的点外卖形式,认知成本低,操作简单。

 

快来动动手指点点单,收获你的年度惊喜成就小票吧。





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

标签

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

相关推荐:

欢乐谷:欢乐谷-国潮神话节

亿众互动:情人节谋杀案

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~