網易那個屢屢打造爆款H5的團隊，終于出書了！
近期，一場黑白色描繪的死亡在朋友圈里迅速蔓延。
她是誰？為何掙扎48小時后死去卻無人知曉？
點擊查看案例詳情：《網易新聞 | 噠噠：她掙扎48小時后死去，無人知曉...》
掃描二維碼，傾聽最后一個“人類”的獨白
（數英 App 用戶需點擊放大二維碼，長按識別）
這支由網易出品的 H5《自白》，將瀕危動物的處境移情到人類身上，直擊內心深處，引起瘋狂轉發，短短24小時，PV 逼近千萬級，堪比一部暢銷影視作品的觸達率。
一時間，各種角度的解讀和分析的文章也隨之出現，這是 Html 5技術誕生6年后，在早已實現技術普及的前提下，每次刷屏案例，還是讓無數創作者們熱衷討論其傳播規律以及如何討好用戶。
而屢屢創新的網易，是如何保持這么多年的作品量，還不斷刷新自己的記錄？小編帶著疑問，找到了網易 H5 制作團隊——網易傳媒設計中心。除了《自白》，他們還制作了《睡姿大比拼》、《里約小人大冒險》、《娛樂圈畫傳》、《紀念哈利·波特20周年》、《滑向童年》等諸多現象級的 H5……
《睡姿大比拼》 H5
掃描二維碼，立即體驗！
《紀念哈利·波特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 等，產生的錯位感讓用戶感到驚喜和沖擊，從而引發用戶主動分享。
掃描二維碼，立即體驗
在利用“白三角”方法進行思考時，就可以這樣操作：策劃的主題是皇帝、太和殿、妃子、皇后、紫禁城等，右邊的白三角再列出我們目標用戶人群喜歡的元素，例如小鮮肉、表情包、VR、唱 Rap、玩朋友圈、點贊等。這樣兩個白三角之間能產生怎樣的奇妙關系呢？那就是本 H5 最后得出的皇后用 VR、皇帝唱 Rap、大臣玩朋友圈等。
這里需要強調一點，就是兩個白三角產生的“化學反應”一定得是某種程度上有反差的，能讓用戶驚喜的，同時這個白三角也可以倒著推，可以先列出目標用戶喜歡的東西，然后找能產生反差的主題元素。
除此之外，書中還全面地展示了各種視覺設計的創意套路，例如利用手繪插畫、歷史照片完成創意。設計師也現身說法，輔以案例，詳細分析了項目中資料整理、方案優化、分鏡及背景繪制的完整過程。
而在動效部分，不僅將動效與動畫、電影、交互設計的淵源娓娓道來，還分析了動效在各大領域的運用，并重點結合具體案例講解交互中的加載、轉場、引導、反饋，讓你充分了解動效的魔力，明白為何H5“無動效不歡”。
“所有說不清楚的問題都是因為缺乏維度”，《H5 匠人手冊》的可貴之處正是在于，從用戶心流的起源、用戶行為的引導、故事框架的構建、視覺吸引力的打造，到最后技術落地的實現，一步步拆分出維度與方法。讓你學到的不僅僅是技能，更是策劃和設計思維。
此書已在京東、當當、亞馬遜、天貓等平臺上架，搜索關鍵字“H5 匠人手冊”，就可以下單啦！Get 網易同款 H5，不如就從 get 網易同款霸屏秘訣開始。小編向你們保證：此書在手，H5 你有。
如果還想了解網易更多 H5 經典案例，小編還有個好辦法。在 H5 領域一路領行的“H5 案例分享”官網（https://www.h5anli.com/），不但全面收錄了網易的過往經典案例，還會第一時間更新全行業最新創意 H5。不管想找啥樣兒的案例，上網站一搜即得。同名微信公眾號還會選取典型案例進行重點解讀，專業解惑，讓小編學了不少干貨。
該安排的都安排上了，小編就坐等你的下一個 H5 來刷屏了！
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
全部評論（8條）