2016年惊艳朋友圈的十大H5 你被几个刷过屏?

2016年惊艳朋友圈的十大H5 你被几个刷过屏?

网络推广 设计和审美 软文 11个月前 (01-08) 浏览: 6 评论: 0

无酱:在这个日新月异的时代,想要立于不败之地,摆脱被淘汰的命运,只有迎头赶上,不断创新。在过去两年的时间内,H5经历了从全民兴起 – 爆发 – 沉淀到再爆发式增长的过程,以层出不穷的新面孔一次又一次展现了惊人的生命力。 2016年即将呼啸而过,让我们抓住今年的尾巴来细数一下这一年那些扭转衰势给我们带来惊艳感受的十大H5,哪些曾经刷过你的屏呢? 注:以下仅代表个人观点,项目按照上线时间顺序排列。 1. 微信:我和微信的故事     查看案例详情:http://www.digitaling.com/projects/20080.html (该活动已下线) 一句话点评:大数据的暖心运用版“回忆杀” 2016微信公开课PRO版在开年就丢出了一个引爆朋友圈的轻H5,寥寥几页,几乎不需要互动,几条与“我”息息相关的数据统计,就能让用户分享得不亦乐乎。微信虽然不倡导诱导转发,但是这样大数据的暖心运用,恰到好处地唤醒用户记忆,引发情感共鸣,不刷屏才奇怪吧? 2. 豆瓣:我们的精神角落     扫描二维码,立即体验!     一句话点评:戏很足的文青解谜系列H5 坚持11年不打广告的豆瓣终于在今年年初放出了一个超级大招,以“我们的精神角落”为主题推出了一系列海报、品牌宣传片和H5。 H5分为眼、鼻、耳、口、大脑五个章节,从画面到文案再到交互整合了多种表现形式,只为向用户传达一个观点:我内心丰富、生而不凡,这是我的秘密。由内而外散发满满的豆瓣文艺气息,细节处理堪称完美。 3. 宝马:全新BMW M2游刃锋芒间     扫描二维码,立即体验!     一句话点评:狂炫酷拽破屏而出的速度与激情 宝马官方微信先是用一个“该新闻已被BMW快速删除”的标题迅速吸睛无数,再用阅读原文中的H5彻底点燃了用户的速度与激情:一辆BMW M家族全新车型M2从虚拟的新闻内页呼啸而出,在多个平台任性跨越横冲直撞,实现虚拟与现实的无缝切换,视觉冲击应接不暇,声效配合酣畅淋漓。在77分钟内便获得了10万+的阅读量,还得到了各行业意见领袖刷屏式的分享。 4. 侠隐江湖:一个翻滚的H5——只要功夫深 撩妹100分     扫描二维码,立即体验!     一句话点评:翻转手机扭转人生一圆武侠梦的H5 银汉集团为旗下的《侠隐江湖》游戏做了一个名叫《只要功夫深 撩妹100分》的H5,只要通过翻转手机就能即刻扭转人生,从事事无可奈何的“凡人模式”切换为开挂的“大侠模式”,一圆一众为现实所累的现代人的武侠梦。它采用简单好玩的翻转形式和逗趣浮夸的故事情节,向世人传达了“天生武侠,本色江湖”的游戏理念。 5. NEXT IDEA×故宫:大明皇帝除了会唱 Rap,还能有多魔性?     扫描二维码,立即体验!     一句话点评:大明皇帝穿越故宫玩Rap成新晋网红的神邀请函 故宫淘宝的萌版皇帝们早已深入人心,然而万万没想到这次大明皇帝变身rapper席卷朋友圈的H5,却是腾讯与故宫跨界合作举办“Next Idea × 故宫” 腾讯创新大赛的邀请函。该H5将古今多种元素相互穿插,让原本遥远的古人重新焕发生机,充满现代感的幽默演绎,让人眼前一亮,大大刺激了用户的分享欲。短时间内访问量就突破了300W。 6. 361°:我给你画了个动画,看完可别哭啊!     扫描二维码,立即体验!     一句话点评:用自己画的小人去创造属于你的热爱故事 相对于单纯通过点击进行互动,引导用户亲自画出小人去完成一系列动作着实新鲜,这种形式也许不是首创,但也阻挡不了它的刷屏之势。361°从自身品牌调性出发,迎合奥运主题,用画画的方式鼓励用户勇敢面对挑战,在人生这场比赛中赢到最后。H5情节设定完整,动画效果生动可爱,轻松为品牌收获满满好感。 7. 墨迹天气:#天气改变命运#H5,每天都有新改变,每天都能玩一遍     扫描二维码,立即体验!     一句话点评:奥运最强借势H5 今年正逢里约奥运会,墨迹天气以#天气决定命运#为主题,推出了一个在奥运期间每天更新的H5。整整持续了17个日夜,一天一个H5热点追击,原创动画+原创词曲+音乐互动,在奥运会闭幕当天更是放出了《月球运动会》这个大招视频。W将这款行业内领先、人尽皆知的天气App,系统性地实现了从“工具化”到“品牌化”的价值转换,借势时事热点,用一个最平常不过的道理触及人心,从而引发思考。 8. 天猫:尽情尽兴!天猫穿越宇宙向你发来了一封双11邀请函     查看案例详情:http://www.digitaling.com/projects/19272.html (该活动已下线) 一句话点评:穿越宇宙级的一镜到底沉浸式体验 众所周知,淘宝是出了名的“爱搞事情”,而且逼格没有最高只有更高。这次天猫双11的宣传H5又实现了一次自我超越。H5融入时下最流行的VR技术,用户通过手指轻滑屏幕,就可以感受到由225张素材图精心构建的“一镜到底”的天猫世界。其中不拘泥于形式具有兼容特点的巴洛克式风格与双11“不设限,尽情狂欢”的理念巧妙结合,相得益彰。充满未来感的沉浸式体验让人啧啧称奇,也似乎已远远超出了H5原来的定义。 9. Dopemine:THE SAVE – 活口:不留活口的H5尝试     扫描二维码,立即体验!     一句话点评:交互式密室逃脱微电影H5 相信大家对密室逃脱游戏并不陌生,但融影视、游戏、支付于一体的H5却前所未有。Dopemine借助微信支付及 H5 强大的表现平台,将游戏演给我们看,将电影放给我们玩儿。通过将产品线索与游戏情节融为一体,故事情节环环相扣,用“色彩”引导用户层层深入,最后引导用户支付1元钱来下载“性格色彩APP”以解开谜团。相当于用一个H5完成了一部微电影和一个小游戏的工程量,怎一个酷字了得? 10. TGideas:为什么腾讯动漫选了薛之谦当代言人?     扫描二维码,立即体验!     一句话点评:当薛式搞笑遇上燃情国漫 提到薛之谦,很多人的第一反应就是“段子手”。当薛式段子遇上热血二次元,产生的化学反应真心不小。有段子,有表演,还有剧情的各种反转,薛之谦都完美消化,最终完成了“共同的信仰,由我来守护”的品牌理念的有效传递,不得不说腾讯动漫app代言人选得非常到位。据悉,该 H5 从上线后2小时便获得了百万级的 PV,平均停留时间也达到了 1 分 49 秒,将近故宫 H5(56.8 秒)的两倍啊!

