这个时代的新娇宠——H5

发送到手机
使用"扫一扫"即可发送至手机

这个时代的新娇宠——H5 


从引爆朋友圈的H5小游戏《围住神经猫》,到颠覆传统广告的大众点H5专题页《我们之间只有一个字》,从2014下半年起,各种H5游戏和专题页纷纷崭露头角。“5”,这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野。

 

一.通过分析,H5专题页主要有以下4大类型:


  1. 活动运营型为活动推广运营而打造的H5页面是最常见的类型,形式多变,包括游戏、邀请函、贺卡、测试题等形式,如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部,如何设计一套合适的引流路线也颇为重要。大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮,富有质感的旧票根、忽闪的霓虹灯,配以幽默的动画与音效,恨不得每个选项都点一遍。围绕“选择”这个品牌关键词,用引人入胜的测试题让用户把人生当作大片来选择,选到最后一题引出“大众点评选座看电影”,一键直达App购票页面。即使明知是软文也忍不住带着“矮油不错,这个页面有点diao噢”的心情点击了分享。这就是一个优秀的运营H5


  2. 品牌宣传型品牌宣传型H5页面等同于一个品牌的微官网,更倾向于品牌形象塑造,向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言,让用户对品牌留下深刻印象。伴随着浪漫的钢琴旋律,《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚,最后引出“首草——滋阴圣品,爱妻首选”的宣传语。设计上采用回忆般的黑白色调,简单的照片加文字,配以花瓣掉落、水面涟漪等轻动画,渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌,用H5打出了一副走心的情感牌,让用户记住了“半生只为你”的爱妻品牌形象。


  3. 产品介绍型聚焦于产品功能介绍,运用H5的互动技术优势尽情展示产品特性,吸引用户买买买。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕,通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的特性,宏观和微观都照顾周全。萌发用户对这款产品的兴趣及渴望拥有的感觉。


  4. 总结报告型自从支付宝的十年账单引发热议后,各大企业的年终总结现也热衷于用H5技术实现,优秀的互动体验令原本乏味的总结报告有趣生动了起来。支付宝的十年账单,一发布出来便引起广大用户的使用与分享,用户能更直白愉悦地去浏览自己的账单,无论是视觉还是听觉上都得到了满足。


二.形式为功能服务在确定了专题页的功能目标之后,接下来就是关键的设计阶段了。如何有的放矢地进行设计,需要考虑到具体的应用场景和传播对象,从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。以下列举几种常见的H5专题页表现形式:


  1. 简单图文简单图文是早期最典型的H5专题页形式。“图”的形式千变万化,可以是照片、插画、GIF等。通过翻页等简单的交互操作,起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。在除夕夜全国人民疯狂抢红包的时刻,微信推出了《从此看尽中国人的名与利》这样一个专题页。 第一眼就被镇住了,每个页面都是一张人民币风景局部放大图,创作者加入巧妙的创意元素与微动态进行细腻刻画,带观众走进了人民币的微观世界。每一张钞票图案配合发人深省的文案,在推广微信红包的同时呼吁人们重新审视人情与名利的奥义。


  2. 礼物/贺卡/邀请函每个人都喜欢收到礼物的感觉,抓住这一心理,品牌推出了各种H5形式的礼物、贺卡、邀请函,通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物,那创意和制作便是重要的加分项。制作一个H5的礼物,运用GIF、FIASH、JPEG等配上你的祝福并分享给朋友,相信一定会惊艳到对方。


  3. 问答/评分/测试问答形式的H5页面也屡见不鲜了,利用用户的求知欲和探索欲,一路选选选,看最后到底是什么成绩。一条清晰的线索是必要的,最后到达的结果页也需要合理不突兀地插入产品,如果能辅以出彩的视觉和文案,弱化答题的枯燥感那就再好不过了。


  4. 游戏从“围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”等品牌植入式小游戏,H5游戏因为操作简单、竞技性强,一度风靡朋友圈,品牌要在游戏上做到成功传播,需要在玩法和设计上多下点功夫。比如把游戏人物设为产品的形象,并在简单的任务中植入产品,还可以设置隐藏关卡,激发用户的好奇心。


三.为设计加分的4个要点一个H5页面设计品质的出众与否,会直接影响其传播效果,甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点:


  1. 细节与统一要成就高品质的用户体验,必须考虑到细节与整体的统一性。复古拟物的视觉风格,那字体就不能过于现代;幽默调侃的调调,那文案措辞就不能过于严肃;打情感内容牌的,动效就不能过于花哨。用心的细节设计带来的高品质和好感度是显而易见的。


  2. 紧跟热点,利用话题效应想要你的H5专题页一夜爆红,第一时间抓住热点并火速上线,借机进行品牌宣传也不失为一条捷径。天天P图抓住武则天热播的契机推出了风靡海内外的媚娘妆,同时《全民COS武媚娘》的H5互动页也第一时间上线,操作简单易上手,一键上传照片就能立刻完成媚娘妆,与万千媚娘们进行PK,娱乐了大众又推广了产品。


  3. 讲个好故事,引发情感共鸣不论H5的形式如何多变,有价值的内容始终是第一位的。在有限的篇幅里,学会讲故事,引发用户的情感共鸣,将对内容的传播形成极大的推动。而大打感情牌,用户往往受用,主要还是看好的文案和好的配图相结合。


  4. 合理运用技术,打造流畅的互动体验随着技术的发展,相较于塞入各种不同种类的动效导致页面混乱臃肿,我们更提倡的是合理运用技术,用心专注于为用户提供流畅的互动体验。典型的案例是淘宝在双12推出的预售推广H5专题页。在浏览过程中我只使用了一种向上滑动的手势,而页面呈现出来的效果却犹如一个流畅的动态GIF。设计师巧妙利用图形设计与组合,在滑动过程中营造出一种丰富的视差滚动效果,单个图形元素的遮罩、旋转与整体页面的动势配合极为默契。 随着手机硬件的升级、HTML5技术的发展以及微信平台的放,HTML5的跨平台、低成本、快迭代等优势被进一步凸显,将是一个最好的代。未来必将涌现更多优秀的H5页面,让我们拭目以待。


这个时代的新娇宠——H5

这个时代的新娇宠——H5

分享: