华为钱包:原来这才是我的职场气质
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要1分钟
案例:原来这才是我的职场气质
品牌:华为钱包
技术实现: HTML5
亮点:
1.创意定位
这是华为钱包为了宣传“Mate30手机抽奖活动”制作的H5作品,作品由“行为测试+角色选择”两种方式构成,用户通过选择角色的方式,测试自己的职场气质,生成海报保存或者分享,达到宣传活动的作用,
2.策划逻辑
作品大致分为四个部分:
①Loading
加载界面是狮子、狐狸、马、兔子四种动物排队向前走,点击“立即开始”进入页面,众多动物在一起开会,讨论哪一个小组去见客户,背景模糊显示华为钱包的众多功能。
②行为测试
选定见客户的小组后,用户需要选择与客户见面需要携带的物品,每一个选项中都有
Mate30的出现,用户选择完毕,点击“准备好了,出发”或“返回上一级”重新选择。
③角色选择
进入饭局,图面上的动物正在推杯换盏,仔细观察会发现每只动物都在扮演不同的角色,不同的站位也再反应不同的参与心理,乖乖听老板说话的小鹿,夸赞客户的马,默默吃东西的兔子,选择其中跟自己性格最像的动物,选择好后,即可生成海报,获取测试结果,也可以选择返回上一级,重新选择。
④生成海报
海报会根据用户的测试结果生成海报,也会生成相应的漫画角色,可能使无欲无争的沙僧,也可以是不懈奋斗的工作者,海报中也会给出几句评语,让用户明白结果的意思,用户可以长按保存图片,可以扫面二维码或者职场锦囊妙计,点击“点此有彩蛋”分享到朋友圈,或者“这不是我,再测一次”开始新一轮的测试。海报中也提示用户,关注公众号回复关键词,可以进行抽奖活动。
3.设计上
测试中的人物均为动物形象,不同的动物代表着不同的气质,特别是在最后的角色选择中,不同位置的动物性格也很照应,默默吃饭的兔子,认真听话的鹿,参与讨论的狐狸,也正对应着现实职场中的人物性格。
4.体验上
案例中的互动操作简单,动物形象生动,性格明显,能够让用户快速带入到现实职场的自己或者他人身上;案例展示过程中,Mate30的标志不断出现,华为钱包的优点也在背景中展现,让人印象深刻。
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号