行業(yè)背景以 PC 為載體的門戶網(wǎng)站時代漸行漸遠，所幸網(wǎng)易傳媒在移動端的布局較早，與被迫轉型的友商相比略顯從容。但作為業(yè)務部門的我們所面臨的轉型壓力絲毫未減，設備終端、用戶使用場景、交互手段乃至用戶群體的突變，要求我們在業(yè)務形態(tài)上也應當有快速的轉變。在傳統(tǒng) PC 時代，我們的業(yè)務主形態(tài)是各種趨于雜志化的專題，這種近乎紙媒的傳播形態(tài)移植到移動端顯然不合時宜。2014 年 10 月 28 日，W3C 的 HTML 工作組正式發(fā)布了 HTML5 的正式推薦標準（W3C Recommendation），HTML5標準的確立讓音視頻脫離了播放器和插件的束縛，在 Web 中的呈現(xiàn)更加便捷。而在PC 時代，低版本瀏覽器在很長一段時間都占據(jù)著較高的市場份額，Web 形態(tài)受制于瀏覽器性能、標準、兼容性等綜合因素，因此形態(tài)相對單一、簡單。移動時代雖然也存在類似問題，但用戶終端的迭代速度與技術性能的提升步調(diào)相對一致，讓更多的交互和用戶體驗形態(tài)成為可能。于是 H5 這種移動傳播形態(tài)在設備轉換和技術革新的雙重催化下，應運而生。
成書歷程網(wǎng)易傳媒設計中心于 2015 年開始 H5 業(yè)務的設計工作，在積累了大量的案例經(jīng)驗之后，我們于 2016 年底，面向全公司的設計和編輯做了名為如何做一個漲工資的 H5的系列培訓，協(xié)同編輯、技術團隊一起，從策劃、交互、視覺、動效、前端 5 個關鍵環(huán)節(jié)設計了主題化課程，在內(nèi)部取得了不錯的反響。2017 年 6 月，我們在 IXDC 國際體驗設計大會上做了霸占社交媒體的 H5 是如何誕生的工作坊，從設計角度，全面、系統(tǒng)地講解了 H5 的交互方法，視覺設計思路、表現(xiàn)手法，動效的基礎知識、作用和工具運用，吸引了眾多設計師參與其中。我們的授課內(nèi)容有幸被清華大學出版社關注，并且我們的內(nèi)容價值也得到了充分的認可，于是有了這本《H5 匠人手冊：霸屏 H5 實戰(zhàn)解密》的誕生。他們心存理想，不是簡單迎合或玩弄市場 , 而是根據(jù)自己的獨特審美和專注精神進行創(chuàng)新、創(chuàng)作，給市場帶來許多影響力深遠的產(chǎn)品和作品。這是網(wǎng)易集團的董事長兼 CEO 丁磊對匠人精神的解釋。匠人精神既是消費升級品牌創(chuàng)新的大時代要求，也是網(wǎng)易旗下各產(chǎn)品線一直標榜的核心理念，代表著我們對作品精益求精的追求，我們也希望讀者能從這本書中獲益，以匠人精神要求自己，成為一名優(yōu)秀的復合型設計師。在閱讀本書之前，希望您能了解以下幾個問題：Why、Who、What、How。
Why我們?yōu)槭裁匆��?H5這是由移動傳播特性決定的。紙媒時代，用戶角色是單純的讀者，具有信息傳播單向、被動接受、近乎零互動等特點。PC 時代，用戶可以通過跟帖等形式與媒體進行簡單互動。進入移動時代，微博、微信等社交媒體讓用戶從單一的讀者變成讀者兼?zhèn)鞑フ�，甚至是�?nèi)容生產(chǎn)者，移動終端的便攜性和移動網(wǎng)絡的普及也徹底解放了 PC 終端的桌面束縛。媒體傳播形態(tài)也由單向傳播變成了社交化傳播。H5 將圖片、文字、視頻、音頻與交互、游戲化、用戶 URC 等多種媒體形態(tài)完美融合，與 App 相比，基于 Web 的產(chǎn)品形態(tài)決定了 H5 社交傳播的可能性，具有強互動、可監(jiān)測、跨平臺、易傳播等優(yōu)勢，所以H5在2年時間內(nèi)迅速得到互聯(lián)網(wǎng)用戶、商家及業(yè)界的廣泛認可，爆款 H5 對媒體品牌價值、商家產(chǎn)品調(diào)性都有很大的提升，于是無論是網(wǎng)絡媒體還是移動廣告都對這種形式趨之若鶩。
Who用戶是誰H5 以媒體渠道實現(xiàn)冷啟動，在社交網(wǎng)絡產(chǎn)生流量分發(fā)，最終達到爆發(fā)效應。以網(wǎng)易新聞為例，核心型用戶為 70 后至 85 后，成長型用戶為 85 后至 95 后，潛力型用戶為 95 后至 00 后，我們的 H5 目標受眾為 85 后至 00 后的成長型和潛力型用戶群體。在社交渠道，根據(jù)微信的相關報告顯示，60% 的微信用戶是年輕人（15~29歲），每個年輕人平均有 128 個好友。所以，吸引這部分人的注意，并讓其產(chǎn)生主動傳播欲望，就能在社交網(wǎng)絡產(chǎn)生蝴蝶效應，引發(fā)爆款的產(chǎn)生。
What優(yōu)質(zhì) H5 的評判標準一個成功的 H5 需要具備以下特質(zhì)：主題具備一定的傳播性，能夠觸及當下熱點，用戶在看到標題后有點擊欲，信息傳播上及時有效，能激發(fā)用戶的想象力；視覺層面有表現(xiàn)力、有張力，移動環(huán)境下的瀏覽習慣具有碎片化、目的性不強等特點，視覺感知往往是吸引用戶停留的首要因素；產(chǎn)品形態(tài)及交互體驗上有創(chuàng)新點，簡單易用，用戶能快速理解交互邏輯，順暢完整地完成全部交互過程，并且通過交互產(chǎn)生與用戶關聯(lián)的個性化信息。以上三點最終形成用戶精神體驗上的獲得感、愉悅感，產(chǎn)生情感共鳴，進而形成社交分享意愿。H5 的成功標準可歸納為三個逐層遞進的層級：第一層級，信息傳播準確有效到達、交互順暢舒適；第二層級，用戶的參與感強，分享意愿強；第三層級，能夠引發(fā)用戶情感共鳴，提升產(chǎn)品的品牌調(diào)性。
How怎么做一個 H5這是本書要為大家解決的核心問題，我們會從產(chǎn)品策劃、用戶心理、交互手段、視覺渲染、動效運用、移動界面設計常識等方面來系統(tǒng)論述講解，通過理論和案例分析詳細介紹提升 H5 設計質(zhì)量的方法和一些實用性強的手段，同時幫助大家建立一個更加完整的 H5 設計思維體系。第 2 章在策劃部分重點講解如何利用心流理論控制閱讀節(jié)奏和如何利用Hook 理論控制交互節(jié)奏，引導用戶完成整個瀏覽及操作，并從心理學和設計學的理論角度共同論述交互框架的分類和選取、核心任務的提煉、合適交互模式的選取、常用的 H5交互規(guī)范、移動交互原則、需要關注的核心問題、如何引導用戶分享回流等。在梳理完 H5 的工作流程、邏輯和框架后，在具體交互層面，我們講解了產(chǎn)出的要求、細節(jié)的完善、需要避免的常見錯誤。第 3 章結合實例從創(chuàng)意的視覺表現(xiàn)出發(fā)，討論視覺設計師應該如何進行有目的的創(chuàng)意，總結分析了當下流行的幾類 H5 視覺表現(xiàn)方式的優(yōu)點，以及在使用這幾類表現(xiàn)手法時要規(guī)避的地方和要注意的一些問題。此外，還根據(jù) H5 的內(nèi)容形式進行分類，對純信息展示、游戲互動兩類 H5 的視覺表現(xiàn)方法進行了分析，重點介紹了小游戲以及插畫這兩類 H5 的視覺套路。第 4 章解釋了動效和動畫的相同點和不同點，以及動效在 H5 中的加載、轉場、視覺引導、操作反饋等核心作用，并結合案例對動效的基本運動法則進行講解。本書將結合網(wǎng)易傳媒設計中心以及其他友商制作的一些 H5 案例，總結成功或失敗的經(jīng)驗，并由此歸納一套行之有效的流程方法，分享給讀者，希望能對讀者起到幫助。最后對本書的合作作者表示感謝：徐琳琳、李唯、馬然、張?zhí)煊陞⑴c了第 1章和第 2 章的編寫；陳德進、謝斐、王彥淇、李志、張議文參與了第 3 章的編寫；王銳、孟帥、沈號參與了第 4 章的編寫。