本書會(huì)從廣告行業(yè)背景說起, 讓讀者了解H5廣告的來龍去脈, 并且學(xué)會(huì)快速的運(yùn)用工具制作H5廣告, 包括一些必要的設(shè)計(jì)方式和規(guī)范, 同時(shí)引導(dǎo)受眾不要盲目跟風(fēng), 客觀和理性的使用H5廣告。
小呆的公眾號(hào),已是H5業(yè)界內(nèi)容的風(fēng)向標(biāo)。鑒于H5突出的互動(dòng)特性,我們意識(shí)到平媒根本無法滿足其對創(chuàng)意、技術(shù)、動(dòng)效、聲效的解讀,于是我們設(shè)計(jì)了圖書網(wǎng)站,并在書中植入大量二維碼作為連接;使得公眾號(hào)、圖書網(wǎng)站、紙質(zhì)書三者形成互補(bǔ)關(guān)系,滿足了內(nèi)容演示、更新、互動(dòng)的多重功能,這在國內(nèi)是難得的創(chuàng)新;H5本身還帶有技術(shù)、設(shè)計(jì)、藝術(shù)、廣告、營銷等多重屬性,所以,對于在職讀者來說,需要了解大量信息和業(yè)界動(dòng)態(tài),才能在H5領(lǐng)域游刃有余,這些信息又往往非常凌亂和不系統(tǒng)。作者在本書不僅總結(jié)了系統(tǒng)的方法論,還為讀者提供了實(shí)時(shí)更新的內(nèi)容社群,可以說,你買到的不是一本,你買到的是一套會(huì)升級(jí)的行業(yè)寶庫!
01 認(rèn)識(shí)H5與廣告
1.1 傳統(tǒng)廣告怎么了?\ 4
聊點(diǎn)傳統(tǒng)廣告的事兒 \ 4
傳統(tǒng)廣告如今還是行業(yè)大佬么? \ 6
那么,傳統(tǒng)廣告會(huì)被打敗么? \ 8
1.2 H5究竟是什么? \ 10
“H5=HTML5”是否可以成立? \ 12
“H5=微信網(wǎng)頁”是否可以成立? \ 13
“H5=移動(dòng)PPT\APP”又是否可以成立? \ 14
那么H5究竟是什么? \ 15
了解定義的作用 \ 17
1.3 H5與未來數(shù)碼設(shè)計(jì)\ 18
超媒體是什么? \ 19
那么超媒體的 “非線性” 又是什么樣子? \ 21
超媒體的具體特征 \ 22
超媒體實(shí)現(xiàn)的4個(gè)條件 \ 23
H5是超媒體么? \ 25
1.4 一個(gè)水果的比喻,讓你認(rèn)識(shí)H5的優(yōu)勢\ 27
水果是否有營養(yǎng)價(jià)值 \ 27
水果是否新鮮,好吃 \ 28
水果的成熟周期 \ 30
水果是否物美價(jià)廉 \ 32
02 設(shè)計(jì)流程與規(guī)范技巧
2.1 H5 的設(shè)計(jì)流程 \ 36
目前H5 在設(shè)計(jì)方法上可以籠統(tǒng)地劃分為三大類型 \ 36
了解需求,選好方向 \ 38
確定表現(xiàn)形式 \ 40
設(shè)計(jì)表現(xiàn) \ 42
開發(fā)執(zhí)行階段 \ 43
數(shù)據(jù)總結(jié)分析 \ 45
2.2 H5 常用設(shè)計(jì)工具箱 \ 48
H5 設(shè)計(jì)師使用工具 \ 48
H5 動(dòng)效展示工具 \ 51
H5 設(shè)計(jì)生成工具 \ 53
H5 常用輔助設(shè)計(jì)工具 \ 57
2.3 H5 頁面尺寸設(shè)計(jì)注意事項(xiàng) \ 58
03 H5 的設(shè)計(jì)方法
3.1 認(rèn)識(shí)H5 的原型圖 \ 66
什么是原型圖 \ 66
H5 的原型圖 \ 67
H5 原型圖應(yīng)具備的因素 \ 70
原型圖存在的作用 \ 72
3.2 把握好H5 設(shè)計(jì)的表現(xiàn)力 \ 73
視覺氣氛(傳遞情感) \ 73
形式感(打動(dòng)用戶的重要方法) \ 79
參與感(H5 設(shè)計(jì)的爆點(diǎn)) \ 82
3.3 H5 頁面的版式設(shè)計(jì)要領(lǐng) \ 86
H5 與平面設(shè)計(jì)的版式到底哪里不同? \ 86
要如何應(yīng)對H5 版面設(shè)計(jì)? \ 89
3.4 H5 的文字設(shè)計(jì) \ 103
設(shè)計(jì)師!你需要重新認(rèn)識(shí)文字 \ 103
改變你的排版習(xí)慣 \ 112
H5 的標(biāo)題設(shè)計(jì) \ 115
3.5 H5 的動(dòng)效設(shè)計(jì) \ 124
關(guān)于動(dòng)效,你要清楚一些事情 \ 124
在H5 ,我們可以實(shí)現(xiàn)哪些動(dòng)效? \ 139
動(dòng)效在H5 的一些實(shí)際運(yùn)用 \ 146
3.6 H5 的聲效設(shè)計(jì) \ 154
你一直在忽略聲音 \ 154
聲音的3 個(gè)類別 \ 156
H5 的背景音效 \ 157
H5 的輔助音效 \ 164
一些采樣常識(shí) \ 166
04 H5 的精品案例
精品案例 4.1 大眾點(diǎn)評(píng)—我們之間就一個(gè)字 \ 176
精品案例 4.2 LPI—夢幻H5 \ 189
精品案例 4.3 尋龍?jiān)E一起來尋龍摸金,活蒸大粽子 \ 202
精品案例 4.4 騰訊游戲—眾粉絲哭倒?吳亦凡圓寸疑為入伍做準(zhǔn)備 \ 214
精品案例 4.5 阿迪達(dá)斯—羅斯絕不凋零 \ 228
精品案例 4.6 大眾點(diǎn)評(píng)—你一身的渴望,我們從頭開始滿足你! \ 239
工具類精品案例 4.7 工具類精品案例—手機(jī)有話對你說 \ 252
05 H5 的內(nèi)容訪談
魚臉互動(dòng)Fish Face 專訪內(nèi)容(節(jié)選)\ 265
UID WORKS 專訪內(nèi)容(節(jié)選)\ 268
LxU 專訪內(nèi)容(節(jié)選)\ 270
LPI 良品互動(dòng) 專訪內(nèi)容(節(jié)選)\ 272
W 上海 專訪內(nèi)容(節(jié)選)\ 274
騰訊TGideas 專訪內(nèi)容(節(jié)選)\ 278
搜狐新聞 專訪內(nèi)容\ 280
萬達(dá)集團(tuán) 專訪內(nèi)容\ 283
iH5 專訪內(nèi)容\ 286
甲本 專訪內(nèi)容\ 290
致謝/ 293