3.1 刷屏級的超級H5創意設計

如今，H5中應用的技術越來越多，從而增加了H5的可玩性，這也是吸引用戶參與、分享的動力所在。火熱的H5刷爆了朋友圈，創意無限、玩法新穎、層出不窮。輕量化的H5更容易被大眾所接受，吸引用戶的眼球，從而形成病毒式傳播。

因此，H5營銷人員需要掌控時下流行的核心技術，為H5作品注入更多前沿玩法和創意設計，先聲奪人，制作出刷屏級的超級H5作品，搶占市場營銷高地。

3.1.1 展示型H5場景

靜態展示級的H5頁面主要用來展示各種信息，其效果與PPT類似，這種H5的制作成本低，加載速度快，可以用來進行產品推廣或品牌宣傳。

如圖3-1所示，就是一家餐廳七夕活動的靜態展示級H5頁面，以喜慶的紅色作為主色調，展示各種優惠促銷活動信息，可以增強火熱、浪漫的活動氣氛。

對于技術人員來說，制作這種類型的H5頁面比較簡單，通常可以先制作好一個個靜態的頁面，然后再考慮整個畫面的動態切換展示效果即可。也就是說，每一個頁面雖然是靜態的，但各種元素的顯示效果，以及頁面與頁面之間的切換，還是可以添加一些動態效果，讓H5看上去簡約而不簡單。

3.1.2 交互型H5場景

交互型的H5場景應用主要是通過各種視頻、動畫元素來加強畫面的交互性，具有傳播速度快的特點，而且可以通過分享和邀請好友來進行互動，形成病毒式的傳播，使更多的用戶了解到活動詳情并參與其中。例如，Mugeda就是一個H5交互融媒體內容制作與管理平臺，其主要功能和特色如圖3-2所示。

例如，《情人節模板——愛在四季》是Mugeda平臺上的一個動畫交互型H5頁面，如圖3-3所示，它運用動畫對白的形式，將圖文很好地結合在一起，圖片簡單但很有故事情節，仿佛是看漫畫，同時充滿情感的文案內容也很容易引起大家的共鳴。

又如，《紀念碑谷2安卓上線》是由紀念碑谷官方推出的一個運用簡單交互視頻的H5頁面，如圖3-4所示。打開H5后，用戶可以通過點擊和滑動等操作來探索劇情內容，交互體驗做得很不錯。

3.1.3 游戲型H5場景

前面兩種H5雖然都有一些簡單的互動性，但其展示作用還是占了大部分。這里要介紹的游戲型H5場景則具有很強的互動性，支持用戶的互動參與。H5游戲可以說是五花八門，如連連看、大轉盤、抓蝴蝶以及捉迷藏等，通過將品牌或產品植入H5游戲中，讓用戶自發地在社交網絡中進行轉發傳播，從而擴大品牌或產品的知名度。H5游戲的主要特點如圖3-5所示。

例如，《豌豆莢：像素世界通行證》是由豌豆莢推出的一個H5小游戲，如圖3-6所示。打開后，可以點擊中間的相機按鈕上傳照片。

選擇照片并確認取景范圍后，點擊“確定”按鈕，還可以在照片上添加各種有趣的小道具，設計屬于你專屬的“像素世界通行證”，如圖3-7所示。從這里開始就體現出H5游戲的互動性了，通過使用不同的道具，以及不同的擺放位置，可制作出不同的照片效果。

制作完成后，點擊“馬上生成”按鈕，即可生成一張“像素世界通行證”。非常有趣吧，用戶也可以點擊“告訴好友”按鈕，根據操作提示分享給其他好友玩，如圖3-8所示。游戲H5講究的要點就是“玩”，一定要和用戶多做互動，讓他們來參與、來規劃，調動用戶的積極性。

通過游戲化的H5活動營銷，將品牌元素融入H5游戲，不但可以打造極致的用戶體驗，而且可以帶來更高的轉化率。游戲化營銷是時下的潮流趨勢，通過H5游戲與微信強強聯合，可以產生良好的“化學反應”，其作用如圖3-9所示。因此，企業可以選擇一個好的H5游戲制作平臺，來進行游戲化營銷，不但省時省力省錢，而且更加有趣有效。

