首页 > 网页教程 > HTML > HTML5设计!大众点评最有情怀的8个HTML 5案例精选

HTML5设计!大众点评最有情怀的8个HTML 5案例精选

时间:2015-08-29    来源:H5广告资讯站

这篇点评完成于7月初,当时一方面我的《广告也爱看!细数腾讯出品的10个最佳Html 5广告》出乎意料地在行业大热,一方面行业内传言大众点评HTML 5的代理公司不再出品HTML 5广告了,那会心情还真有点复杂,然后就带着自己的一知半解,写了这篇主打情怀的分享。不过,好在是虚惊一场,大众点评HTML 5广告的演绎还在继续上进行着,而不止是8个情怀了~

而我也不打算去对原文做特别的修改,算是对自己当时心境的尊重吧!下面就来看看原文吧~

很高兴我对这个行业的一些态度能够被不少人认可,我是一个还在路上的设计师,也算是一个喜爱分享的传播者…

我犹豫再三还是觉得应该搬出这套大众点评的HTML 5广告案例同大家分享,这并不是对上篇《广告也爱看!细数腾讯出品的10个最佳Html 5广告》的形势复制,而是确有体会!

互联网公司生产出的HTML 5在体验上会和互动广告公司有着非常不同的面貌,集中体现在他们对于文化的理解和判断上,所以,我引用了情怀这个词,我相信看完这套作品然后再对比我之前分享的腾讯案例,你会有感受到很大的不同~

希望能为更多想了解HTML 5广告的你们提供够有帮助的信息,我也会继续努力的!

(友情提示:建议所有案例都要搭配音乐欣赏)

1. 《“选择吧!人生”》微信电影宣传推送广告

(上线时间:2014.11)

坦率的讲,这支广告我不是第一时间看到,而是通过搜索找到,对比2014年时大量画面简单交互初级的HTML 5广告,它的画面执行是出色而新颖的,再加上引用了那么多高热度的符号元素,算是给大众点评的微信营销开了个个性的好头…

HTML5教程 HTML5应用实例 HTML5设计

2.《九步之遥》微信电影宣传推送广告

(上线时间:2014.12)

我第一次打开这支广告的时候,唯一的反应就是,碉堡了!

看到这类作品能在微信传播的设计师们应该乐坏了,这种画面执行独特,细节入围的HTML 5广告不但在主题上贴合了导演的品性,还在身价上和同类广告拉开了距离,老子我玩的就是人堆儿里的不一样!

相比《“选择吧!人生”》来说,整体画面在视觉上的提升在于不再那么拥挤和凌乱,比较之后才会发现,过多的画面细节也许会让用户感到疲惫…

HTML5教程 HTML5应用实例 HTML5设计

3.《“评什么爱姜文”》微信电影宣传推送广告

(上线时间:2015.1)

也许是大众点评在2014年还没玩过瘾,在开年之初就来了个更猛的!

这也是我当时看到的第一支大众点评的HTML 5广告,不禁惊叹,这画面的超现实风格太猛烈了!怎么办到的?是gif?还是什么?

后来才知道,实现这类动画的方式叫做序列针,将渲染好的动画存成一张张的图片,再按照一定的时间间隔来播放,比如80微秒,或者60微妙…不同于gif动画,序列真动画有更为好的色彩还原,并且可以在交互上对动画进行控制…

以上三支HTML 5,把重点都放在了画面执行上,对于交互和内容识别的展现都没有像是画面那么深入人心…尤其是这支HTML 5的操作界面就让人难以分辨,而文字内容也让人容易忽略掉…用优秀的动态海报来形容这一时期大众点评的HTML 5广告似乎更合适。

HTML5教程 HTML5应用实例 HTML5设计

4.《 我们之间就一个字 》微信活动推送广告

(上线时间:2015.1)

而当《 我们之间就一个字 》上线后,居然引发了场行业意外,造成了一次话题营销!

一个违反了大量视觉法则,画面不饱满,内容太袖珍,品牌属性不凸显的HTML 5广告,居然还牵动起那么多人的情怀,引来那么高的赞赏,带来无限的传播…?为什么?

