編輯導讀：這幾年來，H5從最初的頻頻刷屏，再到寥寥無幾，刷屏級別H5越來少見到了。在短視頻如日中天的發展趨勢下，昔日刷爆朋友圈的H5，被徹底拋棄了嗎？本文作者盤點了一些經典的H5作品，對H5與短視頻&電商直播之間的差異進行了分析，與大家分享。
在前段時間，在文章《以考拉海購為例，拆解活動策劃流程&創新玩法》就提到我會通過系列文章來分享“策劃流程、引流獲客、營銷變現、分享傳播、促進活躍、創意H5傳播”我對產品營銷的案例分析。
這篇文章主要分享“創意H5”相關內容，所以該系列文章就分享完畢，歡迎讀者盆友們查看我的歷史文章。
不知道你是否跟我一樣，發現這兩年以來在微信傳播的H5作品已經很少了？更多的是一些短視頻，還有興起的電商直播。事實上，相對短視頻&電商直播，H5在一直都是承載富文本內容傳播，以及創意營銷、人機互動的好工具，説到這裏，多少都會有一些懷念之情。
最開始接觸H5大概是2014年左右。
先來科普下：什麼是H5？
H5，即第5代HTML（HTML是“超文本標記語言”的縮寫）。從技術的角度是指用H5語言製作的一切數字產品，例如我們上網所看到網頁，多數都是由HTML寫成的。“超文本”是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
在廣告或營銷的角度理解，H5就是把廣告信息做成一個場景，通過二維碼或者轉發鏈接讓用户更直觀地傳播或者互動。場景往往包括圖片、音頻、視頻、地圖、會議報名、產品鏈接等多個模塊。是一種流行在移動互聯網時代的移動廣告模式。
這次內容是分享具有廣告或營銷性質的H5作品。
H5給我的印象，那時我在PC端的H5官網後台的編輯界面對一些圖片、音樂、字幕等元素自定義地組合起來，就能在手機界面實現視頻一樣的視覺效果，顯然太炫酷了，這種新鮮玩意讓我着迷。
新奇的東西總能讓人躍躍欲試，在伴隨着社交APP微信的普及，很多創業者看中了H5的發展市場，紛紛成立了H5傳播營銷公司，例如：MAKA、初頁、兔展、意派360、iH5、咫尺微頁等逐漸開始為大家所熟知，後來我們就經常看到H5在微信刷屏傳播。
其中主要的原因之一，我認為是它能夠使得原本靜態的富文本都動起來，通過越來越靈動的交互讓用户體驗更豐富，這種新的交互的方式對用户五官的感觸（視覺、聽覺、觸覺等綜合互動體驗）更加強烈。
隨着這幾年H5技術的成熟，H5自身的表達形式也在不斷革新，從單張到頁面、從點擊到多點交互、從文字到音頻+視頻，H5被賦予了更多商業能力，開始慢慢滲透到各種商業場景，企業會議營銷宣傳、品牌/IP宣傳甚至是新產品發佈、拉新引流促活小遊戲等多種場景，為企業實現產品營銷及品牌傳播提供一種新的運營場景。
根據之前的實戰經驗及筆記，整理出一些較為經典的H5，並從用户心理需求模型的角度進行剖析，這些案例之所以成功的原因。
先上個表捋一捋：
（圖中「用户心理需求模型」為「用户心理需求表」的迭代版，舊版請查看歷史文章《讀懂用户，你需要這張“用户心理需求表”》，有關我是如何探究出「用户心理需求模型」的過程，我會在後續文章為大家分享哦～）
一、網易1. 網易雲音樂主題：你的使用説明書
玩法：通過讓你聽5-6段音樂，然後選擇你聽完後的感受，來判斷你是個什麼樣的人。
亮點：用音樂來測試用户的性格，比起純粹用選擇題測試，這種承載在音樂上與用户交互的方式更能激發用户的好奇心，加上用一種將用户本身擬物的方式暗示將自己表達給好友，這就減少了分享賣萌的門檻，而且結果測出來，都是讚美，大大地激發了人的分享慾望。
究其之所以能夠瘋狂刷屏的原因，主要是有趣好玩的交互體驗、愉悦舒適的內容及H5本身滿足用户窺探自我的獵奇、分享標籤增加人設與表達應該被尊重的心理特點這三方面，滿足「用户心理需求模型」中用户產生動機和情緒的內在和外在誘發因素，促使用户決策意願大大提高。
（注：接下來幾個案例，基於上表已經做了明確的説明，基本都符合用户心理需求模型中的三方面誘發因素，下面暫且不做詳細分析。）
H5體驗鏈接：https://st.music.163.com/c/m2-spec/Y6rGf4p0DP/index.html（手機端）
2. 網易雲音樂主題：你的榮格心理原型
玩法：分兩部分，告知用户這個榮格測試是什麼來頭，然後主幹部分就以一條類似探險的場景故事走線，在探險過程中遇到的多個場景，每個場景的出現就是測試題目的埋點。題目測試完，結果就會發給你。
亮點：在整個表達方式上，運用了探險故事的主線，而且是以對話的方式來展現整個測試過程，讓人感覺是講故事一樣，引人入勝，倍感親切。
這個榮格測試有十二種原型，但這麼多類型的描述並不衝突，而且都是用的偏向褒義的詞，哪種類型套到自己身上，都會給人一種豁然開朗的感覺：好像我的的確確是這樣子的，優秀。
事實上，我們往往會錯誤地相信，一個籠統的、一般性的人格描述特別適合自己，這一現象被稱為巴納姆效應。
而在測試尾聲，又補了一刀“這樣的人格組合只佔全世界9%”，直接給人一種美好又獨特的感覺。
“只佔”兩個字上，他向我們傳遞着一份信息：我就是獨特的，我就是和別人不一樣。在心理學上，這叫做虛假獨特性。這讓我們感覺自己很好，這就是為啥心理測驗一個“討人喜歡”的地方。
話説回來，雖然沒有什麼科學依據，但是確實不得不佩服網易的對用户心理的洞察力，動不動就出一些刷屏級的活動，不得不讚嘆豬場（網易的俗稱）小可愛們清奇的腦洞。
3. 網易考拉主題：《入職第一天，網易爸爸教我學做人》
H5體驗鏈接： http://wy.youyuq.com/h5/wyklhw/index.php（手機端）
玩法：以職場為背景，運用誇張的手法，描述了一個職場新人，剛入職時，面臨的種種場景，譬如對公司福利的好奇，對同事和領導的捉摸不透，工作任務的繁忙與刺激，以及過程中的出糗和順利完成工作的喜悦感。
通過各種梗，用有趣的方式呈現了一個職場新人剛入職的故事。就在你看戲正入迷時，戲也演的差不多了，最後開始切入正題了——一個小小的訴求，「幫豬你Y轉正」，直接跳轉到網易考拉首頁。
亮點：選用“新員工入職的事件”很親民，因為大多數用户都經歷過或者正經歷着；而戲精的表達特點就更吸引用户的眼球啦。
最後這個H5也獲得了上線3天，刷屏500萬的好成績，相關微博話題閲讀量衝破 2000 萬，活動轉化賣貨量達到了數百萬。如果你想回顧這個多戲的H5也可以掃碼試試～
二、騰訊1. 騰訊新聞主題：吳亦凡即將入伍？
玩法：看版面是“騰訊娛樂”的一篇報道，標題和內容都表明吳亦凡理了個圓寸頭，似乎要為入伍做準備。
往下繼續拉，有個視頻：
突然畫風一轉，網頁排版出現了嚴重錯亂，吳亦凡從屏幕一側冒了出來，嚇人一跳：他竟然轉身把騰訊新聞的頁面像幕布一樣撕掉了，撕掉了！！！
出現了攝影棚的綠色背景牆，吳亦凡聲稱稍後電話聯繫，緊接着就發來了視頻聊天：
點擊接聽吧。
最後，知道真相的網友眼淚留下來。
原來這徹頭徹尾就是騰訊槍戰手遊的一篇廣告，可不就是要入伍嗎？？？
亮點：2015年以前，大部分H5都是以單純圖文、富媒體形式存在，H5《吳亦凡即將入伍？》利用吳亦凡的明星虹吸效應，開頭的新聞版面有很大的迷惑性，而且全程跟用户“玩”起來了，毫無違和感。
在技術+技巧方面，整個H5是兩個視頻之間的交互，對於這樣的創意，除了看熱鬧的吃瓜羣眾，還引發了設計師和開發者的津津樂道。
不得不佩服，騰訊真會玩！我認為這個堪稱鼻祖級的視頻交互H5。
主題：《薛之謙2個月沒寫段子，結果憋了個大招》
玩法：這個玩法就相對更簡單些，用户只要往上拖拽屏幕（就像平時正常的刷手機屏），就可以觸發視頻的播放。
前面的背景是介紹薛之謙本身是一個漫迷，然後也很直接的説，他要代言騰訊動漫，手指往上一滑，就進入了視頻事件，內容主要是通過各種梗、各種與動漫相關的自娛自樂的場景來吸引用户，一直戲精到最後，直接切入轉化部分——“看這麼久該下載了”。（遺憾的是該作品已經失效，無法觀看）
亮點：我認為這個H5有三個值得討論的亮點，一是靈魂人物的選擇，當時薛之謙在當時正是紅透半邊天的明星，還因為寫段子的梗更是經常上熱門；二是以視頻交互的交互方式，在操作以及感官上讓用户耳目一新。三是以緊扣主題「騰訊動漫」的內容進行戲精化表達。
這個自帶流量的H5也獲得了，在微信上發佈3小時，PV就突破120W的驚人效果。
主題：尋找瀕臨滅絕的腳印 H5 【4月22日：地球日（公益）】
玩法：H5中尋找不同的瀕臨滅絕的動物腳印，並且引導用户拍照，組合成“擊掌為盟”✋。詳細玩法，大家可以掃碼體驗喲～
H5體驗鏈接：https://ss1.baidu.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/yunying/earthday2019/index.html?v=20190422 （手機端）
亮點：人類常以擊掌作為結盟誓約的象徵，掌心相對，簡單的動作卻有着舉重若輕的意義。百度由此發起一場
人與動物中間的“擊掌為盟”，希望號召更多人蔘與到保護瀕危動物的道路中來。
其實，我在上面為大家分享的幾款H5基本都是以營銷轉化為目的，值得一提的是，百度這次就獨闢蹊徑，在H5引導用户去了解萌獸，尋找腳印，在現實中卻倡導不去打擾它們的棲息地，就是對瀕危動物最大的保護。
為了讓更多人能夠參與，百度聯合明星一起與萌獸擊掌為盟，讓公益達到最佳聲量。以公益為主題，當然了，最後還是獲得了不少用户的讚賞。還有不少用户的反響非常激烈，黑轉粉！！！
這裏我隨意挑選了3個我比較喜歡且優秀的H5作品，大家可以複製鏈接查看。
1. 《今年我最喜歡的H5廣告》
H5體驗鏈接：https://fileec7b34fed730.h5sys.cn/idea/y3soPGo（手機端）
2. 《7.19 魅族 MX6 這樣玩陌陌真的好嗎》
H5體驗鏈接：https://filee84a91aca238.h5sys.cn/idea/dNORmep（手機端）
3. 《你，有什麼資格睡覺？》
H5體驗鏈接：https://file0c8a0952908d.h5sys.cn/idea/Yo9cBZM?nid=3990844&wxid=oAiTdwE8YW9_N6LXJhWY-HzidLdY（手機端）
總結通過上面的這些案例，你可能會感到經典，從它們的發佈時間上都是三五年前的作品，不過我從來都不認為這些作品過時。
或許跟我一樣，你會發現這兩年以來在微信刷屏的H5作品已經很少。畢竟絕大多數中小企業對與H5這個工具也僅僅侷限應用在傳播內容，隨着這兩年短視頻浪潮的興起，以及製作短視頻、如通訊信號等基礎設施的完善與普及，取而代之的就是一個個短視頻；在營銷方面，也被電商直播所取代。
相信使用過H5的運營者都會疑問——H5真的落後了嗎？
我們先從下表看看H5與短視頻&電商直播之間的差異在哪：
2018年春節開始，短視頻席捲整個移動互聯網，至今短視頻依舊是表達短內容&核心內容最流行的表達方式；2020年第一季度，電商直播開始興起，以薇婭、李佳琦及辛巴為首的一線電商直播的主播被網友所熟知，隨即網絡名人羅永浩、各路明星網紅，甚至格力董事長董明珠、搜狐創始人張朝陽等企業大腕都開始電商直播賣貨；幾個月過後，來到第二季度，就開始有新媒體開始頻頻披露各種直播賣貨翻車的事件。
從替代的角度去分析，短視頻確實是一種傳播內容的好方式，而電商直播賣貨的本質僅僅是一種新的促銷場景，促銷方面，優惠肯定會有下限，就不展開了，核心問題是這種直播場景（名人/IP+直播）再也不能誘發用户產生購買的動機和情緒時，“翻車”就是註定的結局。
短視頻&直播電商的本質是通過提供價值（內容價值和商品價值）來培養忠誠度及提高產品經濟效益。
而H5作為一種工具，我們使用它的本質集中在通過創意提升品牌傳播，進而培養用户忠誠度，或者通過創意來提高用户信任，進而提高產品轉化。它們的本質不同，直接比較的意義不大。
總的來講，H5是一種既能傳播內容，又能承擔與用户進行創意交互互動、產品營銷及品牌傳播大任的移動互聯網工具，現在判斷它被淘汰為時過早。我個人認為只要移動終端是主流，H5這種交互方式依舊能更好地為我們所用。
它們之間並沒有好壞，奈何短視頻&電商直播的風口就擺在這兒，大多數人在面對兩種選擇時，都會選擇其中更折中的方式，也就是更容易操作的短視頻&電商直播。
只是慨嘆，創意真的太稀缺！
附：H5交互手勢隨着H5技術的發展，到了今天H5的玩法已經有了質的突破。不僅交互形式超多，形式與內容也能緊密結合，產生1+1大於2的效果，接着我跟大家分享下當下最熱門的H5交互手勢。
1. 單擊交互點擊是最常見的手勢之一，可以用在頁面轉場上。這種交互手勢，一般需要設置點擊引導。引導可以作為註釋幫助用户理解H5，讓用户跟着H5的思路行動，推動劇情發展。與主題相符的個性化的引導設計，能快速將用户帶入情境。
點擊手勢也常用在測試型H5上，用户點擊屏幕選擇不同選項，生成專屬測試結果。
連擊交互主要應用在遊戲類H5中。連續點擊屏幕的節奏感比較強，關聯點擊次數與積分排名，則會帶有競技性，能刺激分享、吸引更多人蔘與。這種單一的交互方式操作比較簡單，所以會搭配限時、限次等玩法。
網易噠噠的《漫威電影十週年》H5設計了一個“揍”滅霸的環節，用户需要猛點屏幕，記錄10秒內時間“揍”滅霸的次數。10秒結束後，用户可看到連擊的次數和自己全網排名。
長按需要用户根據引導，長時間接觸H5頁面中的某處按鈕，保證畫面的連續播放和順利轉場。
由於長按需要用户的手指保持靜止的停頓狀態，用户可能會感到無聊乏味。在設計時，最好可以提示H5的播放進度，給予用户時長參考。
長按交互常用於一鏡到底形式的H5。往往考驗故事的銜接和鏡頭的轉換，運用得當可以帶給用户很好的體驗，讓用户精神更加集中，從而提升完播率。
《1分鐘漫遊珠港澳大橋》也是通過長按前進，展示港珠澳大橋的風景。為了不讓用户感到無聊，H5每隔一段距離會顯示“走過”的公里數，提示播放進度。
長圖視差交互常搭配滑動手勢進行，帶動H5連貫播放。
視差動畫由於運動速率與主視覺畫面不同，空間層次感更加鮮明。這可以增加畫面的新鮮感，緩解高密度內容帶來的的視覺疲勞。減少閲讀長圖文時的乏味，從畫面效果上輔助H5流暢轉場。
《我在童話裏遇到你的時光》使用一張長圖，滑動時會有一些小元素穿插過場，使得整支H5看起來炫酷又豐富。
拖拽區別於滑動，需要按着屏幕不鬆手，從一個點拖到另一個點，移動速度由用户控制，適合圖片展示類或敍事類的策劃專題。
網易噠噠的《睡姿大比拼》H5利用了骨骼動畫技術，用户可以拖動小人的四肢，DIY自己在牀上的睡姿。
除了可以選擇場景、人物外貌，H5還提供牀上的小物件做搭配，放大或縮小後用來佈置卧室。
雙指交互需要用户兩隻手指同時接觸屏幕，比如滑動屏幕放大或縮小某物，也常用於畫面轉場。
這種交互方式對手勢的微操有要求，玩法有些複雜。但互動性比單指點擊、滑動更強，也更具趣味性。
在H5中，也有一種較常見的回答問題的方式，也會用到拖拽與雙指縮放交互手勢並用的場景。
除了觸覺交互，還有聽覺交互。聲音交互方式比較少見，大多與錄音有關，按照H5引導錄一段話，DIY生成專屬音頻。
書寫交互是自由度較高的互動方式，用户可以根據提示自由創作文字、圖畫。
通過繪畫創作出來的形象個性鮮明，也是用户情緒的體現，面對自己繪製的角色，用户也能更用心地投入到H5，流失率往往不高。
這些形象雖然線條有些粗糙，運動起來與背景對比鮮明，但是因為是原創角色，用户對畫面的包容性也更強。
網易新聞的H5《以你之名，守護漢字》可以輸入自己的名字，找到需要自己守護的瀕危漢字。
H5測試生成的都是日常很少用到的生僻字，主題“守護”漢字，既可以讓用户認識這些瀕危漢字，也能夠給予用户一種使命感，將漢字主動分享傳播。
9. 重力交互模擬現成的物理規律能大大降低理解門檻，還能為策劃增添趣味性。
手機在硬件上給出了很多技術發揮的可能性，活用重力感應、陀螺儀、速度加速器等硬件設備可以創新H5玩法，增加代入感。搖晃手機時，H5會自動判斷手機傾斜的角度。
由於技術性比較強，所以重力交互常用在某個特定頁面。
網易新聞的《時空戀愛事務所》就是利用手機重力傳感器，搖晃手機喚醒主人公，開始劇情。
3D交互主要利用3D技術，搭建立體化場景，突破畫面扁平化的限制，強調層次感以及還原用户的臨場感，H5玩起來更加真實。
但這種交互方式在開發設計環節難度較大，考慮到用户的使用習慣，3D交互的玩法也比較單一，常搭配點擊、滑動等基礎手勢操作，3D作為H5亮點出現。
在360°全景形式中，用户可以上下、左右滑動。
這種H5以類VR的形式承載整個畫面交互，更注重H5場景的設計，空間立體感比較強，要求畫面360°邊界銜接流暢。
不過由於加載內容較多，H5體量較大，很可能會出現播放時畫面卡頓等問題。
好，有關H5營銷、品牌、互動相關的內容就這兒～
你對這幾類H5有什麼深刻回憶嗎？或者現在流行的短視頻直播、電商直播有什麼看法？歡迎大家留言交流，一起進步。
預告一波：下一期我將會分享產品用户社區相關內容哦～～
素材來源：上述案例素材來源網絡及網易噠噠團隊，僅作交流學習。
作者：聖傑，一個樂觀而幽默的理想主義者。專注互聯網運營及研究，交流學習微信：heezha。個人微信公眾號：運營進化史，歡迎大家一起交流～
本文由 @聖傑 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議