交通银行 + worldskills shanghai 2021：交出你的隐藏大招

2020-10-05 H5案例分享 H5案例分享

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

识别图中二维码

交出你的隐藏大招-查阅二维码

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

案例：交出你的隐藏大招

品牌：交通银行 + worldskills shanghai 2021

技术实现： jQuery + PixiJS + TweenMax + html2canvas

亮点：

1、创意定位

worldskills shanghai 2021（上海2021年第46届世界技能大赛）和交通银行出品的H5，展示生活中的技能高手，挖掘隐藏大招。

2、策划上

① 首屏是“交出你的隐藏大招”大标题，点击交大招按钮，提醒输入你的名字，输入名字后，才会出现向上滑动提示；

② 各种技能快速展示图标，而后是文字版本的各种技能标签，左右滑动可以快速选择大招；点击文字版本的大招标签后，标签会变成卡通图标；一共有80个标签可供选择，至少选择一个；点击右下角的“确认”按钮，将生成一张你的隐藏大招海报；

③ 海报中列出了你的大招个数，给出的关于你的一段文案概述，和刚刚选择的大招图标。

3、设计上

扁平风格，天蓝色为主色调，关于技能大招默认是文字形式，用户点击后变成图标形式。

4、体验上

梳理了各种大招，原来看似平淡无奇的人，都是身怀绝技的高手，可能有时候他们自己都不觉得这个技能原来是耀眼的大招。

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

标签