目錄
01 認識H5與廣告
1.1 傳統廣告怎麼瞭？ 4
聊點傳統廣告的事兒 4
傳統廣告如今還是行業大佬麼？ 6
那麼，傳統廣告會被打敗麼？ 8
1.2 H5究竟是什麼？ 10
“H5=HTML5”是否可以成立？ 12
“H5=微信網頁”是否可以成立？ 13
“H5=移動PPTAPP”又是否可以成立？ 14
那麼H5究竟是什麼？ 15
瞭解定義的作用 17
1.3 H5與未來數碼設計 18
超媒體是什麼？ 19
那麼超媒體的 “非綫性” 又是什麼樣子？ 21
超媒體的具體特徵 22
超媒體實現的4個條件 23
H5是超媒體麼？ 25
1.4 一個水果的比喻，讓你認識H5的優勢 27
水果是否有營養價值 27
水果是否新鮮，好吃 28
水果的成熟周期 30
水果是否物美價廉 32
02 設計流程與規範技巧
2.1 H5 的設計流程 36
目前H5 在設計方法上可以籠統地劃分為三大類型 36
瞭解需求，選好方嚮 38
確定錶現形式 40
設計錶現 42
開發執行階段 43
數據總結分析 45
2.2 H5 常用設計工具箱 48
H5 設計師使用工具 48
H5 動效展示工具 51
H5 設計生成工具 53
H5 常用輔助設計工具 57
2.3 H5 頁麵尺寸設計注意事項 58
03 H5 的設計方法
3.1 認識H5 的原型圖 66
什麼是原型圖 66
H5 的原型圖 67
H5 原型圖應具備的因素 70
原型圖存在的作用 72
3.2 把握好H5 設計的錶現力 73
視覺氣氛（傳遞情感） 73
形式感（打動用戶的重要方法） 79
參與感（H5 設計的爆點） 82
3.3 H5 頁麵的版式設計要領 86
H5 與平麵設計的版式到底哪裏不同？ 86
要如何應對H5 版麵設計？ 89
3.4 H5 的文字設計 103
設計師！你需要重新認識文字 103
改變你的排版習慣 112
H5 的標題設計 115
3.5 H5 的動效設計 124
關於動效，你要清楚一些事情 124
在H5 ，我們可以實現哪些動效？ 139
動效在H5 的一些實際運用 146
3.6 H5 的聲效設計 154
你一直在忽略聲音 154
聲音的3 個類彆 156
H5 的背景音效 157
H5 的輔助音效 164
一些采樣常識 166
04 H5 的精品案例
精品案例 4.1 大眾點評—我們之間就一個字 176
精品案例 4.2 LPI—夢幻H5 189
精品案例 4.3 尋龍訣一起來尋龍摸金，活蒸大粽子 202
精品案例 4.4 騰訊遊戲—眾粉絲哭倒？吳亦凡圓寸疑為入伍做準備 214
精品案例 4.5 阿迪達斯—羅斯絕不凋零 228
精品案例 4.6 大眾點評—你一身的渴望，我們從頭開始滿足你！ 239
工具類精品案例 4.7 工具類精品案例—手機有話對你說 252
05 H5 的內容訪談
魚臉互動Fish Face 專訪內容（節選） 265
UID WORKS 專訪內容（節選） 268
LxU 專訪內容（節選） 270
LPI 良品互動 專訪內容（節選） 272
W 上海 專訪內容（節選） 274
騰訊TGideas 專訪內容（節選） 278
搜狐新聞 專訪內容 280
萬達集團 專訪內容 283
iH5 專訪內容 286
甲本 專訪內容 290
緻謝/ 293
· · · · · · (收起)