案例赏析链接：http://www.iqiyi.com/20181220/b3fb072c006ecd68.html
完整欣赏此案例大约需要2分30秒
案例：这H5看个球啊
品牌：爱奇艺商城
亮点：
1.创意定位
根据爱奇艺的用户人群喜欢爱电影、电视剧、综艺节目等视频，以娱乐为主，采用一镜到底的方式，展示爱奇艺播放过的内容。整个H5以找球为梗，贯穿整体。整体表达：1是介绍爱奇艺视频内容；2是介绍爱奇艺的饭饭星球小程序（明星粉丝管理的小程序）。
2.策划逻辑
点击本案例，首先是各种圆球球变换弹跳的加载页面，然后进入到首屏。首屏是一张圣旨，说明找球的故事梗概，点击屏幕下方的“领旨找球”进入画中画的页面，画中画采用的是水彩画风，第一幅画就是《延禧攻略》里的皇上和皇后，此后依次点击每一屏下方的“点击寻找”就会出现各大影视剧、综艺节目中的人物，直到最后一屏用紫薇的经典名句“皇上，你还记得大明湖畔的爱奇艺吗？”，点击屏幕下方的“点击查看真相”，就会出现爱奇艺饭饭星球的小程序码，可长按识别，也可点击“昭告饭圈”分享H5至朋友圈。
3.设计上
祥云、圣旨、宣纸的颜色都流露出满满的中国风，各大IP热剧、综艺人物大集结，看过的人都会立马联想起对应的节目和剧情，全篇用找球作为主线进行串联，最后揭晓找的球就是爱奇艺饭饭星球。
4.技术上
一镜到底采用Canvas标签，配合原生 drawImage方法，进行画面从大到小的绘制。因为画面都是画中画，采用Canvas可以准确的定位画面的位置，兼容不同尺寸的手机屏幕，比纯图片image,或者背景图background标签，定位省事。
5.体验上
一镜到底是H5用的很多很多的形式了，网易每年年终推出的《娱乐圈画传》都是采用的这个形式。这支H5的右下角，在播放5屏幕后，还有“开启倍速”模式，可以快速播放动画，达到最后一屏。
技术实现： jQuery
以上为“H5案例分享”团队原创文章，转载请注明出处！
网友评论