【涨姿势】手把手教你打造火爆朋友圈的H5页面

  从引爆朋友圈的H5小游戏《围住神经猫》,到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》,操作简单,内容精致的H5页面越来越频繁的出现在朋友圈,H5页面几乎已成为所有品牌推广的标配
 

 但是,怎么才能让H5页面做的有“逼格”?引爆朋友圈?

  首先,你需要明确做这个H5页面是为了实现什么功能和目标:品牌宣传,活动运营,产品介绍,还是报告总结?

  其次,在确定了功能和目标以后,你需要考虑到具体的应用场景和传播对象,从用户角度出发去思考什么样的页面是用户最想看的,最会去分享的,然后选择一个最合适的H5专题页表现形式,有的放矢地进行设计。
 

一、有逼格的H5专题页表现形式

 1.简单图文

  不要因为“简单”两个字就觉得没有逼格。简单图文是早期最典型的H5专题页形式,也是现在使用最广泛的H5专题页形式。“图”的形式千变万化,可以是照片、插画、GIF等,通过翻页等简单的交互操作,虽然只是起到类似幻灯片的传播效果,但是一旦辅以好创意,一样可以很出彩。

  举个栗子,微信在除夕夜全国人民疯狂抢红包的时刻,推出了《从此看尽中国人的名与利》这样一个专题页。创作者运用了人民币风景局部放大图,加入巧妙的创意元素与微动态进行细腻刻画,带观众走进了人民币的微观世界。每一张图案配合发人深省的文案,在推广微信红包的同时呼吁人们重新审视人情与名利的奥义。


 

 2.礼物/贺卡/邀请函

  借势营销是在广告传播中常用的一种手段。H5形式的礼物、贺卡、邀请函,是品牌在做节日营销时常用的手段,尤其每个人都喜欢收到礼物的感觉,如果能有好的创意和制作水准,很容易吸引大众的参与,引发病毒效应。

  印象笔记在过年期间别出心裁地推出语音贺卡,用户对公众号发送一条语音消息,就可以把这条祝福语音结合中国风动画做成一张独一无二的语音贺卡发送给朋友。整体色调也是以印象笔记品牌色为主,同时蕴含着一丝优雅的年味,逼格十足。


 

 3.问答/评分/测试

  问答形式的H5页面也屡见不鲜了,利用用户的好奇心、求知欲和探索欲,能取得四两拨千斤的效果。不过要真正提升逼格还是需要一些好的创意。

  最近滴滴打车做的一个《票选吸血加班楼》的H5页面,紧紧的抓住了"加班狗"们的心理,还喊出了“滴滴专车免费解救加班狗的口号”,吸引了北上广深的白领们疯狂参与与转发。


 

 4.游戏

  每隔一段时间,朋友圈都会出现一些特别火的游戏,比如“围住神经猫”、“看你有多色”。很多品牌会将自身的特性植入流行的H5游戏中,进行改良,比如杜蕾斯的“一夜N次郎”即改编自“别踩白块儿”。但是同质化现象容易导致用户对无脑小游戏产生厌倦。保持逼格的方法,一个是像“一夜N次郎”一样,快速反应,并在改良的过程里巧妙植入品牌元素,又同时保持甚至增添游戏的趣味。另一个就是原创,为品牌量身定制游戏,但这要求品牌在玩法和设计上下更多功夫。

  社交应用Same在圣诞节推出了一款名为《圣诞老人拯救计划》的H5小游戏,操作非常简单,界面清新可爱,与Same的招牌画风一致,游戏角色也是Same的品牌角色,而幽默恶搞的游戏,也在向用户传达Same独到有趣的产品文化。


 

二.提升H5应用逼格的4个要点

 1.细节与统一

  要成就高品质的用户体验,体现品牌的逼格,必须考虑到细节与整体的统一性。复古拟物的视觉风格,那字体就不能过于现代;幽默调侃的调调,那文案措辞就不能过于严肃;打情感内容牌的,动效就不能过于花哨。

  大众点评姜文电影推广系列的《九步之遥》H5专题页便牢牢抓住了这一点。从二维码入口到性感的loading页,再到最后分享提示的设计,包括文案措辞和背景音效,无不与整体的戏虐风保持一致,给到用户一个完整统一的互动体验。

  “分享提示”这个细节设计,已经越来越受到设计师们的重视,毕竟比起一个简单的箭头和一句冷冰冰的“点这里分享”,用心的细节设计带来的高逼格和好感度是显而易见的。参考以下几个精彩案例:

|

 

 2.紧跟热点,利用话题效应

  想要你的H5专题页一夜爆红,第一时间抓住热点,迅速反应并火速上线,也是一个好方法。不过紧跟热点也容易面临创意雷同的问题,一旦没用好,逼格尽失,low到谷底。所以热点可以利用,但不能滥用。

  以天天P图为例,抓住了武则天热播的契机,推出了风靡海内外的媚娘妆,同时《全民COS武媚娘》的H5互动页也第一时间上线,操作简单易上手,一键上传照片就能立刻完成媚娘妆,与万千媚娘们进行PK,娱乐了大众又推广了产品。


 

 3.讲个好故事,引发情感共鸣

  所谓万变不离其宗,不论H5的形式如何多变,有逼格的内容始终是第一位的。在有限的篇幅里,学会讲一个有逼格的故事,引发用户的情感共鸣,再把品牌内涵巧妙的植入进去,将对内容的传播形成极大的推动。

  LEVI’S新年优惠活动专题页以第一人称的口吻,用小时候简朴却热闹的新年与长大后富足却乏味的新年做对比,代入感极强的故事,还有手绘风渲染出亲切的怀旧氛围,都成为了驱动分享的源动力。


 

 4.合理运用技术,打造流畅的互动体验

  如今的HTML5技术已经可以让我们轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果,如果条件允许,还可以使用逼格更高的视效。但是强塞各种不同种类的动效只会导致页面混乱臃肿,极其土鳖。制作H5页面需要合理运用技术,目标不是炫技,而是为用户提供流畅的互动体验。

  淘宝双12推出的预售推广H5专题页中,只需要使用向上滑动的手势,页面呈现出来的效果就犹如一个流畅的动态GIF。设计师巧妙利用图形设计与组合,在滑动过程中营造出一种丰富的视差滚动效果,单个图形元素的遮罩、旋转与整体页面的动势配合极为默契。


 

  身处于移动互联网大潮中,谁也没法保证已经做到最好:手机硬件在升级、HTML5 技术在发展、微信平台在开放、创意人员在迸发新点子。要想保住逼格,还真没有一劳永逸的方法。未来必然会涌现更多优秀的H5页面,希望这里面能有你我的一个吧。