产品经理教你做爆款H5

本次是微互动第30期讲座，以下为讲座内容：

大家好，我是邓志刚，是兔展原产品经理，现在也是我们公司——中北明夷科技有限公司的合伙人，很感谢微互动的邀请，我可以和大家在这里进行关于H5页面的讨论与交流。

html5是去年10月份，万维网的一个联盟经过八年的努力制定的一套标准，我们可以从两方面来理解html5，一个是从技术层面，一个是从信息传播层面来说。

技术层面：html5代表的不是一种技术，实质上是一个协议。

从技术角度上看，就像是水管：开始有很多水管生产商，每个生产商生产的水管的口径和接口的螺纹都是不一样的，然而这里面其实存在了很多问题，比如我买这两个厂家的水管，他的切合就会有麻烦，增大了成本。所以针对于水管的标准就制定了这样一套标准，这样的话，不管你是在南方还是北方去买水管，拼接起来都不会有问题。

在互联网，每个浏览器就像是这些生产厂商，每个浏览器的标准其实都是不一样的，但是通过这一套协议把这些标准都统一化，性能提高、开发成本降低。这对我们而言没有太多作用，所以大家可以通过信息层面来了解。

在信息层面，我们都知道，通过文字、图片、视频，H5的信息传递属于在图片和视频之间，因为H5丰富了我们的信息传递，H5展示可以报名、互动、插入视频，以及在不同的浏览器和手机上进行适配，其实他是丰富了我们的一个信息传播路径。

现在国外很多的主流网站的开发都是按照H5的标准，包括我们的兔展也是这样的。大家接触到的H5产品相对还是比较初级和少的，像是展示啊或者是微信中传播的宣传。去年，国外利用H5制作3D的交互，非常的酷炫，在去年百度也出了一款3D的效果展示，受到了极大的热评。

对于未来，H5的信息传递、强交互性、适配好，还比制作视频、电影、甚至与像ios一样的操作系统。我们对于这一块还比较看好，现在很多大的公司都在布局html5，像谷歌，谷歌chrome是兼容H5做的最好的浏览器；现在惠普有一个web os，就是基于网页技术的操作系统。

同时在这里推荐，制作H5页面的时候大家要使用chrome浏览器进行操作。

H5大概在去年6、7月份兴起，从8月份到现在，渗透的非常非常深，开始的时候大家对于布局和美丑都不会很介意，因为他的高成本和开发还不能普及，后面随着我们兔展、包括其他同类产品这种制作工具的出现，让H5制作变得相对简单，所以在朋友圈我们经常可以看见H5的展示。

到了现在，大家对H5的形式、要求越来越高，简单的模板基本属于中规中矩，在传播量方便就需要下一些功夫。

这里有一个H5过目不忘的一个总结，很多人其实都看过这种H5展示，但这种基本都是自己提出来文案，然后找外包团队、加上设计，把它开发出来，这部分的成本还是非常高的。

那些过目不忘的H5页面：http://t.cn/RLDY4Hv

这些过目不忘的H5页面到底是不是我们需要做的一个东西？从传播角度来看，这些炫酷、耳目一新的作品是适合我们做的，但是也有另一种考虑，这种作品和展示有没有触及到足够多的目标用户，有没有达到你想要的传播效果。

我前段时间有参与过腾讯MIT部门一个创业活动的宣传策划，他们希望用一个H5页面去做一些活动的宣传。那一次包括策划活动，大概有将近十个人左右参与。还有一些设计，这整个过程的时长将近一个月吧，H5页面的发布就延期了一个月，这其中可以看出，时间成本其实比较高，当然还有资金成本也是比较贵的。 

比如，在我们兔展平台上去制作H5，也可以达到一定的宣传目的。因为平台上有比较多的模版去使用。这也是今天大家比较关心的一个问题。

最基础的就是要机灵地使用模版，这就像高考一样：如果高考作文一直都按照你的模式套路去写的话，分数一般都会比较稳定，但基本上也不会特别出彩。H5的制作和这个道理是一样的。

示例(请手动复制)：

