首页 > 业界
朋友圈H5进化简史
琛姐 01月10日 阅读 2645 快速评论
朋友圈H5进化史可以看作是新媒体交互设计进化史。

PC时代,设计师们就基于 H5 开发了众多交互性能强大的酷站,进入移动时代,交互设计师们更是如鱼得水,结合移动端的重力感应、竖屏显示、手势交互等全新玩法,开创了全新的交互时代。

fff.cmiscm.com 网站收录了 15 个基于 H5 创建的极具创意的网站

所以说, 朋友圈 H5 进化史可以看做是新媒体交互设计进化史。

 

2014 年开始,朋友圈开始出现一些简单图文形式的 H5,早期图文型 H5 只需要用户通过简单的翻页、点击就可以参与其中,展现效果类似于 PPT。应用场景主要包括移动网站、邀请函、年终总结、产品推广等。

制作网站是 H5 在 PC 端最广泛的用法,所以,当 H5 应用到移动端时,设计师们首先会想到的就是制作移动网站。

比如,欧香小镇、燕楠国际等品牌就基于 H5 制作了移动网站。

邀请函也是图文型H5的主要应用场景之一,比如《奔驰 C 级上市邀请函》和《微信公开课 PRO 版邀请函》都是当时的典型代表。

2014 年,一些品牌开始尝试用 H5 推广产品,比如锤子手机、特斯拉等,仅仅采用精美图片加上简单的翻页动效,最终的呈现效果却超越了当时人们对微信营销的想象。

2014 年 4 月,著名奢侈品牌Burberry 推出的 H5 《从伦敦到上海的旅程》是当时交互体验的集大成者。第一步,“摇一摇”,开始体验;第二步,点击屏幕进入油画般的伦敦清晨;第三步,摩擦屏幕使晨雾散去;第四步,点击“河面”,河水泛起涟漪;最后点击屏幕上的白点,达到终点站上海。

2014 年 5 月,可口可乐推出的《分享快乐 128 年》,将图文型 H5 的交互又向前推进了一步。这支 H5 页面上的每个元素都可以动。而且相较于原本的单页翻动,更注重跨页连接,一根贯穿画面始终的“红线”,让画面在视觉上更加流畅和统一。

此后,长图型 H5 逐渐多了起来,正式引爆可以追溯到 2017 年 5 月,百雀羚刷屏长图《一九三一》开辟了长图型图文H5的新形式,这种形式非常适合移动端阅读,迅速为大众接受。

2018 年 8 月,腾讯云推出的《山城云居图》采用了横屏长图的形式。

 

2018 年 9 月,网易的公益H5《她挣扎48小时后死去,无人知晓》在朋友圈刷屏,这支 H5 在长图的基础上,融合滑动动画等表现形式,为图文型 H5 增加了新的创意,效果令人震撼:

 

活动型 H5 也是较早出现的 H5 类型,主要包括红包、抽奖、投票、砍价、拼团等,这类 H5 模式和技术都非常简单,但因为由直接利益驱动,传播力较强。

口令红包、语音红包、签到抽奖、砍价拼团(来源:人人秀官网)

常规的活动型 H5 往往缺乏情节设计,非常单调,为了更好地促使用户点击和分享,一些活动类 H5 开始探寻新的玩法。

比如,2016 年 1 号店推出的 H5《姐妹花的烦恼》,打破了常规活动类 H5 的俗套,在推出促销活动前添加了故事情节,以吐槽物价高为主题,在表现形式上机智地拿人民币开玩笑,角色直接取自于一元纸币上的少数民族形象,最后一页才出现 1 号店的促销活动。

 

2014 年 7 月 22 日起,一款名为“围住神经猫”的H5小游戏开始在微信朋友圈疯传,此后,游戏类 H5 如“2048”、杜蕾斯“一夜N次郎”(即山寨版“别踩白块儿”)等游戏类 H5 层出不穷。

近年来火爆的游戏型 H5 大都是简单的小游戏,用户只需要通过简单交互,便可参与。比如,2017 年 ofo 推出的 H5《小黄车研发车间》,利用点击、滑动、摇一摇等简单交互,让用户参与造车小游戏。

2017 年 9 月,网易严选推出了一个为强迫症患者量身定做的 H5 小游戏《好难受,强迫症受不了了》,通过对齐木块、将彩色球排列完整、救活枯萎的花、消除俄罗斯方块、修剪一下树木等 5 个“强迫症”小游戏来展现“极致美学”,不过,这个小游戏里除了简单的点击、滑动等外,还应用了重力感应等更复杂的交互。

2017 年 11 月 19 日,世界厕所日,网易新闻以此为主题,通过小游戏的形式,了解了三个有趣的厕所新闻和一个厕所文化。

2018年草莓音乐节的宣传H5和网易的H5《你的工位有猫,我的工位有刀》、《睡姿大比拼》等都属于DIY型的小游戏。

创意广告公司 Dopemine 在 2016 年推出的《活口》在玩法上有很大不同,采用了真人密室逃脱的形式,设计和交互上更为复杂。

测试型 H5 以问答、评分、测试为表现形式,利用用户的好奇心,引导用户参与问答,并分享最终结果。测试类 H5 一般分为三大类型:运势占卜、知识测试、心理测试,刚开始出现的时候以运势占卜为主,慢慢开始出现有趣的知识测试类型,近 2 年刷屏的测试类 H5 大都以心理测试为主。

1.运势占卜

通过在线抽签、塔罗牌等形式进行运势占卜。在新年、春节之类的喜庆日子,人们都很喜欢玩占卜游戏来祈求福运,此类H5操作容易,符合传统习俗,因而备受欢迎。比如,携程旅行在2016年推出的H5《我的2016福地》就引导用户从“爱情、事业、健康、财运”中任意选择一个自己想了解的福地,然后点击“探寻我的福地”,测试出2016年自己的福地。

2.知识测试

传播度较高的知识测试,通常是针对一些有趣的常识类知识进行的。比如,2017年爱奇艺推出的《2017七夕直男考卷》针对男女朋友间相处的一些趣事进行测试,取得了微信当天pv2646.6万,分享成功次数137.8万的成绩。

 

腾讯视频在 2017 年推出的 H5《测测娱乐圈有没有你的一席之地》则是以当时热门的综艺、电视剧、明星相关资讯为题,并结合传统考试题型进行设计。

3.心理测试

心理测试型 H5 一般通过答题来给测试者的认知、行为、情感的心理活动予以量化,帮助其了解自己的情绪、行为模式和人格特点。

近年来大火的测试型H5大都属于这种类型,比如,2018年8月,京东推出的《你是哪种走红体质》,FIYTA&网易云音乐联合推出的《你有恋爱的天分吗》,2018年9月,飞利浦推出的《友情鉴定书——塑料指数大检验》,海底捞推出的《测测你在宫斗剧中能活到第几集》,2018年10月,小米互娱《测一测你在恋爱中的形象》等。

2018 年 8 月,网易云音乐和第5人格联合推出的《你的荣格心理学原型》采用对话的形式,非常新颖,而且非常适合用于心理学测试,让被测者更轻松。

H5 二维码已被微信屏蔽,用 QQ 扫码,或网易云音乐 App 首页 banner 进入

2018年10月,猫眼电影推出的《假如影子有生命》,为每一个选项设置了不同的动画效果,而不是简单地跳转到下一题,使得测试类H5的视觉效果又上了一个台阶。但心理学测试的选题过于老套,文案也缺乏亮点。

快闪是指在短时间内,快速闪过大量文字或图片信息的一种视频制作方式。国内最早使用快闪形式进行营销的品牌是苹果。2016年9月,苹果在 iPhoe7 发布会结束后,采用快闪的形式,将2小时的发布会浓缩成了107秒的快闪短视频,引发了巨大的传播和讨论。


苹果107S快闪,形式简洁,但细节非常考究

