VIP办理

那些过目不忘的H5页面 | From腾讯ISUX

我爱PPT(iloveppt)微信上最懂PPT的活人账号。专注PPT20年。
本文出处:腾讯ISUX (http://isux.tencent.com/great-mobile-h5-pages.html)
从引爆朋友圈的H5小游戏《围住神经猫》,到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》,从2014下半年起,各种H5游戏和专题页纷纷崭露头角。“H5”,这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计,通过一些案例分析来谈谈设计思路与方法,希望与大家进行交流探讨。


功能与目标

首先从功能与设计目标来看, H5专题页主要有以下4大类型:


1.活动运营型

为活动推广运营而打造的H5页面是最常见的类型,形式多变,包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同,如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部,如何设计一套合适的引流路线也颇为重要。


大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮,富有质感的旧票根、忽闪的霓虹灯,配以幽默的动画与音效,恨不得每个选项都点一遍。围绕“选择”这个品牌关键词,用引人入胜的测试题让用户把人生当作大片来选择,选到最后一题引出“大众点评选座看电影”,一键直达App购票页面。即使明知是软文也忍不住带着“矮油不错,这个页面有点diao噢”的心情点击了分享。


那些过目不忘的H5页面 | From腾讯ISUX

3.产品介绍型

聚焦于产品功能介绍,运用H5的互动技术优势尽情展示产品特性,吸引用户买买买。


这一类型的H5页面多见于汽车品牌,LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕,通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性,宏观和微观都照顾周全。


那些过目不忘的H5页面 | From腾讯ISUX

二.形式为功能服务

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


1.简单图文


简单图文是早期最典型的H5专题页形式。“图”的形式千变万化,可以是照片、插画、GIF等。通过翻页等简单的交互操作,起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。


滴滴打车这个案例就是典型的简单图文型H5专题页,用几张照片故事串起了整套页面。视觉简洁有力,采用整屏黑白照片,点缀以滴滴的品牌橙色。每切换一张图片,文字就渐隐浮现,没有其他互动形式,让观众聚焦于内容,通过陌生人之间的真情联系来塑造品牌的正能量形象。


那些过目不忘的H5页面 | From腾讯ISUX

2.礼物/贺卡/邀请函

每个人都喜欢收到礼物的感觉,抓住这一心理,品牌推出了各种H5形式的礼物、贺卡、邀请函,通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物,那创意和制作便是重要的加分项。


AKQA创意营销公司在圣诞之际献上了一份厚礼——梦幻水晶球。通过移动手机,镜头从水晶球外不断摇晃推近,渐渐走进水晶球的微观世界里。通过手机环顾四周,可以360度欣赏水晶球里的全景,摇一摇雪花便漫天飘洒。写下你的祝福并分享给朋友,相信一定会惊艳到对方。这个H5页面使用了重力感应、3D等技术,文字与BGM的使用也十分讲究,给用户带来了完美的互动体验,值得细细品味。


那些过目不忘的H5页面 | From腾讯ISUX

3.问答/评分/测试

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


与本文开头一样也是大众点评的项目,这次是为姜文的电影《一步之遥》做持续推广,让用户为姜文的代表作评分。视觉设计依旧出彩,开脑洞的创意和动画设计令人叫绝(一定要扫一扫体验下!)。延续了怀旧大字报风格,字体、文案、装饰元素等细节处理也十分用心。问答形式的H5页面能做到这个份上也是蛮拼的。


那些过目不忘的H5页面 | From腾讯ISUX

三.为设计加分的4个要点

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


1.细节与统一

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


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


那些过目不忘的H5页面 | From腾讯ISUX

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

想要你的H5专题页一夜爆红,第一时间抓住热点并火速上线,借机进行品牌宣传也不失为一条捷径。


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


那些过目不忘的H5页面 | From腾讯ISUX

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

不论H5的形式如何多变,有价值的内容始终是第一位的。在有限的篇幅里,学会讲故事,引发用户的情感共鸣,将对内容的传播形成极大的推动。


LEVI’S新年优惠活动专题页以第一人称的口吻,用小时候简朴却热闹的新年与长大后富足却乏味的新年做对比,用手绘风渲染出亲切的怀旧氛围。最后引出“这个新年,把压力和束缚打包扔掉,用新鲜的眼光感受生活,一起活出趣”的品牌推广slogan,代入感极强的故事无疑是驱动分享的源动力。


那些过目不忘的H5页面 | From腾讯ISUX

结语

随着手机硬件的升级、HTML5技术的发展以及微信平台的开放,HTML5的跨平台、低成本、快迭代等优势被进一步凸显,这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说,都将是一个最好的时代。未来必将涌现更多优秀的H5页面,让我们拭目以待。
那些过目不忘的H5页面 | From腾讯ISUX

原文始发于微信公众号(我爱PPT):那些过目不忘的H5页面 | From腾讯ISUX

这里是锦鲤ppt模板网分享的ppt模板设计相关教程,对学习PPT,提高ppt审美很有作用,另外,如果你需要商务ppt模板,可以关注我们,我们会每天不定时分享一些免费高端ppt模板
0

关于锦鲤ppt模板网

是现在国内最顶尖的以分享ppt模板商务ppt模板工作总结ppt模板为主的网站,锦鲤ppt致力于为广大网友提供一个物美价廉的ppt设计综合平台,曾经和国内其他PPT网站一样,常将未筛选过的PPT模板资源分享给广大网友,造成用户在筛选优质模板的过程中浪费时间,所以锦鲤PPT模板网至改版以来,坚持只分享“最优质的PPT素材资源”,另一方面,邀约大量国内外优秀的PPT设计师的加入,并设计出各类优秀PPT资源,提供给我们的用户学习。锦鲤PPT模板网致力于为用户提供最专业、优秀的平台服务,因不能承受高昂的服务器和带宽费用,我们将对部分资源收取非常低价的会员费用以维持服务器的正常开支,希望用户予以理解,谢谢

版权说明

虽然您在本站可以查看这些PPT资源,但除了可以在网上浏览和学习之外,我们并未授权您将这些PPT资源用于其它任何商业用途。如需某资源的商业版权,可联系锦鲤PPT模板网的客服,我们将为您代为购买商业版权

评论0

请先

没有账号? 忘记密码?

社交账号快速登录