2020H5+移动营销设计宝典演讲人2020-09-24目录01.定义02.设计流程与规范技巧03.H5的设计方法04.行业精品案例执行流程
01PART.定义定义STEP1传统广告与H5所代表的移动营销的关系H5的定义：大部分人对H5的误解——HTML5、微信网页、移动
PPT都反映了H5的部分特性，但不足以涵盖，这些误解也反映了H5目前在应用方面的现状。STEP2STEP3H5是囊括视觉、听觉、交
互的超媒体，非线性是理解H5传播特性的关键词，可以类比电影中的非线性剪辑。STEP4H5与其他传播媒介相比，物美价廉、大有可为。0
2PART.设计流程与规范技巧设计流程与规范技巧设计流程：了解需求，选好方向——确定表现形式——设计表现——开发执行——数据分析设
计流程与规范技巧辅助设计工具：illustrator、Sketch声音编辑辅助工具：Finalcut、GarageBand常用
设计工具设计工具：PS特效工具：AE、C4D设计生成工具定制化H5生成工具网站类H5生成工具模板类：易企秀、兔展、MAKA、初页
功能类：iH5、意派360、木疙瘩LOGO0102设计流程与规范技巧PSPlay图片压缩工具0403常用辅助设计工具音频压缩工具
二维码生成：草料、薇薇https://www.wps.cn设计流程与规范技巧设计规范：适配移动端页面，注意预留顶部导栏界面。03P
ART.H5的设计方法H5的设计方法原型绘制：设计表现版式设计文字设计动效设计音效设计：区分配乐、音效、音乐H5的设计方法原型
绘制：什么是原型图：可以类比于电影分镜头脚步，需综合考虑视觉、动效、节奏、交互、生效和可实施性，重点要注意页面的层级和交互逻辑，这
是H5不同于平面设计和视频的特性。原型绘制：什么是原型图：可以类比于电影分镜头脚步，需综合考虑视觉、动效、节奏、交互、生效和可实施
性，重点要注意页面的层级和交互逻辑，这是H5不同于平面设计和视频的特性。视觉氛围——传递情感形式感——打动用户H5的设计方法设计表
现参与感——互动、个性设计表现参与感——互动、个性形式感——打动用户C视觉氛围——传递情感BAH5设计需要注意的问题H5与平面设计
的差异BH5的设计方法版式设计A版式设计0102H5与平面设计的差异H5设计需要注意的问题版式设计AC阅读习惯——从上往下H5与平
面设计的差异内容接收习惯——碎片阅读画幅尺寸差异，电子屏显示的字体需要更大B版式设计H5设计需要注意的问题版式设计H5设计需要注意
的问题配图技巧：凸显细节、图文形成对应关系A写从用户角度出发的文案，而不是自嗨的文案H5的设计方法文字设计堆积文字B文字设计堆积文
字集中管制：比如集中到一页借助动效：按节奏出现文字，让用户一点一点看到文字控制字号：18px图形转化写从用户角度出发的文案，而不
是自嗨的文案H5的设计方法动效出现的节奏感非常重要2014动效设计有交互的动效更有感染力2015好的动效带有感情2016动效的层级
与节奏：参考电影叙事的起承转合，或者开始10分钟和结束前10分钟的高潮2017动效应该适度：别分散、领跑用户的注意力2018动效工
具2019H5的设计方法动效设计H5动效实际应用动效设计动效出现的节奏感非常重要动效设计有交互的动效更有感染力动效设计好的动效带有
感情动效设计动效的层级与节奏：参考电影叙事的起承转合，或者开始10分钟和结束前10分钟的高潮动效设计动效应该适度：别分散、领跑用户
的注意力动效工具代码级动效GIF图CSS动效SVG动效canvas动效JavaScript动效WebGLVR/全景动画47%O
ption423%Option1视频类动效帧动画/序列帧动效30%Option356%Option2H5动效实际应用转
场动效：控制节奏、自然过渡、内容相符内容类动效无交互类：视频植入有交互类动效功能性动效：翻页、操作、按钮辅助性动效：抖动、闪烁
H5的设计方法010203气氛烘托类人声烘托类气氛塑造类音效设计：区分配乐、音效、音乐040506功能音效：按钮声等拟声音效
：翻页声环境音效：工地环境、交通环境H5的设计方法音效设计：区分配乐、音效、音乐音效合成要点音效设计：区分配乐、音效、音乐
CEA环境音效：工地环境、交通环境人声烘托类功能音效：按钮声等拟声音效：翻页声气氛塑造类气氛烘托类FBD音效设计：区分配乐、音效
、音乐音效合成要点LOGO淡出淡入音效设计：区分配乐、音效、音乐力度：不同的力度表现不同的情绪音效合成要点空间感：远处声慢，
近处声快https://www.wps.cn04PART.行业精品案例执行流程行业精品案例执行流程数据分析开发上线E音效设计D文字/动效视觉设计文案设计CBA感谢聆听 |
|
