2015打造火爆H5页面全攻略！

我相信每个人都已经熟悉H5一词。似乎一夜之间，主要公司营销，公共关系和其他负责促进和沟通的部门的人员将注意力转移到了H5上。那么，H5到底可以做什么？我应该怎么做？在哪里做？但是如何玩？在进行H5营销时，我应该注意什么？有什么经典案件值得参考？这些都是每个人都希望看到的。以下是在2015年创建流行的H5页面圈的指南！

2014年7月22日，H5游戏“环绕着神经猫”在微信时刻推出。到7月25日，它在三天内创造了500万用户和超过1亿访客的神话。神经猫的动画表情，衣服和背包变得流行，一些在线商店甚至开始销售包围猫的策略。

尽管H5正在慢慢接近更多人的视野，但HTML5缩写的这个词听起来很奇怪，对于大多数人来说很难理解。简而言之，H5是一项高级Web技术。我们通常会看到的邀请信和迷你游戏是H5网页。确切地说，HTML5本质上与我们在Internet上通常看到的网页没有什么不同。

1。如何播放H5页面？

在理解了H5的一些基本知识之后，我相信每个人都最关心H5可以做什么以及玩什么方法？接下来，我将列出一些与您讨论的典型示例：

1个幻灯片风格的游戏玩法

我相信许多人已经看到了以下特斯拉示例，具有精美的图片设计和简单的页面翻转效果。

这是玩H5的最早，最典型的方式。因为它很简单且实用，所以它仍然非常受欢迎。效果是简单的图片显示和页面转交互，并且整体性能与幻灯片显示非常相似。

实际上，每个人都有许多在线生产软件可用于幻灯片风格的H5，因此生产成本几乎等于零，而这种应用程序的开发可能接近10,000。

2个互动动画

在上一个趋势列表中建议使用以下可口可乐的情况，并且是使用H5图函数的典型示例。当然，这里的互动相对简单，但基本上反映了互动动画的感觉。当用户滑入页面时，整个可口可乐时间轴被“绘制”。

实际上，除了这种叙事H5动画外，我们还可以看到的大多数H5游戏都属于这一类别，例如紧张的猫，企鹅，2048年，金融bun店等，都值得体验。

那么，H5可以实现什么样的动画效果？我认为这对于每个人做H5时都应该是最麻烦的问题，因为您不知道自己可以做什么，因此您不知道从哪里开始。因此，这里有一个网站，一定会让您的眼睛发光，您的想法飙升：。在此网站中，您几乎可以看到H5可以实现的所有动画效果，这会激发您的灵感。下次您需要做H5时，您可以对开发人员说：“看，这就是我想要的效果。”

3功能H5

看看以下两个示例。第一个是百度的H5，用于地铁的价格上涨。它可以计算每天乘地铁并实时显示每个人的评论的成本；第二个是STC的社交移动趋势列表，非常简单，它是Fine H5的显示：

两个H5都有一个功能。除了针对受众群体的热门内容的传播外，它们还与“为用户重复使用”的产品非常相似，该产品是所谓的功能H5。实际上，当您看到Fengyun列表时，您可能会认为它只是一个简单的网页，但是从满足用户需求并生成重复的“使用”行为的角度来看，它实际上是一个产品 - 每周更新和常规的质量建议H5 Graphic文本，列更新通知，等等。

功能H5的独特价值是，除了传播外，它还通过用户的重复使用行为来使H5的传播成为连续的过程，这是普通H5无法使用的。首次发布时，宫廷名单被转发了60,000元，当前的每月访问约为10,000元。

由于其一定的产品特性，功能H5的最大价值是提高粉丝活动和忠诚度。我们需要根据品牌的图像定位和受众的特征来设计功能性H5。例如，那些出售手动消毒剂的人可以将其抽象成健康的生活方式，并设计一种功能性H5，可改善生活的健康状况或定期更新信息的功能性H5。

