伴随着一只神经猫和几次品牌内容的朋友圈疯转，H5迅速赢得了众多营销人员的关注。

但随之而来的是，一些H5制作的邀请函、产品宣传图被疯狂转发，被无数次点赞，被业内人士口口相传，而另外一些则无声无息，虽然制作方也花了不少费用。

那么，H5能在营销中做什么?它的传播阵地在哪里?如果要启动一次H5传播，该以哪些先例为标杆?如何选择供应商?市场上的一般收费情况如何?

文/互联网八先生

七个案例

1、触屏类：指纹识别

移动社交产品分享会(经纬创投+36氪+nice)

4万UV，只能容纳1000人报名的表单瞬间关闭。

这是在20xx年8月份在移动互联网从业者圈内热传的H5，其最大的亮点是将按钮做成指纹识别的样式，巧妙地利用点击错觉，给用户前所

未有的体验。这款h5算比较早期的经典案例，现在看起来虽然觉得没有那么惊艳了，但是在8月份还是跟行业带来一阵与众不同的创意旋风。

2、滑屏类：无极滑动

一封来自未来的邀请函(Pingwest)

这是在20xx年10月份未来应用团队在旅行途中给pingwest的

sync2014大会做的，从策划到创意设计一气呵成，除了文字的修改外，从头到尾这款H5没有做过任何的修改。亮点是采用无极滑动的方式来做页面过渡，对比泛滥的H5滑屏页面过渡的形式，这个设计非常巧妙的把活动信息展示出来，让用户在阅读时不觉得枯燥反而充满期待。值得说明的是这款H5给只能容纳800人的现场带来了4万人的报名，现场的过道、走廊上都挤满了人，未来应用团队也是做了这个之后才确定的团队名字。

…… …… 余下全文

用案例浅谈微信传播的H5页面设计

从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，从2014下半年起，各种H5游戏和专题页纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行交流探讨。

功能与目标

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

1.活动运营型

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

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

…… …… 余下全文

这一年 映盛做过哪些H5

一些H5制作的邀请函、产品宣传图被疯狂转发，被无数次点赞，被业内人士口口相传，而另外一些则无声无息，虽然制作方也花了不少费用。那么，H5能在营销中做什么？如果要启动一次H5传播，该以哪些先例为标杆？

文章整理了近一年来映盛中国做的6类标志性H5案例

触屏类

指纹识别

C3-XR香榭丽大街C42雪铁龙展厅

其最大的亮点是将按钮做成指纹识别的样式，巧妙地利用点击错觉，给用户前所未有的体验。

擦玻璃

C3-XR自由我心 幻彩巴黎

让用户对深层次的东西有所期待

吹散雾霾

东风标致508抢先试驾

这些h5算比较早期的案例，现在看起来虽然觉得没有那么惊艳了，但是在上线初期还是给行业带来一阵与众不同的创意旋风。

滑屏类

万达电影乐园开园邀请函

映盛中国年会邀请函

东风风神AX7品牌之夜邀请函

传统的上下滑屏页面切换，是H5的精髓所在

内容创意

选择题

东风标致狮行125周年

不同的选择，不同的页面展现！

剧情

C3-XR星球穿越

无论是页面设计，用户互动方面，都融合了汽车本身的卖点，并且堪称大制作！

…… …… 余下全文

明月教你如何用H5和CSS实现WWDC 2015上的动画效

果

明月H5课程

每年，苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和

OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。

每一年的这个时候，他们都会制造出很多新创意，今年，我被一个用简单圆圈和形状制作出来的图标所惊艳，于是我决定用HTML和CSS来实现它。

WWDC 15邀请卡

苹果的图标通常都会使用颜色和形状的叠加，比如iOS 7 Photos图标。今年WWDC邀请函用了下面这货。

它由一些列层叠和半透明的形状构成，非常适合用HTML和CSS来实现。

HTML

设计这样一块负责的东西需要稍微分析一下。首先，我把它分解成各个部分。 大方向看它是由三种形状构成的，主要图形为8个大圆，我先把它们列出来：

这里我分割成几个类，这样做方便后面把large,circle,等类提取出来单独写，代码会整洁很多。

然后我们有八个小形状，处于大圆的上边，这些形状由4个圆形和4个方形构成，方形是由圆角的，我这样写HTML

我用了circle,squircle以及数字1到8来为各个div设置类名，这样做的好处是，后面为它们设置形状和颜色的时候很方便。

…… …… 余下全文

总结一下，现在市场上做H5的主要有以下几种类型的公司：

