这算是一篇读书笔记，最近看了一本关于h5的移动营销设计的书。
其实这本书还是比较适合跟技术经常做交接但是并不写代码的人，大致是那些市场、运营、设计岗位的人吧。里面很少涉及到代码层面的东西，多半是关于营销的，比如如何设计一个页面能达到传宣效果，或者说应该采用怎样的设计风格等等。
这里就不多说太多，主要记录开发同学在开发过程中可能会用到的点，学好以后可以愉快得跟产品去撕，哈哈哈
目前H5在设计方法上可以笼统的分为三类：
1、互动广告。主要由互动营销公司构成。
2、互联网设计派。文案直接、设计简单粗暴，类似幻灯片或者数据报告。
3、工具执行派。这个阵营比较庞大，但是偏个人，依托相关设计工具。
苹果手机屏幕尺寸
把握好H5设计的表现力
1、视觉氛围（传递情感）
良好的视觉气氛可以更好地引导用力理解你想要表现的意图，每支H5的设计目的和内容气氛都不同，自然它需要营造的视觉气氛也不一样，不同的气氛会牵连不同元素。整个设计需要统一在完整的调性内，是理性规划与艺术创作的结合。
统一的调性需要注意两点：a、统一的背景；b、成套的色彩和元素
2、形式感（打动用户的重要方法）
好的形式更加关注情感，洞察人们的内心世界。如果表述得当，我们甚至会为形式牺牲部分功能，毕竟有趣的东西才能更快打动用户。下面是几个例子：
a、代言人－任务传记－书本－写书－文字－打印机－H5动画
b、母亲节－回忆－记录－录音－录音机－H5页面
c、促销活动－咖啡厅店铺－促销产品－笔记本－画画与笔记
3、参与感（H5设计的爆点）
与“形式感”不同，他指用户可以通过H5定制带有自身特征的内容并能够参与到内容的创作和传播，往往这类H5内容比较受欢迎，并且极为容易创造出非常夸张的刷屏效果，当然，开发难度也比较大。
H5与平面设计的板式区别
1、画幅尺寸差异。主流手机屏幕为4.7寸和5.5寸，4A纸的面积远大于手机尺寸。
2、阅读方式。纸质媒介等实物的阅读习惯为：从左到右，H5画面则为：从上到下。
3、内容接收习惯不同。移动端：碎片场景、碎片时间、分散精力；纸质和PC：稳定场景、稳定时间、集中精力。
如何应对H5版面设计
1、分清“PPT”页面与H5页面的差异
H5相比“PPT”，页面信息量不能过大，不占用用户过多的阅读时间，形式感需要非常抢眼，内容需要十分清晰，让观者能不费精力地辨别出页面需要传递的信息。
a、H5不应该有太多页面，5-8页即可，用尽量少的页面表现更多内容；
b、H5不应该堆积大量文字和引用复杂徒刑，字号要容易识别，图形要简化；
c、H5页面形式需要简单直接，不应该像“PPT”那样层级复杂。
2、具备画面焦点意识
a、强化焦点版式。画面的焦点数量，通常会设计为一个，而不是多个。为了弥补画面的丰富性，也会采用一个焦点带多个分焦点的形式来充实页面，这种方法是最为常见的排版方法。
b、散焦点版式。就是多个均衡内容散布，通过色彩、过渡、动效等方法让主图内容突出，从而营造秩序感和画面重点，这类构图多出现在运营的大型推广活动和总结类的案例上。
3、画面视觉的平衡
我们需要让页面有更好的视觉体验，画面要填满，空间分配要合理，并且有主次。一是按照重要信息分类，二是要按照页面题材特征分类。
4、创造清晰明确的层级
通常采用数字、编号、图形、时间轴、相近元素或者色彩等方法辅助完成内容的规划，把内容安排在多个分屏。
5、页面配图小技巧
a、什么样的图片适合移动网页：图片的呈现尺寸要与真实世界的实物大小相类似，人眼会习惯哪些容易识别的、不违背常规物理原则的东西；图片要尽可能多的显现肉眼能够捕捉到的细节。
b、更好的地理解图片与版式的关系：实际图片摆放的方式和地理位置需参考物理空间的特征。
H5文字设计
1、改变堆积文字的思路：考虑到用户浏览的场景和条件，H5不适合携带大量文字内容。
2、改变文案的视角：一改所谓“高大上”的千篇一律，家常段子、带有亲和力的语言、带有错字的口号等屡试不爽（正向描述、反向描述等）
3、文案的基础技巧：
a、正确看待数字在文字中的作用：大写、小写给人的直观感受
b、创造文字上的感官矛盾：描述一种反差现象
c、夸张的修辞法
d、精简标题长度
e、引起读者好奇：＊＊＊原来是这样的！
4、排版习惯
集中管理；借助动效；控制字号（微信正文字体15px，标题16px，都在18px以内）；图形转化
5、H5的标题设计
凸显氛围特点；符合公司形象
H5动效设计
动态 － 颜色 － 图形
1、不要忽视动效的发起和结束
2、有交互的动效更有感染力
3、好的动效都有情感
a、动效有一定的物理特性
b、动效与交互方式相结合
4、动效的层级与节奏（下面是两个例子）
5、动效应该适可而止（不要分散用户的注意力；不要领跑用户的注意力）
6、动效的方式（GIF、动画帧、视频类动效、代码级动效）
7、动效的实际应用
a、转场时间要：转场动画要快；引导过渡自然；转场动效形式要与内容相符；
b、内容类动画：可有交互
c、辅助性动画：抖动、loading、声效按钮
d、功能性动画：提示、移动、缩放、背景等
H5背景音效
1、音效的分类
a、气氛活动类伴奏
b、人声烘托类伴奏
c、气氛塑造类声效
2、音效的辅助
a、功能音效：点击、键盘输入、系统提示等
b、拟声音效：钟表的滴答、水流的哗啦啦等
c、环境音效：森林鸟鸣、海浪声等