海尔：海尔智家邀您为祖国庆生

2019-09-30 H5案例分享 H5案例分享

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

识别图中二维码

海尔智家邀您为祖国庆生-查阅二维码

完整欣赏此案例大约需要4分钟

案例：海尔智家邀您为祖国庆生

品牌：海尔

技术实现： html5

亮点：

海尔在国庆之际推出的制作与祖国美景合照的作品，最后可以分享海报获得抽奖机会，以此作为激励增加作品的传播范围。

作品有三个步骤

①Loading

加载界面是一个卡通相机，及海尔献礼祖国70周年的文字，初始界面是红色标题及手绘的人物合集图。

②海报制作

点击下方触点上传正面半身照片，若照片不合格会有文字提醒，上传成功后作品对照片进行扫描，然后进入编辑界面，文字提示用户操作方法后，界面会以光标的形式再次告知用户如何操作，用户调节相片的大小及位置，“我和我的祖国”字样的大小和排版，选择背景后点击“完成”生成海报。

③落地页

落地海报包括刚才编辑好的合照，及作品二维码，用户可重新制作，或分享作品参与抽奖。

手绘的初始页面，有工人，小朋友，女上班族和宇航员，及海尔智家的大楼，画面丰富热闹，制作过程中可随时重新上传照片，供选背景包含了长城等具有代表性的景物及建筑。

标题页是钢琴曲《我和我的祖国》，海报编辑时的背景音乐是女生合唱《我和我的祖国》，抒发爱国情怀，营造作品氛围。

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

标签