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

2,166 阅读4分钟

一个前端工程师最近迷上了营销类的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)。