【布拉德•皮特：无论论人生怎么选择…】http://evt.dianping.com/market/20141118/game/

【兔展】http://www.rabbitpre.com/m/uaqyrEJf#from=share

大家可以看一下上面两个案例：

第一个是大众点评定制的H5宣传，第二个是我大概用了15分钟把原来的一些图片下载下来在兔展上面做的。如果没有音乐上的对比的话，大家可以看出第二个也是非常的赞。

从性价比的角度看，更推荐在（兔展的）平台上花些心思去制做H5展示。当然我们今天是想跟大家说说怎样在我们的平台上做一个酷炫的、效果比较好的展示。

另外简单地说下，如果是单独去定制这种H5的宣传页面，它的其成本很高，而我的想法是：当大家制作的一个作品，如果能够具备火爆、热传的这种特征，很可能也会成为一个爆款。

抛开推广的渠道，我们就停留在制作的角度来看人力也是一个非常大的问题：据我了解，现在群里的很多朋友都在做公众号运营，但很多时候其实你的工作是没有一个设计师的配合的。之前我有合作一档节目，我发现他们一个设计师既要负责宣传海报的制作，还要负责线上的H5的制作，还有各种的（设计）。所以作为运营的你，如果掌握一些H5的制作窍门，在制作起来也会事半功倍。

根据我以前制作的经验，以及对我们后台现有传播量上百万级别的作品进行统计研究，一般的爆款都有哪些特征。同时很多小白运营并没有设计师配合，所以这里讲到的不会特别深，只是讲一些我认为我在制作中最重要的部分。虽然不能保证没次都是爆款，但是做的作品有这些特征，那就很大概率会成功。

那么，如何制作爆款H5？

设计，我们这个年代就是一个看脸的时代，所以设计一定要精美、崇尚阅读。这对我们的转发率会有很大程度上的帮助。

在这一块，我给大家一些制作上的建议：一方面是关于信息传播，一方面只是增加美感

风格统一：字体、图片样式、动画，精细到每一个元素。

风格比较统一的意义在于：当大家打开你的作品所有的页面，他的观感（就是视觉的总反应），都是比较一致的，这样会降低你目标受众户的学习成本，另外，在这一块要做到字体、图片的元素、音乐还有动画都是一个风格。

比如说你要做一个关于同学聚会的邀请函。那要选取一些比较怀旧一点点、偏向于古典一点的图片。色彩这方面需要做一个配合，要加入的动画不应该是特别跳的，应该给人传递的是一种制造回忆的感觉；

但如果是年会的周年庆典，音乐、颜色就是另一种风格。对于风格统一这一方面，如果你有设计师相对会好一些。

为什么要注意布局？现在是崇尚快餐阅读的一个时代，如果在一个页面里不能够很快地给用户传递所需要的信息，他很可能很快就把页面关掉。连内容他都没看全，就更不会帮你传递这个信息了。

下面这张图片是最常用的黄分割法，

黄金分割法或说九宫格法，我们可以看出来图片精心的划分，1、2、3、4，这4个点，横向竖向这两个带有圈圈的两个点，是我们打开一个页面，视觉最集中最集中的部分。 

所以当大家去做ppt我们会发现，它的一个标题基本上是在1、2部分。红色的1234部分。相对来说，1、2的位置要比3、4位置的注意力要更好、更明显一些。 

所以在最重要的信息、比如标题，或要特别强调的图片，是应该出现在这个区域。同时1234中间的交叉区域可以放一些小的内容，比如地点、时间之类的。同时周边可以适当做一些修饰元素，但不要过多，让页面过于复杂使阅读时难获取信息。

每页的颜色不要超过三种。比如下面滴滴打车的示例：

这个页面除了logo有一点蓝色之外，只有两种颜色。第一个是感谢有你，然后滴滴打车，背景是一个很简单的图片。

打开这个图片的时候，你的目光首先是聚焦在最大的这一块——感谢有你，通过比较亮的颜色或公司的主要颜色来突出重点。其他的辅色进行辅导，使整个页面看起来比较舒服。 

