什么是h5页面制作，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的使用也十分讲求，给用户带来了完善的互动体验，值得细细品味。

创维oled电视怎么样，oled电视机的使用寿命介绍

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页面，让我们拭目以待。