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