此后,国内使用快闪形式进行营销的品牌层出不穷,比如凯迪拉克30S快闪广告、CMF设计快闪宣传片、京东《闲置衣物》公益快闪广告等,但在质量上很少能和苹果的快闪媲美。

快闪形式在H5中也开始应用,观看形式由横版变成了竖版,并且融入了H5中特有的交互形式。比如,人民日报在2017年推出的快闪H5《为我党传播力疯狂打call》以及《史上最牛创业经》,都在朋友圈疯狂刷屏,之后,快闪这种H5的新形式开始受到热烈的追捧。

比如,苏宁易购在2017年双11推出的H5,2017年全运会宣传H5都是快闪形式。

模拟界面,就是模拟不同的移动端界面,进行场景的构建和情节的开展。目前常见的类型有模拟微信界面、模拟来电界面、模拟新闻界面、模拟抖音界面等。

1.模拟微信界面

模拟微信界面是模拟界面类H5中最常见的类型,包括微信群聊、朋友圈、微信文章等多种形式。

2015年,大众点评推出的H5《四大导师拯救麦渣》伪装成微信文章,利用当时很火爆的选秀节目中国好声音,结合四大导师来推广大众点评的KTV资源。

2016年4月份宝马推出的 H5《该新闻已被BMW快速删除》开头模拟微信公众号文章页面,当用户点击后,新闻网页像纸一样被宝马M2跑车划破,接着视频新闻、朋友圈和音乐播放器都被它呼啸碾过,极具冲击力。 

未来应用为2017年两会定制的H5,就结合了微信群聊、微信朋友圈等形式,成功在朋友圈刷屏。

有道翻译官在2017年推出的 H5《深夜,男同事问我睡了吗》结合了微信聊天和群聊的形式,因为标题有吸引力,且文案设计活泼幽默,也取得了刷屏效果。

新媒体人王高高模拟微信公众号界面制作了一份个人简历,文案生动幽默,形式新颖。

2.模拟手机界面

包括模拟手机屏幕、模拟来电、模拟siri等。微信朋友圈中大范围传播的第一个模拟电话场景的H5,是2015年大众点评为推广电影《复仇者联盟2》定制的H5《这个陌生来电你敢接吗?》,通过用户收到未知来电,接听后屏幕被妇联的人物武器不断敲击,最终“碎屏”,创意表现手法与《复仇者联盟2》的电影调性完美结合。

2016年网易游戏倩女幽魂推出的 H5《头条|谁约到了杨洋》采用了模拟手机屏幕的形式,在H5中,杨洋通过帮用户擦手机屏幕、整理手机 APP 等方式与用户互动。

3.模拟新闻界面

2015年,腾讯游戏全民突击推出的H5《吴亦凡即将入伍》采取了模拟腾讯新闻界面的形式,然后转变成视频通话,最后再链接到广告页面。

4.模拟抖音界面

模拟抖音界面主要应用在抖音官方的推广H5中,比如2017年推出的《世界名画抖抖抖抖起来了》、2018年推出的《抖音美好奇妙夜》等。


2015 年,朋友圈开始出现双屏互动型 H5,这种类型的 H5 需要 2 台手机共同扫码完成互动,交互性能比其他 H5 显著增强。

2015 年,奔驰推出的 H5《鹊桥会,爱更多》采用双屏互动的形式,模拟喜鹊搭桥场景,当两台手机合并的时候,一座鹊桥就搭建完成,并出现唯美的爱心画面,同时车的后备箱出现玫瑰花,非常浪漫。

2015年,六神推出的 H5《在夏天在一起》通过买通票的方式,模拟电影院让两位观众欣赏到一部制作精良的夏夜动画。

一镜到底是指看上去几乎不用剪辑,没有切换,一个镜头从头到尾,完整记录整个事件的发生过程。这种艺术手法源于电影产业,最早出现在美国波普艺术家安迪·沃霍尔拍摄的纪录片《帝国大厦》中。1964年,他将摄影机对着帝国大厦毫不变换机位、景别地拍了485分钟。

