如何才能做出傳播量10萬+的HTML5傳播頁面？大量轉發的HTML5都有哪些共同特點？

01-14

總結了一下易於刷屏傳播的H5方向，大概有以下共同點：

1、利益觸發與活動類

如分享XX參與抽獎，關注公共號分享到朋友圈截圖領取PPT模板下載碼，分享到朋友圈獲取微信直播分享機會等。類似於這種利益觸發的機制與活動，分享了才能進行下一步，很多人還是願意關注+分享的，儘管分享後一段時間刪除的可能性比較大，但還是會出現刷屏的效果。

2、內容共鳴類

案例：快看漫畫的產品宣介，「對不起，我只過1%的生活」和中央電視台的「家和萬事興」，尤其是「家和萬事興」，在對的時間推給用戶對的東西，按手印、顯示第幾位等小細節提升用戶參與感。

3、數據類、大全類，有收藏慾望

很多人都是把微信朋友圈當做收藏夾來用的，看到有收藏慾望的文章就會轉發到朋友圈，比如XX大全，最全的XX知識/工具，有了XX就夠了，XX行業年度報告。再如互聯網金融產品的消費賬單分享，可以整個用戶數據記錄，滿足用戶私人數據需求，再加以超越XX%的用戶，滿足用戶的秀優越心理。

4、好玩的遊戲，且得到數據反饋

如神經貓、全民找XX、杜蕾斯-一夜N次郎等好玩的遊戲去年也刷屏不少，這些遊戲多用時間控制提升用戶的刺激緊張感，輔以數據反饋超越了XX人，讓用戶有分享欲，有的用戶為了刷出漂亮的數據，甚至玩個N次。依據這個，當時我們做了「測單詞、知工資」H5小遊戲，寓教於樂，PV很不錯。

5、人人參與

一起來畫雞、一起來畫圓等，突出用戶參與感，提升用戶成就感。

6、技術亮點互動體驗

百度智呼吸、手機秒變空氣檢測器、Burberry，「一輛懂你的車，在尋找一位懂TA的人」尤其贊，模擬駕駛體驗，展示產品性能。

暫時就想到這麼多，歡迎大家補充。

大量轉發難道不是靠內容嗎？你頁面什麼都不寫，標題寫個「成都女司機KF記錄曝光，原來真有幕後黑手」，放在微信上都能輕鬆過萬。。。

不要輕易嘗試啊，轉發過500我概不負責。

標題

用點心理學---獵奇 :h5頁面要傳播，首先想到就是傳播途徑。以朋友圈途徑說明問題。人們第一次看到的肯定是好友在朋友圈的分享，而且這時候看到的僅僅是文章的標題。所以標題如何確定，很大程度上直接影響到傳播量。舉個栗子，這兩個標題，「快捷鍵大全」和「鍵盤上原來有這麼多秘密，你都知道嗎？」。如果是你，你會點擊打開那個？你不會點擊那個？

這裡就用到了一點大眾的獵奇心理，也即是窺探未知秘密，很多人都會多多少少有這種心理。

另外，標題中直接出現乾貨關鍵字，乾貨吸引。很多人就是沖著乾貨去的。

如果標題平平，那傳播的大任就要交給內容了。

內容

按照這個思路下去，假如，一篇h5頁的文章打開了，接下來影響自己分享與不分享的關鍵就在內容了。如果平淡無奇，很多人都會在打開後的幾秒鐘關掉。因為社交圈畢竟不是學習的場景，需要花時間鑽研，很多人的朋友圈動態可是很多的。就像HR看眾多應聘者的簡歷一樣，如果第一眼沒看到自己期望的關鍵詞，被PASS的幾率就很大了。讀朋友圈內容也是這樣。

所以，對於文章，在布局的時候，一定要把亮點，重點，發光點，，放在合適的位置，必要的時候做對應的強調處理（加粗，色彩等方式），讓讀者產生這種「哦~不錯哦，有新技能get」的第一感覺。

