《H5+移动营销设计宝典》epub+azw3电子书

小呆的公众号，已是H5业界内容的风向标。鉴于H5突出的互动特性，我们意识到平媒根本无法满足其对创意、技术、动效、声效的解读，于是我们设计了图书网站，并在书中植入大量二维码作为连接；使得公众号、图书网站、纸质书三者形成互补关系，满足了内容演示、更新、互动的多重功能，这在国内是难得的首创！；H5本身还带有技术、设计、艺术、广告、营销等多重属性，所以，对于在职读者来说，需要了解大量信息和业界动态，才能在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=移动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

前 言
文|小 呆
创作背景
还记得在2015年春天，我刚刚从广告行业转入互联网行业，抱着对新工作的憧憬与向往，我开始在各大门户网站刊登设计评论文章， 开始用自己的方式发出声音。
而让我这个互联网“乡巴佬”未曾料到的是，从第1篇内容《我理解下的：你去找个参考！》开始，文章内容的转发率和点击量非常高，简直出乎意料。而当我的文章更新到第6篇《H5广告—互联网视觉革命的先行军》时，我接到了来自清华大学出版社的电话邀约，而找到我的人就是栾大成先生，他后来成为了我的责任编辑。
他的一通电话竟唤起了我学徒时代的一个愿望，那就是写书。而实现愿望的路径，居然就活生生地摆在了眼前，这太难以置信了！虽然我对写书一窍不通，但我毫不犹豫地就接下了项目，我当时还天真地认为，在2015年底小呆的书就能摆上货架，但谁又能想到，这个过程实际花费了接近2年的时间，而挂断电话的那一刻，我的人生轨迹也彻底发生了改变。

创作心路在确定要以H5 为主题写书之后，我开始将创作重心从现代设计史迁移到了当时刚刚兴起的H5 上，为了能够开阔眼界和获得更多素材，我创立一个自媒体，它就是后来的H5 广告资讯站，该媒体目前在H5 营销行业小有名气，曾一度成为H5 优质内容的行业代表。而在本书的创作过程中，因为内容太新、素材太杂、概念过于前卫，使得书的前期创作难以推进， 你在市面上又找不到任何可以参考的资料，当时就连大纲都不知道怎么写。迫于无奈，我在整个2015 年都在摸索性地用自媒体来输出H5 内容，希望能用内容来换得反馈、换得信息、换得灵感。而这一时期，在百度直接搜索“H5 广告”时，会看到首页的几篇文章竟然都出自小呆之笔。这并不代表我的内容有多么优秀，而是因为这个领域太缺乏内容、太少人在真诚地做内容了。