纪录片《帝国大厦》剧照

第87届奥斯卡金像奖最佳影片《鸟人》也是一部经典的一镜到底的影片。

电影《鸟人》海报

2017年,网易新闻推出的 H5《章莹颖失踪74天了,全世界都想找到她》就采用了一镜到底的形式,通过一张长图,结合滑动动画,非常清晰流畅地呈现了新闻事件的经过。


VR全景是指利用计算机生成一个全方位的虚拟现实环境,许多科幻电影都用到 VR技术进行拍摄,如《黑客帝国》、《阿凡达》等等。

电影《阿凡达》剧照

随着VR技术的逐渐成熟,应用VR技术的H5逐渐增多,比如,《穿越宇宙的邀请函》是天猫在2016年制作的一个结合VR技术及一镜到底的H5,试听效果非常震撼。

从形式上来说,每一次新技术的出现都会带来新的创意形式,比如,当下大火的人工智能技术也开始在 H5 领域应用,出现了《人工智能为你定制春联》、《诗与故乡》等经典案例。

从内容上来说,所有刷屏型H5本质上都在做一件事情——抓住一种情绪,讲好一个故事。

·END·

本文由草莓学堂(ID:caomeixt)授权梅花网转载,版权归原作者所有,未经授权,请勿转载,谢谢! 

相关附件下载:
评论
提交评论
登录 后参与评论
全部评论
按热度 | 按时间
微信公众号:梅花网
立即下载
日本新海洋基本计划:应对东北亚局势重点转向安保 土耳其总统直面特朗普:不会因为你的制裁而让步 寒门出身外交官张业遂接力傅莹 任全国人大发言人 知乎:加大整治违法有害信息力度 整治期间可正常使用 安徽副省长何树山已兼任省国资委党委书记 不是人人都会跑步! 符合健康长跑的四大原则 我歼20因工艺复杂难量产?列装3个月就海训打破传言 马云马化腾当副手 这个组织要干啥? 对话拼多多CEO黄峥:平台山寨比假货严重 负面无影响 春兰杯世界围棋赛19日打响 柯洁李世石将领衔出战 美加大中国留学生缺课被开除遣返 学费一分不退 曝布冯赛后安慰唐纳鲁马:你还年轻 未来是你的
中期选举临近特朗普不耐烦 美官员抓紧密会塔利班 意大利学校涉使用盗版软件被诉 或被罚300万欧元 泰国将邀请各国暂停割胶 以提升胶价 王勇:优化审计署职责 避免重复检查和监督盲区 解放军18日在台海军演 台湾当局回应:我们明日操练 美国议会候选人发誓若当选就用区块链记录选民反馈 汤尤杯|李宗伟的告别战? 毛里求斯只求享受比赛 自称东躲西藏生不如死 这些问题官员最后选择自首 北京线上销分细则:个人同时绑定机动车不超3辆 日本东海岸附近发生5.7级地震 暂无伤亡损失报告 文在寅被外国电视台当作杀保姆嫌犯 韩国炸锅(图) 犯难!骑士阵中两把神经刀 爱神回归用谁首发?
球哥见证凌晨3点的洛杉矶! 游戏妹子我全都要 华尔街大鳄对苹果出现严重分歧 一致看好这些中概股 女童商场内被鲨鱼咬致手部骨折 母亲:它突然跳起 欧文这水平,是永远也得不了50分的 美媒盘点特朗普言过其实的那些事:经常翻脸不认人 贪官9年受贿4000多万日均1.7万 巨额财产公开拍卖 这9类食物 饿肚子的时候千万别吃 京媒:于大宝需适应新角色 打恒大国安三分要拿下 华尔街英语再易主,布局中国又有哪些新动作? 央视披露中巴空军演习细节:胜者可撕下对方姓名牌 外交部:提醒在马尔代夫公民加强安全防范 14年9号秀被母队甩卖!场均4+4他能换来小乔丹? 新政下中超大批外援不得不回家 特维斯二度回归博卡 ag娱乐平台