關於內容，如果不是必要，千萬別生硬拉長，因為長篇大論會給人壓力感，尤其全是文字。朋友圈分享或其他社交分享方式，所以頁面承載的內容不需複雜，即要求內容精鍊。目的明確。如果確實信息比較多，務必做分頁處理，分頁與不分頁完全是兩種不同的體驗。有邏輯關係的，一定要理清，包括分支。這樣做都是為了讀者有更好的閱讀體驗。

適當的圖文配合也是較好的，可以優化閱讀體驗，但不要過。首先圖片過多費流量不說，載入不出來或載入太慢也是讓人揪心的事兒。

其他

頁面里如果有交互，那麼良好的交互設計，會讓讀者覺得整個閱讀過程流暢。
如果能添加些有逼格的元素更好不過了。
如果能結合當前實時熱點就棒極了！（比如已經過去的熱點，「我們」，「優衣庫」等）
還有借花獻佛型。（比如某app"我用**打電話，超好用,快來加入吧"）
利益驅動，趨利者的殺手鐧（比如分享，截圖發給某某，領取XX，或抽取第某某分享者送某某豪禮）

實例解說H5頁面傳播：

場景：最近，我在朋友圈看到有人分享了一個標題為「我是第4380個為「Ping++支付」代言的人」的H5頁面。出於好奇（這Ping++支付是什麼鬼..），我就打開了鏈接（這就進來了，接下來看內容的了）。

首先進來的第一感覺，沒有人會想到去分享（雖然右上角的三個點是可以進行分享的），而是注意力集中在「七行代碼」四個粗字上，（七行代碼幹嘛用的呢..產生好奇而且很牛逼的趕腳），根據閱讀習慣，接著看你才發現下面一行灰色字「接入所有主流支付渠道」。（哪些支付渠道呢...）這時你就知道中間的圖示什麼用的了。（注意：圖不是頁面的重點哦~所以圖片是灰化的~），這就是分清主次，重點突出的問題了。

另外在頁面底部的按鈕使用的顏色給人的感覺是安全的（什麼是安全的，比如紅色代表危險，所以很多應用中的「退出」按鈕都是紅色的，這就涉及到色彩學了）。而且按鈕顏色是有變化的，有呼吸的感覺，讓人有想用手戳一下的慾望。

點擊，顯示到訂單頁，這時候看看頁面，商品是「Ping++的心意」，總金額才一分錢，一分錢！！看到了么，幾乎沒有人會因為這金額的問題放棄繼續，回頭再看看商品名稱「Ping++的心意」，一分錢送份心意也挺好的，況且可以嘗嘗鮮，畢竟這是新玩意。

如果你留意，就會發現頁面兩處出現「0.01」字樣，有人會覺得頁面上有說「￥0.01」，按鈕上就不用出現了吧，那就錯了，多次出現就是為了強調的作用，就0.01！（這裡為什麼要讓你支付0.01，而不是直接做宣傳文案，僅僅讓你體驗Ping++支付么？錯！原因在下面說明）

繼續，，，選擇微信支付。

支付完點及右上角的完成。

完成後的界面，注意看中間的數量傳播數量已經是「8486」，傳播數量從昨天到現在已經翻了一倍（參見第一張圖的傳播數量是4380）,可推測這是新發起的活動。新事物的出現，一旦火起來，傳播數量都是程倍數或指數方式增長。另外，為什麼在分享的時候要出現數量，第XX個（見圖一），這就是眾人心裡普遍存在的競爭排名心理。

http://weixin.qq.com/r/XJxdRVTEeQkGrRAm98lO (二維碼自動識別)

看到上圖除了，告訴你支付成功和第多少個人以外，還有獎勵政策，即第XX個獲XX禮物，這樣做的好處就是，部分人為了得到禮物就會多次參與。下面有兩個按鈕「分享給朋友」和「聯繫我們」，其中第一個按鈕是有呼吸燈感覺的，下面一個顏色是固定的。目的很明確：引導你去分享。

