H5营销案例与制作.ppt

10个基本组件+设置+发布 组件是构成场景的基本要素 1.文本 2.背景 3.音乐 4.视频 5.图片 6.形状 7.图集 8.互动 9.表单 10.特效 * 1.文本 1.点击“文本”后 →即可创建 2.单击文本框 →出现编辑菜单 3.双击文本框 →进入基础编辑 * 2.背景 点击“背景”后，选择“图片库”中的背景，也可点击“上传”上传图片到“我的图片”中 * 3.音乐 点击“音乐”即可创建【背景音乐】1.【音乐库】为官方提供的音乐素材 2.【外部链接】插入网络音乐链接 3.【我的音乐】自主上传音乐 * 4.视频 点击“视频”后，给场景添加网络视频 * 5.图片 点击“图片”后，选择“图片库”中的图片素材或点击“上传”上传图片到“我的图片”库 * 6.形状 “形状”是便于用户制作扁平化页的素材，形状素材和文字一样可以做 “颜色、大小”等设置。 * H5是指第5代HTML，也指用H5语言制作的一切数字产品。所谓HTML是“超文本标记语言”的英文缩写。我们上网所看到网页，多数都是由HTML写成的。“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。 * 大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮，富有质感的旧票根、忽闪的霓虹灯，配以幽默的动画与音效，恨不得每个选项都点一遍。围绕“选择”这个品牌关键词，用引人入胜的测试题让用户把人生当作大片来选择，选到最后一题引出“大众点评选座看电影”，一键直达App购票页面。即使明知是软文也忍不住带着“矮油不错，这个页面有点diao噢”的心情点击了分享。 * 伴随着浪漫的钢琴旋律，《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣品，爱妻首选”的宣传语。设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。“首草”这个全新的高端养生草药品牌，用H5打出了一副走心的情感牌，让用户记住了“半生只为你”的爱妻品牌形象。 * 这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。 * 《京东的十大任性》用10张横屏页面讲述了京东在2014年的十大成就，视觉设计上采用简洁的扁平风插画，加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果，最后还有刘总这个小彩蛋。一口气看完后大概就了解2014年京东都干了哪些大事。 * * H T M L * 什么是H5？ H5可以做什么？ H5专题案例分享 如何快速制作H5？ * 什么是HTML5？ * H5原本是一种制作万维网页面的核心语言（超文本标记语言），由HTML5简化而来的词汇，如今却借由微信移动社交平台，走进大家的视野。 超文本标记语言（Hyper Text Markup Language） 支持的浏览器：Safari、Chrome、Firefox、Opera、IE9 * H5可以做什么？ * 响应式网站 做APP 微信公众号 微信小游戏 微信轻应用（商城、邀请函） * 从营销角度来讲，我们不但可以用H5在页面上融入文字动效、音频、视频、图片、图表、音乐和互动调查等各种媒体表现方式，将品牌核心观点精心梳理重点突出，还可以使页面形式更加适合阅读、展示、互动，方便用户体验及用户与用户之间的分享，正是具备了这样的营销优势，H5技术的运用不但为移动互联网行业的高速发展增添了新的契机，也为移动互联网营销开辟了新渠道。 * H5专题案例分享 * 但其呈现效果却是目前最炙手可热的营销手段之一 * 围住神经猫：堪称一代流行小游戏之标本 神经猫体态妖娆，形象贱萌，表情风骚，不断在屏幕中扭来扭去，勾引玩家发起毫不留情地围剿。 游戏上手简单，又有一定的数学挑战性；在醒目位置添加网络流行俗语；引入竞争机制，撩拨玩家的攀比心态。 * 全民寻找房祖名：热点新闻催生出的单细胞生物 14年8月，柯震东、房祖名相继跳入毒坑，于是此H5游戏应运而生。你只需在一群柯震东的头像里捞出唯一一个房祖名。 “找祖名”更倾向于眼力的比拼——也就是说，更弱智。然而越傻瓜，就越流行。 * 从功能与设计目标来看， H5专题页主要有以下4大类型 品牌宣传型 总结报告型 产品介绍型 2 3 4 活动运营型 1 * 大众点评为电影《狂怒》设计的推广页 以选择为主旋律，复古风格，层层推出大众点评网上购票，网上选座位的最终营销目的。 * 《首草先生的情书》 以