2。从功能和设计目标的角度来看，H5特殊页面主要具有以下四种类型：

总体而言，H5页面主要具有上述三种类型，但是要仔细地说，您也可以从不同角度区分某些类型。以下将通过大量经典案例来解释这一点。最好如果您可以遇到这些情况。首先，从功能和设计目标的角度来看，H5主题页面主要具有以下四种类型：

1事件操作类型

为事件推广和操作创建的H5页面是最常见的类型，形式各不相同，包括游戏，邀请，贺卡，测试问题等。与过去的简单静态广告图像传播不同，今天的H5事件操作需要更强互动，更高质量和更具局部设计，以促进用户共享和通信。

Dianping为电影“ Raging”设计的促销页面很清楚。复古的模拟视觉设计使人们发光。纹理质地的旧票存根，闪烁的霓虹灯以及幽默的动画和声音效果使您想单击每个选项。为了关注品牌关键词“ Select”，我们使用引人入胜的测试问题使用户选择自己的生活作为大片。最后一个问题导致“选择座位看电影”，然后直接访问App Ticket购买页面。即使我知道这是一篇柔和的文章，但我忍不住单击以与“短油很好，此页有点diiao”的心情分享。

2品牌促销

与强调及时性的活动操作页面不同，品牌促销的H5页面等同于品牌的微官方网站，并且更倾向于塑造品牌形象开元ky888棋牌官网版，以将品牌的精神态度传达给用户。在设计中，您需要使用符合品牌气质的视觉语言，以使用户对品牌印象深刻。

伴随着浪漫的钢琴旋律，“舒尔卡先生的情书”在男人的语气中表达了他对妻子的爱和内gui，最后导致“舒尔卡” - 宁静的圣洁产物妻子的首选新的高端健康草药品牌与H5一起玩了一张令人心动的情感卡，使用户可以记住他们心爱的妻子的品牌形象“只有一生只适合您”。

3产品介绍类型

专注于引入产品功能，利用H5的交互式技术的优势充分展示产品特性并吸引用户购买。

这种类型的H5页面在汽车品牌中更为常见，而Lexusnx是一个很好的代表性案例。精致，纹理的建模和微妙的光效果创造了一种很酷的视觉风格。用手指沿着光线轨迹切割屏幕始于序曲，使用户通过合理且优雅的互动（例如触摸，摩擦和滑动）来探索产品的七个主要特征。宏观和微观都被考虑。

4摘要报告类型

由于支付宝的十年法案引发了激烈的讨论，因此主要公司的年终摘要现在热衷于使用H5技术。出色的互动体验使最初无聊的摘要报告有趣而生动。

“ JD的十大故意”使用10个水平页面来讲述2014年JD的前十个成就。视觉设计采用简单的平面插图，并添加纸质纹理以形成复古卡片拼贴感。在不同页面之间滑动手指，以达到光滑的视差滚动效果，最后是小复活节彩蛋dong ge。一口气一口气后，我可能会了解JD在2014年所做的主要工作。

3。H5表格是功能服务，几个常见的H5主题页面表达式：

在确定主题页面的功能目标之后，下一步是关键H5页面设计阶段。如何以目标方式设计需要考虑特定的应用程序方案和通信对象，从用户的角度来看，思考用户希望看到什么样的页面是什么样的页面，并且表单应服务于功能。以下是几个常见的H5主题页面表达式：

1个简单的图片和文字

简单的图片和文本是早期最​​典型的H5主题页面形式。 “图片”的形式可以是照片，插图，gif等。通过简单的交互（例如页转弯），它可以具有幻灯片般的传播效果。哪些测试是高质量的内容本身和讲故事的能力。

Didi出租车的情况是典型的简单图形H5特殊页面，它使用一些照片和故事将整个页面组合在一起。视觉效果简单且功能强大，黑白照片的整个屏幕都用Didi的品牌橙色装饰。每次切换图片时，文本都会逐渐出现，并且没有其他互动形式，从而使观众通过陌生人之间的真诚联系，将注意力集中在内容上，并塑造品牌的积极能量形象。

