朋友圈H5进化简史

PC时代，设计师们就基于 H5 开发了众多交互性能强大的酷站，进入移动时代，交互设计师们更是如鱼得水，结合移动端的重力感应、竖屏显示、手势交互等全新玩法，开创了全新的交互时代。

fff.cmiscm.com 网站收录了 15 个基于 H5 创建的极具创意的网站

所以说， 朋友圈 H5 进化史可以看做是新媒体交互设计进化史。

2014 年开始，朋友圈开始出现一些简单图文形式的 H5，早期图文型 H5 只需要用户通过简单的翻页、点击就可以参与其中，展现效果类似于 PPT。应用场景主要包括移动网站、邀请函、年终总结、产品推广等。

制作网站是 H5 在 PC 端最广泛的用法，所以，当 H5 应用到移动端时，设计师们首先会想到的就是制作移动网站。

比如，欧香小镇、燕楠国际等品牌就基于 H5 制作了移动网站。

邀请函也是图文型H5的主要应用场景之一，比如《奔驰 C 级上市邀请函》和《微信公开课 PRO 版邀请函》都是当时的典型代表。

2014 年，一些品牌开始尝试用 H5 推广产品，比如锤子手机、特斯拉等，仅仅采用精美图片加上简单的翻页动效，最终的呈现效果却超越了当时人们对微信营销的想象。

2014 年 4 月，著名奢侈品牌Burberry 推出的 H5 《从伦敦到上海的旅程》是当时交互体验的集大成者。第一步，“摇一摇”，开始体验；第二步，点击屏幕进入油画般的伦敦清晨；第三步，摩擦屏幕使晨雾散去；第四步，点击“河面”，河水泛起涟漪；最后点击屏幕上的白点，达到终点站上海。

2014 年 5 月，可口可乐推出的《分享快乐 128 年》，将图文型 H5 的交互又向前推进了一步。这支 H5 页面上的每个元素都可以动。而且相较于原本的单页翻动，更注重跨页连接，一根贯穿画面始终的“红线”，让画面在视觉上更加流畅和统一。

此后，长图型 H5 逐渐多了起来，正式引爆可以追溯到 2017 年 5 月，百雀羚刷屏长图《一九三一》开辟了长图型图文H5的新形式，这种形式非常适合移动端阅读，迅速为大众接受。

2018 年 8 月，腾讯云推出的《山城云居图》采用了横屏长图的形式。

2018 年 9 月，网易的公益H5《她挣扎48小时后死去，无人知晓》在朋友圈刷屏，这支 H5 在长图的基础上，融合滑动动画等表现形式，为图文型 H5 增加了新的创意，效果令人震撼：

活动型 H5 也是较早出现的 H5 类型，主要包括红包、抽奖、投票、砍价、拼团等，这类 H5 模式和技术都非常简单，但因为由直接利益驱动，传播力较强。

口令红包、语音红包、签到抽奖、砍价拼团（来源：人人秀官网）

常规的活动型 H5 往往缺乏情节设计，非常单调，为了更好地促使用户点击和分享，一些活动类 H5 开始探寻新的玩法。

比如，2016 年 1 号店推出的 H5《姐妹花的烦恼》，打破了常规活动类 H5 的俗套，在推出促销活动前添加了故事情节，以吐槽物价高为主题，在表现形式上机智地拿人民币开玩笑，角色直接取自于一元纸币上的少数民族形象，最后一页才出现 1 号店的促销活动。