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>
    • 气氛烘托类
    • 人声烘托类
    • 气氛塑造类
    • 功能音效：按钮声等
    • 拟声音效：翻页声
    • 环境音效：工地环境、交通环境
    • 音效合成要点
      • 淡出淡入
      • 力度：不同的力度表现不同的情绪
      • 空间感：远处声慢，近处声快
• 行业精品案例执行流程
  • 文案设计
  • 文字/动效视觉设计
  • 音效设计
  • 开发上线
  • 数据分析