伴随着一只神经猫和几次品牌内容的朋友圈疯转，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万人的报名，现场的过道、走廊上都挤满了人，未来应用团队也是做了这个之后才确定的团队名字。

3、滑屏类

支付宝十年账单(支付宝)

4、内容创意：选择题

优酷未来贺卡(优酷)

5、剧情化：动画剧情化

广告人插上geek的翅膀(百度)

6、剧情化：开场剧情化

极客世界漫游指南(极客公园)

未来应用已经不满足于在某个特效或场景的展示，而是将技术创意提高到一个全新的高度，呈现给用户一个完整的剧情式的体验，或许代表着未来的精品H5方向，无论是品牌发布、招聘、报告披露还是促销，用户看到的越来越多，口味也越来越刁，能够打动吸引用户并且形成自发传播的Hh5就需要在整个体验环节上下功夫，所以剧情类H5或许可以代表未来的发展方向。

…… …… 余下全文

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

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

功能与目标

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

1.活动运营型

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

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

2.品牌宣传型

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

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

…… …… 余下全文

h5页面和普通页面的区别_普通页面和h5页面的区别

大家知道h5页面和普通页面的区别吗？不知道的话就随乔布简历小编来看看普通页面和h5页面的区别吧！

关键词：h5页面和普通页面的区别，普通页面和h5页面的区别

在说h5页面之前，我们先来粗略了解一下h5是什么吧！h5，也就是html5，代表的是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（html）的第五次重大修改。 经过几乎8年的艰辛努力万维网联盟在20xx年10月底宣布了html5标准规范已完成，并已公开发布。

在这之前的几年时间里，irefox、Google Chrome、Opera、Safari 4+、Internet Explorer 9+等都逐渐使用了html5的部分技术，都已支持html5。html5是有望成为梦想中的“开放Web平台”(Open Web Platform)的基石，如能实现可以进一步推动更深入的跨平台Web应用的。

h5页面和普通页面的区别，以微信内置浏览器和手机上的浏览器应用（safari、chrome）为例

1、最突出的差别，前端要注意分享功能，上线之前，每个页面基本都要review一边分享功能是不是完善的。

2、html5接口上的不同。safari和chrome的话提供的html5接口会更多，而微信内置浏览器的接口比较少，印象最深的是usermedia。前几天在项目里还发现，微信里固定定位的支持还是不够好，safari在这点上现在好很多了。所以如果想让 web 应用在微信里体验更好一些的话，iscroll类的模块是免不了的。

3、微信浏览器的兼容性问题，在android上比较明显。印象比较深的是三星的机型上不支持background-size-cover，必须使用-webkit-background-size才行。

4、开发、调试的问题。android chrome比较好，有远程调试功能。微信里面基本木有办法。遇到棘手的问题，一般会使用modernizr来做特性检测，或者使用远程log工具调试。

…… …… 余下全文

h5页面是什么意思_h5页面的优势

h5页面是什么意思呢？h5页面的优势有哪些呢？对此感兴趣的童鞋们就随乔布简历小编一起来看一下呗！

关键词：h5页面是什么意思，h5页面的优势

所谓h5页面，即代表的是html5页面，如今大部分浏览器已经支持html5页面。html5有强化Web 网页的表现性能和追加本地数据库这些Web 应用功能的优势。广义论及的html5实际指的是包含html、CSS和JavaScript在内的一套技术组合。

html5希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。从技术上说，这个页面只是使用了html语言制作的普通网页，但是又和普通的网页有区别，因为一个小小的h5页面可以带来百万级别的访问量，比较常见的还有那些h5小游戏让很多自媒体和中小创业团队一夜成名。

h5页面的优势

1、取消了一些过时的html4标记。其中包括纯粹显示效果的标记，如[font]和[center]，它们已经被CSS取代。将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。

2、将内容和展示分离。让标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。

3、一些全新的表单输入对象。包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。h5还引入了微数据总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

4、全新的，更合理的Tag。多媒体对象将不再全部绑定在object或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。

…… …… 余下全文

如何制作出有逼格的H5页面？

目录

一、文字进阶... 1

①好看有特效的文字... 1

②文字配色及取色... 1

③字体搭配及含义... 2

④字体下载... 2

⑤字体大小及行距... 2

二、图片... 2

①图片来源... 2

