網(wǎng)易那個(gè)屢屢打造爆款H5的團(tuán)隊(duì)，終于出書(shū)了！
近期，一場(chǎng)黑白色描繪的死亡在朋友圈里迅速蔓延。
她是誰(shuí)？為何掙扎48小時(shí)后死去卻無(wú)人知曉？
點(diǎn)擊查看案例詳情：《網(wǎng)易新聞 | 噠噠：她掙扎48小時(shí)后死去，無(wú)人知曉...》
掃描二維碼，傾聽(tīng)最后一個(gè)“人類”的獨(dú)白
（數(shù)英 App 用戶需點(diǎn)擊放大二維碼，長(zhǎng)按識(shí)別）
這支由網(wǎng)易出品的 H5《自白》，將瀕危動(dòng)物的處境移情到人類身上，直擊內(nèi)心深處，引起瘋狂轉(zhuǎn)發(fā)，短短24小時(shí)，PV 逼近千萬(wàn)級(jí)，堪比一部暢銷影視作品的觸達(dá)率。
一時(shí)間，各種角度的解讀和分析的文章也隨之出現(xiàn)，這是 Html 5技術(shù)誕生6年后，在早已實(shí)現(xiàn)技術(shù)普及的前提下，每次刷屏案例，還是讓無(wú)數(shù)創(chuàng)作者們熱衷討論其傳播規(guī)律以及如何討好用戶。
而屢屢創(chuàng)新的網(wǎng)易，是如何保持這么多年的作品量，還不斷刷新自己的記錄？小編帶著疑問(wèn)，找到了網(wǎng)易 H5 制作團(tuán)隊(duì)——網(wǎng)易傳媒設(shè)計(jì)中心。除了《自白》，他們還制作了《睡姿大比拼》、《里約小人大冒險(xiǎn)》、《娛樂(lè)圈畫(huà)傳》、《紀(jì)念哈利·波特20周年》、《滑向童年》等諸多現(xiàn)象級(jí)的 H5……
《睡姿大比拼》 H5
掃描二維碼，立即體驗(yàn)！
《紀(jì)念哈利·波特20周年》 H5
掃描二維碼，立即體驗(yàn)！
等等，what？網(wǎng)易大神們跟小編透露，他們出教程了！整個(gè)團(tuán)隊(duì)身經(jīng)百戰(zhàn)的經(jīng)驗(yàn)和心血，全都凝練在這本《H5 匠人手冊(cè)：霸屏 H5 實(shí)戰(zhàn)指南》里了！ 不同于其他流于表面泛泛而談的解說(shuō)或指南，網(wǎng)易傳媒設(shè)計(jì)中心在對(duì)實(shí)際案例進(jìn)行詳細(xì)解讀的基礎(chǔ)上，更加注重思路的總結(jié)和方法的實(shí)操性。因此清晰的結(jié)構(gòu)和高度提煉的方法論是本書(shū)的一大特點(diǎn)。
好學(xué)的小編已經(jīng)偷偷看完了全書(shū)，現(xiàn)在感覺(jué)每一個(gè)毛孔都充滿了打造爆款 H5 的自信，忍不住要來(lái)劇透一番。
劃重點(diǎn)1：全面的內(nèi)容架構(gòu)
全書(shū)共分為4章：第1章主要講述 H5 的概念和發(fā)展，以及優(yōu)秀 H5 應(yīng)具備的6大特征；第2章詳細(xì)剖析了H5的交互流程；第3章講解了 H5 中有效的視覺(jué)套路；第4章則針對(duì) H5 中的動(dòng)效進(jìn)行深入解讀。書(shū)中的案例都可以掃碼觀看，更方便理解。
劃重點(diǎn)2：清晰的結(jié)構(gòu)
書(shū)中在講到 “交互流程剖析”這一部分內(nèi)容時(shí)，開(kāi)篇就統(tǒng)領(lǐng)地告訴讀者一個(gè) H5 的誕生要經(jīng)歷以下階段：項(xiàng)目溝通、策劃評(píng)估、產(chǎn)出。當(dāng)然，在每一個(gè)階段中，還有不少細(xì)分的環(huán)節(jié)，如圖所示。
以策劃評(píng)估階段為例，首先要在“動(dòng)機(jī)”上做足文章，讓用戶在短時(shí)間內(nèi)被吸引，直到完成整個(gè) H5 的觀看。為了達(dá)到這個(gè)目的，書(shū)中詳細(xì)講解了控制節(jié)奏的“心流理論”和引導(dǎo)用戶的“ HOOK 理論”。
8區(qū)間心流體驗(yàn)?zāi)Ｐ蛨D
Hook理論模型圖
吸引用戶的機(jī)制確定好之后，還需要選擇合適的框架，即H5展現(xiàn)形式，使其符合策劃主題。按照交互的復(fù)雜程度，書(shū)中將展現(xiàn)形式歸納為以下三類：展示型、引導(dǎo)型、操作型，并從5個(gè)維度分析各類形式的特點(diǎn)，幫助你在第一時(shí)間找到最佳方式。
劃重點(diǎn)3：高度提煉的方法論
在探討如何確定 H5 的主要內(nèi)容和目標(biāo)人群、并提煉核心任務(wù)時(shí)，書(shū)中提出了“頭腦風(fēng)暴之白三角”的方法，將主要內(nèi)容和目標(biāo)人群喜歡的東西直接拼在一起做配對(duì)，激發(fā)想象力。
以《穿越故宮來(lái)看你》為例，在 H5 中，皇帝穿越到現(xiàn)代，使用現(xiàn)代的溝通方式聊天、拍照、唱 Rap 等，產(chǎn)生的錯(cuò)位感讓用戶感到驚喜和沖擊，從而引發(fā)用戶主動(dòng)分享。
掃描二維碼，立即體驗(yàn)
在利用“白三角”方法進(jìn)行思考時(shí)，就可以這樣操作：策劃的主題是皇帝、太和殿、妃子、皇后、紫禁城等，右邊的白三角再列出我們目標(biāo)用戶人群喜歡的元素，例如小鮮肉、表情包、VR、唱 Rap、玩朋友圈、點(diǎn)贊等。這樣兩個(gè)白三角之間能產(chǎn)生怎樣的奇妙關(guān)系呢？那就是本 H5 最后得出的皇后用 VR、皇帝唱 Rap、大臣玩朋友圈等。
這里需要強(qiáng)調(diào)一點(diǎn)，就是兩個(gè)白三角產(chǎn)生的“化學(xué)反應(yīng)”一定得是某種程度上有反差的，能讓用戶驚喜的，同時(shí)這個(gè)白三角也可以倒著推，可以先列出目標(biāo)用戶喜歡的東西，然后找能產(chǎn)生反差的主題元素。
除此之外，書(shū)中還全面地展示了各種視覺(jué)設(shè)計(jì)的創(chuàng)意套路，例如利用手繪插畫(huà)、歷史照片完成創(chuàng)意。設(shè)計(jì)師也現(xiàn)身說(shuō)法，輔以案例，詳細(xì)分析了項(xiàng)目中資料整理、方案優(yōu)化、分鏡及背景繪制的完整過(guò)程。
而在動(dòng)效部分，不僅將動(dòng)效與動(dòng)畫(huà)、電影、交互設(shè)計(jì)的淵源娓娓道來(lái)，還分析了動(dòng)效在各大領(lǐng)域的運(yùn)用，并重點(diǎn)結(jié)合具體案例講解交互中的加載、轉(zhuǎn)場(chǎng)、引導(dǎo)、反饋，讓你充分了解動(dòng)效的魔力，明白為何H5“無(wú)動(dòng)效不歡”。
“所有說(shuō)不清楚的問(wèn)題都是因?yàn)槿狈S度”，《H5 匠人手冊(cè)》的可貴之處正是在于，從用戶心流的起源、用戶行為的引導(dǎo)、故事框架的構(gòu)建、視覺(jué)吸引力的打造，到最后技術(shù)落地的實(shí)現(xiàn)，一步步拆分出維度與方法。讓你學(xué)到的不僅僅是技能，更是策劃和設(shè)計(jì)思維。
此書(shū)已在京東、當(dāng)當(dāng)、亞馬遜、天貓等平臺(tái)上架，搜索關(guān)鍵字“H5 匠人手冊(cè)”，就可以下單啦！Get 網(wǎng)易同款 H5，不如就從 get 網(wǎng)易同款霸屏秘訣開(kāi)始。小編向你們保證：此書(shū)在手，H5 你有。
如果還想了解網(wǎng)易更多 H5 經(jīng)典案例，小編還有個(gè)好辦法。在 H5 領(lǐng)域一路領(lǐng)行的“H5 案例分享”官網(wǎng)（https://www.h5anli.com/），不但全面收錄了網(wǎng)易的過(guò)往經(jīng)典案例，還會(huì)第一時(shí)間更新全行業(yè)最新創(chuàng)意 H5。不管想找啥樣兒的案例，上網(wǎng)站一搜即得。同名微信公眾號(hào)還會(huì)選取典型案例進(jìn)行重點(diǎn)解讀，專業(yè)解惑，讓小編學(xué)了不少干貨。
該安排的都安排上了，小編就坐等你的下一個(gè) H5 來(lái)刷屏了！
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（8條）