虽然,序列针动画技术早已被html5的第三方平台所攻克,网友也能生成1:1于原作的复制品,但是,你永远复制不出那份弹指间的体验,永远复制不出那么多人绞尽脑汁追求极致的心境。

这支HTML 5可以说是HTML 5广告初期我们认为的一个异类,或者说是个不经意的巧合,那么巧合的是什么那?

当大多数人还在考虑怎么把海报复制到HTML 5页面时,有人就意识到了HTML 5页面的精髓不在于复制旧有形式,而是综合所有已知设计形式的数码融合,或者说是一种超媒体设计,凭借着对人文,音效,平面设计,以及动画设计的恰当融合,这支HTML 5成为了那个时候最具成熟性的超媒体广告,它的威力和分量和上面的三个案例相比几乎不在一个量级…

他给你带来体验的愉悦感不是说,这画面好看,这音乐好听…而是各个环节相互搭配带来的综合感受,这应该就是HTML 5广告努力的方向,利用技术来综合感官…

HTML5教程 HTML5应用实例 HTML5设计

5.《爸,我想你了》微信电影宣传推送广告

(上线时间:2015.3)

为了宣传电影《失孤》,大众点评在三月份上线了这支HTML 5广告,敢问多少好的创意死在了父子情这个节点上,那么除了给老爸买东西,送关爱…我们还能玩点什么?

看看这支广告吧~有没有觉的生肖是一个人人心中之所有,人人笔下之所无的创意点那?而且这支HTML 5会给用户一种轻量形个人定制的感觉,简单的三个页面就完成了表意,更便于传播和推广。

但是,同志们仔细想想就会发现,为了完成这种定制般的简单效果,创作团队实际是付出了比常规HTML 5广告多出数倍的精力,设计了24个动画形象和配套文案…

所以说,《失孤》没看不要紧,错过了这支HTML 5就可惜了~

HTML5教程 HTML5应用实例 HTML5设计

相关推荐
能让IE支持HTML5的解决方案
谷歌弃Gears浏览器插件 转重点开发HTML5
采用HTML5搭建的多个网站尝鲜试用
体验HTML5 Canvas对象的强大 五款在线绘图应用示例
HTML5新特性:用链接预取功能给网站提速
如何用HTML5制作网页?
神奇的HTML5动画效果演示网站
网页设计师必收藏的十五个HTML5资源
十三个网站案例让你提前体验HTML5和CSS3的魅力
基于HTML5的绘图程序Muro,支持Wacom手写绘图板
HTML5的一些的趣味小应用
HTML5、CSS和JavaScript与Web移动应用的未来趋势
十款基于HTML5开发的精彩WEB应用(HTML5网站演示)
学好HTML5必备的七个在线资源推荐
HTML5教程之表单功能详解
四个HTML 5标签、属性、事件及浏览器兼容性速查表分享
15个采用HTML5实现的网站界面设计欣赏
HTML5的革新:语义更明确简洁的结构
21款效果惊艳基于HTML5的应用程序欣赏
16个颇具创意的HTML5网站设计
能让IE浏览器也支持HTML5标准的办法
25个超炫的HTML5+CSS3网页应用案例欣赏
2012年Web开发有关HTML5的14个预测
新手入门:HTML5是什么?
35个WEB开发必备的实用HTML5教程
18个国外HTML5网站布局编码教程分享
10款HTML5框架推荐,WEB开发必备利器
8款很酷基于HTML5技术的网站设计欣赏
详解有关于HTML5的七个误解
10个超炫酷的HTML5和JS技术实验性演示网站
8个优秀的基于HTML5的信息图网站欣赏
网页使用HTML5代码需兼容IE的写法分享
HTML5新手入门教程之第一篇:什么是HTML5?
从9个不同的方面深入分析HTML5的性能
Google推荐:HTML5代码的15条规范
HTML5能否成为未来移动互联网的APP?

精彩推荐

热门教程