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