于H5這個名詞想必大家已經很熟悉了，似乎就是在一夜之間，各大公司的市場、公關等負責推廣和傳播的部門人員，紛紛把目光投向了H5。那么，H5到底能做什么？應該怎么去做？到哪做？可怎么玩起來？做一個H5營銷需要注意什么？有哪些值得參考的經典案例？這些都是大家期望看到的，下面就是2015打造火爆H5頁面圈攻略！

2014年7月22日，H5游戲“圍住神經貓”上線微信朋友圈，到7月25日，3天的時間便創造了用戶500萬，訪問量超1億的神話。神經病貓的動畫表情、服飾、背包開始流行，甚至有網店開始售賣圍住這只貓的攻略。

盡管H5慢慢走近更多人的視野，但這個由HTML5簡稱過來的詞匯，在大多數人聽起來，仍十分陌生且難以理解。簡單來說，H5就是一種高級網頁技術，我們平時看到那些邀請函、小游戲都是H5網頁，確切來說叫HTML5，它跟我們平時上網看到的那些網頁本質上沒有任何區別。

一.H5頁面能怎么玩？

在了解完H5的一些基礎知識后，相信大家最關心的還是H5能做什么，有哪些玩法？接下來我將列舉一些典型的例子和大家探討：

1幻燈片式玩法

以下這個特斯拉的例子相信很多人都看過，精美的圖片設計簡單的翻頁效果。

這是H5最早期也是最典型的玩法，因為簡單、實用，所以至今還很流行。其效果就是簡單的圖片展示&翻頁交互，最終整體的表現很像幻燈片展示。

其實幻燈片式的H5現在已經出現了很多在線制作軟件供大家使用，所以制作成本在現在看來幾乎是等于零的，而在之前這樣一個應用的開發可能要將近一萬。

2交互式動畫

可口可樂下面這個案例在之前的風云榜中推薦過，是運用H5繪圖功能的典型例子。當然這里面的交互還是比較簡單的，只不過它基本體現了交互式動畫的感覺。整個可口可樂的時間軸是隨著用戶向上滑動頁面“繪制”出來的。

其實除了這種敘事型的H5動畫，我們能看到的大多數H5游戲也都都屬于這一類，比如神經貓、打企鵝、2048、財務包子鋪等等，都非常值得去感受一下。

那么，H5到底能實現什么樣的動畫效果呢？我想這應該是大家在做H5時最頭疼的問題，因為不知道能做成什么樣，你也就不知道從何下手。所以下面給大家介紹一個網站，絕對可以讓你眼前一亮，思維暴漲：http://fff.cmiscm.com/。在這個網站中，你幾乎能看到所有H5能夠實現的動畫效果，引爆你的靈感，下次如果需要做H5的時候就可以跟開發說“你看，我要的就是這個效果”。

3功能型H5

看一下以下的兩個例子，第一個是百度針對地鐵漲價做的H5，它可以計算你每天坐地鐵要多少錢并且實時顯示大家的評論；第二個是STC的社交移動風云榜，很簡單，就是精品H5的展示：

這兩個H5都有一個特點，除了針對受眾的熱點內容傳播以外，它們很像一個“供用戶重復使用”的產品，這就是所謂的功能型H5。其實大家看到風云榜可能會覺得它只是一個再簡單不過的網頁，但如果從它滿足用戶需求并產生重復“使用”行為的角度，它其實是一個產品——每周更新、定期群發推薦H5的圖文、欄目更新通知等等。

功能型H5的獨特價值在于，除了具備傳播性以外，它通過用戶的重復使用行為使得H5的傳播是一個持續不斷的過程，這一點是一般的H5所不具備的。風云榜首次發布時轉發6w多，目前每月的訪問量都在10w左右。

功能型H5由于具備一定的產品特性，其最大的價值就是提高粉絲活躍度和忠誠度。我們需要根據本身品牌的形象定位以及受眾的特性設計功能型H5。舉個例子，賣洗手液的可以抽象為健康生活方式，設計一個改善生活健康狀態的功能型H5或定期更新資訊的功能型H5。

二.從功能與設計目標來看，H5專題頁主要有以下4大類型：

總體來說，H5頁面主要是以上3種類型，不過說細一點還可以從不同角度分出一些類型，下面將通過大量的經典案例來說明這一點，最好你能體驗一下這些案例。首先，從功能與設計目標來看，H5專題頁主要有以下4大類型：

1活動運營型

為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。

大眾點評為電影《狂怒》設計的推廣頁深諳此道。復古擬物風格的視覺設計讓人眼前一亮，富有質感的舊票根、忽閃的霓虹燈，配以幽默的動畫與音效，恨不得每個選項都點一遍。圍繞“選擇”這個品牌關鍵詞，用引人入勝的測試題讓用戶把人生當作大片來選擇，選到最后一題引出“大眾點評選座看電影”，一鍵直達App購票頁面。即使明知是軟文也忍不住帶著“矮油不錯，這個頁面有點diao噢”的心情點擊了分享。