随后，在经历了近半年的思考与摸索后，我终于在2016 年初，摸索出了内容访谈计划。在整个2016 年上半年，我走访了北、上、广、深，先后拜访了超过30 家H5 相关一线企业， 这里面包括腾讯TGideas、百度MUX、中信集团、万达集团、搜狐新闻、中国青年报等，以及： W 上海、VML 上海、上海鱼脸互动、UID WORKS 北京、LPI 北京、LxU 北京、WMY 北京等国内优秀一线供应商，还包括兔展网、易企秀、iH5、意派360、木疙瘩等行业工具商。在这个过程中本书的大纲也终于在摸索和推敲中被最终确定。而在随后的具体执行中，我也开始渐渐意识到了这本书的不同，它很可能会成为国内第一本真正意义的互联网 纸质图书。也因此，在这一时期我找到了前端工程师徐松作为本书的重要合作者加入，而整本书的网站建设与运营都由他完成，这本书一半以上的内容被放置在了配套的网站（www.ku-h5. com）上，因为有这个特殊的内容设计，所以我才敢称它为真正的互联网 图书。也为了能够让本书呈现出更好的面貌，我独自完成了本书的内容构思、大纲创作、内容编写、素材收集和整理、封面设计、版式装帧设计、网站视觉设计和后期的部分推广执行与策划，而这一系列烦琐的工作也终于在2016 年底基本完成。可以说，这本书浓缩了我两年来对H5 的所有认知，而它的顺利出版也是我这5 年来，设计工作的一个完整总结。
本书的创新性第1 个维度创新： H5 营销设计类第一书我不知道在2017 年是不是有人会出同样题材的书。即便其他人也在做，我同样相信自己的书是最特别的，这取决于内容的维度，你看到的内容不再是一位作者、一种思维的智慧传达，而是结合了多家公司、机构内容的精华整合。在这个维度上，我更像是一个带有作者名号的 “搬运者”，我将这两年来的行业优秀内容收入本书，并总结归纳。而对于读者来说， 你将会看到更为丰富多样的内容，这些内容所表达的东西相互之间不完全统一，甚至会矛盾。但这并不重要，多维度的分析不仅仅会让你学到设计技巧，还会让你更加了解行业，这不是一本教你“点哪里、画哪里”的教程，也不是一本用来宣传某某公司产品或某某品牌工具的宣传册，它是一本真正意义的行业设计宝典，非常客观地为你讲解何为H5。第2 个维度创新：第一本真正意义的互联网 图书带有“互联网 ”名号的图书国内已屡见不鲜，为什么它是第一本？难道因为H5 ？ 没错，就是因为H5，但H5 只是载体，真正让本书与众不同的原因来源于它对形式和内容上的全新探索。传统图书以纸张作为载体，承载信息比较固定，很难有后续变动。而在近年来，随着互联网的发展，我们开始将二维码加入图书，试图去创造新的增值内容。但就目前为止，所有图书的网站植入、网盘植入、二维码植入都还比较单一，除了跳转文章，就是老套的配套视频， 你只有通过电脑才能观看这些附带的信息。而本书为了突破这个限制，专门为图书开发了配套网站（www.ku-h5.com），它与本书内容深度链接，读者能够通过书中的二维码随时跳转到内容相对应的网站演示、内容演示、文字演示、可交互动效演示、视频演示、声效演示等， 如此多维度的呈现方式在国内的纸质出版物中应该是首次，这是内容层面真正的互联网化， 让物理纸张与移动设备产生了更进一步的联动。本书中的5 大演示分类，扫码二维码会跳转相应演示纸张上的字虽然是死的，但是挂在网站上的内容却是活灵活现的，图书的配套网站收藏了海量的行业讯息与设计资料，并且会随着时间的推移进行有效更新，而且纸质图书与网站、作者，你将会在本书看到全新的思维方式和完全不同的行业视角。这3 个维度的创新应该说就是本书的精髓所在了，本书最大的价值不在于内容本身，而在于组织内容的方式和思考过程。最后，希望小呆两年来的努力和尝试能为这个新兴行业做出一些有价值的贡献。眼看2017 年的春天又要到了，我也终于完成了这曾经让我天天发愁，天天睡不好觉的任务了，也许最后小呆真的什么都没能改变，但我真尽力去写、努力去想、尽力去做了，作为一名设计师，希望我的这本设计图书能为你打开思路，能让你有所感悟，至少我的人生因这本书发生了改变，谢谢你能看到我写的前言，我是小呆，希望有一天我们能成为真实的朋友！ 苏杭（小呆）于南京

媒体评论
推 荐
来自支持本书的好友们
阅读本书的读者，或许是因H5这个火爆的关键词，但这本使用了“H5 纸书 互联网”的新概念图书却不是一个追赶潮流的产物。从苏杭在站酷发表*篇H5话题文章开始，H5广告经历了很多变化，一时被认为是革命性的利器，一时被认为是哗宠取宠的噱头，但苏杭没有随着风向的流转改投其他更流行的领域，而是从此在H5广告扎下根来。他深度采访了国内几乎所有优秀的创作团队和从业者，坚持更新媒体内容并与业内产生广泛交流。这种严谨治学的态度让这本书有了更深的积累和更大的广度，相信这么一本匠人式的图书，会带来比话题书更多的营养。
纪晓亮 站酷网 联合创始人

这是一本非常有价值的行业指导丛书，本书尝试回答了H5广告与设计领域*令人关注的诸多问题。作者从概念、技法和行业这三个角度综合阐述了何为H5广告、H5广告的创作方法以及这门技术在未来的各种可能性。
大中华区权威数字媒体 数英网

在互联网传播领域，H5开启了交互广告时代，也让用户逐渐成为了广告的参与者，大大提升了广告传播的精准性和有效性。本书恰好是通过H5的相关设计、精品案例诠释了H5广告所具备的文字、动效、音频、视频、图片、图表和互动调查等各种表现于一体的营销惊喜和新契机。
田爱娜 HTML5梦工场创始人
H5 营销案例从构思到落地全过程。一本好书看目录就让你爱不释手，怎么办？买呗。
张鹏 优设哥

移动互联网时代为我们带来很多新的模式和玩法，也给有价值的个体创造了新的空间。很开心在探索和创作的路上，能有小呆陪伴，一起见证新兴领域的成长，同时带着自省与反思关注更长久的未来。
李若凡| LAVA 腾讯TGideas 创意总监

