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，它的轉場銜接非常緊密，還沒來得及想要去操作就變化了，然后只提供給你一個視頻接聽的按鈕，所以體驗才非常流暢。
感謝閱讀~
