H5+移动营销设计宝典

　　这是一本关于H5移动营销网站设计的专业设计图书，它不仅仅会教你一些具体的设计方法，还会让你了解H5的内容定义和规范、看到行业的现状和了解行业未来的走向。
　　本书共分5章，第1章是概念部分，讲解什么是H5；第2章是规范部分，用*通俗易懂的方式阐述H5的设计规范；第3章是H5的具体设计方法，从原型绘制、内容表达、版式设计、文字设计、动效设计、声效设计这6个要点展开细致分析，帮你学习设计H5网站；第4章是具体案例分析，对2015—2016年国内*好的H5项目网站进行深入分析；第5章收录10篇行业内容专访，内容会涉及到甲方、乙方、产品商、服务商等多家行业知名企业，能够让你对H5营销行业有更多认识和了解。
　　这不是一本简单的工具书，它由纸质书、配套网站、行业公众号构成，而这三者在内容和体验上又形成互补关系，你将会学习到非常系统的H5设计知识。
　　除了从事设计工作的设计师，本书同样适合H5网站设计的爱好者，本书对设计方法的阐述非常细致，但内容新颖、全面、多样并且具有开创性，特别适合H5网站的初学者来学习研究。

苏杭（小呆）我曾经是一名广告人，但后来我逃离了这个行业，成为了互联网设计师。而在完成这本书时，我的角色是内容服务商。在2014年，伴随着H5的出现，我投入到了H5的内容创作当中，并在随后的2年里，为行业留下了上百篇精品文章，对H5的理论概念、设计方法、核心价值等领域，做出了开荒性的探索与总结。而本书就是我内容创作的又一次新突破与新尝试。

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