②背景颜色及含义... 3

三、排版... 3

① 简单集中... 3

②文字排版形式及应用... 3

四、新手需知：... 3

①应用三级动画... 3

②利用互动插件... 4

③推荐浏览器... 4

④手机端加载速度慢、卡顿... 4

一、文字进阶

①好看有特效的文字

百度中打开花体字在线生成器

依次选定字体、大小、字色、背景（透明背景）等参数，点击生成。

下载预览图，并且保存png格式到桌面，即可导入H5之中。

②文字配色及取色

黑底白字，黑底不放蓝色、绿色丨黑底金字丨

红底白字丨黄底黑字丨蓝底白字丨蓝底黄字丨

白底绿字

快速取色方法：打开QQ→截图快捷键Ctrl+Alt+A→将鼠标箭头放在取色位置→出现颜色相对应的RGB（255.255.255）此为白色的RGB值。

③字体搭配及含义

J  扁平风：张海山锐体 

J  文艺风：静蕾钢笔、方正呐喊

J  商务风：造字工房力黑、逼格青春体简、张海山锐线体简

J  中国风:叶根友行书、汉仪星字体

J  科技风：方正幼线、方正兰亭

J  可爱风：造字工房丁丁体、华康娃娃体

J  杂志风：造字工房俊雅、方正大标宋

J  男性风：方正超粗黑、蒙纳简超刚黑

J  女性风：造字工房悦黑常规体、方正细圆

④字体下载

百度搜索→字体下载→下载位置→系统盘→WINDOWS→Fonts→打开ps/officie等软件就OK

⑤字体大小及行距

建议最小不超过18，其他字号双数，同种类别下用一样字号。

…… …… 余下全文

h5页面和app的区别_h5和app的区别

如今，app和h5页面在我们的生活是很常见的，那么，h5页面和app的区别是什么呢？本期乔布简历小编就和小伙伴们聊聊h5和app的区别。

关键词：h5页面和app的区别，h5和app的区别

h5页面和app的不同

1、app和h5页面相比，拥有较少的页面跳转。网络环境一致的情况下，h5页面渲染是需要调取服务器的，但是app的渲染在本地，所以h5页面跳转更费力，不稳定感会强一些。所以h5页面想要减少跳转的话，一般都会使用交互技巧来隐藏文字。

2、h5页面页面展示空间比app小，给使用者带来的记忆负担大于app。人的大脑能短期记忆，但是这样的记忆是不稳定的。如果用户在滚动翻阅屏幕的过程中，需要临时记忆的信息越多，他们的表现是会越差的。现在，只有很少的人会有耐心慢慢看完长长的内容，h5页面相对于app而言，多了浏览器导航所占用的屏幕空间。

3、h5与app相比的优势在于h5页面可以随意的分享，而且迭代是很方便的，不同的系统只要适配一次即可。但是app的每次迭代需要在不同系统基础上迭代。

4、h5页面与app导航设计不同。h5页面使原有底部导航消失，有效的导航遇到挑战。在设计要考虑导航设计，顶部底部或左右侧，还要考虑如何快速跳转回重要页面，导航快捷键：如顶部固定位置、悬浮圆圈或非首屏时页面右侧悬浮。而app的导航更直接方便。

总之，h5页面其实基本能完成app的所有效果，但是它局限于浏览器这种打开方式，而app可以直接打开使用，方便一些。

h5页面和app的区别_h5和app的区别

/knowledge/articles/568e25c50cf2bae6d1e0116a

…… …… 余下全文

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

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

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

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

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

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

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

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

8、游戏开发公司——目前许多H5游戏开发公司并不挣钱，很多公司只能在游戏还没火之前，接一些H5的外包业务。但这毕竟不是长久之计，人才流动比较大。我们团队就接收了不少开发者。

9、H5平台公司——这种类型公司走的路线跟模板类差不多，就是平台化概念，实际上大部分都在亏损，不过幸亏融资情况都很不错，所以这种类型的公司在融资之前也会做些外包的业务。

10、精品定制化——未来应用一开始的定位就是这个方向，我们希望能成为这个行业的定价方向标，大家以后定价都能根据我们来参照，比我们做的好的定价更高，比我们做的差的定价更低。未来应用甚至考虑做一个价格公示，让这个行业有个透明公正的价格体系。

…… …… 余下全文