2015打造火爆H5页面全攻略！ (2015-03-18 11:43:21)

标签： h5页面 h5页面设计 h5页面制作 手机h5页面 分类： 视觉/设计方案

　　

对于H5这个名词想必大家已经很熟悉了，似乎就是在一夜之间，各大公司的市场、公关等负责推广和传播的部门人员，纷纷把目光投向了H5。那么，H5到底能做什么？应该怎么去做？到哪做？可怎么玩起来？做一个H5营销需要注意什么？有哪些值得参考的经典案例？这些都是大家期望看到的，下面就是2015打造火爆H5页面圈攻略！

　　

2014年7月22日，H5游戏“围住神经猫”上线微信朋友圈，到7月25日，3天的时间便创造了用户500万，访问量超1亿的神话。神经病猫的动画表情、服饰、背包开始流行，甚至有网店开始售卖围住这只猫的攻略。

　　

尽管H5慢慢走近更多人的视野，但这个由HTML5简称过来的词汇，在大多数人听起来，仍十分陌生且难以理解。简单来说，H5就是一种高级网页技术，我们平时看到那些邀请函、小游戏都是H5网页，确切来说叫HTML 5，它跟我们平时上网看到的那些网页本质上没有任何区别。

　　

一.H5页面能怎么玩？　 

　
在了解完H5的一些基础知识后，相信大家最关心的还是H5能做什么，有哪些玩法？接下来我将列举一些典型的例子和大家探讨：

　　

1 幻灯片式玩法

　　

以下这个特斯拉的例子相信很多人都看过，精美的图片设计+简单的翻页效果。

　　

这是H5最早期也是最典型的玩法，因为简单、实用，所以至今还很流行。其效果就是简单的图片展示&翻页交互，最终整体的表现很像幻灯片展示。

　　

其实幻灯片式的H5现在已经出现了很多在线制作软件供大家使用，所以制作成本在现在看来几乎是等于零的，而在之前这样一个应用的开发可能要将近一万。

　　

2 交互式动画

　　

可口可乐下面这个案例在之前的风云榜中推荐过，是运用H5绘图功能的典型例子。当然这里面的交互还是比较简单的，只不过它基本体现了交互式动画的感觉。整个可口可乐的时间轴是随着用户向上滑动页面“绘制”出来的。

　　

　

其实除了这种叙事型的H5动画，我们能看到的大多数H5游戏也都都属于这一类，比如神经猫、打企鹅、2048、财务包子铺等等，都非常值得去感受一下。

　　

那么，H5到底能实现什么样的动画效果呢？我想这应该是大家在做H5时最头疼的问题，因为不知道能做成什么样，你也就不知道从何下手。所以下面给大家介绍一个网站，绝对可以让你眼前一亮，思维暴涨：。在这个网站中，你几乎能看到所有H5能够实现的动画效果，引爆你的灵感，下次如果需要做H5的时候就可以跟开发说“你看，我要的就是这个效果”。

　　

3 功能型H5

　　

看一下以下的两个例子，第一个是百度针对地铁涨价做的H5，它可以计算你每天坐地铁要多少钱并且实时显示大家的评论；第二个是STC的社交移动风云榜，很简单，就是精品H5的展示：

　　

这两个H5都有一个特点，除了针对受众的热点内容传播以外，它们很像一个“供用户重复使用”的产品，这就是所谓的功能型H5。其实大家看到风云榜可能会觉得它只是一个再简单不过的网页，但如果从它满足用户需求并产生重复“使用”行为的角度，它其实是一个产品——每周更新、定期群发推荐H5的图文、栏目更新通知等等。

　　

功能型H5的独特价值在于，除了具备传播性以外，它通过用户的重复使用行为使得H5的传播是一个持续不断的过程，这一点是一般的H5所不具备的。风云榜首次发布时转发6w+多，目前每月的访问量都在10w左右。

　　

功能型H5由于具备一定的产品特性，其最大的价值就是提高粉丝活跃度和忠诚度。我们需要根据本身品牌的形象定位以及受众的特性设计功能型H5。举个例子，卖洗手液的可以抽象为健康生活方式，设计一个改善生活健康状态的功能型H5或定期更新资讯的功能型H5。 

 

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

　
总体来说，H5页面主要是以上3种类型，不过说细一点还可以从不同角度分出一些类型，下面将通过大量的经典案例来说明这一点，最好你能体验一下这些案例。首先，从功能与设计目标来看， H5专题页主要有以下4大类型：

　　

1 活动运营型

　　

为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。

　　

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

　　

　　

2 品牌宣传型

　　

不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。

　　

伴随着浪漫的钢琴旋律，《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣品，爱妻首选”的宣传语。设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌，用H5打出了一副走心的情感牌，让用户记住了“半生只为你”的爱妻品牌形象。

　　

　

3 产品介绍型

　　

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