《新媒体广告设计与制作》课件 第八章 H5广告设计.pptxVIP

第八章?H5广告设计与制作

目录CONTENTS项目导入?8.1?H5概述8.2?H5广告的制作工具8.3?H5广告的设计原则8.4?H5广告的设计流程8.5?H5广告的设计要点项目?制作微信红包H5广告

项目导入?

项目导入H5指HTML5技术，是伴随着移动互联网兴起的一种新型广告工具，它改变了传统广告行业的局限性，最大限度地扩张了广告的传播力度；同时，手机的普及也扩大了H5的传播范围，使广告真正做到了无处不在。

8.1H5概述

8.1.1什么是H5H5有广义和狭义之分。广义上，H5指的是HTML5，即网页使用的HTML代码——第五代超文本标记语言。而在狭义上，H5是指互动形式的多媒体广告页面。H5最显著的优势在于它的跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、安卓系统与iOS系统、Windows系统与Linux系统。如图8-1所示为抖音电商的H5广告页面。图8-1抖音电商H5广告

8.1.2H5广告的类型1.展示型展示型H5是最常见的移动H5网页，因其交互形式简单、制作快捷，应用非常广泛。展示型H5常用于品牌宣传类广告。如图8-2所示，腾讯新闻以国庆旅游为话题推出了H5营销活动——《我的千里江山图》，邀请用户分享自身的旅游经历，从而实现自身的品牌宣传。图8-2?展示型H5

8.1.2H5广告的类型2.全景/VR型全景/VR型H5应用已经成为行业流行趋势之一。用户可以借助手机的重力感应，滑动手机屏幕查看720°或360°角度的画面。如图8-3所示，插画艺术家西子推出H5线上画展——《她》，邀请用户通过VR全景欣赏画作，感受艺术之美，还可以点击链接购买画作。图8-3?全景/VR型H5

8.1.2H5广告的类型3.视频型视频类H5大多以全屏视频的形式存在，能够减少其他因素对用户的干扰，用户对H5的体验不会轻易被中断，而且用视频能够展现出一些H5实现不了的特效，结合音乐和音效使用户全身心沉浸。视频型H5常用于活动推广类广告。图8-4所示即为腾讯公益的视频H5广告——《跟着阿猫去流浪》，作品以猫的视角呈现，让用户体验一只流浪猫的生活，呼吁大家善待动物。图8-4?视频型H5

8.1.2H5广告的类型4.游戏型凭借H5网页强大的互动性，设计人员可以制作出各种网页游戏，吸引消费者进行互动，常见的游戏类H5有抽奖、好友互动、魔性闯关、答题测试等。可以根据营销目的的不同，在特定的区域植入广告二维码或图片。游戏型H5常用于产品宣传和活动推广类广告。如图8-5所示，联合利华品牌宣传H5广告——《U家职场大作战》，通过互动问答让用户由竖屏改为横屏浏览，不仅让H5更为有趣，也大幅提升了用户浏览视频过程中的注意力，从而让对视频和漫画中的宣传信息留下更深的印象，提升营销宣传效果。图8-5游戏型H5

8.1.2H5广告的类型5.测验型测验型H5的页面类似于调查问卷，主要是选取目标消费者感兴趣的、具有悬念性的话题作为测试内容，让消费者通过选择问答来进行互动。该类H5因为互动性强，容易引起二次传播，比较适用于品牌信息的传播或营销活动类广告。如图8-6所示，网易新闻联合AUTOLIVE及雪佛龙共同出品的趣味测试类H5——《迷惑行为大赏》，测试题目包含了当下热门的网络用语、英文常用词及生活常识，最后落地到雪佛龙润滑油的宣传页，以此展示雪佛龙的主要产品，提高品牌知名度。图8-6测验型H5

8.1.2H5广告的类型6.场景型通过互动的方式为消费者营造某种特定的场景，通过场景来讲故事。可以通过分享好友的方式来让更多的消费者关注该H5，并使其参与其中，让H5更具趣味性和代入感。如图8-7所示，山西省文旅厅在疫情期间发布了一款旅游互动H5——《晋彩缤纷，线上游园》，共分为四个场景来展示山西春日之美，分别是“花开晋染”“珍味晋有”“芳华晋艺”“匠心晋展”，用户可以点击画面当中的场景进行线上旅游，了解山西的美景、美食、民俗风情和非遗文化。图8-7场景型H5

8.2?H5广告的制作工具

8.2.1页面制作工具H5是目前涵盖领域最广的一种传播媒介，还没有统一的标准工具，需要利用多种软件来搭配制作。设计师可以根据自身的情况来选择工具学习。1.全能设计工具PhotoshopPhotoshop是H5领域的万能工具，可用于制作画面、动效、剪辑视频、修改音乐。Illustrator、Sketch2.辅助设计工具Illustrator（AI）和Sketch是专业的矢量绘制软件，在H5的设计上起辅助作用，主要用于线框图的绘制和快速表现画面。3.特效工具AfterEffects、CINEMA4DAdobeAfterEffects与CINEMA4D都是制作特效方面的工具，可以制作出炫酷的画面效果，用于H5设计的辅助作