那些过目不忘的H5页面-UI设计 PS-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝33
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:214回复:0

那些过目不忘的H5页面

楼主#
更多 发布于:2016-06-11 13:58
那些过目不忘的H5页面

从引爆兄弟圈的H5小游戏《围住神经猫》,到推翻传统广告的群众点评H5专题页《咱们之间只有一个字》,从2014下半年起,各种H5游戏和专题页纷繁崭露头角。“H5”,这个由HTML5简化而来的词汇,借由微信这个移动交际渠道,正在走进更多人的视野。这篇文章聚集于根据微信传达的H5页面的视觉规划,经过一些事例剖析来谈谈规划思路与办法,期望与咱们进行沟通讨论。
功用与方针
首先从功用与规划方针来看, H5专题页主要有以下4大类型:
1.活动运营型
为活动推行运营而创造的H5页面是最多见的类型,方式多变,包含游戏、邀请函、贺卡、测试题等方式。与以往简略的静态广告图像传达不相同,现在的H5活动运营页需求有更强的互动、更高质量、更具论题性的规划来促成用户共享传达。从进入微信H5页面到最终落地到品牌App内部,怎么规划一套适宜的引流道路也颇为主要。
群众点评为影片《狂怒》规划的推行页便深谙此道。复古拟物个性的视觉规划让人眼前一亮,赋有质感的旧票根、忽闪的霓虹灯,配以诙谐的动画与音效,恨不能每个选项都点一遍。环绕“挑选”这个品牌关键字,用引人入胜的测试题让用户把人生当作大片来挑选,选到最终一题引出“群众点评选座看影片”,一键直达App购票页面。即使明知是软文也不由得带着“矮油不错,这个页面有点diao噢”的心境点击了共享。

2.品牌宣扬型
不相同于考究时效性的活动运营页,品牌宣扬型H5页面等同于一个品牌的微官网,更倾向于品牌形象描写,向用户传达品牌的精力情绪。在规划上需求运用契合品牌气质的视觉语言,让用户对品牌留下深刻印象。
伴跟着浪漫的钢琴旋律,《首草先生的情书》以一位男人的口吻娓娓道来在生长进程中对妻子的爱与内疚,最终引出“首草——滋阴圣品,爱妻首选”的宣扬语。规划上选用回想般的是非色彩,简略的相片加文字,配以花瓣掉落、水面涟漪等轻动画,烘托出唯美高雅的空气。“首草”这个全新的高端养生草药品牌,用H5打出了一副走心的情感牌,让用户记住了“半生只为你”的爱妻品牌形象。

3.商品介绍型
聚集于商品功用介绍,运用H5的互动技能优势纵情展现商品特性,招引用户买买买。
这一类型的H5页面多见于汽车品牌,LEXUS
NX是其间的优异代表事例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉个性。用手指跟从光的轨道切开画面揭开序幕,经过合理高雅的触碰、冲突、滑动等互动方式带领用户一同探究商品的7大特性,微观和微观都照料周全。

4.总结报告型
自从支付宝的十年账单引起热议后,各大公司的年终总结现也热衷于用H5技能完结,优异的互动体会令原本庸俗的总结报告风趣生动了起来。
《京东的十大固执》用10张横屏页面叙述了京东在2014年的十大成果,视觉规划上选用简练的扁平风插画,参加纸面质感构成复古卡片拼贴感。不相同页面间经过手指滑动完结流通的视差翻滚作用,最终还有刘总这个小彩蛋。一口气看完后大约就了解2014年京东都干了哪些大事。

二.方式为功用效劳
在断定了专题页的功用方针以后,接下来即是关键的规划阶段了。怎么有的放矢地进行规划,需求考虑到详细的运用场景和传达对象,从用户视点动身去考虑什么样的页面是用户最想看的最会去共享的。以下罗列几种多见的H5专题页表现方式:
1.简略图文
简略图文是前期最典型的H5专题页方式。“图”的方式千变万化,可所以相片、插画、GIF等。经过翻页等简略的交互操作,起到相似幻灯片的传达作用。考验的是高质量的内容自身和讲故事的才能。
滴滴打车这个事例即是典型的简略图文型H5专题页,用几张相片故事串起了整套页面。视觉简练有力,选用整屏是非相片,装点以滴滴的品牌橙色。每切换一张图像,文字就渐隐显现,没有别的互动方式,让观众聚集于内容,经过陌生人之间的真情联络来描写品牌的正能量形象。

也有不甘平平的精彩事例。在除夕夜全国人民张狂抢红包的时间,微信推出了《从此看尽我国人的名与利》这么一个专题页。第一眼就被镇住了,好亲热的RMB~每个页面都是一张人民币景色部分放大图,创作者参加奇妙的构思元素与微动态进行细腻描写,带观众走进了人民币的微观世界。每一张钞票图画合作发人深省的案牍,在推行微信红包的一同呼吁大家重新审视情面与功利的奥义。

2.礼品/贺卡/邀请函
每个人都喜爱收到礼品的感触,捉住这一心思,品牌推出了各种H5方式的礼品、贺卡、邀请函,经过提高用户好感度来潜移默化地达到品牌宣扬的意图。既然是礼品,那构思和制作就是主要的加分项。
AKQA构思推行公司在圣诞之际献上了一份厚礼——梦幻水晶球。经过移动手机,镜头从水晶球外不断摇晃推近,逐步走进水晶球的微观世界里。经过手机环顾四周,能够360度赏识水晶球里的全景,摇一摇雪花便漫天飘洒。写下你的祝愿并共享给兄弟,信任一定会冷艳到对方。这个H5页面运用了重力感应、3D等技能,文字与BGM的运用也十分考究,给用户带来了完美的互动体会,值得细细品味。