也有不愿意变得普通的奇妙案例。在整个国家在除夕夜疯狂地抢夺红色信封的那一刻时，微信发布了一个特别的页面，例如“从现在开始看中国人的名望和财富”。一见钟情，我很震惊，所以善良的rmb〜每一页都是RMB风景的部分扩大图片。创作者添加了聪明的创意元素和微动力学来仔细描绘它们，将观众带入了RMB的微观世界。每种钞票模式都与发人深省的文案相结合，在宣传微信红信封时，人们呼吁人们重新审视恩惠，名望和财富的奥秘。

2个礼物/贺卡/邀请

每个人都喜欢接收礼物的感觉。掌握了这种心理学，该品牌已经推出了各种H5形式的礼品，贺卡和邀请函，以通过增强用户优惠性来巧妙地实现品牌推广的目的。由于它是礼物，因此创造力和生产是重要的加点。

AKQA创意营销公司在圣诞节期间赠送了一份慷慨的礼物 - 梦想的水晶球。通过移动手机，镜头不断摇动并从水晶球外部靠近，逐渐进入了水晶球的微观世界。通过手机环顾四周，您可以在360度的水晶球中欣赏全景，雪花将落在整个天空中。写下您的祝福并与您的朋友分享，我相信您一定会互相惊讶。此H5页面使用重力感测，3D和其他技术，并且文本和BGM的使用也非常特别，为用户带来了完美的互动体验，值得一提。

在农历新年期间，Evernote还巧妙地推出了一张语音贺卡，引导用户通过官方帐户向他们发送语音消息，然后将这种祝福的声音与中国风格的动画相结合，以创建一张独特的语音贺卡，以发送到朋友们。整体颜色主要基于Evernote品牌的颜色，它还包含一个优雅的新年气氛，非常令人愉悦。

3问答/评分/测试

H5页面中的H5页面也很常见。利用用户对知识和探索的渴望选择并查看最终结果。必须有明确的线索，您获得的最终结果页面应该是合理的开yunapp体育官网入口下载手机版，不要突然。如果可以补充出杰出的愿景和文案来削弱无聊的回答问题的感觉，那就更好了。

Dianping继续宣传江恩的电影《一步之遥》，以允许用户对江恩的代表作品进行评分。视觉设计仍然很出色，令人惊叹的创意和动画设计令人惊叹（必须扫描并体验它！）。它延续了怀旧的大字幕海报风格，并且诸如字体，文案，装饰元素之类的细节也非常小心。在相关的H5页面中实现这一目标和答案格式是一个很大的问题。

4场比赛

从简单的迷你游戏（例如“周围的神经猫”和“查看您有多少颜色”）到品牌植入迷你游戏，例如durex“一夜n jiro”（即，模仿版本，“不要踩白色块”） ，H5游戏是因为它易于操作和高度竞争，并且曾经在朋友圈子中很受欢迎，但是缺乏创造力和同质性导致用户对无脑游戏越来越厌倦。为了成功地传播游戏，品牌需要在游戏玩法和设计中付出更多的精力。

在圣诞节期间，启动了一场名为“圣诞老人救援计划”的H5迷你游戏。操作非常简单。只需交替滑动手指，然后将角色的脖子向上拉，以无限的长度。游戏将记录您拉的最大距离，与更长的朋友进行比较。该界面是新鲜又可爱的，与同一标志性风格保持一致。游戏角色也是同一品牌角色，通过幽默和欺骗游戏将同一独特且有趣的产品文化传达给用户。

4。设计H5页的四个关键点

H5页设计的出色质量将直接影响其沟通效果，甚至影响用户对品牌形象的看法。以下是以下设计点：

1个细节和团结