这种图片的制作其实非常简单，只要挑好一些字体，像背景图的话这张都是手机照出来的图，另外注意一下布局。这样你会感觉页面会非常的集中。

大家可以看一下刚才的图片，其实背景就是一张普通的图片，对它进行一些简单处理。把这个颜色去掉了一个色调就可以了。平常我们做的图片处理，就是为了使它融合的更好，你可以增加一些像边框、发光的效果，这些在平台上都有，大家稍微看一下就知道。还有一些倒影效果使用起来都比较好。

为什么这么说呢？

大家看过墙上贴照片吧？如果你把一张大照片直接贴到墙上，感觉会非常突兀。但如果你加一个相框，通过纵向去缓冲图片与背景的这个冲突，看着就舒服很多。但缓解这个冲突不一定只是用边框，其他的方式也是可以的。

另外，内容也是比较重要的，就像微信公众号的文章一样，它必须要满足我们的一些心理和需求。

因为我本身是学传播学的，对这一块比较关注；同时，我也是做产品的，会比较关注用户体验，关注传播的效果。大家每次在制作H5页面时应该多想想大家为什么愿意去帮你传播这个作品？

这个问题要从两个方面去考虑。

1.要满足某部分的需求，如物质上的一些收获：

比如说你在微信里增加了一个链接。如打车红包之类的。大家打开之后可以从中获取到一些好处，那他自然愿意去传播。

我们后台还有一些封掉的虚假宣传，效果其实很惊人，传播效果非常好。所以，大家如果用一些真实的信息去做活动，其实会有很大的帮助。

同时，物质上的收获是可遇不可求的，因为这部分必须要涉及到很多的资金资源。所以第二点就尤为重要。

2.我们在精神上的收获： 

我们可以充分发挥我们的主观能动性去做，这里主要是靠创意以及一些文案。如果你做的特别的搞笑、比如滴滴打人那种传播效果会非常好。

在这一方面要注意以下几个维度：

➀关于提案题材

➁关于文案

➂关于标题 

我们可以对H5的内容题材进行分类，

第一类.重大新闻、社会热点事件，现在其实这些都是从朋友圈里最早扩散，之后才是官媒和电视上的报道。这里可以很大程度的说明你做的东西如果是一个值得快速传播的内容，那大家是会主动参与进去的；

第二类.鸡汤类：像祈福，许愿这类，还有朋友圈盛传的鸡汤,是传播最为广泛的。

第三类.功能性的内容：生活中的常识技巧，这和朋友圈内传播的图文有一点类似。

H5具有传播速度快的优点，但不是所有的都适合做H5，如果你想加入比较多的图片和视频，那我们就推荐你使用H5，我们做过一个统计，类似的素材如果通过H5来展示，它的点击量要比微信图文要高两到三倍。因为H5具备更多的表现形式，不会像简单的图文传播那么乏味。

所以，制作H5页面切记不要贪大求多，要打造精简的内容，让大家可以快速地获取到你所传递的信息。同时要文案和图片相配合。

其实我做这些H5还是比较标题党的。标题党一定要慎用，如果做的不好可能会有一些负面的作用。这一块其实最重要的是贴合你的内容，不要过度夸大。

最好能够与你目标客户的利益相关，换成用户的角度去看，把握用户的情感共鸣。这样会比较容易增加你的打开量。

但同时如果你的内容不应该过度的夸大，比如标题说的很大，但点开之后发现里面什么都没有。其实这种宣传效果会给品牌宣传带来很多负面影响。

互动性：H5有一个很好的优点就是互动性。 

在我们现在媒体逐渐去中心化一个过程中，社会化媒体趋势和重要性也越来越明显。很多信息其实都是从微信、微博里直接爆出来，这里最重要的一个点就是——互动性！

举个例子，假设你在朋友圈里面发布一个H5链接，你在推荐语上有比较完整的评论。这个H5在你朋友看来就是一个全新的内容，因为你已经加入评论是对H5进行了一个加工。

简单来说，人人都是一个内容的生产者，又是一个内容的传播着。那大家为什么有愿意参与其中的传播？第一个是攀比心理，第二个就存在感。

