会编织故事是H5设计者的必备技能
H5的形式多种多样，目的无非是推广某一个东西--产品、活动抑或是品牌。怎么去推广呢？我们一般喜欢给用户讲一个故事。下面的截图是几个比较火热的H5案例，我们可以看到“首草”讲了一个你与妻子的故事，我们共同经历了岁月变迁，妻子对你的付出如蜡炬生光，半生为你，你该以何为报？“淘宝”年度账单，把无聊的数据像情话一样的轻轻的告诉你，回顾我们的初见，勾起这段剁手情缘的点点滴滴。当然淘宝打的不是情感牌，突出的是年轻活力逗比的感觉。对，H5就像是一本薄薄的小书，会编织故事是H5设计者的必备技能。
所以该怎么去讲H5的微故事呢？首先让我们回顾一下去年火得一塌糊涂的“吴亦凡全民突击H5”
进来后我们最先看到的是一个模拟腾讯新闻的页面，这是与外面链接文案“吴亦凡圆寸入伍做准备？！”相呼应；接着是“澄清一下”的两次转场，从新闻页跳出来再到电话说；然后就是视频通话页面，最后是引导观众下载游戏的入口。
我们知道故事的五要素是：人物／场景／台词（文案）／动作／事件，那么我们从这五要素来看看这个H5的故事是怎么玩儿的：
我们可以看到这个案例中每个要素都是经过设计的，都貌似很有技巧哦～所以接下来我将给大家讲述的就是故事五要素的各个要素到底该怎么样去玩儿！
能引起观众兴趣的人物分为下面3类：
1.热点人物
当下的热点人物能引起观众兴趣这是显而易见的，大众点评在《一步之遥》上映期间就以姜文作为中心点设计了一个营销H5，题为“评什么爱姜文”，在其中罗列了数部姜文主演的著名作品，让观众为其评分，最后以“想更了解姜文吗，购票看《一步之遥》”引出购买入口。
2.共鸣人物
在共鸣人物中分为两类：一类是相似而平凡的人物，另一类则是特征夸张的人物。中国体彩的大乐透广告（点击下图观看视频）中主人翁就是一个相似而平凡的人物，可能工作并没那么顺利，一切都普普通通，这样的人物设定暗示着观众可以成为片中的主人翁，能遇到片中那样美好的际遇，很容易将自己带入到主人翁的故事中，产生强烈共鸣。
而另一类特征夸张的人物则是像《搏击俱乐部》中布拉德-皮特饰演的泰勒，我们在影评中看到很多网友表示希望成为泰勒那样的人，其实泰勒身上拥有的特质是很多平凡的人也具有的能量，他的勇气，幽默，执着，一技之长并没有那么独特，而是影片将这些特质放大给了观众，激起了观众内心的小宇宙，这也是一种常见的共鸣人物的设定。
3.自己
可能大家会很奇怪为什么故事中会有“自己”，这是我们在影视作品中难以体验到的，但是可以在H5中得以实现。通过用户的一些设置操作，H5可以将用户自己设为主角。比如在之前看到的“我的深圳故事”H5中输入来到这个城市的时间等信息，最后会生成一段自己的深圳故事。这个H5已经失效了，所以没有能再去体验。下图是“私人颜值印钞机H5”，在其中添加自己的头像即可生成一张印着自己头像的钞票图片，也是一次奇葩好玩的体验。
能引起观众兴趣的场景也可以分为下面3类：
1.难以体验到的场景
作为一个普通的上班族宝宝，半根腿毛都进不了娱乐圈，望穿秋水也看不到外太空，那么如果能在一个4.7寸的屏幕上体验到这样的场景是不是能让你眼前一亮呢？！下面是“郑恺请你一起寻找Angelababy”带你来到了Angelababy的化妆间，我的天呐，明星的化妆间诶，好想看的有木有。
2.容易置身其中的场景
人物中有能产生共鸣的人物，那么场景中也有能产生共鸣的场景。什么场景能做到？有自己有相似点的场景嘛！比如陌陌的广告－《一碗热干面》，主人翁是一个在上海打拼的武汉人，一直孤孤零零，终于在陌陌上找到了一群家乡人去带他吃上一碗正宗的热干面，作为同样在外务工的我们也希望能在异乡找到一个“热干面店”，这个与故乡连接的地方。
3.体验感极佳的场景
黑科技年年有，能用在H5里的也特别多，航拍全景什么的都不是事，能用手机测心跳，还能在手机上吹肺活量。虽然会有加载缓慢的弊端，但是好的东西也值得期待不是吗。我目前觉得体检超棒的当属Google出品的Google Stories，全景故事体验的感觉真的十万个赞！强烈安利！
故事元素原本应该是“台词”，但是在H5里很少有人物对话，更多的是文案。关于文案的套路，我之前也有总结一篇个人愚见，所幸还受到很多同事的喜爱，除其中的内容再补充一个“脑洞台词法”。习惯于正向思维的人类已经不满足于正常逻辑的笑点 逆其道而行反倒能产生微妙的新鲜感，这招的要点就是：从非重点入手添加细节修饰。我们来看几个例子：
1/“我也怕呀 可全身可以自卫的武器就只有一支笔” 变成“我也怕呀 可全身可以自卫的武器就只有一支红笔 笔帽还TM是蓝色的”
2/“大哥终于等到你了 我看大妈跳广场舞都看了半个小时了”变成“大哥终于等到你了 我看大妈跳广场舞都看到第17小节了”
3/“哥 要不你先还我两百吧 这几天生活费都有点不够吃饭了”变成“哥 要不你先还我两百吧 这几天沙县的老板都开始问我最近为什么不加卤蛋了”
这样的变化会让文字更有色彩和幽默感。
事件事件是故事的核心，H5微故事要像玩得转就得在事件上抓得住观众想要的“点”。总结大概是这样四点：
1.感情触点
我们先看看台湾这个社会实验的视频，了解一下何为感情触点：
人
对什么东西会有强烈的感情触动呢？
①自己应该做而没有做到的，就比如我们对父母应有的关心，这个春节广告最常用套路；
② 自己想要而得不到的，就比如我们想留在父母身边照顾她们而不能，我们想追求自己的梦想而不能；
③ 曾经拥有，现在已经鲜见的，就比如童年里我们的跳格子，翻花绳，那些我们常常怀念的东西。
2.好奇点
人都是好奇的，来看看我们会对什么抱有好奇呢？
① 对名人好奇，比如全名突击中的吴亦凡，Angelababy的化妆间；
②对自己好奇，比如好奇自己的剁手账单，自己的心跳；
③ 对新鲜的事物好奇，比如新款的豪车，黑科技。
3.娱乐点
何为娱乐点呢？有的H5就像朋友一样带着你去玩，体验一份欢乐。H5火热之鼻祖的神经猫就是这样一款充满娱乐点的H5。下图“女王再打我一次”是雕牌洗衣液推出的一款H5小游戏，看看谁能眼疾手快的“调教”到冒出来的男人。
4.
热点
热点永远是营销的宠儿，下图则是京东超市顺应《大圣归来》上映之势推出的H5。
故事的五元素我们挨个总结了一些方法，接下来我们得将这些点串成线
丰富的表现方式我们最常见的H5一般是图文结合，而它其实有非常丰富的表现方式，能承载很多种媒体形式，比如声音，三维全景，视频等等。各种媒体形式都有其特性，如何合理自然的运用很重要。在下面这个守护宝贝计划的H5中，进入后能听到一段来自失去孩子的妈妈说的话：“孩子，你快回来吧”这样短短的一段话比任何文字图片来得更有力度，比起视频这样较重的媒体形式更简单，更有一种留白的想象空间。
以前我们看到H5划屏就够了，后来变得越来越丰富，可以摇一摇，重力感应甚至双屏互动等等。不同的操作方式会带来不同的体验，合理自然的操作方式能让用户体验到超越屏幕触感的感觉。下面雷克萨斯推出的H5就利用不同的操作方式让用户在手机上比较真实的体验到这辆车的各种感觉。用抹动的手势体验到方向盘皮革的质感，滑动的手势体验到触碰到车门把手时灯带唤亮的惊喜。
最终我们需要将故事元素串成一条故事线，其中有三个要点：
情绪波动曲线：故事如果平平淡淡，观众会觉得无趣，有趣的故事需要有高低起伏
视觉焦点：在H5中需要规划视觉的焦点，让观众看到你希望她们看到的东西，比如吴亦凡H5中的开头你的视觉焦点会锁定在腾讯新闻页面下部分的视频，你一直在按设计者规划的视觉路径在走
操作路径：H5操作形式非常丰富，所以需要很好的操作引导才能让观众按着你铺好的故事路径去进行交互，同样还是吴亦凡H5，它的转场衔接非常紧密，还没来得及想要去操作就变化了，然后只提供给你一个视频接听的按钮，所以体验才非常流畅。
感谢阅读~