當然驅使你分享的另一個微妙的原因就是之前的步驟：支付。如果到這一步就關閉頁面了，很多人會覺得：我是不是虧了什麼（實際上也就1分錢）。如果沒有支付步驟，僅僅是功能介紹，看完後，關閉也就關閉了，沒什麼可惜的，因為你分享本身對自己沒什麼意義。但現在不一樣，這就是所謂的「後情感合理化」，你對一件沒有很大意義的事情付出了，自己心裡會找理由說服自己，告訴自己這是有意義的（自己騙自己）。

點擊聯繫我們按鈕，簡潔的二維碼。

總結一下這個案例中出彩部分：

內容新奇
符合閱讀習慣
邏輯清晰，流程簡單
每個頁面承載信息量少，且主次分明
懂得如何用色
適當的引導
競爭排名心理
有物資獎勵
後情感合理化

好了，收藏前先贊個吧~ / 捂臉

1、做一個H5場景，最重要的不是在設計上面下大功夫。而是對策劃的反覆推敲，清晰定位，對文案精簡提煉、歸納和場景化。

有一個4A廣告公司的朋友一次聊天中提到，完成一個H5場景應用假如給他6天時間的話，那他花4天去不斷構思，整理邏輯，在紙上畫出視覺稿，想像如何視覺化表達。把一切理順之後，再花兩天時間去完成這件H5場景作品。

2、微博最突出的貢獻就是讓段子、話題熱點、140字有效閱讀這幾種方式成為可以進行營銷傳播的手段。

做H5場景也就跟在微博上製造段子，製造熱點話題一樣，都是為了營銷傳播，吸引轉發分享。為什麼在微博上可以創造出這些好的形式去玩內容，而在H5場景上就不能再創造新的形式去達到同樣的目的呢？要知道，在移動端營銷時代，H5是目前最適合移動端傳播的工具方式。傳播非常快，有多快呢？我只能告訴你比你想像中要快很多。

今天早上雲創客剛出品一件《東華寺夏令營活動招募》的H5場景，到中午12點才三個小時，轉發分享量已超過4000多人轉發。至於瀏覽量都不用說了，可以隨意想像一下。要是數學好的人看到這裡可以任性的拿概率論算一下。

3、大家都知道，一個H5場景的頁數大都控制在10頁之內，為什麼？「用戶體驗不好，用戶懶得翻沒耐心，載入過慢流失用戶等等……」一大堆科學的解釋的確讓人望而卻步。這麼說當然都沒錯。因此，你之前也肯定沒有做過一個超過15頁的H5場景案例。但我告訴你，怎麼讓你從一個菜鳥快速鍛煉成H5場景高手。

試著創作兩次超過50頁的H5場景吧！當然你做這個不是為了給客戶。也不能拿來自己公司當營銷用，只不過是鍛煉自己。從創意構思，設計風格，文案提煉等等一切因素去考慮、推導，偶爾嘗試完成一件超過50頁的場景作品。下了這般苦功夫兩三次後，你都會有很大的突破，試試看，這會讓你變得非常強大。

你沒有做過最複雜的東西，你一直停留在簡單的東西裡面。你偶爾認真去做一件最複雜的H5場景，會使你一下得到質的飛躍，甚至突破阻礙你好久的瓶頸。我拿一個寫小說的理論舉例。一個寫小說的人，只會寫短篇，一直寫短篇，你有一天讓他寫個長篇他便寫不出來。而一個向來寫長篇的人，你有一天讓他寫短篇他就很輕易寫出來了。

最複雜的事情你都做過了，簡單的還是問題嗎？當然很多時候短篇可能比長篇更精練，更有價值也更難寫。但是，這建立在一個人之前寫過很多長篇，然後又開始不斷練習短篇的人，他的功夫在於已經收放自如，於形式中無視形式。可你還沒做到這些呢。