比如这个案例：

【我是..位传递北大祝福者】http://t.cn/RLDYNQs

这是为了宣传北大的一个文化，这一期非常火爆，我制作的时候就在想如何做、怎么做才会引爆朋友圈。我在大年三十推出去这个H5，当天晚上大家都在转发这个。

我们现在讲大数据其实非常多，比如说你做淘宝，你在淘宝上有一些交易，再你买完之后会对你进行相应商品的推荐。

这其实是利用的交易数据，和观测数据。

观测数据最简单，我们做新闻的知道，报纸上的一些关键词的统计，这就是一个舆情分析。

通过总分析可以发现我们现在的一些媒体的情况，接着进行分析。还有一部分是用户数据。

这部分数据怎么用，相信这两天朋友圈里面出现的中国平安，还有前段时间的oppo手机这种广告大家都见过。这种广告其实微信是用了我们的朋友圈的用户间的关系数据。

如果广告出现在你的朋友圈，你在其中进行了评论，你的朋友又在同条广告下进行评论，那他最新的评论就会在你的朋友圈进行提示。微信朋友圈里面就是利用用户的网络关系在传播信息。

但整体而言，包括兔展在内，数据挖掘这一块其实做的非常不够，基本上就是给大家呈现出传播的量，比如说我们现在可能只是在尾页加一个传播数据，有多少人点击。这部分的一个数据对大家会有什么样的帮助呢，用几个词来说吧。就是显微镜和纠错器，导航仪以及发动机。

再过一段时间，我们的新产品上线之后，大家可以看到基于这部分关系的用户关系网的数据。准确地说你在兔展上做了一个作品，这个作品可以进行传播的途径。比如时间、省份以及传播的热度。我们都会对他进行统计，帮助大家来做这种H5方面的一些推广分析。

但首先，最基础的要给大家去呈现这部分一些数据，比如刚才说到的，每个省份每个时间段的阅读量是多少，然后有多少男性用户点开、有多少是女性用户点开的。是先在哪个省传播的比较广，哪些地方传的不是特别厉害，这些其实是一个数据呈现的工作。如果大家看到这部分数据就是刚才所说的作用——显微镜。

然后纠错器，纠错器是对你作品进行一个清晰的认知，比如说，为什么我这个作品在广东传的非常广？但是在北京，其实就不是特别受欢迎。然后我们就可以挖掘出很多的问题。这不管是线上推广还是线下推广都非常的有指导意义。

最后一个发动机，就是通过这种数据的整体分析之后预测到未来。等于打造一个翅膀工程学，不管你是做了一个什么样的作品，通过这种渠道以及这种传播数据中的意见领袖，通过他们进行一个扩散推广传播。

广告大师约翰·沃纳梅克有一句很经典的话：“我知道我的广告费有一半浪费了，但我不知道我浪费的是哪一半。”这是之前的一个时代，现在，当我们把这部分的传播数据做出来之后，就可以非常精准的营销。通过这种大数据进行处理之后，发现信息传播规律，然后给大家去做这种社会营销方案的指导。告诉你哪些地方没有做好，同时也会进行一些实时传播路径的跟踪，告诉你哪些地方传播的很弱，是不是需要对这个薄弱环节进行补救，提升我们需要的宣传效果，另外，我们会去发掘朋友圈里的一些意见领袖。

我相信在座的有些微信好友已经将近五千人了，他们发布朋友圈传播的动力就会比只有两三百人好友的微信号的传播力更广。我们希望通过这些人为我们做一些推广扩散。

因为现在单独针对H5讲的数据相关内容，大家没有看到相关的产品听起来也绝觉得比较枯燥。所以这一块就不用太多去关注。我们的新产品近期就要上新，请大家密切关注，希望给大家一些惊喜。

我讲的内容就全部到这里了，如果想深入地全维度地了解H5的整个环节（文案、设计、制作、传播），可以关注一下H5入门必修五堂课（戳阅读原文哦）。再次感谢大家来参与这次讲座。