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