作者：苏杭,栾大成
出版社：清华大学出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
H5+移动营销设计宝典试读：
前言
文｜小 呆创作背景
还记得在2015年春天，我刚刚从广告行业转入互联网行业，抱着对新工作的憧憬与向往，我开始在各大门户网站刊登设计评论文章，开始用自己的方式发出声音。
而让我这个互联网“乡巴佬”未曾料到的是，从第1篇内容《我理解下的：你去找个参考！》开始，文章内容的转发率和点击量非常高，简直出乎意料。而当我的文章更新到第6篇《H5广告—互联网视觉革命的先行军》时，我接到了来自清华大学出版社的电话邀约，而找到我的人就是栾大成先生，他后来成为了我的责任编辑。小呆早期网络设计文章
他的一通电话竟唤起了我学徒时代的一个愿望，那就是写书。而实现愿望的路径，居然就活生生地摆在了眼前，这太难以置信了！虽然我对写书一窍不通，但我毫不犹豫地就接下了项目，我当时还天真地认为，在2015年底小呆的书就能摆上货架，但谁又能想到，这个过程实际花费了接近2年的时间，而挂断电话的那一刻，我的人生轨迹也彻底发生了改变。
创作心路
在确定要以H5为主题写书之后，我开始将创作重心从现代设计史迁移到了当时刚刚兴起的H5上，为了能够开阔眼界和获得更多素材，我创立一个自媒体，它就是后来的H5广告资讯站，该媒体目前在H5营销行业小有名气，曾一度成为H5优质内容的行业代表。而在本书的创作过程中，因为内容太新、素材太杂、概念过于前卫，使得书的前期创作难以推进，你在市面上又找不到任何可以参考的资料，当时就连大纲都不知道怎么写。
迫于无奈，我在整个2015年都在摸索性地用自媒体来输出H5内容，希望能用内容来换得反馈、换得信息、换得灵感。而这一时期，在百度直接搜索“H5广告”时，会看到首页的几篇文章竟然都出自小呆之笔。这并不代表我的内容有多么优秀，而是因为这个领域太缺乏内容、太少人在真诚地做内容了。2016年底在百度首页，还是可以直接搜到小呆的文章
随后，在经历了近半年的思考与摸索后，我终于在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个维度创新：图书行业新商业模式的探索
只有当你深入一个行业时，才会发现它存在的痛点。尤其在设计出版行业，你会发现图书作者流失率高，内容产出量少，好多优秀设计师出了一本书后就再也没有产出了，而图书编辑们则苦于寻找内容作者，即使找到了合适作者，也很难看到内容的持续产出，这是为什么？
在这里，小呆提出了一个内容与渠道的二元理论：就在传统出版行业，你会看到“内容入口大而渠道出口小”的现状，作者为了写书投入了很大的精力和期望值，但是最后的回报却真的不成正比，所以很多人新鲜一下就不愿意再投入精力去写书了，而我提出的新商业模式探索就是针对这二元理论来的，我们是不是可以把二元颠倒过来去做反思，怎么样让“内容入口小而渠道出口大”？
这并非不可能，通常一位作者想要完成一本书的创作，要经历近半年的时间。但如果能把内容维度拉大到整个行业领域，让其他人、其他公司参与内容的话，你付出的精力就会小得多，而这对读者来说确实更有意义，因为他能够获得更多有价值的信息。这样，作者的内容入口就小了。
同时，因为图书的内容来源于多家企业、个人，在“人人都是链接出口”的互联网时代，几乎所有的企业和个人都拥有自己的粉丝群和内容渠道，那么我们是不是可以利用这些企业和个人的渠道来推广自己的图书？答案是肯定的，因为这本书不是小呆个人的，它属于所有内容创作者。只要大家前期达成一致，那么所有的内容创作者就会转变为图书的渠道出口，而关键在于这些内容出口更加精细，它真实地让图书的渠道出口变大了。传统设计图书模式本书创新模式
讲到这里，本书究竟是不是在写H5，似乎都不那么重要了，如果推论成立，那么本书也许会作为图书新商业模式的探索范本而影响设计出版业，为更多作者带来崭新的灵感，为更多读者带来丰富的知识。
作为一名设计爱好者，你可以在本书学到你想要学习到的H5知识和内容，作为一名互联网爱好者，你可以在本书找到新的形式、新的内容、新的方法，而作为一名出版行业的工作者，你将会在本书看到全新的思维方式和完全不同的行业视角。
这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书籍。灰昼 赤云社 创始人第一章认识H5与广告
在正式开始学习H5的相关设计之前，你还需要了解一些有关H5的基础知识，它能够让你在设计前期不会对行业以及概念困惑。H5究竟是什么？它又有多大潜力？为什么能够在2015年被引爆？又为什么能够成为广告营销的宣传利器？这些问题你都可以在本章获得答案。1.1传统广告怎么了？
当你在百度搜索“传统广告”时，迎面而来的居然是各种死相、病态、老土的质疑，叫人大跌眼镜！传统广告究竟是什么，它怎么就要“死了”？百度搜索“传统广告”获得的部分词条聊点传统广告的事儿“传统广告”这个词，实际是相对目前日渐火爆的互联网广告而生的。上世纪90年代末，中国经济松了大绑，伴随着经济腾飞和民族企业复苏，国人对广告的需求逐渐升温，开始探索新模式、尝试新内容。人们逐渐意识到，以前的那些大字报太老土，跟不上时代步伐。那时，营销还没那么多花哨的套路，所有迷恋广告效应的企业做梦都想干的事儿就是——攻克传播的制高点，让自己家的广告登上央视，刷亮全国人民的眼睛！电视机在那个年代是中国家庭的梦想，而营销人的梦想则是——成为CCTV的标王，为攻占高地不断冲刺！
随后，伴随外企进入大陆步伐的逐步加快，洋人带来了更多优质的洋货，同时也为中国带来了全新的广告生态——4A广告体系。小提示：“4A”源于美国，是The American Association of Advertising Agencies的缩写，中文为“美国广告代理协会”。因名称里有四个单词是以A字母开头，故简称为4A。
以奥美为代表的众多4A体系在那个时代开始陆续登陆改革开放下的中国。突然间，奥美360度的品牌罗盘、big idea的宏观打法、严密的逻辑、专业的服务态度、看上去无懈可击的庞大架构，以及各种配套的学术方法论、精神读物、改变世界的种种伟大理想，都统统飞了过来！面对这上百年的发展差距，脑子里只有“标王”的国人真的看傻了！被新事物冲击得措手不及，无力还击。部分进入中国的国际4A广告公司小提示：我清晰地记得在2013年第一次参加奥美大学培训时，看着那些上世纪90年代的成套资料，仍会在内心深处体会到其传播方式的巧妙和思维方式的不同。多年的沉淀和大量实践的累积，确实是你想学都要消化很久的，即使那已经是2013年了。
在那个年代，“国际”和“优质”戏剧化地变成了同义词。国人是那么迫切地想要拉开经济上的差距，那么迫切地想要得到外界的认可，面对汹涌而来的4A大潮，迷信般地将洋人大老爷奉为大神整日膜拜，而国际4A今天的导师架子就是那时开始养成的。那么本土广告人还有什么优势能和国际A4竞争？
最明显的优势是价格！只有在与国际4A高额服务费用对比时，本土公司才能显示出竞争优势。随后，国内逐渐形成了国际4A占据中高端市场，而本土公司占据中低端市场的格局，信息传输的载体也集中在了纸媒介和电视媒介这2个领域。4A广告体系也逐步成为了行业标准，不管哪家公司，都会一定程度照搬套用，如今广告公司的部门划分、比稿模式、提案方法等，都源于4A体系，而这就是传统广告的一个大致情形了。传统广告如今还是行业大佬么？
随着时间的推移，国际4A在中国体积日渐庞大，根基越来越深。人们开始慢慢习惯按照套路去思考，甚至出现不少道行尚浅的广告人认为4A是广告本意的代名词。而在广告公司你又经常会经历这样的情况：
人们把创意简报称作“Brief”，团队说成是“team”，把总监叫成“CD”，美术指导喊成“Art Director”等，这还不过瘾，每个人还硬要起个洋名字，没有起洋名的人在4A都不好意思和别人打招呼！讲个话非要夹两句英语，模仿台湾腔，摆出一副洋人的架势！即使是面对国内广告代理公司对国内企业进行常规提案，这种怪异的沟通方式也不会有人觉得别扭。然而！很多甲方专吃这套，会觉得你洋气，觉得你高端大气上档次！不管是甲方还是乙方，他们都在内心深处崇拜这套体系，4A模式不但占据了行业的制高点，还让一种外来文化成为了不少人的精神信仰。
如此牢不可攻的行业地位难道也能被改变？
就在近几年，智能手机逐步普及、纸媒迅速萎缩、电视开机率下滑，过去传统广告惯用的纸媒+电视的套路影响力开始减退，受众人群开始流失！当这帮4A大佬突然意识到带头大哥的帽子受到威胁时，中国的互联网已经从Web2.0狂奔到了移动互联网时代，全新的移动内容开始涌现。
甲方企业也同样成长迅速，其自身的营销团队逐步开始专业化。尤其是那些迅速崛起的大型互联网公司，他们的UED团队依靠着更为先进的理念和技术正在创造着传播的新方式，并开始逐步引导时代。广告营销与产品设计的界线开始变得逐渐模糊，营销也从之前的少数人的精英运动开始演变成人人都可以参与的大众化内容。
意识到危机的4A精英们打起精神奋勇直追，却被庞大阵营的缓慢限制住了手脚，他们捍卫的真理法则就像是一艘难以调头的大船。老前辈们太过留恋曾经创造的那些辉煌，不少转型路上的营销公司只把网络作为一般的执行部门来对付，先入为主地认为网络是辅助线下宣传的工具，却没有意识到受众人群接受信息的习惯已被改变！
对于执掌大权的这帮从上世纪90年代就开始奋战的营销人来说，这种认知的骄傲与局限甚至是骨子里的。就像是克莱顿·克里斯坦森在《创新者的困境》中提出的观点一样：“面对破坏性技术，再优秀的传统行业也将被颠覆。”对于标新立异的互联网领域来说，这个预言显得更有深意，而传统广告在营销领域的大佬地位也随之开始发生动摇。那么，传统广告会被打败么？
周鸿祎在《我的互联网方法论》里提到过一个核心观点：不管你有多优秀、有多么强大的适应力和创造力，但是在你的人生中永远有一个敌人是征服不了的，它就是“趋势”。如若不顺应趋势，即使你体积庞大、门徒众多，但也会随着时代的发展而变为配角，然后逐渐消失。传统广告积淀了那么久，怎么可能会像网上搜出的那些文章说的说亡就亡，它依然会继续存在，并且会维持着庞大的体量，影响力仍然不能被小看！
但倘若传统广告不能顺利转型，它将会从主角逐渐演变成配角儿，而光芒万丈的4A体系也将会从真理法则演变成经典法则。当大多数人不再看电视、不再关注纸媒，全部转向移动互联网时，当传统的多媒体呈现方式逐步在转向立体的超媒体时，我们接受信息的方式也将发生改变，营销将不再受限于传统媒介的枷锁，由多媒体向超媒体转移。而这一切正在眼前发生着！
看看如今营销行业前线的领头羊吧，再也不是那些国际4A，再也不是那些吆五喝六的“歪果仁”了，而是一批逐渐显现并拥有互联网思维的新型本土公司！营销与产品的界线也在日渐模糊，好的互动创意开始不断从本土涌出。
而当具备本土特色的H5网站在互联网频频刷屏时，整个行业的裂变速度又在不断加速！H5并未在游戏行业率先引爆，反而是在互联网营销领域先被关注。借助H5的新形式，我们看到了一个更为多样的互动未来，而把握这样的趋势不仅仅是为你未来的设计工作做准备，更重要的意义在于提升你应该有的新眼界。1.2H5究竟是什么？
从2014年起，一个叫做“H5”的词出现了，它稀里糊涂地火成了辣子鸡！不光是从业的互联网人、营销人，甚至那些其他行业的从业者也被引入漩涡——就连卖水果的、卖大米的、做服装加工的传统制造业的从业者也开始迷信H5效应，相信它有某种神器的力量！那么，问题也来了，谁能给我解释解释这么神奇的H5究竟是个什么东西？● 有人说，H5是HTML5的缩写，一个很厉害的新技术。● 有人说，H5是植入在微信内、能分享、会动的网页。● 有人说，H5是超级移动PPT、是网页版的APP。
那么，究竟哪个答案才是正确的？
想了解H5，我们必须认识一个来自网页的标记语言——HTML
HTML，全称为Hyper Text Markup Language，中文直译为“超级文本标记语言”，1994年由万维网（W3C）发明，它的作用主要是用来标记编辑我们今天看到的几乎所有网页的框架，也可以简单地把HTML理解为是用来标出位置的一套规范，随着时间的推移，如今的HTML已经成为了网页标记语言的行业规范，而我们今天看到的大多数网页就是由HTML、CSS、JS（JavaScript）一同编写实现的。这3套语言也被称为构成网页最重要的“三驾马车”。如果把网站比喻成是一个人，HTML相当于人体的骨骼，CSS相当于人体的血肉，而JS相当于人体的动作。
从1994年到2014年这20年之间，HTML完成了5次重大升级换代，直到2014年10月HTML5最终定稿。相比HTML4来说，HTML5新增了很多标记，包括WebGL的3D编辑能力，并且真正摆脱了Flash这类第三方插件，能够独立完成例如视频、声效甚至是画画的操作，这同样也宣告了曾经统治世界网页舞台的Flash+IE的黄金搭档将逐渐成为历史。2007年，在WWDC开发者大会上，乔布斯宣布iPhone将支持HTML5
由于移动互联网的兴起，得以让苹果和谷歌联手引领了网页技术，并推广了HTML5这唯一可以通吃PC、Mac、iPhone、iPad、Android、Windows Phone等几乎所有电子设备的跨平台语言。从而也就成就了HTML5在移动互联网未来的主流地位。
HTML5是HTML的第五次重大修改，而这套标记语言就是构成网页的基础，如果同学们平时观察网页的后缀，就可以看到.html的字样，它并不是什么高端技术，只是一套新的规范，像是法律法规、公司制度一样，是用来规范网页的。“H5=HTML5”是否可以成立？
很多人会认为二者是一致的，那么我们先从H5说起。第一个起H5外号的人真的很难找到了。使用这个名字，也许是因为好记顺口，也许因为名字特别洋气，也许因为太多传播者忽视应有的知识背景，无所谓名称含义……而H5这个名字在营销词典里一经出现，不出半年就波及到了全国。于是，人人都知道有个很厉害的东西叫H5！也都胸有成竹地把它当成高端技术拿来叫卖。但在整个链条中，技术阵营开始觉得不对劲了。
很多人会觉得H5是HTML5的缩写，这个看似合理的说法实际是愚蠢的，因为HTML本来就已是缩写，再缩一次，又是个什么鬼？H5也不是规范，它更像是技术执行方式，有很多功能和特性，所以H5=HTML5是根本无法成立的！程序员与需求方的聊天：需求方：你会做H5么？程序员：什么是H5？需求方：（吱吱呜呜地回应）不就是HTML5么？网上都这么说的，是个缩写。程序员：你让我做的是个网页框架么？需求方：大家都是这么叫的，我给你个参考你照着做就是了，就是那个朋友圈里能接电话的。需求方：大哥！它不是HTML5好不好！
能够成立的是，H5确实涉及到了HTML5的诸多规范，你想做一个H5页面或多或少都要利用到HTML5的很多内容，而二者只是有联系，并非对等。在2015年上半年，随着H5的火爆，引起了一场技术阵营与营销阵营的“定义争锋”——当时在互联网上两方大打口水之战，对定义展开了一场博弈，结果虽然是技术阵营妥协，但也证明了HTML5和H5的内涵并非完全一致。“H5=微信网页”是否可以成立？
从切身体验来说，H5似乎就是基于微信的网页，但实际并非如此，大多数情况下，我们是通过朋友圈和微信群来观看H5网页的，但实际上我们利用任何浏览器都可以观看H5页面，不管是PC端还是平板端。跳出朋友圈，H5依然可以被浏览，它的特效和演示甚至比你在微信看会更加流畅！
原来是因为微信集成了移动端浏览器，离开微信，H5照样可以正常观看，只是因为人们习惯了通过朋友圈打开H5来观看网页。所以，H5并不是微信网页，它是一个更大的概念，只是因为微信巨大的用户群，让H5集中于微信，让人们觉得这个页面就是微信独有的，也让H5成为“微信网页”的代名词。
如果不相信的话，你可以复制微信里H5网站的地址，然后粘贴到PC端或者手机端的浏览器看看，你会发现效果一致。
因为微信的原因，才使得H5能够迅猛发展起来。但是H5并不是微信的专有网页，H5的概念远大于此。复制微信内的页面地址在手机浏览器粘贴地址在手机浏览器看到同样效果“H5=移动PPT\APP”又是否可以成立？
我们经常提的PPT，实际代指幻灯片的意思，人们把PowerPoint用惯了，就把它等同于幻灯片，而很多幻灯片不是用PowerPoint做的，成了习惯也就很难改过来了。H5确实能实现移动幻灯片的功能，但它不仅仅是移动幻灯片，它能实现的事情远比移动幻灯片要多得多！
手机端的APP在今天当然是可以用H5来实现的，但是APP还存在原生开发模式，也就是我们常说的Native APPS（原生程序），H5和Web APPS的关联实际更大，它们是相互包含的关系，而微信在2016年年底推出的“小程序”就是一个完全依靠H5来改善现有APP诸多问题的解决方案，“小程序”下的“小应用”是一个H5版本的移动APP，但即使如此，APP与H5也不可以对等。而网上看到的"H5 APP"这样的名词也更是让人费解，“H5 APP”并不等于Web APP。幻灯片领域的3大制作神器那么H5究竟是什么？
所有的常规猜测和网上的话题引导我们都论证了，结果全部不成立！
当我们重新把所有内容放在一起时，你会发现H5它包括了HTML5的标记规范，运用到了例如CSS、JS（JavaScript）等多种计算机语言，可以实现多种动效和视听效果，会利用到后端和前端的多种功能，主要在手机端传播，可以跨平台在PC、平板上浏览等等。
当我们在这些所有包含的特性上寻找共性时，我们得到了一个意外的答案，H5不是HTML5、不是微信网页、不是移动PPT。
相反，从某种意义上来说，它是这些东西的母级，H5所指的就是移动网页本身，它能够包含所有这些分支！H5与HTML5、Web APP、Minisite、Flash、PPT的关系图
H5是中国人制造的一个专有名词，就像是我们喜欢把“苹果7”说成是“肾7”一样，为的是通俗好记。但H5坏就坏在它看上去像是个英文缩写，似乎是某种尖端技术，实际上国外根本没有这个说法，老外都不知道这个H FIVE是个什么东西，看上去极为洋气的玩意儿，原来是个假冒的本土货！我最初希望看到国外的H5网页，但是不管怎么搜、怎么找都找不到，后来在多方的查询和努力下，通过HTML5 website、webapps、Minisite这样的词条才能找到类似的网站，而你却无法找到一样的东西，就目前国内H5的发展来看，实际已经在某些领域走在了世界的前列，尤其是移动营销领域。
还原HTML5 website、webapps、Minisite的母级，从我需要寻找的特性来看，同样是移动网页的意思，它的遭遇就很类似我们平时老挂在嘴边上的PPT一样，我们说的实际不是PowerPoint，而是幻灯片。同样的，我们讲的不是H5，而是移动网页。就像是很多人很熟悉PPT，但并不知道什么是PPT一样，很多人熟悉H5，但是也不清楚它究竟是什么，那么费这么大劲了解定义又有什么用？了解定义的作用
直到今天，我还经常会收到很多设计师朋友的求助，他们总会发来一个链接，问我这个是不是H5；而通常情况我都没有必要打开，因为如果不是移动网页，你怎么可能通过微信发给我？当人对概念模糊时，是根本无法进行有效创作的，他们会盲目跟风，会被他人的成功和举动所影响，就像是2015年~2016年在国内发生的情景，90%的创作者只会跟风，对H5本身的误读造成了他们创作的屏障。而H5是个崭新的领域，它最需要的就是我们这些设计者的开荒，伪装接电话、伪装朋友圈、视频的第一次大胆植入、3D交互效果的第一次运用，这些举动没有对H5本身的理解和认识，是根本无法实现的。
当你知道移动网页能做的H5都能做时，这实际是对开发者想象力的一种解脱，你的参考对象再也不是其他人的案例，而是移动网页技术本身，这对设计者的意义巨大。所以说，认识H5的定义是你有效设计的开始，而下一节我会告诉你H5究竟有多大的潜力。1.3H5与未来数码设计
还记得在2010年，王受之老师在一次讲座中意味深长地说到：自己当初去美国，就是想把外国成熟的设计体系搞明白，然后沿用回国。而自己兜了一大圈后，居然发现美国的设计教育已非昔日面貌，经典的平面设计居然被肢解成了多个与网络有关的方向。老人感慨到，他苦心想要求得的东西，已不再是主流，美国的设计教育正在全面发生变革。
2011年，在一次读书会上，学生询问陈丹青老师，国外当下的艺术设计是什么时，陈老师的答案有两个重点词：一个是“数码设计”，一个是“你根本无法想象”……虽然，我没能听到具体答案，但那股子坚信的语气让我印象深刻，我真的特别想知道那个“数码设计”是什么？
2012年，李涛老师在清华做公开演讲，他当时把自己的设计教育定义为一种叫作“超媒体”的教学机构，并且宣称这是下一代的设计形势，是行业不远的未来方向！小提示：王受之，设计理论和设计史专家，中国现代设计和现代设计教育的重要奠基人之一；陈丹青，艺术家、作家、文艺评论家；李涛，Adobe中国专家，Adobe教育计划教师认证体系主讲。
这些前辈们在思考的事情看上去神秘而有趣，参与者的积极性已被调起。但当时我并没明白他们讲的是什么，内容太过于抽象，难以理解！而伴随着困惑和未知，直到2014年当我遇到了H5时，我似乎才找到了些头绪——原来你们在影射的东西现在终于出现了！
由互联网引发的一系列连锁反应在沉淀数年后，终于蔓延到了互联网相关的设计行业，而整个行业在H5出现后，又迎来了一场新的变革，这场战役才刚刚开始，它将会被全新的“超媒体”所引领，而H5也将成为整场变革的先行军。
那么什么是超媒体？超媒体与多媒体又区别在哪里？超媒体是什么？
超媒体是个有点抽象的概念，我们需要从多媒体的特性讲起，那么什么是多媒体？
多媒体（Multimedia）是多种媒体的综合，它是组合两种以上带有人机交互式传播的内容形式。所涉及到的媒体包括文字、图片、声音、动画、影视等等。像是我们熟悉的PPT幻灯片就结合了图片、文字、音乐来传递信息，这就是常见的多媒体了，让传递的内容丰富并且多元化。
而由“多”转变为“超”，这中间究竟意味着什么？
超媒体所利用的媒介种类和多媒体类似，也是图片、文字、声音、视频等，但不同之处在于它具备了“非线性”。并且能够把所有已知媒体形式进行肢解和解刨，为了一个全新的主题，而最后形成全新的个体，也可以说是媒体的深度“资源整合”。从传统美术上来讲，原理很类似于毕加索的绘画特征，试图将三维的世界在二维平面里展现，也和电影的剪辑概念特别相似。小提示：关于毕加索的抽象画解析内容来源于《艺术与视知觉》。
这理解起来还是有点困难的，那么咱们先来解释下什么叫“非线性编辑”。影视编辑软件Final Cut主界面，图片来源于苹果官网
电影我们都熟悉，而它就是很典型的“非线性编辑”。电影前期的制作阶段，剧组会拍摄大量影视素材，而每段影视素材都是相互独立的。通常是一段段，一场场的影视素材。如果你直接把它们拼在一起，马上就会觉得特别生硬、别扭，前后会连不上，看着会不舒服。要么是有穿帮镜头，要么是逻辑或者时间不对称。
面对不同样式的素材，剪辑师会根据最初规划的故事剧本去从各种片段中截取一个个需要的部分，然后最终拼成一个符合要求并且符合体验习惯的整体视频，这个过程就是非线性编辑——先拆分各个部分，然后重新组构（见本页配图：视频素材、音乐素材被切割成了不同的部分并被重新组织成新的整体）。
把一大堆相对独立的素材进行修改和裁切，然后合并成新的统一体——这就是电影层面的非线性编辑，但常规意义的电影并不是超媒体。那么超媒体的“非线性”又是什么样子？
超媒体的非线性编辑不像多媒体的线性编辑那么简单，它不是堆积或者罗列一连串歌曲、视频、图片这样的内容，而是在一个空间载体内重新将各媒体的固有内容进行肢解和组构，它打破了传统的单一媒体界限和固有思维，将平面媒体、电波媒体、网络媒体互相整合，并能够左右在一个区域，把原本在一个时间点上只能呈现单一感觉的体验扩大到了听觉、视觉、交互这3个维度，从而让人产生更为身临其境的代入感。
电影的素材是音乐和视频，而超媒体的跨度要比电影的跨度大得多，它可以包括我们已知的所有媒介形式，从Flash引领的Minisite网站到如今由HTML5兴起的H5网站，在超媒体的逐渐深入运用下，我们距离未来数码设计也越来越近了。这里面有几个H5商业案例，可以帮助你理解什么是超媒体。
NO.1：早期具有超媒体特性的H5案例，在H5中，我们看到了字体的平面设计、影片的片段、电影原声的截取、动画表现、交互的点击，如果你单独去看每一个部分，它们都是残缺不完整的，但当你把这些元素拼合在一起时，整个体验的感受要胜过任何一种媒介的表现力。
NO.2：一个很有代入感的“一镜到底”案例（“一镜到底”是一个影视上常用的概念，它指代一组画面从头到底进行的过程中没有出现剪辑和内容跳转。），在整个体验过程中包含了动画表现、3D场景表现、平面排版与动效设计、声效设计，而这个过程是由用户的交互串联起来的，当你把各个部分切割出来时，它们同样也是残缺不完整的。而这种用交互来串联起各个不同形式媒介，最后形成混合体验的内容就具有超媒体属性。超媒体的具体特征
一直以来，我都很难想通，究竟如何将那么多种媒介的碎片统一在一个内核，这太过于抽象，必定媒介之间存在差异，把平面设计和三维设计拼在一起？这不是开玩笑么，怎么拼？后来我发现，解决问题的关键点，最终落在了交互这个环节，也就是你和设备的互动方式。
人往往在具体操作设备（如手机）时，精力是高度集中的，这得益于目前移动设备的多点触控技术和不同传感器的植入。我们已经可以对设备进行多种操控，而当不同的操控方式可以牵引出不同动态时，一方面人们在体验上不会感到别扭和不自在；另一方面，它让我们可以围绕交互去组织多种形式。
例如点击、滑动屏幕、语音口令、摇一摇都是明确的指令，当指令下达后，我们可以根据指令来响应内容，利用不仅仅是视觉的媒介来响应操作。我们滑动后可以触发一连串的声音画面特效，可以根据你手指压力的轻重变化，来改变网页内容的画面和空间，而这就是超级媒体——不拘泥于任何媒介，同时又会利用多种媒介特性，交互把各个不相容的媒体形式重新串联了起来，让超媒体的展现成为了可能。
和之前PC端的Minisite网站不同，H5网站在交互上有着更大的延展性，而且凭借移动互联网全新的受众人群，H5网站也更具备优势，它把超媒体的内容从小众网站逐渐变为了公众内容。
而超媒体的具体特征我们归纳了3个基本点：超媒体实现的4个条件（一）网络速度
因为超媒体的内容不像是一行短信或者一张图片只有极小的体量，它是一连串的，并且能在无限领域传输的。所以，需要较为强大的网络环境作为传播支持。因为4G网络的大量普及，才使得多种媒介的无线传输变成了可能，网络速度越好，呈现形式就可以越复杂、多样，而在2G时代，这是不可能想象的。所以，H5网站有条件火爆起来，网络环境是它的传播基础，随着网络环境的不断优化，H5的表现力也会逐步提升，现在也还是开始阶段。网络速度超媒体思维超文本语言设备支持（二）超文本语言
试读结束[说明：试读内容隐藏了图片]