pg下载麻将胡了A.旗舰厅进体育.cc 那些过目不忘的H5页面

自2014下半年起始，先是有引爆朋友圈的H5小游戏《围住神经猫》，而后又出现颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，各种各样的H5游戏以及专题页纷纷崭露头角 。 “H5 ” ， 这一由HTML5简化而成的词汇 ， 借助微信这个移动社交平台 ， 正逐渐走进更多人的视野 。 本文把焦点聚集于基于微信传播的H5页面的视觉设计 ， 通过一些案例分析来讲述设计思路和方法 ， 期望能与大家展开交流探讨 。

功能与目标

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

1.活动运营型

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

大众点评构思的电影《狂怒》推广页，巧妙地掌握了此中诀窍。其借助复古拟物风格的视觉设计，营造出独特呈现，令人顿感新奇。比如那富有质感的旧票根、不断闪烁的霓虹灯，再搭配幽默的动画与音效，让人着实想将每个选项逐一探看一番。此推广页紧扣“选择”这份品牌核心关要，通过富含吸引力的测试题，诱导用户以把人生视作一部视觉大片的方式开启选项，直至最后一题，不经意引出“大众点评选座看电影”这一关键指引，一键便可直抵App购票页面。即便心底明知这是一篇软文，却还是不由自主怀揣着“嘿，感觉还挺不错，这个页面有点厉害哟”这般的心态，点击了分享按钮 。

2.品牌宣传型

和讲究时效性的活动运营页不一样，品牌宣传型 H5 页面就如同一个品牌的微官网，它更侧重于品牌形象塑造，会朝着用户去传达品牌的精神态度。从设计方面而言，得运用契合 brand flavor/the brand air quaility 的视觉 verbiag，以使用户对 brand 留下深深的印记。

沿着浪漫的钢琴声道伴随着而去，《首草先生的情书》由一位男士角度缓缓讲述了在成长进程内对于妻子的爱意与愧疚种种情况事项，最终导出“首草——滋阴圣品，爱妻首选”此宣传用语口号，在设计选择方面用到这般回忆样式的黑白色彩调性，简单纯粹的照片加上文字表述形式并且用花瓣落下以及水面存在的涟漪等这样的简易动图配合，营造散发出唯美优雅的弥漫氛围环境，“首草”这一才才全新出现的高端养生的草药品牌，借着这H5类型以打出了十分真挚走心感情的牌面之举，使得用户们将记住了“半生只为你”的爱妻子的品牌形象印象。

3.产品介绍型

将重点放在产品功能的详尽介绍之上，借助H5所具备的互动方面的技术优势，充分地去展示产品的特性，以此来吸引用户产生购买行为，引诱用户掏钱消费。

Lexus NX是多见于汽车品牌的，这一类型H5屏幕的优秀模范的事例。凭依手指顺着光的轨线切割画面拉开序幕，借由贴切优雅的触碰、摩擦、活动等互对形式引带用户一块儿探究物品的七个特性，宏观与微观都管护周到，建模的精巧和极具质感，光效的细腻造出酷炫的视觉样式。

4.总结报告型

支付宝十年账单引发热议之后，各大企业年终总结如今热衷于借助H5技术来达成，原本乏味的总结报告因优秀的互动体验变得有趣生动 。 ，优秀这种互动体验使得原本乏味的总结报告，有了有趣生动转变 。

有一个名为《京东的十大任性》的讲述物，利用10张横屏页面，呈现了京东于2014年达成的十大成就，在视觉设计方面，运用简洁的扁平风插画同时，加入纸面质感，进而形成复古卡片拼贴感，不同页面之间，借助手指滑动达成流畅的视差滚动效果，最后还存在刘总这个小彩蛋，一口气看完之后，大概就能知晓2014年京东都做了哪些大事。 。

二．形式为功能服务

确定了专题页之功能目标后，接下来便进入关键的设计阶段了。怎样有目的地实施设计，需考量具体的应用场景以及传播对象，从用户视角出发思索何种页面是用户最为愿意去浏览且最有可能分享出去的。以下罗列几种常见的H5专题页表现形式：

1.简单图文

早期最典型的 H5 专题页形式是简单图文，“图”有着千变万化的形式，它可以是照片，也可以是插画，还可以是 GIF 等，经由诸如翻页之类的简单交互操作，能起到类似幻灯片的传播效果pg下载麻将胡了A.旗舰厅进体育.cc，其考验的是高质量的内容本身以及讲故事的能力。

滴滴打车此个案例，乃是典型的那种，简单图文版式的H5专题页面，凭借着几张照片故事去串联起了整套页面，其视觉呈现简洁且有力，采取的是整屏黑白照片，再点缀上代表滴滴的那个品牌橙色色调加以装饰。每一次切换到一张新图片的时候，文字便逐步渐隐继而浮现起来，并没有其他额外多余的互动形式，以此让观众能够将注意力聚焦于所要展现的主要内容。并借助陌生人彼此之间的那种真情联系，去塑造滴滴打车品牌积极向上的正能量形象。