为了获得高质量的用户体验，必须考虑细节和整体需求的统一性。在复古客观化的视觉风格中，字体不应太现代。在幽默和荒谬的语气中，文案不应该太严重。在情感内容卡中，动画效果不应太花哨。

Dianping Jiang Wen的电影促销系列“九步”的H5特别页面牢牢抓住了这一点。从QR码入口到性感着陆页，再到最后的分享技巧的设计，包括文案写作和背景音效效果，所有这些都与整体戏剧和虐待一致，为用户提供了完整而统一的互动体验。

请特别注意“共享技巧”的详细设计。与简单的箭头和冷“单击此处共享”相比，仔细的详细设计带来的高质量和偏爱是显而易见的。关于分享技巧的设计，我将发布一些令人兴奋的案例：

2遵循热门话题并利用主题效应

如果您希望您的H5特殊页面在一夜之间流行，则可以抓住热点并尽快上网，借此机会推广您的品牌也是捷径。

Photo Pian Tiantian抓住了Wu Zetian流行的广播的机会，并推出了Mei Niang的化妆，该化妆在国内外很受欢迎。同时开元ky888棋牌官方版，还尽快推出了“ Cos Wu Mei Niang”的H5交互式页面。它易于操作且易于使用。您可以立即通过单击上传照片来完成MEI Niang。婆婆，PK与成千上万的美丽女士，娱乐公众并推广产品。

Netease Entertainment在Wu Meiniang的隆隆风暴的最前沿发布了一个名为“ Wu Meiniang被乳房切割的真相”的H5特别页面。它放下了道德上的完整性，并用粗糙而富有想象力的素描向观众“恢复”了真理。它疯狂地转发了一段时间，而Netease Entertainment也随着流程而促进了自己的发展。

3讲一个好故事并与情感产生共鸣

无论H5的形式多么多样化，宝贵的内容总是首先出现的。在有限的空间中，学习讲述故事将引起用户之间的情感共鸣，并将大大促进内容的传播。

Levi的新年促销活动特别页面使用了一个简单但活泼的新年，当时他还是个孩子，而他长大后的富裕而无聊的新年，并使用手绘风格营造出友好的怀旧气氛。最后，这导致了品牌促销的口号：“这个新的一年，满足了压力和约束，充满新鲜的眼光，并共同生活。”毫无疑问，这个故事无疑是分享的推动力。

4.合理地使用技术来创造平稳的互动体验

随着技术的开发，当今的HTML5具有许多出色的功能，使我们能够轻松实现诸如绘画，擦除，摇动，重力感应，擦除，3D视图之类的交互式效果。与引起不同类型的动画效果的争夺相比，这会导致页面的混乱和腹胀，我们主张对技术的理性使用，并专注于为用户提供平稳的交互式体验。

一个典型的情况是TAOBAO在Double 12上发布的销售前促销H5特殊页面。在浏览过程中，我只使用了刷新手势，并且页面的效果就像平滑的动态GIF。设计师巧妙地使用图形设计和组合来在滑动过程中创建丰富的视差滚动效果。掩盖，单个图形元素的旋转和整个页面的动态动量非常默认匹配。

5。现在H5市场的陷阱是什么？

但是，我们可以清楚地看到，尽管H5市场逐渐蓬勃发展，但它越来越混乱和不规则。无论是第三方开发公司还是广告商，他们都会遇到各种问题，或者在面对H5营销时都有各种误解。现在让我们看看这里有什么陷阱？

1幻想可以在一夜之间通过H5闻名

凭借高度的期望和很少的投资，许多营销人员，尤其是老板，希望在没有任何促销投资的情况下在H5的一夜之间闻名，但是在微信中，这种情况不再可能。

H5页的促销方法无非是软文章，微信时光共享和微信官方帐户促销。但是，目前的H5营销在表达形式和内容创造力方面仍然面临着巨大的挑战。同时，微信瞬间疲劳的用户随着气泡信息的增加而产生了一定程度的阻力。微信中的涌现导致开放率和阅读量继续下降。在一夜之间使H5流行并不是不可能的，但是确实越来越小。 H5产出的比例也将足以使营销人员承受。

