一个成功的H5，要击中用户要害，达到运营目的

我们都在竭尽心力想做出一个成功的H5作品。

1. 什么是H5

暂先不说“成功”如何定义，你能告诉我什么是H5吗？

我们都知道，H5是HTML5的缩写。但HTML5只是一个页面实现方式的技术名词，难道我们平日所指的就是这个技术名词吗？显然不是。

准确的说，我们所说的是 以Html5方式实现的在移动端展示的功能页面。

如果把页面比作人，那么HTML是他的骨架，CSS是他的肌肉皮肤，JavaScript是这个人的行为反应，比如苍蝇飞到脸上了，人会一巴掌拍过去（West World有追的吗）。

这样说来，与页面交互最相关的是JavaScript，而不是HTML。而且，现在各平台上出现的大部分H5作品其实都没有用到HTML5的特性，用以往的HTML技术就足以实现。

可见我们平常所说的H5，和技术名词HTML5没有太大关系，是一个被大家叫习惯了的 产品名词 而已，本质上就是在移动端展示的功能页面。但为什么我们所说的H5显得如此特殊呢？

原因其实是蕴藏其背后的运营目的。

2. 怎样的H5算是成功？

《围住神经猫》的爆红虽然是个巧合，但一直以来被当做一个典型的成功案例为大家所知。但它真的算是成功的H5作品吗？玩过之后，你记住了什么？

大部分人记住的只是这种“贱兮兮小游戏”的游戏概念和交互方式。用户就算玩过10遍也不一定知道这个H5的制作团队是谁，这个团队想要宣传什么。

《吴亦凡要入伍》也一度刷爆朋友圈，信息展示方式很有创意，乃至现在都还有很多作品沿用这种在真实页面背景上做创意的表现形式。但同样还是那个问题，玩过之后，除了吴亦凡这个名字和酷炫的交互方式，你还记住了什么？如果用户在体验了整个设计之后都不知道这个H5宣传的主体是什么，能称之为成功吗？

注：当然我没有具体数据表明以上H5上线之后对用户下载等方面数据的影响，但从我对小范围用户的调研来看，和H5本身的影响力不对等。

那到底怎样的H5作品是成功的呢？如图所示：

所指运营目的无非就是拉新、日活、品牌曝光等；用户目的比较常被利用的有占便宜、猎奇、追星、炫耀、情感共鸣等。而作为设计师要做的，就是 利用可用资源设计一种方式，委婉的诱导用户实现其用户目的，从而协助产品达成运营目的。

(>_>)用词是不是太邪恶了？

回头再来看《吴亦凡要入伍》这个案例：

如果没有特别注意，很容易误认为这个H5主要是为腾讯新闻做宣传。因为除了腾讯新闻的标题以外，H5的曝光主角“全民突击”游戏名只出现在了结束页的左上角，以及吴亦凡视频的口头描述中。除了左上角视觉表达上不够突出外，在H5传播环境下，用音频传递重要信息本身也不是很高效的方式。

套用上图逻辑来说，就是用户虽然在此H5中达到了用户目的（猎奇、追星…），但并未成功转化为达成运营目的条件。

小结

笔者当然没有一套理论总结如何能百分百做出一个成功的H5作品，毕竟一个作品的成功除了设计师本身的素质外，还受很多其他因素的影响。就像前段时间乘着洪荒少女的热浪火起来的“网易哒哒-用洪荒之力画小人”，有一些其他H5作品，比如“361°创造属于你的热爱”在更早时用了相同的表现形式却没能达到前者一样的传播效果。有些评论称之为抄袭，对此笔者只能说，希望自己也能抄袭出很多这样成功传播的作品。

H5的成功从来就是这样，充满了不确定因素，有些作品费尽心血和成本，最后换来用户的一句“恩，挺好看的”然后点击关闭，没有惊起半点波澜。而有的作品虽简单，却能准确地击中用户要害，达到运营目的。作为交互设计师，我希望自己能最大限度的保证当这种机会降临的时候，在交互设计的层面上，我已完全做好准备。

本文旨在和大家分享笔者对H5设计的一些想法，如有不妥之处还请大家包涵。

 

作者：杰克蝶

来源：微信公众号【ME网易移动设计】