2品牌宣傳型

不同于講究時效性的活動運營頁，品牌宣傳型H5頁面等同于一個品牌的微官網，更傾向于品牌形象塑造，向用戶傳達品牌的精神態度。在設計上需要運用符合品牌氣質的視覺語言，讓用戶對品牌留下深刻印象。

伴隨著浪漫的鋼琴旋律，《首草先生的情書》以一位男士的口吻娓娓道來在成長歷程中對妻子的愛與愧疚，最后引出“首草——滋陰圣品，愛妻首選”的宣傳語。設計上采用回憶般的黑白色調，簡單的照片加文字，配以花瓣掉落、水面漣漪等輕動畫，渲染出唯美優雅的氣氛。“首草”這個全新的高端養生草藥品牌，用H5打出了一副走心的情感牌，讓用戶記住了“半生只為你”的愛妻品牌形象。

3產品介紹型

聚焦于產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。

這一類型的H5頁面多見于汽車品牌，LEXUSNX是其中的優秀代表案例。精致和極富質感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產品的7大特性，宏觀和微觀都照顧周全。

4總結報告型

自從支付寶的十年賬單引發熱議后，各大企業的年終總結現也熱衷于用H5技術實現，優秀的互動體驗令原本乏味的總結報告有趣生動了起來。

《京東的十大任性》用10張橫屏頁面講述了京東在2014年的十大成就，視覺設計上采用簡潔的扁平風插畫，加入紙面質感形成復古卡片拼貼感。不同頁面間通過手指滑動實現流暢的視差滾動效果，最后還有東哥這個小彩蛋。一口氣看完后大概就了解2014年京東都干了哪些大事。

三.H5形式為功能服務,幾種常見的H5專題頁表現形式：

在確定了專題頁的功能目標之后，接下來就是關鍵的H5頁面設計階段了。如何有的放矢地進行設計，需要考慮到具體的應用場景和傳播對象，從用戶角度出發去思考什么樣的頁面是用戶最想看的最會去分享的，形式要為功能服務。以下列舉幾種常見的H5專題頁表現形式：

1簡單圖文

簡單圖文是早期最典型的H5專題頁形式?！皥D”的形式千變萬化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果?？简灥氖歉哔|量的內容本身和講故事的能力。

滴滴打車這個案例就是典型的簡單圖文型H5專題頁，用幾張照片故事串起了整套頁面。視覺簡潔有力，采用整屏黑白照片，點綴以滴滴的品牌橙色。每切換一張圖片，文字就漸隱浮現，沒有其他互動形式，讓觀眾聚焦于內容，通過陌生人之間的真情聯系來塑造品牌的正能量形象。

也有不甘平淡的精彩案例。在除夕夜全國人民瘋狂搶紅包的時刻，微信推出了《從此看盡中國人的名與利》這樣一個專題頁。第一眼就被鎮住了，好親切的RMB~每個頁面都是一張人民幣風景局部放大圖，創作者加入巧妙的創意元素與微動態進行細膩刻畫，帶觀眾走進了人民幣的微觀世界。每一張鈔票圖案配合發人深省的文案，在推廣微信紅包的同時呼吁人們重新審視人情與名利的奧義。

2禮物/賀卡/邀請函

每個人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物，那創意和制作便是重要的加分項。

AKQA創意營銷公司在圣誕之際獻上了一份厚禮——夢幻水晶球。通過移動手機，鏡頭從水晶球外不斷搖晃推近，漸漸走進水晶球的微觀世界里。通過手機環顧四周，可以360度欣賞水晶球里的全景，搖一搖雪花便漫天飄灑。寫下你的祝福并分享給朋友，相信一定會驚艷到對方。這個H5頁面使用了重力感應、3D等技術，文字與BGM的使用也十分講究，給用戶帶來了完美的互動體驗，值得細細品味。

Evernote在過年期間也別出心裁地推出語音賀卡，通過公眾號引導用戶對其發送一條語音消息，然后把這條祝福語音結合中國風動畫做成一張獨一無二的語音賀卡發送給朋友。整體色調也是以Evernote品牌色為主，同時蘊含著一絲優雅的年味，十分討巧。

3問答/評分/測試

問答形式的H5頁面也屢見不鮮了，利用用戶的求知欲和探索欲，一路選選選，看最后到底是什么成績。一條清晰的線索是必要的，最后到達的結果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。

