PC 時代，設計師們就基于 H5 開發(fā)了眾多交互性能強大的酷站，進入移動時代，交互設計師們更是如魚得水，結(jié)合移動端的重力感應、豎屏顯示、手勢交互等全新玩法，開創(chuàng)了全新的交互時代。

fff.cmiscm.com 網(wǎng)站收錄了 15 個基于 H5 創(chuàng)建的極具創(chuàng)意的網(wǎng)站

所以說， 朋友圈 H5 進化史可以看做是新媒體交互設計進化史。

圖文型

2014 年開始，朋友圈開始出現(xiàn)一些簡單圖文形式的 H5，早期圖文型 H5 只需要用戶通過簡單的翻頁、點擊就可以參與其中，展現(xiàn)效果類似于 PPT。應用場景主要包括移動網(wǎng)站、邀請函、年終總結(jié)、產(chǎn)品推廣等。

制作網(wǎng)站是 H5 在 PC 端最廣泛的用法，所以，當 H5 應用到移動端時，設計師們首先會想到的就是制作移動網(wǎng)站。

比如，歐香小鎮(zhèn)、燕楠國際等品牌就基于 H5 制作了移動網(wǎng)站。

邀請函也是圖文型H5的主要應用場景之一，比如《奔馳 C 級上市邀請函》和《微信公開課 PRO 版邀請函》都是當時的典型代表。

2014 年，一些品牌開始嘗試用 H5 推廣產(chǎn)品，比如錘子手機、特斯拉等，僅僅采用精美圖片加上簡單的翻頁動效，最終的呈現(xiàn)效果卻超越了當時人們對微信營銷的想象。

2014 年 4 月，著名奢侈品牌Burberry 推出的 H5 《從倫敦到上海的旅程》是當時交互體驗的集大成者。第一步，“搖一搖”，開始體驗；第二步，點擊屏幕進入油畫般的倫敦清晨；第三步，摩擦屏幕使晨霧散去；第四步，點擊“河面”，河水泛起漣漪；最后點擊屏幕上的白點，達到終點站上海。

2014 年 5 月，可口可樂推出的《分享快樂 128 年》，將圖文型 H5 的交互又向前推進了一步。這支 H5 頁面上的每個元素都可以動。而且相較于原本的單頁翻動，更注重跨頁連接，一根貫穿畫面始終的“紅線”，讓畫面在視覺上更加流暢和統(tǒng)一。

此后，長圖型 H5 逐漸多了起來，正式引爆可以追溯到 2017 年 5 月，百雀羚刷屏長圖《一九三一》開辟了長圖型圖文H5的新形式，這種形式非常適合移動端閱讀，迅速為大眾接受。

2018 年 8 月，騰訊云推出的《山城云居圖》采用了橫屏長圖的形式。

2018 年 9 月，網(wǎng)易的公益H5《她掙扎48小時后死去，無人知曉》在朋友圈刷屏，這支 H5 在長圖的基礎上，融合滑動動畫等表現(xiàn)形式，為圖文型 H5 增加了新的創(chuàng)意，效果令人震撼：

活動型

活動型 H5 也是較早出現(xiàn)的 H5 類型，主要包括紅包、抽獎、投票、砍價、拼團等，這類 H5 模式和技術都非常簡單，但因為由直接利益驅(qū)動，傳播力較強。

口令紅包、語音紅包、簽到抽獎、砍價拼團（來源：人人秀官網(wǎng)）

常規(guī)的活動型 H5 往往缺乏情節(jié)設計，非常單調(diào)，為了更好地促使用戶點擊和分享，一些活動類 H5 開始探尋新的玩法。

比如，2016 年 1 號店推出的 H5《姐妹花的煩惱》，打破了常規(guī)活動類 H5 的俗套，在推出促銷活動前添加了故事情節(jié)，以吐槽物價高為主題，在表現(xiàn)形式上機智地拿人民幣開玩笑，角色直接取自于一元紙幣上的少數(shù)民族形象，最后一頁才出現(xiàn) 1 號店的促銷活動。

游戲型

2014 年 7 月 22 日起，一款名為“圍住神經(jīng)貓”的H5小游戲開始在微信朋友圈瘋傳，此后，游戲類 H5 如“2048”、杜蕾斯“一夜N次郎”（即山寨版“別踩白塊兒”）等游戲類 H5 層出不窮。

近年來火爆的游戲型 H5 大都是簡單的小游戲，用戶只需要通過簡單交互，便可參與。比如，2017 年 ofo 推出的 H5《小黃車研發(fā)車間》，利用點擊、滑動、搖一搖等簡單交互，讓用戶參與造車小游戲。

2017 年 9 月，網(wǎng)易嚴選推出了一個為強迫癥患者量身定做的 H5 小游戲《好難受，強迫癥受不了了》，通過對齊木塊、將彩色球排列完整、救活枯萎的花、消除俄羅斯方塊、修剪一下樹木等 5 個“強迫癥”小游戲來展現(xiàn)“極致美學”，不過，這個小游戲里除了簡單的點擊、滑動等外，還應用了重力感應等更復雜的交互。

