01 认识H5与广告
1.1 传统广告怎么了？\ 4
聊点传统广告的事儿 \ 4
传统广告如今还是行业大佬么？ \ 6
那么，传统广告会被打败么？ \ 8
1.2 H5究竟是什么？ \ 10
“H5=HTML5”是否可以成立？ \ 12
“H5=微信网页”是否可以成立？ \ 13
“H5=移动PPT\APP”又是否可以成立？ \ 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