H5营销基础知识

H5营销基础知识学习目标知识目标能力目标素质目标掌握HTML5营销的基本思路能进行简单的HTML5营销

具有较强的系统分析问题、解决问题能力及实践操作能力情境导入一、情境概述小明在一家游戏APP开发公司上班，近期需要推广一款新开发的APP，她想到了自己微信朋友圈经常看到的一种广告，也就是H5。这种广告不仅有动画特效与音乐，而且传播性也很强，她想利用这种方式去推广新开发的APP，效果应该会更好。那么，小明该怎么做呢？案例：大话西游再爱一次品牌：王者荣耀亮点：创意定位王者荣耀为了宣传大话西游系列的新皮肤制作的H5作品，用户在作品中回顾大话西游的经典桥段，最后在宣传界面查看新皮肤和新技能，以此向老用户推广新皮肤，和吸引新用户。2策划逻辑初始场景为紫霞仙子在芦苇荡中划船，电影选段逐渐过渡成绘画效果后，内容依次是紫霞与四大护法打斗，至尊宝被点三颗痣，至尊宝拔出紫霞的宝剑，紫霞城楼下表白，每个场景都会搭配电影原声台词，并播放了“一万年”的经典片段，播放完毕用户需选择“是否改变结局”进入作品第二部分①若选择“是”，则播放至尊宝变成齐天大圣后营救紫霞和师傅师兄，打败牛魔王的场景。②若选择“否”则播放紫霞期盼如意郎君，最后死在了至尊宝身边。第二部分场景结束后，会进入王者荣耀新皮肤宣传界面。设计上作品节选的都是用户最耳熟能详的场景，用红色和黄色系的插画与电影画面穿插播放，搭配原生的经典台词，很能感染用户的情绪，勾起关于大话西游的情怀。

体验上虽然是时隔很久的电影，但是每一句台词和每一个画面都仿佛昨天才看到过，印象深刻，用大话西游的情怀吸引用户，相信许多用户都会愿意尝试下的案例：等了好久，一直想把我的故事讲给你听！品牌：VANKE青岛亮点：创意定位VANKE为了回顾青岛发展历程，展现青岛建设成果，展望青岛美好未来推出的宣传作品，用户在浏览作品时，可以感受到青岛文明祥和的生活环境和城市氛围，通过文字阐述更加的了解青岛，以此建立对青岛的好印象，对青岛的未来发展充满信心和向往。

策划逻辑加载完毕后，上滑屏幕开始浏览作品，具体内容由场景和文字组成①主要场景，随着镜头的不断上移，可以看到青岛市的一些街道和人民生活娱乐的场景，主要有青岛街道，青岛火车站，青岛啤酒厂，人民欢乐聚餐，五四广场，高楼林立和美丽海湾景象。②配文。在不同场景用简短文字概括了青岛的城市理念，时尚地位，建筑风格，青岛活力，城市现代化进程和发展方向。设计上因为是对整个城市的笼络展现，所以插图以大场景为主，对于具体细节没有太多描画，颜色浅淡温暖，对青岛的概括也比较全面，搭配轻快的背景音乐，营造出了人民快乐生活，城市全速发展的美好景象。

体验上大部分用户对于青岛的印象比较深刻的都是大海和海鲜，其实青岛的欧化建筑也是别有一番西式韵味的，此作品以整个城市为视线范围，将青岛的文化做了更全面的展现，去青岛旅行的话，吃饱喝足一定要慢慢徜徉街道，细细感受下哦！案例：这绝对是你没见过的樱花祭品牌：微信亮点：创意定位微信推出的反映职场生存状况，帮助提高职场技能的H5作品，用户通过视频观看珍妮花入职后关于团建方面的糗事，在搞笑的情节当中体会职场不易，作品结束后可以看到关于职场生存的众多公众号和文章，以此体现微信功能的齐全和实用。创意定位加载界面是电脑上显示“新人入职”四个大字，下面滚动播放新人对于职场的期待，上滑屏幕播放视频①珍妮花斗志昂扬进入新公司市场部，却见满屋人员都自由散漫，收到微信消息，被拉入部门群，热情打招呼却无人回应，尴尬至极赶紧发红包，红包被瓜分后欢迎消息果然不断跳出。②被总监委任做团建方案，本想拒绝但担心被扫地出门，赶紧撤回消息，表示接受，幻想了日本樱花的烂漫之旅后，着手去做方案，每个步骤都不辞辛苦精心设计，最后交出方案受到总监表扬。③团建后，珍妮花一边翻阅公司推文，一边回忆日本浪漫樱花之旅被老板改成农家乐赏樱花，以及自己身心俱疲的团建过程。④总监表扬了珍妮花后，又把公司年中大团建策划任务交给了珍妮花，珍妮花苦不堪言，蹲下流泪画圈圈。视频结束，用户可以直接分享作品，或直接查看相关文章和公众号。设计上干净利落的插画风格，由动图和独白组成，以白色和蓝色为主，符合“职场”“公司”的主题，“戏精”珍妮花的内心独白非常丰富，语速较快，风格搞笑。