2017 年 11 月 19 日，世界廁所日，網(wǎng)易新聞以此為主題，通過小游戲的形式，了解了三個有趣的廁所新聞和一個廁所文化。

2018年草莓音樂節(jié)的宣傳H5和網(wǎng)易的H5《你的工位有貓，我的工位有刀》、《睡姿大比拼》等都屬于DIY型的小游戲。

創(chuàng)意廣告公司 Dopemine 在 2016 年推出的《活口》在玩法上有很大不同，采用了真人密室逃脫的形式，設計和交互上更為復雜。

測試型

測試型 H5 以問答、評分、測試為表現(xiàn)形式，利用用戶的好奇心，引導用戶參與問答，并分享最終結(jié)果。測試類 H5 一般分為三大類型：運勢占卜、知識測試、心理測試，剛開始出現(xiàn)的時候以運勢占卜為主，慢慢開始出現(xiàn)有趣的知識測試類型，近 2 年刷屏的測試類 H5 大都以心理測試為主。

1.運勢占卜

通過在線抽簽、塔羅牌等形式進行運勢占卜。在新年、春節(jié)之類的喜慶日子，人們都很喜歡玩占卜游戲來祈求福運，此類H5操作容易，符合傳統(tǒng)習俗，因而備受歡迎。比如，攜程旅行在2016年推出的H5《我的2016福地》就引導用戶從“愛情、事業(yè)、健康、財運”中任意選擇一個自己想了解的福地，然后點擊“探尋我的福地”，測試出2016年自己的福地。

2.知識測試

傳播度較高的知識測試，通常是針對一些有趣的常識類知識進行的。比如，2017年愛奇藝推出的《2017七夕直男考卷》針對男女朋友間相處的一些趣事進行測試，取得了微信當天pv2646.6萬，分享成功次數(shù)137.8萬的成績。

騰訊視頻在 2017 年推出的 H5《測測娛樂圈有沒有你的一席之地》則是以當時熱門的綜藝、電視劇、明星相關資訊為題，并結(jié)合傳統(tǒng)考試題型進行設計。

3.心理測試

心理測試型 H5 一般通過答題來給測試者的認知、行為、情感的心理活動予以量化，幫助其了解自己的情緒、行為模式和人格特點。

近年來大火的測試型H5大都屬于這種類型，比如，2018年8月，京東推出的《你是哪種走紅體質(zhì)》，F(xiàn)IYTA&網(wǎng)易云音樂聯(lián)合推出的《你有戀愛的天分嗎》，2018年9月，飛利浦推出的《友情鑒定書——塑料指數(shù)大檢驗》，海底撈推出的《測測你在宮斗劇中能活到第幾集》，2018年10月，小米互娛《測一測你在戀愛中的形象》等。

2018 年 8 月，網(wǎng)易云音樂和第5人格聯(lián)合推出的《你的榮格心理學原型》采用對話的形式，非常新穎，而且非常適合用于心理學測試，讓被測者更輕松。

H5 二維碼已被微信屏蔽，用 QQ 掃碼，或網(wǎng)易云音樂 App 首頁 banner 進入

2018 年 10 月，貓眼電影推出的《假如影子有生命》，為每一個選項設置了不同的動畫效果，而不是簡單地跳轉(zhuǎn)到下一題，使得測試類H5的視覺效果又上了一個臺階。但心理學測試的選題過于老套，文案也缺乏亮點。

快閃型

快閃是指在短時間內(nèi)，快速閃過大量文字或圖片信息的一種視頻制作方式。國內(nèi)最早使用快閃形式進行營銷的品牌是蘋果。2016 年 9 月，蘋果在 iPhoe7 發(fā)布會結(jié)束后，采用快閃的形式，將 2小時的發(fā)布會濃縮成了 107 秒的快閃短視頻，引發(fā)了巨大的傳播和討論。

蘋果107S快閃，形式簡潔，但細節(jié)非常考究

此后，國內(nèi)使用快閃形式進行營銷的品牌層出不窮，比如凱迪拉克 30S 快閃廣告、CMF 設計快閃宣傳片、京東《閑置衣物》公益快閃廣告等，但在質(zhì)量上很少能和蘋果的快閃媲美。

快閃形式在 H5 中也開始應用，觀看形式由橫版變成了豎版，并且融入了 H5 中特有的交互形式。比如，人民日報在 2017 年推出的快閃 H5《為我黨傳播力瘋狂打call》以及《史上最牛創(chuàng)業(yè)經(jīng)》，都在朋友圈瘋狂刷屏，之后，快閃這種H5的新形式開始受到熱烈的追捧。

比如，蘇寧易購在 2017 年雙 11 推出的 H5，2017 年全運會宣傳 H5 都是快閃形式。

模擬界面型

模擬界面，就是模擬不同的移動端界面，進行場景的構建和情節(jié)的開展。目前常見的類型有模擬微信界面、模擬來電界面、模擬新聞界面、模擬抖音界面等。

1.模擬微信界面

