朋友圈 H5 進(jìn)化簡史
從內(nèi)容上來說，所有刷屏型 H5 本質(zhì)上都在做一件事情——抓住一種情緒，講好一個(gè)故事。
PC 時(shí)代，設(shè)計(jì)師們就基于 H5 開發(fā)了眾多交互性能強(qiáng)大的酷站，進(jìn)入移動(dòng)時(shí)代，交互設(shè)計(jì)師們更是如魚得水，結(jié)合移動(dòng)端的重力感應(yīng)、豎屏顯示、手勢交互等全新玩法，開創(chuàng)了全新的交互時(shí)代。
fff.cmiscm.com 網(wǎng)站收錄了 15 個(gè)基于 H5 創(chuàng)建的極具創(chuàng)意的網(wǎng)站
所以說， 朋友圈 H5 進(jìn)化史可以看做是新媒體交互設(shè)計(jì)進(jìn)化史。
圖文型
2014 年開始，朋友圈開始出現(xiàn)一些簡單圖文形式的 H5，早期圖文型 H5 只需要用戶通過簡單的翻頁、點(diǎn)擊就可以參與其中，展現(xiàn)效果類似于 PPT。應(yīng)用場景主要包括移動(dòng)網(wǎng)站、邀請(qǐng)函、年終總結(jié)、產(chǎn)品推廣等。
制作網(wǎng)站是 H5 在 PC 端最廣泛的用法，所以，當(dāng) H5 應(yīng)用到移動(dòng)端時(shí)，設(shè)計(jì)師們首先會(huì)想到的就是制作移動(dòng)網(wǎng)站。
比如，歐香小鎮(zhèn)、燕楠國際等品牌就基于 H5 制作了移動(dòng)網(wǎng)站。
邀請(qǐng)函也是圖文型H5的主要應(yīng)用場景之一，比如《奔馳 C 級(jí)上市邀請(qǐng)函》和《微信公開課 PRO 版邀請(qǐng)函》都是當(dāng)時(shí)的典型代表。
2014 年，一些品牌開始嘗試用 H5 推廣產(chǎn)品，比如錘子手機(jī)、特斯拉等，僅僅采用精美圖片加上簡單的翻頁動(dòng)效，最終的呈現(xiàn)效果卻超越了當(dāng)時(shí)人們對(duì)微信營銷的想象。
2014 年 4 月，著名奢侈品牌Burberry 推出的 H5 《從倫敦到上海的旅程》是當(dāng)時(shí)交互體驗(yàn)的集大成者。第一步，“搖一搖”，開始體驗(yàn)；第二步，點(diǎn)擊屏幕進(jìn)入油畫般的倫敦清晨；第三步，摩擦屏幕使晨霧散去；第四步，點(diǎn)擊“河面”，河水泛起漣漪；最后點(diǎn)擊屏幕上的白點(diǎn)，達(dá)到終點(diǎn)站上海。
2014 年 5 月，可口可樂推出的《分享快樂 128 年》，將圖文型 H5 的交互又向前推進(jìn)了一步。這支 H5 頁面上的每個(gè)元素都可以動(dòng)。而且相較于原本的單頁翻動(dòng)，更注重跨頁連接，一根貫穿畫面始終的“紅線”，讓畫面在視覺上更加流暢和統(tǒng)一。
此后，長圖型 H5 逐漸多了起來，正式引爆可以追溯到 2017 年 5 月，百雀羚刷屏長圖《一九三一》開辟了長圖型圖文H5的新形式，這種形式非常適合移動(dòng)端閱讀，迅速為大眾接受。
2018 年 8 月，騰訊云推出的《山城云居圖》采用了橫屏長圖的形式。
2018 年 9 月，網(wǎng)易的公益H5《她掙扎48小時(shí)后死去，無人知曉》在朋友圈刷屏，這支 H5 在長圖的基礎(chǔ)上，融合滑動(dòng)動(dòng)畫等表現(xiàn)形式，為圖文型 H5 增加了新的創(chuàng)意，效果令人震撼：
活動(dòng)型
活動(dòng)型 H5 也是較早出現(xiàn)的 H5 類型，主要包括紅包、抽獎(jiǎng)、投票、砍價(jià)、拼團(tuán)等，這類 H5 模式和技術(shù)都非常簡單，但因?yàn)橛芍苯永骝?qū)動(dòng)，傳播力較強(qiáng)。
口令紅包、語音紅包、簽到抽獎(jiǎng)、砍價(jià)拼團(tuán)（來源：人人秀官網(wǎng)）
常規(guī)的活動(dòng)型 H5 往往缺乏情節(jié)設(shè)計(jì)，非常單調(diào)，為了更好地促使用戶點(diǎn)擊和分享，一些活動(dòng)類 H5 開始探尋新的玩法。
比如，2016 年 1 號(hào)店推出的 H5《姐妹花的煩惱》，打破了常規(guī)活動(dòng)類 H5 的俗套，在推出促銷活動(dòng)前添加了故事情節(jié)，以吐槽物價(jià)高為主題，在表現(xiàn)形式上機(jī)智地拿人民幣開玩笑，角色直接取自于一元紙幣上的少數(shù)民族形象，最后一頁才出現(xiàn) 1 號(hào)店的促銷活動(dòng)。
游戲型
2014 年 7 月 22 日起，一款名為“圍住神經(jīng)貓”的H5小游戲開始在微信朋友圈瘋傳，此后，游戲類 H5 如“2048”、杜蕾斯“一夜N次郎”（即山寨版“別踩白塊兒”）等游戲類 H5 層出不窮。
近年來火爆的游戲型 H5 大都是簡單的小游戲，用戶只需要通過簡單交互，便可參與。比如，2017 年 ofo 推出的 H5《小黃車研發(fā)車間》，利用點(diǎn)擊、滑動(dòng)、搖一搖等簡單交互，讓用戶參與造車小游戲。
2017 年 9 月，網(wǎng)易嚴(yán)選推出了一個(gè)為強(qiáng)迫癥患者量身定做的 H5 小游戲《好難受，強(qiáng)迫癥受不了了》，通過對(duì)齊木塊、將彩色球排列完整、救活枯萎的花、消除俄羅斯方塊、修剪一下樹木等 5 個(gè)“強(qiáng)迫癥”小游戲來展現(xiàn)“極致美學(xué)”，不過，這個(gè)小游戲里除了簡單的點(diǎn)擊、滑動(dòng)等外，還應(yīng)用了重力感應(yīng)等更復(fù)雜的交互。
2017 年 11 月 19 日，世界廁所日，網(wǎng)易新聞以此為主題，通過小游戲的形式，了解了三個(gè)有趣的廁所新聞和一個(gè)廁所文化。
2018年草莓音樂節(jié)的宣傳H5和網(wǎng)易的H5《你的工位有貓，我的工位有刀》、《睡姿大比拼》等都屬于DIY型的小游戲。
創(chuàng)意廣告公司 Dopemine 在 2016 年推出的《活口》在玩法上有很大不同，采用了真人密室逃脫的形式，設(shè)計(jì)和交互上更為復(fù)雜。
測試型
測試型 H5 以問答、評(píng)分、測試為表現(xiàn)形式，利用用戶的好奇心，引導(dǎo)用戶參與問答，并分享最終結(jié)果。測試類 H5 一般分為三大類型：運(yùn)勢占卜、知識(shí)測試、心理測試，剛開始出現(xiàn)的時(shí)候以運(yùn)勢占卜為主，慢慢開始出現(xiàn)有趣的知識(shí)測試類型，近 2 年刷屏的測試類 H5 大都以心理測試為主。
1.運(yùn)勢占卜
通過在線抽簽、塔羅牌等形式進(jìn)行運(yùn)勢占卜。在新年、春節(jié)之類的喜慶日子，人們都很喜歡玩占卜游戲來祈求福運(yùn)，此類H5操作容易，符合傳統(tǒng)習(xí)俗，因而備受歡迎。比如，攜程旅行在2016年推出的H5《我的2016福地》就引導(dǎo)用戶從“愛情、事業(yè)、健康、財(cái)運(yùn)”中任意選擇一個(gè)自己想了解的福地，然后點(diǎn)擊“探尋我的福地”，測試出2016年自己的福地。
2.知識(shí)測試
傳播度較高的知識(shí)測試，通常是針對(duì)一些有趣的常識(shí)類知識(shí)進(jìn)行的。比如，2017年愛奇藝推出的《2017七夕直男考卷》針對(duì)男女朋友間相處的一些趣事進(jìn)行測試，取得了微信當(dāng)天pv2646.6萬，分享成功次數(shù)137.8萬的成績。
騰訊視頻在 2017 年推出的 H5《測測娛樂圈有沒有你的一席之地》則是以當(dāng)時(shí)熱門的綜藝、電視劇、明星相關(guān)資訊為題，并結(jié)合傳統(tǒng)考試題型進(jìn)行設(shè)計(jì)。
3.心理測試
心理測試型 H5 一般通過答題來給測試者的認(rèn)知、行為、情感的心理活動(dòng)予以量化，幫助其了解自己的情緒、行為模式和人格特點(diǎn)。
近年來大火的測試型H5大都屬于這種類型，比如，2018年8月，京東推出的《你是哪種走紅體質(zhì)》，F(xiàn)IYTA&網(wǎng)易云音樂聯(lián)合推出的《你有戀愛的天分嗎》，2018年9月，飛利浦推出的《友情鑒定書——塑料指數(shù)大檢驗(yàn)》，海底撈推出的《測測你在宮斗劇中能活到第幾集》，2018年10月，小米互娛《測一測你在戀愛中的形象》等。
2018 年 8 月，網(wǎng)易云音樂和第5人格聯(lián)合推出的《你的榮格心理學(xué)原型》采用對(duì)話的形式，非常新穎，而且非常適合用于心理學(xué)測試，讓被測者更輕松。
H5 二維碼已被微信屏蔽，用 QQ 掃碼，或網(wǎng)易云音樂 App 首頁 banner 進(jìn)入
2018 年 10 月，貓眼電影推出的《假如影子有生命》，為每一個(gè)選項(xiàng)設(shè)置了不同的動(dòng)畫效果，而不是簡單地跳轉(zhuǎn)到下一題，使得測試類H5的視覺效果又上了一個(gè)臺(tái)階。但心理學(xué)測試的選題過于老套，文案也缺乏亮點(diǎn)。
快閃型
快閃是指在短時(shí)間內(nèi)，快速閃過大量文字或圖片信息的一種視頻制作方式。國內(nèi)最早使用快閃形式進(jìn)行營銷的品牌是蘋果。2016 年 9 月，蘋果在 iPhoe7 發(fā)布會(huì)結(jié)束后，采用快閃的形式，將 2小時(shí)的發(fā)布會(huì)濃縮成了 107 秒的快閃短視頻，引發(fā)了巨大的傳播和討論。
蘋果107S快閃，形式簡潔，但細(xì)節(jié)非常考究
此后，國內(nèi)使用快閃形式進(jìn)行營銷的品牌層出不窮，比如凱迪拉克 30S 快閃廣告、CMF 設(shè)計(jì)快閃宣傳片、京東《閑置衣物》公益快閃廣告等，但在質(zhì)量上很少能和蘋果的快閃媲美。
快閃形式在 H5 中也開始應(yīng)用，觀看形式由橫版變成了豎版，并且融入了 H5 中特有的交互形式。比如，人民日?qǐng)?bào)在 2017 年推出的快閃 H5《為我黨傳播力瘋狂打call》以及《史上最牛創(chuàng)業(yè)經(jīng)》，都在朋友圈瘋狂刷屏，之后，快閃這種H5的新形式開始受到熱烈的追捧。
比如，蘇寧易購在 2017 年雙 11 推出的 H5，2017 年全運(yùn)會(huì)宣傳 H5 都是快閃形式。
模擬界面型
模擬界面，就是模擬不同的移動(dòng)端界面，進(jìn)行場景的構(gòu)建和情節(jié)的開展。目前常見的類型有模擬微信界面、模擬來電界面、模擬新聞界面、模擬抖音界面等。
1.模擬微信界面
模擬微信界面是模擬界面類 H5 中最常見的類型，包括微信群聊、朋友圈、微信文章等多種形式。
2015 年，大眾點(diǎn)評(píng)推出的 H5《四大導(dǎo)師拯救麥渣》偽裝成微信文章，利用當(dāng)時(shí)很火爆的選秀節(jié)目中國好聲音，結(jié)合四大導(dǎo)師來推廣大眾點(diǎn)評(píng)的KTV資源。
2016 年 4 月份寶馬推出的 H5《該新聞已被BMW快速刪除》開頭模擬微信公眾號(hào)文章頁面，當(dāng)用戶點(diǎn)擊后，新聞網(wǎng)頁像紙一樣被寶馬 M2 跑車劃破，接著視頻新聞、朋友圈和音樂播放器都被它呼嘯碾過，極具沖擊力?！?/p>
未來應(yīng)用為 2017 年兩會(huì)定制的 H5，就結(jié)合了微信群聊、微信朋友圈等形式，成功在朋友圈刷屏。
有道翻譯官在 2017 年推出的 H5《深夜，男同事問我睡了嗎》結(jié)合了微信聊天和群聊的形式，因?yàn)闃?biāo)題有吸引力，且文案設(shè)計(jì)活潑幽默，也取得了刷屏效果。
新媒體人王高高模擬微信公眾號(hào)界面制作了一份個(gè)人簡歷，文案生動(dòng)幽默，形式新穎。
2.模擬手機(jī)界面
包括模擬手機(jī)屏幕、模擬來電、模擬siri等。微信朋友圈中大范圍傳播的第一個(gè)模擬電話場景的 H5,是 2015 年大眾點(diǎn)評(píng)為推廣電影《復(fù)仇者聯(lián)盟2》定制的H5《這個(gè)陌生來電你敢接嗎？》，通過用戶收到未知來電，接聽后屏幕被婦聯(lián)的人物武器不斷敲擊，最終“碎屏”，創(chuàng)意表現(xiàn)手法與《復(fù)仇者聯(lián)盟2》的電影調(diào)性完美結(jié)合。
2016 年網(wǎng)易游戲倩女幽魂推出的 H5《頭條|誰約到了楊洋》采用了模擬手機(jī)屏幕的形式，在 H5 中，楊洋通過幫用戶擦手機(jī)屏幕、整理手機(jī) APP 等方式與用戶互動(dòng)。
3.模擬新聞界面
2015年，騰訊游戲全民突擊推出的H5《吳亦凡即將入伍》采取了模擬騰訊新聞界面的形式，然后轉(zhuǎn)變成視頻通話，最后再鏈接到廣告頁面。
4.模擬抖音界面
模擬抖音界面主要應(yīng)用在抖音官方的推廣H5中，比如2017年推出的《世界名畫抖抖抖抖起來了》、2018年推出的《抖音美好奇妙夜》等。
雙屏互動(dòng)型
2015 年，朋友圈開始出現(xiàn)雙屏互動(dòng)型 H5，這種類型的 H5 需要 2 臺(tái)手機(jī)共同掃碼完成互動(dòng)，交互性能比其他 H5 顯著增強(qiáng)。
2015 年，奔馳推出的 H5《鵲橋會(huì)，愛更多》采用雙屏互動(dòng)的形式，模擬喜鵲搭橋場景，當(dāng)兩臺(tái)手機(jī)合并的時(shí)候，一座鵲橋就搭建完成，并出現(xiàn)唯美的愛心畫面，同時(shí)車的后備箱出現(xiàn)玫瑰花，非常浪漫。
2015 年，六神推出的 H5《在夏天在一起》通過買通票的方式，模擬電影院讓兩位觀眾欣賞到一部制作精良的夏夜動(dòng)畫。
一鏡到底型
一鏡到底是指看上去幾乎不用剪輯，沒有切換，一個(gè)鏡頭從頭到尾，完整記錄整個(gè)事件的發(fā)生過程。這種藝術(shù)手法源于電影產(chǎn)業(yè)，最早出現(xiàn)在美國波普藝術(shù)家安迪·沃霍爾拍攝的紀(jì)錄片《帝國大廈》中。1964 年，他將攝影機(jī)對(duì)著帝國大廈毫不變換機(jī)位、景別地拍了 485 分鐘。
紀(jì)錄片《帝國大廈》劇照
第 87 屆奧斯卡金像獎(jiǎng)最佳影片《鳥人》也是一部經(jīng)典的一鏡到底的影片。
電影《鳥人》海報(bào)
2017 年，網(wǎng)易新聞推出的 H5《章瑩穎失蹤 74 天了，全世界都想找到她》就采用了一鏡到底的形式，通過一張長圖，結(jié)合滑動(dòng)動(dòng)畫，非常清晰流暢地呈現(xiàn)了新聞事件的經(jīng)過。
VR全景型
VR全景是指利用計(jì)算機(jī)生成一個(gè)全方位的虛擬現(xiàn)實(shí)環(huán)境，許多科幻電影都用到了 VR 技術(shù)進(jìn)行拍攝，如《黑客帝國》、《阿凡達(dá)》等等。
電影《阿凡達(dá)》劇照
隨著 VR 技術(shù)的逐漸成熟，應(yīng)用 VR 技術(shù)的 H5 逐漸增多，比如，《穿越宇宙的邀請(qǐng)函》是天貓?jiān)?016年制作的一個(gè)結(jié)合VR技術(shù)及一鏡到底的H5，試聽效果非常震撼。
未來
從形式上來說，每一次新技術(shù)的出現(xiàn)都會(huì)帶來新的創(chuàng)意形式，比如，當(dāng)下大火的人工智能技術(shù)也開始在 H5 領(lǐng)域應(yīng)用，出現(xiàn)了《人工智能為你定制春聯(lián)》、《詩與故鄉(xiāng)》等經(jīng)典案例。
從內(nèi)容上來說，所有刷屏型 H5 本質(zhì)上都在做一件事情——抓住一種情緒，講好一個(gè)故事。
立即登錄