H5 的应用，在近两年来呈风起云涌之势，几乎成了品牌和产品宣传推广的标配，“刷屏” 一词大都与这一应用形态有关，但有关H5 的系统性内容归纳和研究还比较鲜见， 本书的出版，填补了这一行业空白，对于广大新媒体运营和品牌营销人员是个福音。 这本H5 专著，没有流于技术和理论说教，而是通过诸多经典案例和对案例背后的操刀人专访，从心法和技法两个维度对H5 创意、设计和交互等进行生动剖析，属于典型的工具型实战手册和方法论，读后收获良多。
张瑾 万达集团企业文化中心新媒体 总经理

虽然我并不精通H5，但我知道认真负责的人就会是一个好老师，而小呆的书条理清晰并且浅显易懂，不愧是站酷优秀的推荐设计师。
李涛 高高手

H5 从2014 年兴起，历经了两年多的发展，已然成为移动互联网时代营销传播的重要形式，小呆无疑是H5 领域中，*秀的行业观察者与评论者之一。通过“H5 广告资讯站”， 小呆持续贡献了非常多的专业文章。相信很多H5 领域的同行们，都从中汲取了有价值的信息与知识。这本新书的出版，由小呆历时近两年观察积累、精心打磨而成，这也是*本真正意义上的H5 设计指导书，不管是领域新人还是行业老兵，相信都能从本书中有所收获。
赵玉勇 意派Epub360 联合创始人 & COO

H5 到底能干什么？我相信读者能在这本书找到答案。但我更相信作者的初衷不仅于此， 更多是要展现H5 的可能性，因为更多的可能性才是H5 的魅力所在。去创造可能性吧，不要模仿和抄袭。别以为整段整段地照搬代码，换张图、换首音乐就是作品了。随着手机等硬件处理器速度的不断提升，越来越多可能性等待我们去发掘。只有业内同行共同努力，不断创新，才能让H5 活得更久。H5 只是工具，重点不是它能干什么，而是它还能干什么！
Laurent jiang VML 上海 创意合伙人

如果你爱H5, 可以看这本书；如果你恨H5, 应该读这本书；如果你觉得H5 是中国社交媒体独有的划时代发明，你要好好看看这本书；如果你觉得H5 只是一个阶段性的泡沫热潮， 你应该认真读读这本书。无论是爱是恨，你都无法忽视H5 在中国社交传播中的存在。无论是不是H5，创意都永远在以各种样貌改变着我们的生活。
周宁| Zane zhou 奥美广告创意总监& 广告导演

说到行业书籍，传统广告人毫无疑问是幸福的。时至今日，你依然可以轻松地找到平面、插画、摄影、各类奖项、营销案列等等细分的各类广告图书。但说到国内数字营销行业，再细分到移动端营销类图书，那就凤毛麟角了。感谢小呆投入热情与精力编纂本书，让仅仅存在于数字空间的这些优秀案例*次跃然纸上。若干年后，再次翻阅此书的你早已不再是行业新人，你是否还会对当年的这些案例以及执行技法记忆犹新？相信，时间会给出答案！
Spens LPI （良品互动）创始人

从2016 年火爆朋友圈的吴亦凡入伍开始，越来越多的社会化营销都和H5 密不可分， 也经常有朋友找我咨询H5 的问题，然而我发现很多人对于H5 的理解仅仅停留在用户表层， 比如抽奖、邀请函、小游戏等。但在本书中，你可以看到小呆对于H5 更深度地诠释与未来数码设计相合的更多可能性。书中总结的设计方法和使用手册从应用性的角度展示了H5 的更多可能。非常推荐对H5 感兴趣的你，一定能获得不少收获。
蒋彪| cman 青木treedom 创始人

我们喜欢看案例是出于两种原因：*，为了窥视项目中的细节，解剖创意和制作过程， 找到真正能为我所用的灵光乍现 ；第二，希望把案例当成一种动力，告诉自己，瞧！别人做的已经都在这里了，我要做的和他们不一样，而且我做的会更好！这两种动机也可能同时存在，有时会很难讲透彻。但不管怎样，有一点是肯定的，无论是出于哪种原因，你首先看完这本书。因为，H5 的将来虽然未知，但H5 的过去基本都在这里面了。
老徐| OLD XU 鱼脸互动 创始人

小呆是中国泛H5 领域的先行者、探索家和引路人，他用勤奋、辛劳、无私、智慧筑灯塔， 为求知者领航。
崔长杰 福禄寿禧来品牌传播机构CEO

因一些事情和小呆有合作，发现小呆是个特别认真的人，从H5 的技术到表现再到创意趋势都有很深的研究，对细节研究甚至精确到一段背景音乐或者一段代码的使用；毫不夸张地讲，这本书恐怕是中国*好*全的H5 书籍。
灰昼 赤云社 创始人