1. 高參與

游戲化營銷主要通過休閑有趣的方式，讓品牌與用戶實現互動，更加容易被用戶接受。例如，《我健康 更出彩》是由老百姓大藥房推出的一個H5產品宣傳，采用游戲形式，具有很好的互動性，在游戲過程中，隨著顏色的變化會出現相關的藥品信息，如圖3-10所示。

2. 易連接

利用H5實現互聯網游戲化營銷，比較鮮明的特點就是容易連接，用戶通過掃描二維碼，或者點擊鏈接的形式，即可參與游戲。

同時，游戲化營銷可以非常方便地與抽獎、優惠券、表單、排行榜以及第三方發獎等多種H5營銷方式相結合，帶來更強的用戶黏性。

3. 強分享

游戲營銷具有一定的挑戰性，同時會顯示用戶分數和微信排行榜，可以滿足用戶的炫耀心理。另外，大部分H5游戲都帶有獎勵機制，可以激發用戶主動去傳播。

制作完H5游戲后，通常會自動生成二維碼和活動鏈接，用戶可以將其添加到微信公眾號菜單、公眾號文章、文章閱讀原文鏈接等渠道，也可以通過微信群、微信朋友圈、QQ、微博等進行傳播推廣。

4. 低成本

很多平臺都提供了高度靈活的H5游戲模板，即使你沒有任何技術開發經驗，也可以快速套用模板制作一個游戲營銷活動，如圖3-11所示，對于開發時間和制作成本來說，都能有效地降低。另外，品牌與促銷信息可以軟性植入H5游戲中，用戶的接受程度更高，有利于銷售轉化。

5. 易轉化

相關數據統計顯示，圖片和公眾號營銷的轉化率只有1%，而H5游戲化營銷的轉化率則高達17%，遠遠高于傳統的微信營銷方式。由于H5游戲化營銷易于轉化，企業一旦制作好了一款H5游戲，其邊際成本也會越來越低。邊際成本指的是每一單位新增生產的產品帶來的總成本的增量。

《奔跑吧外賣小哥！》是果子奶茶利用凡科互動推出的一次現金券H5營銷活動，如圖3-12所示。果子奶茶通過跑酷游戲這種既有趣又有效的營銷方式，可以很好地實現二次引流，是餐飲行業引導二次消費的很好案例。

在H5游戲中，將各種游戲元素替換為自家的品牌元素，可加強用戶的記憶。同時，在線下運用二維碼來引流，將二維碼貼在飲料杯子上，并注明“玩游戲，贏大獎”的字樣，顧客掃碼后即可玩游戲抽獎。當顧客通過H5游戲中獎后，通常會將兌獎券收藏起來，可以在下次繼續點外賣或現場消費時使用。

據悉，這個活動持續了3周半，參與《奔跑吧外賣小哥！》H5游戲的人數達到2萬多，而且奶茶店日均外賣單也增加了500單。

將AR、VR等新技能與H5相結合，可以給用戶帶來一種全新的移動營銷體驗，產生極強的現場體驗感，讓用戶完全沉浸在H5的虛擬世界中，享受滿滿的創意感。

3.1.4 技術型H5場景

技術型的H5場景應用主要是運用各種炫酷的技術作為賣點，吸引人們關注和使用，如圖3-13所示。

【專家提醒】

SVG是一種使用XML技術描述二維圖形的語言，是一種矢量圖。在H5中，開發者能夠將SVG元素直接嵌入HTML頁面中。另外，與JPEG和GIF等圖像格式比起來，SVG的尺寸更小，而且具有更強的壓縮性。

不同的技術可以實現不同的H5動態效果，而且這種類型的H5看上去要更具檔次，除了需要美工設計參與外，還需要掌握專業技術的人員來開發，搭建出更高層次的H5營銷場景。

例如，《狗年大吉 搖一搖抽簽》是一個利用陀螺儀和搖一搖技術制作的H5頁面，我們通過搖一搖手機，即可抽取新年福簽，如圖3-14所示。在制作H5營銷活動時，也可以將這種技術運用其中，增加H5的交互性。

3.1.5 模擬型H5場景

