导语

  

内容提要

  

    菜鸟如何快速成为H5广告页面设计高手？如何用H5广告页面征服上司和客户？如何零基础制作出专业、漂亮的H5广告页面？本书将按照两条线路帮助读者精通Photoshop H5广告设计：
    一条是横向案例线，通过20多个经典案例，包括产品推广、活动推广、互粉增粉、人才招募、企业宣传、节日活动、会议邀请、喜庆请柬等，从零开始学习制作H5广告效果。
    另一条是纵向技巧线，讲解了配色常识、文字排版、版式布局等核心技能，帮助读者彻底读懂、玩透H5广告设计。
    本书适合H5微信页面广告设计者、新媒体广告设计师、移动互联网广告设计人员等阅读。

    卢博，毕业于广州美术学院，专业广告学出身，曾于佛罗伦萨美术学院（意大利）进修。
    站酷网H5设计师，亚洲CI网、红动中国H5设计师擅长新媒体、H5、APP界面设计，如H5微信界面、H5微信广告、直播广告、微信公众号、微信小程序等广告。

第1章  H5广告设计入门
  1.1  什么是H
    1.1.1  H5是什么
    1.1.2  无处不在的H
    1.1.3  H5的主要功能
    1.1.4  使用H5有哪些优势
    1.1.5  探索H5广告的潮流和方向
  1.2  H5页面的类型
    1.2.1  活动运营型
    1.2.2  品牌宣传型
    1.2.3  产品介绍型
    1.2.4  总结报告型
  1.3  形式为功能服务
    1.3.1  简单图文的H5页面
    1.3.2  礼物  贺卡  邀请函的H5页面
    1.3.3  问答  评分  测试的H5页面
    1.3.4  游戏的 H5页面
第2章  H5设计的常用工具
  2.1  基于互联网平台的H5开发工具
    2.1.1  APICloud：H5代码编辑工具
    2.1.2  Egret：提供开源的H5引擎
    2.1.3  云适配：一键PC网站转移动网站
    2.1.4  iH5：HTML5可视化编辑工具
    2.1.5  人人秀：无代码的H5制作工具
    2.1.6  易企秀：H5场景定制工具
  2.2  基于应用软件的H5设计工具
    2.2.1  Photoshop：图形图像设计工具
    2.2.2  Illustrator：专业的矢量图绘制工具
    2.2.3  After Effects：制作酷炫的视频特效
    2.2.4  CINEMA 4D：专业的三维软件工具
    2.2.5  随身录音室：数码音乐创作软件
    2.2.6  HYPE：HTML5动画制作利器
    2.2.7  其他：H5设计常用的辅助工具
  2.3  选择H5的工具组合形式
    2.3.1  选择开发类H5工具
    2.3.2  选择网站类H5工具
    2.3.3  利用手机制作H
第3章  H5设计的基本操作
  3.1  如何“生产”H
    3.1.1  选择平台和进行登录
    3.1.2  选择模板
    3.1.3  布局页面
    3.1.4  添加和编辑图片
    3.1.5  添加和编辑文本元素
    3.1.6  添加动画元素
    3.1.7  添加音乐元素
    3.1.8  添加视频元素
    3.1.9  添加交互元素
    3.1.10  添加表单和组件
    3.1.11  预览作品
    3.1.12  发布作品
  3.2  在H5页面中添加各种元素
    3.2.1  添加弹幕元素
    3.2.2  添加地图元素
    3.2.3  添加倒计时元素
    3.2.4  添加动画文字元素
    3.2.5  添加图表插件元素
    3.2.6  添加祝福贺卡元素
    3.2.7  添加雷达扫描元素
    3.2.8  添加语音留言元素
    3.2.9  添加照片海报元素
    3.2.10  制作长页面H
  3.3  为设计加分的4个要点
    3.3.1  细节与统一
    3.3.2  热点与话题
    3.3.3  故事与情感
    3.3.4  技术与互动
第4章  H5的视觉交互设计
  4.1  H5页面的版式设计
    4.1.1  H5版式设计的原则
    4.1.2  H5页面的网格设计
    4.1.3  H5页面版式的突破
  4.2  H5页面的字体设计
    4.2.1  设置H5页面的字体
    4.2.2  设置H5页面的字号
    4.2.3  设置H5页面的字间距
    4.2.4  设置H5页面的行间距
    4.2.5  H5字体设计的基本技巧
  4.3  H5页面的色彩设计
    4.3.1  了解色彩原理
    4.3.2  了解色彩三要素
    4.3.3  实用H5配色技巧
  4.4  H5页面的交互设计
    4.4.1  了解H5交互设计
    4.4.2  制作H5交互设计
  4.5  H5页面的视觉流程设计
    4.5.1  什么是视觉流程设计
    4.5.2  H5常见的视觉流程设计类型
第5章  H5的创意内容设计
  5.1  创建H5活动营销页面
    5.1.1  答题活动的H5页面
    5.1.2  问卷调查活动的H5页面
    5.1.3  微信红包活动的H5页面
    5.1.4  VR全景的H5页面
    5.1.5  一镜到底的H5页面
    5.1.6  快闪活动的H5页面
    5.1.7  砍价活动的H5页面
  5.2  创建H5趣味营销页面
    5.2.1  互动游戏设计
    5.2.2  微信场景模拟
    5.2.3  来电界面模拟
    5.2.4  通知界面模拟