体验上天下新人同背锅，又糗又搞笑又无奈的工作体验，相信许多职场人员都会有共鸣，还是多看文章多学习，多向公众号取经，早日摆脱背锅体质，荣升职场王者吧!案例：每天起床第一句，先跟老板说对不起品牌：网易考拉亮点：创意定位：网易考拉结合“夸夸群”的热点来推出的一支案例，为宣传“328周年庆”抢现金红包活动。策划上，①首页工作的突发状况来了，要跟老板汇报，没想到……点击“继续”按钮。②从十四个备注中选择一个用户给老板的称呼，点击“确定”按钮，③选择一条要跟老板说的话，发送出去。转换老板角色为“彩虹屁人设”，让用户深度地感受一把老板的夸赞，老板最后发了一个红包，长按可以保存图片（保存的图片有二维码形成回流）④点击领取红包后，出现把老板与你的对话截图，下方有个按钮“拆开老板的红包”，会看到网易考拉推出的活动，会自动跳转。设计上，以微信聊天记录为背景，获取用户的头像与昵称。体验上，与之前的“夸夸群”相似，又结合了上班族经常遇到的职场问题，调和员工与老板之间的关系，让上班族也体验一把老板的夸赞。情境导入二、情境分析小明想要利用H5对公司开发的游戏APP进行推广营销，她首先得了解以下几个问题：1.什么是H5？2.H5与传统营销设计相比较有什么优势？3.H5的设计流程是什么？4.在利用H5进行营销时有哪些注意事项？H5的概念HTML的发展历史H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到的网页，多数是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。浏览器通过解码HTML，就可以把网页内容显示出来，它也构成了互联网兴起的基础。H5的强大功能H5之所以能引发如此广泛的关注，根本在于它不再只是一种标记语言，它为下一代互联网提供了全新的框架和平台，包括提供免插件的音视频、图像动画、本体存储以及更多炫酷而且重要的功能，并使这些应用标准化和开放化，从而使互联网也能够轻松实现类似桌面的应用体验。H5最显著的优势在于跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与iOS。此外，H5的本地存储特性也给使用者带来了更多便利。综上所述，现在大家接触到的H5具有如下特点：无须下载安装，即点即玩；不受平台限制；对影音、图像、交互动画等高度支持。引起H5传播的心理诱因引起H5传播的心理诱因1．好奇心网友对H5的标题好奇，会点击进去；对焦点图好奇，会点击进去；看到某个H5被熟悉的朋友转发了，也会点击进去。2．认同感不少测试型的H5会被转发，主要源于认同感。例如，通过一系列娱乐性的测试题，来测算出自己如果在古代会是哪个朝代的皇帝，或测测你的人气指数是多少，等等。这些娱乐性测试，其测试结果切合了网友的认同感心理。引起H5传播的心理诱因3．攀比这种心理体现在H5中多出现在游戏型H5和测试型H5。典型的游戏型H5，如围堵神经猫和2048，都由于攀比“谁的成绩更高”而被传播得非常广；测试型的H5，如用自拍照测颜值，会因为“我比别人更好看”而被传播。4．炫耀能满足炫耀心理的H5比较多，几乎所有类型的H5在某种程度上都可以满足参与者或转发者的炫耀心理，其中包括：在比分赛制类H5中获得了高分，想要分享出去炫耀一番；我比其他人更早发现了一个很有趣的H5，转发出去炫耀自己在流行最前沿，等等。H5的五种类型H5的五种类型1．展示型展示型H5常用到的场景有活动宣传、出游照片合集等。2．互动型其主要的互动形式是，通过在屏幕上各个方向的滑动、点击、拖拽等动作，完成一定的H5设置，才能顺利进行H5的演示。同时，手机摇一摇、将手机水平放置和倾斜放置、通过手机麦克风与H5互动等，都属于互动形式。3．场景型其主要形式是，以第一人称的视角打开H5，进而跟随页面提示，一步步随着剧情探索下去。4．游戏型展现内容本质上是一个游戏。不论通过屏幕互动还是手机感应器，其目的都是为了完成游戏，通常能够在微信中传播火爆的H5，多是一些比分类的游戏。5．测试型其主要的形式有上传照片测试颜值、答题测试你最近的运势等，其共同特点是对受众进行一个分值、等级等显性且有明显差异的排名。H5的五种类型技能学习技能学习一、技能支撑1.