上面的靈感來自下午與雲創客運營團隊一位設計師聊天中獲取的。我試著串聯起來自己之前在書法、畫畫、閱讀和寫作等研究上面的理論體系，然後得到很多新的視角。於是把這種方法分享給大家。

4、我之前在國際4A廣告的時候，有一位天津大學的設計系教師跟我交流經歷，他自己從研究生畢業開始在大學教學，做設計開始一直專註動畫效果、設計形式、還有不落地的創意。當時接外面社會上的客戶私單，做出東西給客戶回復後都很受打擊，別人都不願付錢給他。後來出來在廣告公司幹了兩年，他從一個專註動畫和形式，還有不落地的創意的人變成了一個注重邏輯，注重策略在畫面中的體現，注重有效落地的創意呈現給受眾。

他現在又回大學裡邊教學了。前段時間跟他聊天，問他有沒有接觸H5場景。他說去年就開始玩了，發了兩個給我看看都很優質，水平毫無置疑。

5、上次有一位設計師，說起自己學做H5場景的經歷。她剛開始接觸H5場景，為學一個好的H5場景如何做出來，把自己剛買的《精益創業》這本書，泛讀+精讀兩天，至少讀了四遍，做了一些密密麻麻的筆記，一開始寫滿了七八頁的提綱。總結了書里的中心內容，提煉出來邏輯結構。然後自己論證的過程又花了一天時間。直到濃縮成一頁提綱，最後她才開始設計排版。花了兩個晚上去完成設計。

當她拿給我看那件作品的時候，簡直震撼到我了，一個很有場景感，很有風格的創意，內容很精練很多有價值的乾貨，我一年來分析了有上千件H5場景作品。但也立馬被她作品給打動了。她後來就用這種方法鍛煉H5場景創作能力。

真的非常欣賞這個女孩。比我還小一歲，兩年前剛從廈大畢業，現在上海做自由設計師工作。

載入絕對不能超過5秒，否則會有74%的用戶離開頁面。

2，契合用戶操作習慣：滑動切換（放置在左邊的按鈕點擊率低）

3，頁面前幾頁要吸引到用戶，防止頁面層級加深，用戶流失越多。

4，互動簡單易操作，避免複雜輸入行為，防止用戶流失。

5，發布高峰期在中午12點/晚上10點。用戶活躍度最強。

UC做過一個招聘的：技術福利，世界盃嫩模陪你看！配上圖，妥妥過10萬吧。

總結幾點：

1、要新，否則傳播力會下躍

2、要找到一個足夠大的傳播體

3、傳播體的軟肋要切中

4、注意結合熱點潮流

4A公司應該很擅長做這個，有專門教的課程吧。

這跟H5有毛關係？

剛做一個招募活動，幾乎沒有花太多成本的，效果出乎我們的意料，連著升級了四次伺服器，最後收穫八十多萬的互動人數，總結一下，主要贏在活動機制

1、邀請好友助力。招募結果是按收穫的支持數，支持者隨機有小量禮品。

2、信息及時發布。投票支持結果及時可見，最終遙遙領先的五位參與者，為了甩開競爭者，一天內連續發了一百多次朋友圈求支持

3、吸引的參與者為KOL。最後獲勝的三位KOL均有四千以上的微信好友，20%的參與者帶來80%的互動

4、良好的用戶體驗。連續改兩天改稿到凌晨五點，才達到比較滿意的效果，最終收穫不到20%的跳出率

然而我想說的是，這只是術的層面，道的層面是在貫穿整合H5最核心的，用戶洞察。找到用戶痛點至少是癢點，才能成功的傳播...我們這個H5也沒有成功在這裡

第一次答，手機答的，不知道怎麼留鏈接，有想看H5的可以私我

搜索一家公司：W 這家公司出的每一個專題都是精品，為大眾點評做了很多個優秀的微信營銷頁面。

加個不轉不是中國人民；愛媽媽的請轉，媽死的不用轉