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