那些優秀的H5營銷案例，通常都具有一定的亮點，如精致的創意策劃、精美的視覺設計以及精彩的互動體驗等，可以讓用戶快速地聯想到具體的情景或者回憶某個場景。因此，很多H5營銷都開始借鑒各種模擬手機或微信的趣味營銷方式，來讓H5快速刷爆朋友圈。

場景模擬型H5主要通過真實地營造某種特定場景，如來電、朋友圈以及微信消息等，讓用戶置身于這些場景中，給他們帶來親臨現場的感覺，從而實現H5的交互和傳播效果，如圖3-15所示。

如今，隨著H5技術的發展，很多H5開發平臺都提供了多種模擬場景的H5模板，我們可以快速打造出以假亂真的情景，如圖3-16所示。

在H5中你可以隨意模擬出各種各樣的場景，當然還要學會將品牌、產品和這些創意的模擬場景相結合。如果你找不到很好的場景，那么也可以嘗試將實現生活中的各種場景添加到H5中，去深度挖掘更多的創意。

1. 朋友圈場景模擬

朋友圈營銷是如今最火爆的營銷方式，無論是大型企業還是小型企業，都會利用朋友圈進行營銷，朋友圈已經成為企業實現銷售目標的一個重要入口。

基于朋友圈強大的社交分享屬性，不論是什么類型的企業，在朋友圈中營銷都不能引起微信好友的反感，因此，不僅要打造和建立企業品牌及產品的良好形象，還需要有足夠多的人流來進行推廣和營銷。

那么，企業要怎樣通過微信朋友圈這種強黏性來進行營銷呢？如果在朋友圈刷屏，可能會被好友屏蔽、拉黑；如果直接在朋友圈發廣告，高昂的價格又無法承受。此時，如果我們可以自己做一個模擬朋友圈進行宣傳，那就很完美了。

例如，“模擬朋友圈”是人人秀推出的一個H5插件，可以幫助我們快速模擬一個虛擬的朋友圈，不但制作成本較低，而且還不會被好友屏蔽。如圖3-17所示，《八娃誕生記》就是使用“模擬朋友圈”插件制作的H5頁面。

在這個朋友圈中，除了你自己的昵稱外，其他用戶的昵稱和評論都是虛擬的，而且這一切你都可以自己控制，同時還可以模仿各種名人朋友圈，而且還能將自己或者好友的微信頭像加入到這個朋友圈中，使其看上去更加真實，從而達到立體化宣傳營銷的效果。當然，模擬朋友圈只是一個引子，我們將它加入到H5的主要目的就是吸引用戶去點擊。

2. 微信群聊場景模擬

通過人人秀的微信群聊功能，可以快速地在H5頁面中模擬出一個微信群的社交圈，同時可以自定義聊天記錄、自定義參與人員、設置聊天間隔和樣式等，營造出人意料的有趣畫面，迅速打響產品名號。

我們可以通過H5來模擬有趣的微信群聊畫面，自導自演一場社交盛宴。例如，在《趣味企業宣傳微信對話，大圣大鬧天宮》這個H5頁面中，模擬出非常真實有趣的微信群聊畫面，并且將用戶本人的頭像置入其中，還可以對參與人數和每個人的頭像、昵稱進行設置，使群成員更加立體，如圖3-18所示。

3. 指紋開屏場景模擬

指紋開屏是一種比較有創意的H5趣味營銷方式，可以模擬用指紋解鎖開屏的過程，讓H5頁面的互動性和趣味性得到增強。使用MAKA和人人秀都可以實現指紋開屏效果，其中人人秀還能設置指紋的樣式，如圖3-19所示。

如圖3-20所示，為人人秀推出的一個企業《年會邀請函》H5場景，當用戶使用手指長按屏幕時，會自動模擬掃描過程，當掃描條達到頂端時，即可自動解鎖。

實際上，《年會邀請函》這個H5運用了人人秀的指紋開屏插件，當然，只是對指紋開屏的過程進行了模擬，并不是真正識別用戶的指紋才能打開。指紋開屏一般可用于H5頁面首頁，吸引用戶點擊查看里面的內容，如圖3-21所示，為《年會邀請函》H5的內容頁面。