一个前端工程师最近迷上了营销类的 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 型文案
叙事节奏
叙述节奏, 优秀的作品都有一个从叙述到收尾的一个过程, 不过节奏的张弛大致都有一定的规律可循, 我们先看差劲的节奏, 不能吸引着用户走到最后
这样的叙事节奏, 会紧紧的抓住用户的胃口, 跟随者内容的布局, 一直走到最后收尾, 不会让用户感到单调乏味
交互设计
更多的人机交互方式, 就看我们如何设计如何结合起来了, 好的形式, 实际上就是旧元素的新组合, 更何况这几年的交互方式更丰富
做好自己的小事
图片就展示不出来了, 可以下载附件查看, 会有一些工匠精神的共鸣
设计师应该有自己的情感, 这是天职, 是设计师的价值
这是书中摘录的一句话, 我们前端也是至关重要的一换, 要有责任感
我只是知识的搬运工, 如果有内容的错误还请斧正, 共同进步
来源: https://juejin.im/post/5aaf7bdd51882555614112f1