《H5+移动营销设计指南》 读书笔记整理

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

H5是什么

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

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

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

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

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

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

H5的开发流程

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

H5原型具有因素

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

H5的使用场景

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

设计排版

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

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

强焦点排版

散焦点排版

声效设计

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

声效若是不注重细节，干巴巴的拼上去效果会差不少，能够参考一下“多普勒”效应，扫描二维码对比一下。

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

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

动效设计

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

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

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

文案

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

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

叙事节奏

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

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

交互设计

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

作好本身的“小事”

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

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

这是书中摘录的一句话，咱们前端也是相当重要的一换，要有责任感。

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

附件与联系方式

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

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