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

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

所以說(shuō)， 朋友圈 H5 進(jìn)化史可以看做是新媒體交互設(shè)計(jì)進(jìn)化史。

圖文型

2014 年開(kāi)始，朋友圈開(kāi)始出現(xiàn)一些簡(jiǎn)單圖文形式的 H5，早期圖文型 H5 只需要用戶通過(guò)簡(jiǎn)單的翻頁(yè)、點(diǎn)擊就可以參與其中，展現(xiàn)效果類(lèi)似于 PPT。應(yīng)用場(chǎ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)、燕楠國(guó)際等品牌就基于 H5 制作了移動(dòng)網(wǎng)站。

邀請(qǐng)函也是圖文型H5的主要應(yīng)用場(chǎng)景之一，比如《奔馳 C 級(jí)上市邀請(qǐng)函》和《微信公開(kāi)課 PRO 版邀請(qǐng)函》都是當(dāng)時(shí)的典型代表。

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

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

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

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

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

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

活動(dòng)型

活動(dòng)型 H5 也是較早出現(xiàn)的 H5 類(lèi)型，主要包括紅包、抽獎(jiǎng)、投票、砍價(jià)、拼團(tuán)等，這類(lèi) H5 模式和技術(shù)都非常簡(jiǎn)單，但因?yàn)橛芍苯永骝?qū)動(dòng)，傳播力較強(qiáng)。

口令紅包、語(yǔ)音紅包、簽到抽獎(jiǎng)、砍價(jià)拼團(tuán)（來(lái)源：人人秀官網(wǎng)）

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

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

游戲型

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

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

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

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

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

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

測(cè)試型

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

1.運(yùn)勢(shì)占卜

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

2.知識(shí)測(cè)試

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

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

3.心理測(cè)試

心理測(cè)試型 H5 一般通過(guò)答題來(lái)給測(cè)試者的認(rèn)知、行為、情感的心理活動(dòng)予以量化，幫助其了解自己的情緒、行為模式和人格特點(diǎn)。

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

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

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

2018 年 10 月，貓眼電影推出的《假如影子有生命》，為每一個(gè)選項(xiàng)設(shè)置了不同的動(dòng)畫(huà)效果，而不是簡(jiǎn)單地跳轉(zhuǎn)到下一題，使得測(cè)試類(lèi)H5的視覺(jué)效果又上了一個(gè)臺(tái)階。但心理學(xué)測(cè)試的選題過(guò)于老套，文案也缺乏亮點(diǎn)。

快閃型

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

蘋(píng)果107S快閃，形式簡(jiǎn)潔，但細(xì)節(jié)非?？季?/p>

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

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

比如，蘇寧易購(gòu)在 2017 年雙 11 推出的 H5，2017 年全運(yùn)會(huì)宣傳 H5 都是快閃形式。

模擬界面型

模擬界面，就是模擬不同的移動(dòng)端界面，進(jìn)行場(chǎng)景的構(gòu)建和情節(jié)的開(kāi)展。目前常見(jiàn)的類(lèi)型有模擬微信界面、模擬來(lái)電界面、模擬新聞界面、模擬抖音界面等。

1.模擬微信界面

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

2015 年，大眾點(diǎn)評(píng)推出的 H5《四大導(dǎo)師拯救麥渣》偽裝成微信文章，利用當(dāng)時(shí)很火爆的選秀節(jié)目中國(guó)好聲音，結(jié)合四大導(dǎo)師來(lái)推廣大眾點(diǎn)評(píng)的KTV資源。

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

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

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

新媒體人王高高模擬微信公眾號(hào)界面制作了一份個(gè)人簡(jiǎn)歷，文案生動(dòng)幽默，形式新穎。

2.模擬手機(jī)界面

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

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

3.模擬新聞界面

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

4.模擬抖音界面

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

雙屏互動(dòng)型

2015 年，朋友圈開(kāi)始出現(xiàn)雙屏互動(dòng)型 H5，這種類(lèi)型的 H5 需要 2 臺(tái)手機(jī)共同掃碼完成互動(dòng)，交互性能比其他 H5 顯著增強(qiáng)。

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

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

一鏡到底型

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

紀(jì)錄片《帝國(guó)大廈》劇照

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

電影《鳥(niǎo)人》海報(bào)

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

VR全景型

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

電影《阿凡達(dá)》劇照

隨著 VR 技術(shù)的逐漸成熟，應(yīng)用 VR 技術(shù)的 H5 逐漸增多，比如，《穿越宇宙的邀請(qǐng)函》是天貓?jiān)?016年制作的一個(gè)結(jié)合VR技術(shù)及一鏡到底的H5，試聽(tīng)效果非常震撼。

未來(lái)

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

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