大眾點評為姜文的電影《一步之遙》做持續推廣，讓用戶為姜文的代表作評分。視覺設計依舊出彩，開腦洞的創意和動畫設計令人叫絕(一定要掃一掃體驗下！)。延續了懷舊大字報風格，字體、文案、裝飾元素等細節處理也十分用心。問答形式的H5頁面能做到這個份上也是蠻拼的。

4游戲

從“圍住神經貓”、“看你有多色”等單純小游戲再到杜蕾斯“一夜N次郎”(即山寨版“別踩白塊兒”)等品牌植入式小游戲，H5游戲因為操作簡單、競技性強，一度風靡朋友圈，但創意缺乏和同質化現象導致用戶對無腦小游戲逐漸產生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設計上多下點功夫。

在圣誕節推出了一款名為《圣誕老人拯救計劃》的H5小游戲，操作非常簡單，只需用手指交替上滑，把角色的脖子向上拉到無限長，游戲會記錄你拉的最高距離，跟朋友比一比誰比較長。界面清新可愛，與Same的招牌畫風一致，游戲角色也是Same的品牌角色，通過幽默惡搞的游戲向用戶傳達Same獨到有趣的產品文化。

四.為H5頁面設計加分的4個要點

一個H5頁面設計品質的出眾與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認知。在這里總結出以下的設計要點：

1細節與統一

要成就高品質的用戶體驗，必須考慮到細節與整體的統一性。復古擬物的視覺風格，那字體就不能過于現代；幽默調侃的調調，那文案措辭就不能過于嚴肅；打情感內容牌的，動效就不能過于花哨。

大眾點評姜文電影推廣系列的《九步之遙》H5專題頁便牢牢抓住了這一點。從二維碼入口到性感的著陸頁，再到最后分享提示的設計，包括文案措辭和背景音效，無不與整體的戲虐風保持一致，給到用戶一個完整統一的互動體驗。

尤其關注“分享提示”這個細節設計，比起一個簡單的箭頭和一句冷冰冰的“點這里分享”，用心的細節設計帶來的高品質和好感度是顯而易見的。關于分享提示的設計，再貼幾個精彩案例：

2緊跟熱點，利用話題效應

想要你的H5專題頁一夜爆紅，第一時間抓住熱點并火速上線，借機進行品牌宣傳也不失為一條捷徑。

天天P圖抓住武則天熱播的契機推出了風靡海內外的媚娘妝，同時《全民COS武媚娘》的H5互動頁也第一時間上線，操作簡單易上手，一鍵上傳照片就能立刻完成媚娘妝，與萬千媚娘們進行PK，娛樂了大眾又推廣了產品。

網易娛樂在武媚娘剪胸風波的風口浪尖上推出了名為《神還原武媚娘被剪胸真相》的H5專題頁，放下節操用極富想象力的粗曠草圖風向廣大觀眾“還原”了真相。一時間被瘋狂轉發，網易娛樂也算是順勢自我宣傳了一把。

3講個好故事，引發情感共鳴

不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅里，學會講故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。

LEVI’S新年優惠活動專題頁以第一人稱的口吻，用小時候簡樸卻熱鬧的新年與長大后富足卻乏味的新年做對比，用手繪風渲染出親切的懷舊氛圍。最后引出“這個新年，把壓力和束縛打包扔掉，用新鮮的眼光感受生活，一起活出趣”的品牌推廣slogan，代入感極強的故事無疑是驅動分享的源動力。

4合理運用技術，打造流暢的互動體驗

隨著技術的發展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。相較于塞入各種不同種類的動效導致頁面混亂臃腫，我們更提倡的是合理運用技術，用心專注于為用戶提供流暢的互動體驗。

典型的案例是淘寶在雙12推出的預售推廣H5專題頁。在瀏覽過程中我只使用了一種向上滑動的手勢，而頁面呈現出來的效果卻猶如一個流暢的動態GIF。設計師巧妙利用圖形設計與組合，在滑動過程中營造出一種豐富的視差滾動效果，單個圖形元素的遮罩、旋轉與整體頁面的動勢配合極為默契。

五.現在H5市場究竟有哪些坑？

不過，我們可以很清楚的看到，H5市場在逐漸火爆的同時，也越來越混亂，越來越不規范。無論是第三方開發公司，還是廣告主，在面對H5營銷時都會遇到這樣那樣的問題，或者說有這樣或那樣的誤區，現在讓我們看看這里面的坑究竟在哪？

1幻想憑一款H5能一夜成名

期望高、投入少，許多市場營銷人員，特別是老板，都希望靠一款沒有任何推廣投入的H5一夜成名，但現在這種情況在微信朋友圈里已經不可能出現了。