H5画面的表现层面H5的画面直接表现在原型图的构思和规划上，它是具体执行的第一步，也是上手设计H5的开始。H5的画面表现可以分为三个层面：视觉气氛、形式感、参与互动。技能学习一、技能支撑（1）视觉气氛（传递情感）良好的视觉气氛可以更好地引导用户理解设计者想表现的意图，每支H5的设计目的和内容都不同，自然它需要营造的视觉气氛也不一样，不同气氛会牵连不同元素。例如肯德基在2016年春节期间推出的H5宣传页，整个页面表现出猴年春节的气氛。1.

H5画面的表现层面技能学习一、技能支撑（2）形式感（打动用户的重要方法）好的形式是H5页面受不受欢迎的重要参考标准，这已经经历了用户的多次考验。而优秀的作品却时常关注情感，洞察人们的内心世界。1.

H5画面的表现层面技能学习一、技能支撑（3）参与感（H5设计的爆点）参与感不同于“形式感”，它指用户可以通过H5定制带有自身特征的内容并能够参与到内容的创作与传播，往往这类H5内容比较容易受到欢迎，并且极为容易创造出来非常夸张的刷屏效果，但创作难度又往往较大。1.

H5画面的表现层面技能学习一、技能支撑2.H5与传统营销设计比较的优势（1）H5的设计展现形式是综合的，交互概念的贯穿，使得能够把很多形式串联在一起。互动形式也较为丰富，各种触控滑动点击、摇一摇、重力感应、环境感应等，都会和设计形成互补关系，给用户带来新体验。表现形式已经从单一的视觉转化到了更广阔的领域，而且在内容灵活度上也达到了前所未有的可操控性。技能学习一、技能支撑（2）一方面，H5能够借助服务器的数据来对内容的方向和打法作出分析和计划，另一方面，不再需要长久的制作等待，投放也变为了上线，点一下的功夫就能把内容推到受众面前，设计文字存储在服务器也可随时修改调整，能够和用户阅读内容同步，修改灵活自如，大大地提升了创作效率。2.H5与传统营销设计比较的优势技能学习一、技能支撑（3）H5能够自传播，将做好的内容直接分享出去就可以造成传播，如果作品出彩，甚至可以不做任何投放，就达到很好的传播效果。2.H5与传统营销设计比较的优势技能学习一、技能支撑3.H5的表现形式（1）幻灯片形式幻灯片是H5最初期也是最典型的形式，由于简单、实用，所以至今还很流行。其效果就是简单的图片展现与翻页交互，效果很像幻灯片的展示。技能学习一、技能支撑3.H5的表现形式（2）交互式可口可乐的H5营销是应用H5绘图功能的典型例子，如图所示。这里面的交互还是比较简单的，只不过它基本体现了交互式动画的感觉。技能学习一、技能支撑3.H5的表现形式有哪些？（3）功能式如图所示，第一个是百度针对地铁涨价做的H5，它可以计算人们每天坐地铁要多少钱，并实时显示大家的评论。第二个是社交移动风云榜，就是精品H5的展现。技能学习一、技能支撑4.H5的设计流程0102030405了解需求设计表现数据统计确定形式开发执行技能学习二、案例学习腾讯动漫技能学习二、案例学习1.选人薛**是一个特殊的明星，因为他是娱乐圈唯一一个粉丝们期待广告比期待新歌更多的明星。除了歌手之外，薛**身上还有段子手的标签，微博上2000多万粉丝每天都在盼着他接新的广告，出新的段子。技能学习二、案例学习2.发布时间薛**的H5是在11月24日晚上9点半上线的，李敏的朋友圈内第一条出现的转发出现在9点45分左右，随后呈现井喷之势，几乎每两三分钟就会出现新的分享，所有微信群几乎都分享了这个H5。技能学习二、案例学习3.形式薛**的人设就是