Evernote在过年时期也独出机杼地推出语音贺卡,经过公众号引导用户对其发送一条语音消息,然后把这条祝愿语音联系我国风动画做成一张绝无仅有的语音贺卡发送给兄弟。全体色彩也是以Evernote品牌色为主,一同蕴含着一丝高雅的年味,十分讨巧。

3.问答/评分/测试
问答方式的H5页面也层出不穷了,使用用户的求知欲和探究欲,一路选选选,看最终究竟是什么成绩。一条清晰的头绪是必要的,最终抵达的成果页也需求合理不突兀,如果能辅以出彩的视觉和案牍,弱化答题的单调感那就再好不过了。
与这篇文章最初相同也是群众点评的项目,这次是为姜文的影片《一步之遥》做继续推行,让用户为姜文的代表作评分。视觉规划照旧出彩,开脑洞的构思和动画规划令人叫绝(一定要扫一扫体会下!)。连续了复古大字报个性,字体、案牍、装修元素等细节处理也十分用心。问答方式的H5页面能做到这个份上也是蛮拼的。

4.游戏

“围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”(即山寨版“别踩白块儿”)等品牌植入式小游戏,H5游戏由于操作简略、竞技性强,一度风行兄弟圈,但构思缺少和同质化现象致使用户对无脑小游戏逐步产生了厌恶。品牌要在游戏上做到成功传达,需求在玩法和规划上多下点功夫。
Same在圣诞节推出了一款名为《圣诞老人解救方案》的H5小游戏,操作十分简略,只需用手指交替上滑,把人物的脖子向上拉到无限长,游戏会记载你拉的最高距离,跟兄弟比一比谁比较长。界面新鲜心爱,与Same的招牌画风共同,游戏人物也是Same的品牌人物,经过诙谐恶搞的游戏向用户传达Same独特风趣的商品文化。

三.为规划加分的4个关键
一个H5页面规划质量的拔尖与否,会直接影响其传达作用,乃至影响到用户对品牌形象的认知。在这里总结出以下的规划关键:
1.细节与一致
要成果高质量的用户体会,有必要考虑到细节与全体的一致性。复古拟物的视觉个性,那字体就不能过于现代;诙谐戏弄的调调,那案牍遣词就不能过于严肃;打情感内容牌的,动效就不能过于花哨。
群众点评姜文影片推行系列的《九步之遥》H5专题页便牢牢捉住了这一点。从二维码入口到性感的loading页,再到最终共享提示的规划,包含案牍遣词和布景音效,无不与全体的戏虐风保持共同,给到用户一个完好一致的互动体会。

特别重视“共享提示”这个细节规划,比起一个简略的箭头和一句冷冰冰的“点这里共享”,用心的细节规划带来的高质量和好感度是清楚明了的。再贴几个精彩事例:

2.紧跟热门,使用论题效应
想要你的H5专题页一夜爆红,第一时间捉住热门并火速上线,借机进行品牌宣扬也不失为一条捷径。
天天P图捉住武则天热播的关键推出了风行海内外的媚娘妆,一同《全民COS武媚娘》的H5互动页也第一时间上线,操作简略易上手,一键上载相片就能马上完结媚娘妆,与万千媚娘们进行PK,娱乐了群众又推行了商品。

网易娱乐在武媚娘剪胸风云的风口浪尖上推出了名为《神复原武媚娘被剪胸本相》的H5专题页,放下节操用极富想象力的粗旷草图风向广大观众“复原”了本相。一时间被张狂转发,网易娱乐也算是顺势自我宣扬了一把。

3.讲个好故事,引起情感共识
不论H5的方式怎么多变,有价值的内容始终是第一位的。在有限的篇幅里,学会讲故事,引起用户的情感共识,将对内容的传达构成极大的推进。
LEVI’S新年优惠活动专题页以第一人称的口吻,用小时候俭朴却热烈的新年与长大后富足却庸俗的新年做比照,用手绘风烘托出亲热的复古空气。最终引出“这个新年,把压力和捆绑打包丢掉,用新鲜的眼光感触生活,一同活出趣”的品牌推行slogan,代入感极强的故事无疑是驱动共享的源动力。

4.合理运用技能,创造流通的互动体会
跟着技能的开展,现在的HTML5拥有很多出彩的特性,让咱们能轻松完结绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动作用。(有爱好的话能够点击这个网站http://fff.cmiscm.com/几乎有一切H5动态作用的展现)。相较于塞入各种不相同种类的动效致使页面混乱臃肿,咱们更发起的是合理运用技能,用心专注于为用户供给流通的互动体会。
典型的事例是淘宝在双12推出的预售推行H5专题页。在阅读进程中我只运用了一种向上滑动的手势,而页面出现出来的作用却犹如一个流通的动态GIF。规划师奇妙使用图形规划与组合,在滑动进程中营造出一种丰富的视差翻滚作用,单个图形元素的遮罩、旋转与全体页面的动势合作极为默契。

结语
跟着手机硬件的晋级、HTML5技能的开展以及微信渠道的敞开,HTML5的跨渠道、低成本、快迭代等优势被进一步凸显,这对身处于移动互联网大潮的公司主、品牌、规划师和开发者来说,都将是一个最好的年代。将来必将出现更多优异的H5页面,让咱们拭目以待。


优质IT资源分享社区为你提供此文。
本站有大量优质UI设计(含PS,软件 网页 平面设计等)教程视频,资料等资源,包含UI设计基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

UI设计教程视频
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客