就有那种不甘心于平凡普通的精彩事例，在那除夕夜全部全国民众以疯狂状态去抢红包的时候，微信推出了一个名为《从此将那中国人的名气与利益看得明明白白》的专题页面，刚看第一眼便就此被彻底镇住呆住，哇居然有着这么亲切看着就眼熟容易联想到的RMB~每一个页面呈现的都是一张人民币上面风景的局部是予以放大之后的那样一种图像，创作者把创意很巧妙地加插到其中，还运用微动态展开细腻入微的刻画描绘，从而带着观众进入到人民币所营造出的微观世界里面，每一张钞票上面的图案搭配着能够引人以深刻思考的文案语句，在对微信红包予以推广宣传向外发力的同时，又去呼吁人们重新对人情以及名利所蕴含的奥义进行一番审视思考。

2.礼物/贺卡/邀请函

任何人都偏好收获礼物时的那种感受，把握住此种心理状态，品牌方推出了五花八门H5样式的礼物，还有贺卡，以及邀请函，借由提高用户的好感程度，进而在不知不觉中达成品牌宣传的目标。既然属于礼物范畴，那么创意以及制作就成为关键的加分内容。

圣诞之际，AKQA创意营销公司呈上一份厚礼，那便是梦幻水晶球。移动手机时，镜头于水晶球外持续摇晃推近，缓缓步入水晶球的微观世界之中。经手机环顾四周，能够360度观赏水晶球里的全景，摇一摇雪花就会漫天飘撒。写下你的祝福并分享给朋友，必定会让对方惊艳。此H5页面运用了重力感应、3D等技术，文字与BGM的运用也颇为讲究，给用户带来了完美的互动体验，值得细细品味。

在过年的时候，印象笔记独具匠心地产出语音贺卡，经公众号来引领用户给它发一条语音消息，接着把这条祝福语音和中国风动画融合成一张与众不同的语音贺卡发给朋友，整体色调是以该品牌色为主体，并且还含有一丝优雅的过年氛围，相当巧妙 。

3.问答/评分/测试

采用问答形式呈现的H5页面已然普遍常见，借助用户具备的求知欲望以及探索欲望，不停地进行选择，去探查最终达到怎样的成绩。一条明晰的线索甚为必要，最终抵达的结果页面同样需合情合理，并无突兀之感，要是能够辅以出色的视觉效果以及文案内容，从而减轻答题所具有的枯燥感受，那便实在是再好不过了。

是大众点评的项目，和本文开头一样，这次为姜文电影《一步之遥》做持续推广，让用户给姜文代表作评分，视觉设计依旧出色，开脑洞的创意以及动画设计令人赞叹不已（一定要扫一扫去体验一下！）pg下载官方版打开即玩v1022.速装上线体验.中国，延续了怀旧大字报风格，字体、文案、装饰元素等细节处理也相当用心，问答形式的H5页面能做到这般程度也是颇为努力了，。

4.游戏

有从 “围住神经猫”、“看你有多色”这般单单纯纯的小游戏，再到杜蕾斯“一夜N次郎”（也就是山寨版“别踩白块儿”）这种品牌植入式小游戏，H5游戏当初因操作简便、竞技性突出，在朋友圈曾一阵风行，然而创意欠缺与同质化状况致使用户对于没什么脑子的小游戏如今渐渐生出厌倦情绪。品牌若想在游戏方面达成成功传播，就得在玩法以及设计上多花些心思。

在圣诞节期间，Same推出了一款H5小游戏，它叫做《圣诞老人圣诞拯救计划》，其操作特别简单，仅仅只需用手指交替着向上滑动，由此把角色的脖子向上拉升到无限长的地步，这款游戏会记录你所拉动的最高距离，然后跟朋友去比一比谁较长。它的界面清新且可爱，这与Same的招牌画风保持一致，游戏中的角色同样也是Same的品牌角色，Via幽默并且恶搞性质的游戏来向用户传达Same所拥有的独到且有趣的产品文化。

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

H5页面设计品质是否出众，这会直接对其传播效果产生影响，甚至还会影响到用户对于品牌形象的认知。在此处总结出了以下这些设计要点：

1.细节与统一

欲成就高品质之用户体验，需考量细节与整体的统一性。若为复古拟物之视觉风格，字体便不可过于现代；若为幽默调侃之调调，文案措辞便不可过于严肃；若打情感内容牌，动效便不可过于花哨。

大众点评，关于姜文电影推广系列里的《九步之遥》H5专题页，它便牢牢地抓住了这一点。从二维码入口开始，到十分性感的loading页，紧接着到最后分享提示的设计，这种设计涵盖了文案措辞以及背景音效，这些方面，没有一个不是跟整体的戏虐风格保持着一致pg下载，经由这些给到用户一个完整统一的互动体验。

特别留意“分享提示”此项细节构思，相较于简简单单的一个箭头以及一句冷冰冰的“点这里分享”，精心投入的细节构思所造就的高水准和愉悦感受十分明显。再有几个精彩实例：

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页面如雨后春笋般大量涌现出来，那就让我们擦亮双目，拭目以待吧。