超赞!人气超高的HTML5特效排行榜TOP 10

超赞!人气超高的HTML5特效排行榜TOP 10

网页设计 设计和审美 11个月前 (01-04) 浏览: 16 评论: 0

现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。 那HTML5里有哪些高级动效了?小派几乎仔细体验了国内所有优秀H5页面作品,结合自己的一些理解,整理出下面十大HTML5页面特效。我们的HTML5作品如果能用上其中一两个,相信能增色不少!术语也许不够专业,欢迎吐槽! 1. 粒子特效 星际传奇:这是探索宇宙的门票     百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。 2. SVG路径动画 元小望:SVG练习NO.1_描述孤独     简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。 上作品是派友(Epub360用户)元小望用Epub360设计制作的,大家感受下,是不是很酷! 3. 序列帧动画 大众点评:我们之间只有一个字     百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。 派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版,大家看看Epub360序列帧组件性能如何? 4. 全线性动画 腾讯UP大会:生命之下,想象之上     全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。 这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。 5. Cinemagraphic Levi’s: “换”醒你的夏天     什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。 其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。 下面说说和交互相关的动画特效。 6. 全景 杜蕾斯的第一座美术馆     虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。” 7. 3D 康师傅:2015最飞羊的新春祝愿         祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。 8. 点击碎屏 大众点评:这个陌生来电你敢接吗?     “点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。 9. 长按逐字 韩寒再谈一加:1步1步看清韩寒     整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。 10.滑动触发 腾讯视频:这一幕你期待已久     长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册