2。营销促进的态度只能持续很长时间

在微信中传播时，您必须遵守游戏规则。您不应该只是想从微信中拿走事情，而应该改变您的思想。想想我们对微信做的贡献？我们给用户带来了什么？您为微信做出的贡献越多，您的回报就会越大。如果有一个可以在微信时刻成功的H5，那主要是因为创造力和生产者必须始终从思考微信用户的角度来制定H5策略。我们必须进行用户喜欢的“广告”，以便用户可以共享和转发，而不是依靠强制性要求和归纳，最终将被用户抱怨甚至被阻止。

3H5本身有技术问题

作为一种陌生的技术，H5仅在微信的社会阶段才闪耀。目前，H5仍然存在许多问题，并且仍然有许多技术缺陷需要改进，例如白屏的页面切换，下拉菜单不流畅，多次音频播放不流畅，移动设备的接口API不足等，无法进行二维扫描。代码，不能用语音输入，一键不能与朋友共享。对于营销人员来说，这些是隐藏在脚下的深坑，如果不小心，它们就会掉进其中。

4易于窃和缺乏知识产权保护

如果您有运气并努力工作以做出良好的H5应用程序，例如紧张的猫，那么比其他窃者更快乐的人。他们可以轻松地复制您的H5并将其替换为挂接域名，然后将广告联系信息更改为自己。许多版本都来自神经猫，2048年等，大多数人可能没有访问原始版本（因为窃和模仿者太多）。较轻的窃更改了域名，更有力的是采取您的创造力，然后简化它。比您及时使您的泪水哭泣更好。

5作品的同质性很严重

许多人对H5的理解在用户层面，包括邀请，迷你游戏，品牌显示，彩票抽奖等，但是大多数作品的同质性都是非常严肃的，无论是形式还是内容创造力。这逐渐增加了营销人员和生产人员的要求，挑战越来越大。制作可以吸引注意力的作品并不容易。

6。依靠他人非常不确定

微信为H5突然如此受欢迎的原因做出了最大的贡献，但是微信正在收紧H5的最佳进入 - 分享瞬间的分享股息逐渐消失，并且将来存在不确定性。微信最近引入了分享时刻的政策限制，以引起关注和分享。第一罪犯将面临30天禁止帐户的罚款，阻止链接，删除粉丝的增加和交通所有者的关闭。次要违规将直接永久禁止。此外，如果转发量超过一定数量，微信将阻止时刻，这意味着将来，将不再有一笔不花钱的H5来获得超过数千万微信的流量。

目前，重要的是要注意，共享图片和自定义接口已更改，请小心修改它们；不涉及恶意关键字，例如分享冠军礼物和冠军中的100％奖金；共享页面需要在ICP注册的域名上部署。

7个模型很难适应成千上万的型号

刚刚开始制作H5的公司面临的第一个问题是模型的改编是。由于手机有许多模型，因此系统和屏幕不同，因此需要一些时间来开发显示屏和一些功能性接口。如果您只是购买了它，希望制作流行的H5应用程序。然后，初始模型的改编将导致您受苦，但是您会逐渐知道它将被解决。与您面前的其他陷阱相比，这是一个大错误。

最后写

有人说HTML5匹配本机应用程序的应用程序可以吗？答案是HTML5不仅可以匹配本机应用程序，而且其许多自然功能超过了本机应用程序。随着手机硬件的升级，HTML5技术的开发和微信平台的开放，H5的跨平台，低成本，快速迭代和其他优势得到了进一步的突出显示，即企业，品牌，设计师和开发人员在移动互联网潮中的人。对于那些感兴趣的人，这将是最好的时代。将来肯定会出现更多出色的H5页面，让我们拭目以待。

这是最糟糕的时代，也是最好的时代！