一个前端工程师最近迷上了营销类的H5页面，被五花八门的H5页面迷的眼花缭乱，兴趣使然，于是买了一本《H5 营销设计指南》，看完以后对营销类的H5页面有了更深的理解，感觉很实在，所以参考读书笔记整理成PPT分享给出来。

H5是什么

我们听到太多的H5的消息，尤其是前端工程师，更是耳熟能详，但是H5真的是我们理解的H5吗？他有哪些我们不知道的知识点吗？

有的说是HTML5的简写形式，有的说是微信网站专用的形式，有的说是移动APP等等，其实H5是中国本土化的一个称呼，他就好像中国的“肾6、肾7”一样，如果翻译成英文，老外估计也是一脸懵，

这句话是从搜狐可以的一个频道里摘录的（不一定是官方），大概讲解了在中国，H5的移动营销领域也走进了世界前列。

我们在这里引入一个概念，超媒体。“超媒体”是超级媒体的缩写。超媒体是一种采用非线性网状结构对块状多媒体信息（包括文本、图像、视频等）进行组织和管理的技术。

H5的迅猛发展离不开这四个因素的支持。

当H5和超媒体在移动端画上等号的时候，我们对设计师也就提出了更高的要求：“综合感官能力”

H5的开发流程

H5的开发流程和普通的网站开发流程基本类似，不过需要着重介绍一下数据统计这方面，为了更好的跟进营销方案，就需要通过数据进行分析，做出更好的调整和经验积累，PV：点击量，UV：独立用户访问量这几个名词。

H5原型具备因素

H5的原型要具备的因素，视觉、动效、节奏、音效、交互、可实施性 视觉是指我们的视觉风格，海报类？60年代风格？动效、声效与交互形式的结合，加上好的叙事节奏以及切实可行的实施方案才能支撑起一个H5原型。

H5的使用场景

H5页面不太适合深度的阅读，大部分使用场景是在地铁上、电梯里、等上菜的时间等等

设计排版

移动端设计寸土寸金，所以要尽量主题明确，页面数量也要控制在5-8页面，不要让用户产生疲劳。

这里引申一个视觉排版的概念，一级信息、二级信息、三级信息，是有优先级的。

强焦点排版

散焦点排版

声效设计

声音设计的重要性，让我们不禁想起卓别林反对有声电影的故事。

声效如果不注重细节，干巴巴的拼上去效果会差很多，可以参考一下“多普勒”效应，扫描二维码对比一下。

这个格式的文件会更小，但是兼容性并不理想，

关于声效设计的一些知识点汇总，参考学习。

动效设计

我们应该很熟悉贝塞尔函数了，它是怎么与真实世界建立关系的？

动效设计不是怎么炫怎么来的，简单说几个原则，不要让动效阻碍用户的注意力，不要让动效抢走用户的注意力，转场时间要快，动效强度要有优先级。

关于动效设计的一些知识点汇总，参考学习。

文案

文案用“用户体验”的维度来思考，把我们想说的变成他们想看的。

文案参考资料：《X型文案与Y型文案》

叙事节奏

叙述节奏，优秀的作品都有一个从叙述到收尾的一个过程，不过节奏的张弛大致都有一定的规律可循，我们先看差劲的节奏，不能吸引着用户走到最后。

这样的叙事节奏，会紧紧的抓住用户的胃口，跟随者内容的布局，一直走到最后收尾，不会让用户感到单调乏味。

交互设计

更多的人机交互方式，就看我们如何设计、如何结合起来了，“好的形式，实际上就是旧元素的新组合”，更何况这几年的交互方式更丰富。

做好自己的“小事”

图片就展示不出来了，可以下载附件查看，会有一些工匠精神的共鸣。

设计师应该有自己的情感，这是天职，是设计师的价值。

这是书中摘录的一句话，我们前端也是至关重要的一换，要有责任感。

我只是知识的搬运工，如果有错误还请斧正，共同进步。

附件与联系方式

最后附上keynote文件和导出的一份.PPT格式的文件百度网盘链接 和 书摘与读后感，方便大家参考学习。

如果涉及到版权问题请及时与我联系（nihaojob@163.com）。

更多专业前端知识，请上 【猿2048】www.mk2048.com