1、公关公司——这类公司离客户最近，他们承接客户的活动比较多，一般是受客户要求或主动向客户推荐H5的方式来做，但是公关公司基本没有技术人才，所以大部分都选择外包。我们的一些客户就是公关公司推荐过来的。

2、广告公司——H5是移动端一种比较好的广告展示方式，有的广告公司在一些项目上也会把H5外包出来做。这种都是广告公司提供创意，然后技术和设计的部分外包给第三方做。

3、互联网公司——有些互联网公司也会自己开发h5，做一些传播性的东西或者把自己的产品H5化。

4、微信开发外包公司——以前的建站公司或者微信菜单开发工作室，看到H5比较火爆，也开始做这块业务，但是还没有形成规模。

5、个人开发者——接公关广告公司外包项目的H5开发者，据我们了解,一些个人开发者的月收入已经达到10万左右了，这主要还是得益于客户旺盛的需求和公关广告公司这方面人才的匮乏。

6、H5模板网站——这是比较专注做h5的公司，在20xx年还比较火，也挣了不少钱，但是到20xx年被定制化业务冲击的，许多公司已经开始逐渐实施免费服务了。

7、H5生成工具——这跟模板类公司差不多，但是活的不如模板公司，而且盈利情况也不理想，不过最大的好处就是这种类型的公司可以走融资路线，这也是一种挣钱的模式。

…… …… 余下全文

H5生态圈和H5产业已经丧失了价值?

对于那些根本不知道 HTML5 的人来说，他会觉得 H5 是个新名词，就是指朋友圈中的那些动态页面；对于那些知道 HTML5 的人来说，他觉得由于朋友圈中的动态页面使用了 HTML5 技术，所以就简单把它称为 H5 了。

事实上，后一类人犯下的错误，并没有比前一类人少。因为微信里的那些页面有很多并没有使用 HTML5 技术，只是个噱头。准确来说叫移动端的 Web App 才合适。

那么 H5 是什么？HTML5 又是什么？借着这些概念堆砌起来的 H5 生态圈、H5 产业，技术人员又是怎么看的？带着这些问题，PingWest 品玩分别找非技术方向的互联网用户以及技术从业者聊了聊，来听听他们怎么说。

互联网用户

1：你眼中的 H5 是什么？你眼中的 HTML5 又是什么？

用户 A：没啥区别。

用户 B：我眼中的 H5 就是 HTML 5。我眼中的 HTML 5 最开始是个编程语言，后来大家都这样称某些页面，现在就觉得指用了丰富多媒体的网页了。

2：你眼中微信朋友圈中哪些邀请函、动态页面是什么？

用户 A：邀请函动态页面都是 H5 吧，我分不清。

…… …… 余下全文

制作超级H5的操作指南

首先登陆成功以后，点击上方的超级H5

然后点击页面上的制作/发布

然后到了这里很关键，制作免费的H5需要获取扫描二维码获取一个免费的H5制作码

填写获取的制作码以后就可以进入到制作的页面

进入H5制作界面，各种行业模板很多也很精美，全部是免费的模板

大家可以根据自己的需要选择一个模板来制作，比如贺卡类的，邀请函类的，活动聚会的或者公司招聘的，操作很简单，替换图片和文字即可

制作好之后，点击保存/预览，用微信扫一扫，即可在手机上打开发送到自己的朋友圈或者微信好友.

…… …… 余下全文

微信招聘炫酷H5专题如何玩转？

最佳创意奖华勤通讯

【专题名】《复联2：一大波英雄招募》

【最佳创意奖】华勤通讯技术有限公司《复联2：一大波英雄招募》

图片点评：借用《复仇者联盟2》娱乐热点和影片人物

图片创意：5颗星

文案点评：幽默调侃，文字重现每位复联2角色个性，还不忘记结合职位特点，难为HR了。 “绿巨人：苦恼：这个情绪什么的最麻烦了??”

“我只是想安安静静地做个美男子，你别让我发现你的BUG，我会生气的！（伪装省份：HQ测试）”

文案创意：5颗星

最佳传播奖 惠普

【专题名】世界顶级IT公司等你加入！

传播度：从北京蔓延到上海再到华南，从战略品牌到文化底蕴，处处彰显世界级公司的霸气侧漏！

最佳参与奖五仁餐饮管理有限公司

【专题名】五仁人才邀请函

连找砂锅粥店长都这么炫酷！世界已经无法阻止敢想敢做、能玩会玩HR的存在！

以上专题模板有e成招聘和第三方模板商微表哥独家提供！

…… …… 余下全文