H5頁面的推廣方式乏善可陳，無外乎軟文、朋友圈分享和微信公眾號推廣，但目前的H5營銷無論是在表現形式還是內容創意上，依舊面臨著很大的挑戰，同時微信朋友圈的用戶對日漸增多的泡沫信息感到疲勞，產生了某種程度上的抵抗力。而微信公眾號的暴增則讓打開率和閱讀量持續走低，想讓一款H5一夜爆紅的可能性不是沒有，但的確是越來越小了。在整個H5的產出中所占的比例也會低到令營銷人員所難以忍受的地步。

2營銷推廣只索取的態度無法長久

在微信里傳播就要遵守微信的游戲規則，不應該只想從微信里攝取東西，而應該轉變思維，想想我們給微信貢獻了什么？我們給用戶帶來了什么？你給微信貢獻的越多你的回報也會越大。如果有一款H5之所以能在微信朋友圈里成功，主要還是創意和制作人要始終站在為微信用戶思考的角度來制定H5策略的，我們要做讓用戶喜愛的“廣告”，用戶才會分享轉發，而不是靠強制性的要求和誘導，這種結果最終會被用戶投訴，甚至被封。

3H5本身還存在技術問題

作為一項本來還不太成熟的技術，H5是在微信的社交舞臺下才大放異彩的。目前看，H5的問題依舊比較多，技術上還有很多不足需要改進，比如頁面切換白屏、下拉菜單不流暢、多個音頻播放不流暢、移動設備件的接口API少等，無法掃描二維碼、無法用語音輸入、無法一鍵分享到朋友圈。這些對營銷人員來說，都是一個個掩藏在腳下的深坑，一不留神就掉進去了。

4易抄襲且缺乏知識產權保護

如果你有運氣，通過千辛萬苦做一款好的H5應用，例如像神經貓那樣，那么比你更開心的一定是其他抄襲者，他們可以輕易的把你的H5抄下來，換成他們的域名掛上去，然后再把廣告聯系方式改成他們自己的。神經貓、2048等就衍生出許多版本，大部分人可能都沒有訪問過原版(因為抄襲和模仿者太多)，抄襲的輕者換域名，更厲害的是把你的創意拿去然后在短時間內做一個比你更好的游戲或者應用，讓你的淚兒哭干。

5作品同質化現象嚴重

很多人對H5的理解都是停留在用戶層面，邀請函、小游戲、品牌展示、抽獎等等，但大多數作品的同質化現象很嚴重，無論是形式上，還是內容創意上。這對營銷人員和制作人員的要求逐漸在提高，挑戰也越來越大，想隨隨便便做一款能夠引起注意的作品并不容易。

6寄人籬下不確定性大

H5之所以能一下子爆火，微信的功勞最大，但是微信正把H5最優質的入口收緊——朋友圈分享紅利正在逐漸消失，未來具有不確定性。微信在近期出臺了針對朋友圈分享的政策限制，誘導關注與分享，初犯將會面臨封號30天、攔截鏈接、刪除誘導增加的粉絲和關閉流量主的處罰，二次違規將直接永久封號。而且轉發量超過一定數量后微信就會屏蔽朋友圈，意味著未來微信里再也不易出現花費很少的錢獲得流量破千萬的H5.

目前需要注意的是：分享的圖片和自定義接口已變更，注意修改；不要在標題中涉及分享贏大禮、100%中獎等惡意誘導的關鍵詞；分享頁面需部署在擁有ICP備案的域名上。

7機型成千上萬適配難度大

剛剛開始做H5的企業面臨的第一個問題就是，機型適配，由于手機的型號繁多，系統、屏幕都不一樣，所以在顯示和一些功能性的接口開發時都會耗費一些時間，如果你是剛剛入手希望能做個熱門的H5應用，那么初期機型的適配會讓你吃一番苦頭，不過慢慢會知道解決，比其他前面的那些坑，是小巫見大巫。

寫在最后

有人說，HTML5做的應用究竟能否匹敵原生App？答案是，HTML5不但可以匹敵原生App，甚至它天然的很多特性超越了原生App。隨著手機硬件的升級、HTML5技術的發展以及微信平臺的開放，H5的跨平臺、低成本、快迭代等優勢被進一步凸顯，這對身處于移動互聯網大潮的企業主、品牌、設計師和開發者來說，都將是一個最好的時代。未來必將涌現更多優秀的H5頁面，讓我們拭目以待。

這是一個最壞的年代，也是一個最好的年代！

歡迎分享本文給你的朋友，匯總自網絡，精彩等你慢慢提取，關注互聯網和網絡營銷的朋友多多交流，QQ&微信：809472503。

公眾號：mumuseo，有網絡營銷干貨，網絡推廣策略，引流技巧，成功案例故事，網絡營銷思路，等諸多優質內容，提升自己的專業能力！你關注的人，決定了你看到的世界！

營銷，不止于營銷，傳播互聯網正能量！這里，不乏干貨，如果你想和我扯扯，歡迎關注