导图社区 H5移动营销设计宝典
H5移动营销设计宝典的思维导图，大部分人对H5的误解——HTML5、微信网页、移动PPT都反映了H5的部分特性，但不足以涵盖，这些误解也反映了H5目前在应用方面的现状。H5是囊括视觉、听觉、交互的超媒体，非线性是理解H5传播特性的关键词，可以类比电影中的非线性剪辑。
社区模板帮助中心，点此进入>>
H5+移动营销设计宝典
定义
传统广告与H5所代表的移动营销的关系
H5的定义：大部分人对H5的误解——HTML5、微信网页、移动PPT都反映了H5的部分特性，但不足以涵盖，这些误解也反映了H5目前在应用方面的现状。
H5是囊括视觉、听觉、交互的超媒体，非线性是理解H5传播特性的关键词，可以类比电影中的非线性剪辑。
H5与其他传播媒介相比，物美价廉、大有可为。
设计流程与规范技巧
设计流程：了解需求，选好方向——确定表现形式——设计表现——开发执行——数据分析
常用设计工具
设计工具：PS
辅助设计工具：illustrator、Sketch
特效工具：AE、C4D
声音编辑辅助工具：Final cut、Garage Band
设计生成工具
定制化H5生成工具
网站类H5生成工具
模板类：易企秀、兔展、MAKA、初页
功能类：iH5、意派360、木疙瘩
常用辅助设计工具
PS Play
图片压缩工具
二维码生成：草料、薇薇
音频压缩工具
设计规范：适配移动端页面，注意预留顶部导栏界面。
H5的设计方法
原型绘制：
什么是原型图：可以类比于电影分镜头脚步，需综合考虑视觉、动效、节奏、交互、生效和可实施性，重点要注意页面的层级和交互逻辑，这是H5不同于平面设计和视频的特性。
设计表现
视觉氛围——传递情感
形式感——打动用户
参与感——互动、个性
版式设计
H5与平面设计的差异
画幅尺寸差异，电子屏显示的字体需要更大
阅读习惯——从上往下
内容接收习惯——碎片阅读
H5设计需要注意的问题
把页数控制在5-8页
不用大量文字及复杂图形，图文需要易于识别
不用复杂层级
画面设计具备焦点意识，散焦点构图则需要注重画面平衡
页面视觉平衡：主要、次要、辅助信息分明
创造清晰的层级：通常可以采用数字、编号、图形、时间轴等来组织散乱的内容
配图技巧：凸显细节、图文形成对应关系
文字设计
堆积文字
集中管制：比如集中到一页
借助动效：按节奏出现文字，让用户一点一点看到文字
控制字号：18px
图形转化
写从用户角度出发的文案，而不是自嗨的文案
动效设计
动效出现的节奏感非常重要
有交互的动效更有感染力
好的动效带有感情
动效的层级与节奏：参考电影叙事的起承转合，或者开始10分钟和结束前10分钟的高潮
动效应该适度：别分散、领跑用户的注意力
动效工具
GIF图
帧动画/序列帧动效
视频类动效
代码级动效
CSS动效
SVG动效
canvas动效
JavaScript动效
Web GL
VR/全景动画
H5动效实际应用
转场动效：控制节奏、自然过渡、内容相符
内容类动效
无交互类：视频植入
有交互类动效
辅助性动效：抖动、闪烁
功能性动效：翻页、操作、按钮
音效设计：<br>区分配乐、音效、音乐<br>
气氛烘托类
人声烘托类
气氛塑造类
功能音效：按钮声等
拟声音效：翻页声
环境音效：工地环境、交通环境
音效合成要点
淡出淡入
力度：不同的力度表现不同的情绪
空间感：远处声慢，近处声快
行业精品案例执行流程
文案设计
文字/动效视觉设计
音效设计
开发上线
数据分析