模擬微信界面是模擬界面類 H5 中最常見的類型，包括微信群聊、朋友圈、微信文章等多種形式。

2015 年，大眾點評推出的 H5《四大導師拯救麥渣》偽裝成微信文章，利用當時很火爆的選秀節(jié)目中國好聲音，結(jié)合四大導師來推廣大眾點評的KTV資源。

2016 年 4 月份寶馬推出的 H5《該新聞已被BMW快速刪除》開頭模擬微信公眾號文章頁面，當用戶點擊后，新聞網(wǎng)頁像紙一樣被寶馬 M2 跑車劃破，接著視頻新聞、朋友圈和音樂播放器都被它呼嘯碾過，極具沖擊力。　

未來應用為 2017 年兩會定制的 H5，就結(jié)合了微信群聊、微信朋友圈等形式，成功在朋友圈刷屏。

有道翻譯官在 2017 年推出的 H5《深夜，男同事問我睡了嗎》結(jié)合了微信聊天和群聊的形式，因為標題有吸引力，且文案設計活潑幽默，也取得了刷屏效果。

新媒體人王高高模擬微信公眾號界面制作了一份個人簡歷，文案生動幽默，形式新穎。

2.模擬手機界面

包括模擬手機屏幕、模擬來電、模擬siri等。微信朋友圈中大范圍傳播的第一個模擬電話場景的 H5,是 2015 年大眾點評為推廣電影《復仇者聯(lián)盟2》定制的H5《這個陌生來電你敢接嗎？》，通過用戶收到未知來電，接聽后屏幕被婦聯(lián)的人物武器不斷敲擊，最終“碎屏”，創(chuàng)意表現(xiàn)手法與《復仇者聯(lián)盟2》的電影調(diào)性完美結(jié)合。

2016 年網(wǎng)易游戲倩女幽魂推出的 H5《頭條|誰約到了楊洋》采用了模擬手機屏幕的形式，在 H5 中，楊洋通過幫用戶擦手機屏幕、整理手機 APP 等方式與用戶互動。

3.模擬新聞界面

2015年，騰訊游戲全民突擊推出的H5《吳亦凡即將入伍》采取了模擬騰訊新聞界面的形式，然后轉(zhuǎn)變成視頻通話，最后再鏈接到廣告頁面。

4.模擬抖音界面

模擬抖音界面主要應用在抖音官方的推廣H5中，比如2017年推出的《世界名畫抖抖抖抖起來了》、2018年推出的《抖音美好奇妙夜》等。

雙屏互動型

2015 年，朋友圈開始出現(xiàn)雙屏互動型 H5，這種類型的 H5 需要 2 臺手機共同掃碼完成互動，交互性能比其他 H5 顯著增強。

2015 年，奔馳推出的 H5《鵲橋會，愛更多》采用雙屏互動的形式，模擬喜鵲搭橋場景，當兩臺手機合并的時候，一座鵲橋就搭建完成，并出現(xiàn)唯美的愛心畫面，同時車的后備箱出現(xiàn)玫瑰花，非常浪漫。

2015 年，六神推出的 H5《在夏天在一起》通過買通票的方式，模擬電影院讓兩位觀眾欣賞到一部制作精良的夏夜動畫。

一鏡到底型

一鏡到底是指看上去幾乎不用剪輯，沒有切換，一個鏡頭從頭到尾，完整記錄整個事件的發(fā)生過程。這種藝術手法源于電影產(chǎn)業(yè)，最早出現(xiàn)在美國波普藝術家安迪·沃霍爾拍攝的紀錄片《帝國大廈》中。1964 年，他將攝影機對著帝國大廈毫不變換機位、景別地拍了 485 分鐘。

紀錄片《帝國大廈》劇照

第 87 屆奧斯卡金像獎最佳影片《鳥人》也是一部經(jīng)典的一鏡到底的影片。

電影《鳥人》海報

2017 年，網(wǎng)易新聞推出的 H5《章瑩穎失蹤 74 天了，全世界都想找到她》就采用了一鏡到底的形式，通過一張長圖，結(jié)合滑動動畫，非常清晰流暢地呈現(xiàn)了新聞事件的經(jīng)過。

VR全景型

VR全景是指利用計算機生成一個全方位的虛擬現(xiàn)實環(huán)境，許多科幻電影都用到了 VR 技術進行拍攝，如《黑客帝國》、《阿凡達》等等。

電影《阿凡達》劇照

隨著 VR 技術的逐漸成熟，應用 VR 技術的 H5 逐漸增多，比如，《穿越宇宙的邀請函》是天貓在2016年制作的一個結(jié)合VR技術及一鏡到底的H5，試聽效果非常震撼。

未來

從形式上來說，每一次新技術的出現(xiàn)都會帶來新的創(chuàng)意形式，比如，當下大火的人工智能技術也開始在 H5 領域應用，出現(xiàn)了《人工智能為你定制春聯(lián)》、《詩與故鄉(xiāng)》等經(jīng)典案例。

從內(nèi)容上來說，所有刷屏型 H5 本質(zhì)上都在做一件事情——抓住一種情緒，講好一個故事。