H5＋移动营销设计宝典 苏杭.pdf

本书封面贴有清华大学出版社防伪标签，无标签者不得销售。版权所有，侵权必究。侵权举报电话：010-6278298913701121933图书在版编目（CIP）数据H5+移动营销设计宝典苏杭著北京：清华大学出版社，2017ISBN 978-7-302-46855-4H苏超文本标记语言程序设计TP312.8中国版本图书馆CIP数据核字（2017）第056940号责任编辑：栾大成封面设计：杨玉芳责任校对：胡伟民责任印制：杨艳出版发行：清华大学出版社网址：http:/，http:/地址：北京清华大学学研大厦A座邮编：100084社 总 机：010-62770175邮购：010-62786544投稿与读者服务：010-62776969，c-质量反馈：010-62772015，印 装 者：北京亿浓世纪彩色印刷有限公司经销：全国新华书店开本：170mm230mm印张：20字数：455千字版次：2017年6月第1版印次：2017年6月第1次印刷印数：16000定价：79.00元产品编号：066331-01小呆（苏杭）我曾经是一名广告人，但后来我逃离了这个行业，成为了互联网设计师。而在完成这本书时，我的角色是内容服务商。在2014年，伴随着H5的出现，我投入到了H5的内容创作当中，并在随后的2年里，为行业留下了上百篇精品文章，对H5的理论概念、设计方法、核心价值等领域，做出了开荒性的探索与总结。而本书就是我内容创作的又一次新突破与新尝试。内容简介这是一本关于H5移动营销网站设计的专业设计图书，它不仅仅会教你一些具体的设计方法，还会让你了解H5的内容定义和规范、看到行业的现状和了解行业未来的走向。本书共分5章，第1章是概念部分，讲解什么是H5；第2章是规范部分，用最通俗易懂的方式阐述H5的设计规范；第3章是H5的具体设计方法，从原型绘制、内容表达、版式设计、文字设计、动效设计、声效设计这6个要点展开细致分析，帮你学习设计H5网站；第4章是具体案例分析，对20152016年国内最好的H5项目网站进行深入分析；第5章收录10篇行业内容专访，内容会涉及到甲方、乙方、产品商、服务商等多家行业知名企业，能够让你对H5营销行业有更多认识和了解。这不是一本简单的工具书，它由纸质书、配套网站、行业公众号构成，而这三者在内容和体验上又形成互补关系，你将会学习到非常系统的H5设计知识。除了从事设计工作的设计师，本书同样适合H5网站设计的爱好者，本书对设计方法的阐述非常细致，但内容新颖、全面、多样并且具有开创性，特别适合H5网站的初学者来学习研究。序言文李三水如何判断一本书值得一读？如是常规文学题材，必然没有标准答案，更多因人而异，因需索义。本质上，所有斩钉截铁的推荐，其实都是主观偏见的结果，最终读书获益的多寡，还是取决于书籍内容本身适不适合你，与其他方面关系有限，更与作者关系有限，君不见大批名人出书，盛名之下展卷开来，多是满目狼藉。但对于一本工具书的推荐，我却有一个简单而有效的方式，可供验证一个稍显客观的标准：先看书的内容，不如先了解作者是谁。因为就工具书而言，价值标准理应恒定：“如何更简单轻松地掌握一门技能，甚至通晓这门技能背后的行业时势？”再翻译得简单一点，就是：“如何速成专家？”而这一点的价值认定，最好的方式莫过于先了解作者的专业能力与成书背景，恰如只有真正的武林高手，才能铸就真正的武学秘籍，或至少此人要与天下高手们切实有过交集，不然所有经人转述或个人臆断的江湖绝学，多为偏门歪论，经不起推敲，更谈不上流传。但本书作者小呆（朋友间的昵称），确是本人亲身相处并实质接触过的一位特殊朋友，谈及特殊，在于我们之间交流其实并不算多，真正面见交流的次数，至今也未超过两回，但为何可以朋友相称，全在于他本人近两年来，在其自媒体号（“H5广告资讯站”）中持续发表了很多质量极高的案例分析文章，其间对于H5行业发展的辨知与体察，对于市场上优秀H5作品的去伪存真，很多时候的洞见与判断，都富涵前瞻性与思考性，甚至超越部分H5作品原作者的最初立意，更带来更有价值的二次启发与行业趋势预判，这一点相信也并非我的个人判断，而应是行业公认。而这样的研究精神与严谨态度，相较于做作品搬运工与贩卖一手信息的行业风气而言，对于H5这样一个诞生时间不长、发展条件多元、行业风气浮躁、评估标准混乱的营销工具，更是难能可贵且让人心生敬意。可能，用作品说话的人，本不需要作品以外的其他论据来为自己证明，但如果想要为一个优秀的作品续命，就必然需要一个比你更理解你的作品，甚至比你更爱你作品的人，来与你琴瑟和鸣。很幸运，W和我，在H5这一方领域能够相遇小呆，也很荣幸，可以见证小呆的这份心力得以问世，对于自诩为“不做创意人，只做创造者”的人而言，自己的本分只是创造，而如何让自己的造物可以历久弥新，更再生出一份教化启发的意味，则得益于知音的多寡。好在，高山流水，从未曲高和寡。谢谢小呆，野狗（编者注：W公司的图腾）愿与所有移动营销领域的创造者们共勉，共鸣。李三水by W前言文小呆创作背景还记得在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-）上，因为有这个特殊的内容设计，所以我才敢称它为真正的互联网+图书。也为了能够让本书呈现出更好的面貌，我独自完成了本书的内容构思、大纲创作、内容编写、素材收集和整理、封面设计、版式装帧设计、网站视觉设计和后期的部分推广执行与策划，而这一系列烦琐的工作也终于在2016年底基本完成。可以说，这本书浓缩了我两年来对H5的所有认知，而它的顺利出版也是我这5年来，设计工作的一个完整总结。本书的创新性第1个维度创新：H5营销设计类第一书我不知道在2017年是不是有人会出同样题材的书。即便其他人也在做，我同样相信自己的书是最特别的，这取决于内容的维度，你看到的内容不再是一位作者、一种思维的智慧传达，而是结合了多家公司、机构内容的精华整合。在这个维度上，我更像是一个带有作者名号的“搬运者”，我将这两年来的行业优秀内容收入本书，并总结归纳。而对于读者来说，你将会看到更为丰富多样的内容，这些内容所表达的东西相互之间不完全统一，甚至会矛盾但这并不重要，多维度的分析不仅仅会让你学到设计技巧，还会让你更加了解行业，这不是一本教你“点哪里、画哪里”的教程，也不是一本用来宣传某某公司产品或某某品牌工具的宣传册，它是一本真正意义的行业设计宝典，非常客观地为你讲解何为H5。第2个维度创新：第一本真正意义的互联网+图书带有“互联网+”名号的图书国内已屡见不鲜，为什么它是第一本？难道因为H5？没错，就是因为H5，但H5只是载体，真正让本书与众不同的原因来源于它对形式和内容上的全新探索。传统图书以纸张作为载体，承载信息比较固定，很难有后续变动。而在近年来，随着互联网的发展，我们开始将二维码加入图书，试图去创造新的增值内容。但就目前为止，所有图书的网站植入、网盘植入、二维码植入都还比较单一，除了跳转文章，就是老套的配套视频，你只有通过电脑才能观看这些附带的信息。而本书为了突破这个限制，专门为图书开发了配套网站（www.ku-），它与本书内容深度链接，读者能够通过书中的二维码随时跳转到内容相对应的网站演示、内容演示、文字演示、可交互动效演示、视频演示、声效演示等，如此多维度的呈现方式在国内的纸质出版物中应该是首次，这是内容层面真正的互联网化，让物理纸张与移动设备产生了更进一步的联动。本书中的5大演示分类，扫码二维码会跳转相应演示纸张上的字虽然是死的，但是挂在网站上的内容却是活灵活现的，图书的配套网站收藏了海量的行业讯息与设计资料，并且会随着时间的推移进行有效更新，而且纸质图书与网站、公众号相辅相成，形成了一个内容互补的三角形关系，三者相互补充。图书经历了两年的编写，网站经历长期搭建，而公众号也经历了近两年的内容更新与沉淀。可以说，你买到的不是一本书，你买到的是一套会升级的全方位的行业内容，而这是传统纸质图书想都不敢想的事情，但是本书做到了。第3个维度创新：图书行业新商业模式的探索只有当你深入一个行业时，才会发现它存在的痛点。尤其在设计出版行业，你会发现图书作者流失率高，内容产出量少，好多优秀设计师出了一本书后就再也没有产出了，而图书编辑们则苦于寻找内容作者，即使找到了合适作者，也很难看到内容的持续产出，这是为什么？在这里，小呆提出了一个内容与渠道的二元理论：就在传统出版行业，你会看到“内容入口大而渠道出口小”的现状，作者为了写书投入了很大的精力和期望值，但是最后的回报却真的不成正比，所以很多人新鲜一下就不愿意再投入精力去写书了，而我提出的新商业模式探索就是针对这二元理论来的，我们是不是可以把二元颠倒过来去做反思，怎么样让“内容入口小而渠道出口大”？这并非不可能，通常一位作者想要完成一本书的创作，要经历近半年的时间。但如果能把内容维度拉大到整个行业领域，让其他人、其他公司参与内容的话，你付出的精力就会小得多，而这对读者来说确实更有意义，因为他能够获得更多有价值的信息。这样，作者的内容入口就小了。同时，因为图书的内容来源于多家企业、个人，在“人人都是链接出口”的互联网时代，几乎所有的企业和个人都拥有自己的粉丝群和内容渠道，那么我们是不是可以利用这些企业和个人的渠道来推广自己的图书？答案是肯定的，因为这本书不是小呆个人的，它属于所有内容创作者。只要大家前期达成一致，那么所有的内容创作者就会转变为图书的渠道出口，而关键在于这些内容出口更加精细，它真实地让图书的渠道出口变大了。传统设计图书模式