這是一本關(guān)于H5設(shè)計(jì)方法和設(shè)計(jì)流程的書,作者為近年來(lái)佳作頻出的網(wǎng)易傳媒設(shè)計(jì)中心,其代表作品有《娛樂圈畫傳》《里約小人大冒險(xiǎn)》《我是一只快樂的羊駝》《滑向童年》等!禜5匠人手冊(cè):霸屏H5實(shí)戰(zhàn)解密》通過(guò)交互、視覺和動(dòng)效三部分內(nèi)容,從產(chǎn)品策劃、用戶心理、交互手段、視覺渲染、動(dòng)效運(yùn)用、移動(dòng)界面設(shè)計(jì)常識(shí)等方面進(jìn)行系統(tǒng)論述,通過(guò)理論講解和案例分析,詳細(xì)介紹了提升 H5 設(shè)計(jì)質(zhì)量的方法和一些實(shí)用性強(qiáng)的手段,幫助讀者建立起一個(gè)更加完整的 H5 設(shè)計(jì)思維體系。本書適合從事 H5 相關(guān)工作的交互設(shè)計(jì)師、視覺設(shè)計(jì)師、動(dòng)效設(shè)計(jì)師閱讀,也可供致力于 H5 設(shè)計(jì)的初學(xué)者和愛好者參考。
行業(yè)背景以 PC 為載體的門戶網(wǎng)站時(shí)代漸行漸遠(yuǎn),所幸網(wǎng)易傳媒在移動(dòng)端的布局較早,與被迫轉(zhuǎn)型的友商相比略顯從容。但作為業(yè)務(wù)部門的我們所面臨的轉(zhuǎn)型壓力絲毫未減,設(shè)備終端、用戶使用場(chǎng)景、交互手段乃至用戶群體的突變,要求我們?cè)跇I(yè)務(wù)形態(tài)上也應(yīng)當(dāng)有快速的轉(zhuǎn)變。在傳統(tǒng) PC 時(shí)代,我們的業(yè)務(wù)主形態(tài)是各種趨于雜志化的專題,這種近乎紙媒的傳播形態(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í)代雖然也存在類似問題,但用戶終端的迭代速度與技術(shù)性能的提升步調(diào)相對(duì)一致,讓更多的交互和用戶體驗(yàn)形態(tài)成為可能。于是 H5 這種移動(dòng)傳播形態(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ì)一起,從策劃、交互、視覺、動(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 的交互方法,視覺設(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ú)特審美和專注精神進(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ì)作品精益求精的追求,我們也希望讀者能從這本書中獲益,以匠人精神要求自己,成為一名優(yōu)秀的復(fù)合型設(shè)計(jì)師。在閱讀本書之前,希望您能了解以下幾個(gè)問題:Why、Who、What、How。
Why我們?yōu)槭裁匆?H5這是由移動(dòng)傳播特性決定的。紙媒時(shí)代,用戶角色是單純的讀者,具有信息傳播單向、被動(dòng)接受、近乎零互動(dòng)等特點(diǎn)。PC 時(shí)代,用戶可以通過(guò)跟帖等形式與媒體進(jìn)行簡(jiǎn)單互動(dòng)。進(jìn)入移動(dòng)時(shí)代,微博、微信等社交媒體讓用戶從單一的讀者變成讀者兼?zhèn)鞑フ,甚至是?nèi)容生產(chǎn)者,移動(dòng)終端的便攜性和移動(dòng)網(wǎng)絡(luò)的普及也徹底解放了 PC 終端的桌面束縛。媒體傳播形態(tài)也由單向傳播變成了社交化傳播。H5 將圖片、文字、視頻、音頻與交互、游戲化、用戶 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)用戶、商家及業(yè)界的廣泛認(rèn)可,爆款 H5 對(duì)媒體品牌價(jià)值、商家產(chǎn)品調(diào)性都有很大的提升,于是無(wú)論是網(wǎng)絡(luò)媒體還是移動(dòng)廣告都對(duì)這種形式趨之若鶩。
Who用戶是誰(shuí)H5 以媒體渠道實(shí)現(xiàn)冷啟動(dòng),在社交網(wǎng)絡(luò)產(chǎn)生流量分發(fā),最終達(dá)到爆發(fā)效應(yīng)。以網(wǎng)易新聞為例,核心型用戶為 70 后至 85 后,成長(zhǎng)型用戶為 85 后至 95 后,潛力型用戶為 95 后至 00 后,我們的 H5 目標(biāo)受眾為 85 后至 00 后的成長(zhǎng)型和潛力型用戶群體。在社交渠道,根據(jù)微信的相關(guān)報(bào)告顯示,60% 的微信用戶是年輕人(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),用戶在看到標(biāo)題后有點(diǎn)擊欲,信息傳播上及時(shí)有效,能激發(fā)用戶的想象力;視覺層面有表現(xiàn)力、有張力,移動(dòng)環(huán)境下的瀏覽習(xí)慣具有碎片化、目的性不強(qiáng)等特點(diǎn),視覺感知往往是吸引用戶停留的首要因素;產(chǎn)品形態(tài)及交互體驗(yàn)上有創(chuàng)新點(diǎn),簡(jiǎn)單易用,用戶能快速理解交互邏輯,順暢完整地完成全部交互過(guò)程,并且通過(guò)交互產(chǎn)生與用戶關(guān)聯(lián)的個(gè)性化信息。以上三點(diǎn)最終形成用戶精神體驗(yàn)上的獲得感、愉悅感,產(chǎn)生情感共鳴,進(jìn)而形成社交分享意愿。H5 的成功標(biāo)準(zhǔn)可歸納為三個(gè)逐層遞進(jìn)的層級(jí):第一層級(jí),信息傳播準(zhǔn)確有效到達(dá)、交互順暢舒適;第二層級(jí),用戶的參與感強(qiáng),分享意愿強(qiáng);第三層級(jí),能夠引發(fā)用戶情感共鳴,提升產(chǎn)品的品牌調(diào)性。
How怎么做一個(gè) H5這是本書要為大家解決的核心問題,我們會(huì)從產(chǎn)品策劃、用戶心理、交互手段、視覺渲染、動(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)用戶完成整個(gè)瀏覽及操作,并從心理學(xué)和設(shè)計(jì)學(xué)的理論角度共同論述交互框架的分類和選取、核心任務(wù)的提煉、合適交互模式的選取、常用的 H5交互規(guī)范、移動(dòng)交互原則、需要關(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)行分類,對(duì)純信息展示、游戲互動(dòng)兩類 H5 的視覺表現(xiàn)方法進(jìn)行了分析,重點(diǎn)介紹了小游戲以及插畫這兩類 H5 的視覺套路。第 4 章解釋了動(dòng)效和動(dòng)畫的相同點(diǎn)和不同點(diǎn),以及動(dòng)效在 H5 中的加載、轉(zhuǎn)場(chǎng)、視覺引導(dǎo)、操作反饋等核心作用,并結(jié)合案例對(duì)動(dòng)效的基本運(yùn)動(dòng)法則進(jìn)行講解。本書將結(jié)合網(wǎng)易傳媒設(shè)計(jì)中心以及其他友商制作的一些 H5 案例,總結(jié)成功或失敗的經(jīng)驗(yàn),并由此歸納一套行之有效的流程方法,分享給讀者,希望能對(duì)讀者起到幫助。最后對(duì)本書的合作作者表示感謝:徐琳琳、李唯、馬然、張?zhí)煊陞⑴c了第 1章和第 2 章的編寫;陳德進(jìn)、謝斐、王彥淇、李志、張議文參與了第 3 章的編寫;王銳、孟帥、沈號(hào)參與了第 4 章的編寫。
第 1 章 鋪墊
1.1
H5 的前身今世
1.1.1 H5 是什么
1.1.2 H5 的階段性發(fā)展
1.1.3 我們?yōu)槭裁醋?H5
1.2
怎樣的 H5 才是好的 H5
1.2.1 情感共鳴 直擊內(nèi)心
1.2.2 構(gòu)思新奇 有想象力
1.2.3 交互炫酷 有表現(xiàn)力
1.2.4 技術(shù)創(chuàng)新 新鮮有趣
1.2.5 加入鼓勵(lì) 動(dòng)力十足
1.2.6 反客為主 促進(jìn)回流
第 2 章 H5 交互流程剖析
2.1
一個(gè) H5 策劃的開始,源于好的溝通
2.1.1
邀請(qǐng)參與者開會(huì)
2.1.2
明確項(xiàng)目背景
2.1.3
策劃常見問題
2.2
策劃評(píng)估 1:動(dòng)機(jī)是否能在短時(shí)間內(nèi)吸引用戶注意力并完成閱讀
2.2.1
利用心流理論控制節(jié)奏
2.2.2 利用 Hook 理論引導(dǎo)用戶
2.3
策劃評(píng)估 2:框架展現(xiàn)形式是否符合策劃主題
2.3.1 展示型
2.3.2
引導(dǎo)型
2.3.3
操作型
2.4
策劃評(píng)估 3:任務(wù)是否提煉出核心任務(wù)
2.5
策劃評(píng)估 4:交互交互方式與策劃是否匹配
2.6
策劃評(píng)估 5:原則是否符合移動(dòng)端的交互原則
2.6.1
簡(jiǎn)化層級(jí),結(jié)構(gòu)扁平化
2.6.2
降低閱讀門檻,減少認(rèn)知成本
2.6.3
H5 要注意分享屬性
2.6.4
一定要注意額外規(guī)范
2.7
產(chǎn)出 1:界面落實(shí)
2.7.1 快
2.7.2 細(xì)
2.8
產(chǎn)出 2:完善細(xì)節(jié)
2.8.1 關(guān)于分享控件與回流入口
2.8.2 文案配合專題
2.8.3 適當(dāng)?shù)奶崾?/p>
2.8.4 H5 的返回設(shè)置
2.8.5 H5 的分段設(shè)置
2.8.6 增加彩蛋
2.9
產(chǎn)出 3:溝通跟進(jìn),繞坑而行
2.9.1 加載與控制文件大小
2.9.2 避免手勢(shì)沖突
2.9.3 輸入框
2.9.4 播放器
2.9.5 手機(jī)適配(iPhone X)
2.9.6 其他設(shè)備端打開 H5
2.9.7 微信誘導(dǎo)分享
2.10
產(chǎn)出 4:測(cè)試上線與數(shù)據(jù)監(jiān)測(cè)
2.11
常用交互手段
2.11.1 結(jié)合手勢(shì)激發(fā) H5 亮點(diǎn)
2.11.2 利用好硬件給 H5 添彩
2.11.3 新科技引領(lǐng)新體驗(yàn)
第 3 章 H5 視覺套路
3.1
制作一個(gè) H5,視覺設(shè)計(jì)師要做什么
3.2
創(chuàng)意的視覺表現(xiàn)
3.2.1 要有目的的創(chuàng)意
3.2.2 創(chuàng)意形式千千萬(wàn)
3.2.3 沒有靈感?沒關(guān)系
3.3
執(zhí)行手頭功夫很重要
3.3.1 要展示的信息量大怎么辦
3.3.2 怎么搞定 H5 小游戲
3.4
萬(wàn)能的插畫
3.4.1 做到表里如一
3.4.2 形式很重要
3.4.3 制造氛圍
3.4.4 案例賞析 1
3.4.5 案例賞析 2
第 4 章 H5 動(dòng)效解密
4.1
何為動(dòng)效
4.1.1 動(dòng)畫與動(dòng)效
4.1.2 MG 動(dòng)畫與動(dòng)效
4.1.3 交互與動(dòng)效
4.2
為何 H5無(wú)動(dòng)效不歡
4.2.1 有趣加載治百病
4.2.2 絲滑柔順的轉(zhuǎn)場(chǎng)
4.2.3 一眼就看懂的引導(dǎo)
4.2.4 反饋動(dòng)效很有必要
4.2.5 讓人驚喜的動(dòng)態(tài)視覺
4.2.6 動(dòng)畫的魅力
4.3
H5 必備的運(yùn)動(dòng)法則
4.3.1 基本運(yùn)動(dòng)規(guī)律
4.3.2 貝塞爾曲線那點(diǎn)事兒
4.3.3 不可忽視的反饋與夸張
4.3.4 情緒的重要性
4.3.5 空間感
4.3.6 節(jié)奏
4.4
H5 與電影
4.5
案例解析
4.5.1 《里約小人大冒險(xiǎn)》
4.5.2 《2016 請(qǐng)回答》
4.5.3 《滑向童年》
4.5.4 《紀(jì)念哈利·波特 20 周年》
參考資料及延伸閱讀