第6章  产品推广：营销展示的H5广告设计
  6.1  新品上市：掌握新品发布的H5页面设计
    6.1.1  设计新品发布背景形状效果
    6.1.2  设计新品发布图文信息效果
    6.1.3  设计新品发布图层装饰效果
  6.2  数码宣传：掌握电商产品的H5页面设计
    6.2.1  设计电商产品杂色背景效果
    6.2.2  设计电商产品主体布局效果
    6.2.3  设计电商产品信息点缀效果
  6.3  品牌汽车：掌握汽车产品的H5页面设计
    6.3.1  设计汽车产品页面背景效果
    6.3.2  设计汽车产品界面框架效果
    6.3.3  设计汽车产品文字修饰效果
第7章  活动推广：互动投票的H5广告设计
  7.1  新春活动：掌握砸金蛋的H5页面设计
    7.1.1  设计砸金蛋新春背景效果
    7.1.2  设计砸金蛋元素装饰效果
    7.1.3  设计砸金蛋文字按钮效果
  7.2  商场活动：掌握抽奖活动的H5页面设计
    7.2.1  设计抽奖活动转盘底盘效果
    7.2.2  设计抽奖活动奖品文字信息
    7.2.3  设计抽奖活动页面装饰效果
  7.3  营销活动：掌握投票活动的H5页面设计
    7.3.1  设计投票活动背景效果
    7.3.2  设计投票活动文字信息
    7.3.3  设计投票活动点缀效果
第8章  互粉增粉：游戏红包的H5广告设计
  8.1  游戏程序：掌握小游戏的H5页面设计
    8.1.1  设计小游戏背景底纹效果
    8.1.2  设计小游戏界面按钮效果
    8.1.3  设计小游戏素材插件效果
  8.2  摄影论坛：掌握旅行相册的H5页面设计
    8.2.1  设计旅行相册颗粒背景效果
    8.2.2  设计旅行相册文字信息效果
    8.2.3  设计旅行相册照片装饰效果
  8.3  微信增粉：掌握口令红包的H5页面设计
    8.3.1  设计口令红包页面效果
    8.3.2  设计口令红包按钮效果
    8.3.3  设计口令红包背景效果
第9章  人才招募：招聘求职的H5广告设计
  9.1  企业招聘：掌握专场招聘会的H5页面设计
    9.1.1  设计专场招聘会渐变合成背景效果
    9.1.2  设计专场招聘会招聘信息边框效果
    9.1.3  设计专场招聘会的文字宣传内容
  9.2  实习招募：掌握校园招聘会的H5页面设计
    9.2.1  设计校园招聘会动感模糊背景效果
    9.2.2  设计校园招聘会页面主题宣传信息
    9.2.3  设计校园招聘会元素装饰效果
  9.3  应聘求职：掌握个人简历的H5页面设计
    9.3.1  设计个人简历舞台揭幕效果
    9.3.2  设计个人简历主题文字效果
    9.3.3  设计个人简历光斑点缀效果
第10章  企业宣传：品牌介绍的H5广告设计
  10.1  会议宣传：掌握商务汇报的H5页面设计
    10.1.1  设计商务汇报页面背景效果
    10.1.2  设计商务汇报主题内容效果
    10.1.3  设计商务汇报背景装饰效果
  10.2  公司简介：掌握公司介绍的H5页面设计
    10.2.1  设计公司介绍背景色块效果
    10.2.2  设计公司介绍图片文字效果
    10.2.3  设计公司介绍文字装饰效果
  10.3  企业品牌：掌握品牌展示的H5页面设计
    10.3.1  设计品牌展示色彩搭配效果
    10.3.2  设计品牌展示主题文字效果
    10.3.3  设计品牌展示企业标志效果
第11章  节日活动：电商购物的H5广告设计
  11.1  购物活动：掌握年中大促的H5页面设计
    11.1.1  设计年中大促渐变背景效果
    11.1.2  设计年中大促底部装饰效果
    11.1.3  设计年中大促标志文字效果
  11.2  电商活动：掌握双十二促销的H5页面设计
    11.2.1  设计双十二促销纹理绿叶效果
    11.2.2  设计双十二促销文字边框效果
    11.2.3  设计双十二促销产品布局效果
  11.3  七夕活动：掌握情人节的H5页面设计
    11.3.1  设计情人节浪漫星空背景效果
    11.3.2  设计情人节渐变文字按钮效果
    11.3.3  设计情人节情侣装饰效果
第12章  会议邀请：年会晚会邀请函的H5广告设计
  12.1  企业年会：掌握年会邀请函的H5页面设计
    12.1.1  设计年会邀请函欧式边框效果
    12.1.2  设计年会邀请函主题内容效果
    12.1.3  设计年会邀请函底部装饰效果
  12.2  招商加盟：掌握招商邀请函的H5页面设计
    12.2.1  设计招商邀请函背景底纹效果
    12.2.2  设计招商邀请函文字广告信息
    12.2.3  设计招商邀请函个性花纹效果
  12.3  颁奖晚会：掌握颁奖典礼邀请函的H5页面设计
    12.3.1  设计颁奖典礼邀请函旋转背景效果
    12.3.2  设计颁奖典礼邀请函内容效果
    12.3.3  设计颁奖典礼邀请函装饰效果
第13章  喜庆请柬：贺卡卡片的H5广告设计
  13.1  结婚请帖：掌握婚礼请柬的H5页面设计
    13.1.1  设计婚礼请柬主题背景效果
    13.1.2  设计婚礼请柬文本矩形效果
    13.1.3  设计婚礼请柬装饰效果
  13.2  新春贺卡：掌握新年祝福的H5页面设计
    13.2.1  设计新年祝福背景纹理效果
    13.2.2  设计新年祝福文字信息效果
    13.2.3  设计新年祝福新春元素效果
  13.3  爱情卡片：掌握情侣表白的H5页面设计
    13.3.1  设计情侣表白浪漫背景效果
    13.3.2  设计情侣表白文本内容效果
    13.3.3  设计情侣表白元素装饰效果