目录

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