资源描述
,学习单元,2.4 H5,制作,学习单元2.4 H5制作,1,实践操作,单元小结,目 录,情境导入,学习目标,理论知识,典型案例,Contents,实践操作单元小结目 录情境导入学习目标理论知识典型案例Con,2,PART 01,01,情景导入,PART 0101情景导入,3,情景导入,假设你,是,北,汽新能源汽车,4S,店的销售人员，销售经理给你分配一项新任务，将店内新到的北汽新能源,EC3 2019,款灵动版制作一个产品推广的,H5,，通过,H5,开展微信营销，请问你了解,H5,吗？你知道如何使用软件制作,H5,吗？,情景导入 假设你是北汽新能源汽车4S店的销售人员，,4,PART 02,02,学习目标,PART 0202学习目标,5,学习目标,能准确区分,H5,的类型,能根据品牌需求制作,H5,脚本,能使用手机软件制作交互型,H5,能使用手机软件制作展示型,H5,能使用手机开展,H5,营销,学习目标能准确区分H5的类型能根据品牌需求制作H5脚本能使用,6,PART 03,03,理论知识,PART 0303理论知识,7,理论知识,2.4.1,认识,H5,1.H5,定义,2.H5,特点,H5,是一种新型营销工具。其主要功能包括语义、离线与存储、设备访问、连接、多媒体、,3D,与图形以及动画、互动行为等，可以用于网页端与移动端的连接，让用户在互联网上也能轻松体验各种类似桌面的应用，,H5,除了具有移动互联网营销优势以外，还具有以下特点：品牌性，本地存储性、,跨平台性,、,交互性强,、,营销转化率高,、,维护简单,、,传播快,的特点,理论知识2.4.1 认识H51.H5定义2.H5特点H5是一,8,展示型,3.H5,的类型,理论知识,2.4.1,认识,H5,交互型,游戏型,技术型,模拟型,展示型3.H5的类型理论知识2.4.1 认识H5交互型游戏型,9,理论知识,2.4.2 H5,设计,1.H5,的内容设计,（,a,）,明确,H5,营销目的,（,b,）,满足用户需求,（,c,）,正确的信息触点,（,d,）,内容价值,优秀的,H5,营销，技术的把握、创意与文案的优化、传播的执行都不可或缺。多种多样的形式，是在技术层面上的体现。但无论形式如何变化，吸引人的始终是内容。互联网是东风，拓宽了信息传播途径，但不会改变内容营销的重要性。,理论知识2.4.2 H5设计1.H5的内容设计（a）明确H,10,理论知识,2.4.2 H5,设计,H5,场景有多种多样的选择，优秀的创意设计，是传播速度的决定性因素，除了上面提到的,5,种场景以外，,H5,还有多种多样的玩法，比如：人脸识别、重力感应、视频互动、,ARVR,技术、,720,全景、快闪影片、一镜到底、多屏互动等等。,2.H5,的创意设计,（,a,）,人脸识别,（,b,）重力感应,（,b,）,AR/VR,理论知识2.4.2 H5设计 H5场景有多种多样,11,理论知识,2.2.2,视频拍摄前准备,3.H5,的视觉设计,风格统一,H5,的内容展示可以尽量利用智能手机的多媒体性能，如声音、动画、视顷、全景、长页面、无极滑动、,VR,、,AR,以及大数据图解等展示形式,H5,设计的风格多种多样，有水墨风格、扁平风格、手绘风格、写实风格等等,视觉呈现,理论知识2.2.2 视频拍摄前准备3.H5的视觉设计风格统一,12,理论知识,2.4.3 H5,的制作工具,1.H5,制作工具,专业工具如意派、,iH5,、,Mugeda,，一般在电脑上操作。模板类工具一般有人人秀、易企秀、,MAKA,等，由于操作简单、模板较多，手机、电脑上都可以操作，适合没有编程基础的人,易企秀,iH5,人人秀,理论知识2.4.3 H5的制作工具1.H5制作工具专业工具如,13,PART 04,04,典型案例,PART 0404典型案例,14,案例分析,东风,H5,案例“测一测你的放风姿势”解析,1.,营销目的,此,H5,是由网易新闻与,东风,HONDA,合作推出，其营销目的为,NEW XR-V,车型进行市场预热。,案例分析东风H5案例“测一测你的放风姿势”解析1.营销目的,15,案例分析,东风,H5,案例“测一测你的放风姿势”解析,整个,H5,通过重现网友疫情宅家的诙谐场景，将大众的放风愿望与,NEW XR-V,潮流外观建立联系，满足用户情感需求，整体流畅且轻松娱乐性强，戏精式解说风趣幽默。设置,4,道选择题，轻量级的交互形式，降低用户参与门槛，定制海报刺激分享欲望，,2.,内容设计,案例分析东风H5案例“测一测你的放风姿势”解析整个H5通过重,16,案例分析,东风,H5,案例“测一测你的放风姿势”解析,第一步,:,观看戏精视频，重现疫情期间的网友宅家趣事，中插,4,道选择题，加强参与感；,第二步,:Pick,你的放风座驾；,第三步,:,放风打卡拍照，生成专属场景的传播海报，分享朋友圈。,3.,策划步骤,案例分析东风H5案例“测一测你的放风姿势”解析第一步:观看戏,17,案例分析,东风,H5,案例“测一测你的放风姿势”解析,手绘画风，孟菲斯配色风格给画面带来耳目一新的视觉体验，撞色贴合年轻人的喜好，吸引用户注意力。在钟表、画作中加入品牌元素。,4.,视觉设计,案例分析东风H5案例“测一测你的放风姿势”解析手绘画风，孟菲,18,PART 05,05,实践操作,PART 0505实践操作,19,易企秀是一个基于智能内容创意设计的数字化营销软件，主要提供,H5,创景、海报图片、营销长页、问卷表单、互动抽奖小游戏和特效视频等各式内容的在线制作，且支持,PC,、,APP,、小程序、,WAP,多端使用，,App,本身自带大量素材库，有大量热门,H5,模板可以套用，可以一键生成,H5,，并快速分享到社交媒体开展营销。,实践操作,2.4.5,使用手机易企秀软件制作,H5,易企秀是一个基于智能内容创意设计的数字化营销,20,实践操作,1.,选模板,在模板库中挑选适合的,H5,模板,假如要做一个汽车保险的活动直传,H5,，在,H5,界面，点击搜索框。点筛选，选择筛选界面里的行业模块，选择“汽车行业”，即可找到所有符合要求的,H5,模板，也可通过搜索关键词的方式收集到所需的模板。也可通过内容搜索，选择适合的模板，可以通过“颜色”选项来寻找风格符合的,H5,模板。,也可以点击首页界面下方的“,+”,按钮，进行自己的模板创作。点击“使用”按钮，进入模板编辑状态。,（,a,）筛选界面,（,b,）颜色筛选,（,c,）筛选结果,实践操作1.选模板在模板库中挑选适合的H5模板,21,实践操作,打开活动模板后，用户可以将,H5,中的品牌素材、宣传文案以及背景音乐等替换成与营销活动或企业相关的内容。,2.H5,的编辑操作,（,a,）编辑页面,（,b,）快捷编辑,实践操作打开活动模板后，用户可以将H5中的品牌素材、宣传文案,22,实践操作,（,1,）添加文字,双击其中的文字，即可修改模板的文本内容，点击“,AI,快捷编辑”，可快速进行文字和图片的替换，语音识别功能提升了制作速度。,若想增加除模板以外的文字，点击下方工具栏的“,+,文字”按钮，可进行文字的添加。,实践操作（1）添加文字,23,实践操作,（,2,）图片更换,同样也是两种方式，第一种，点击“,AI,快捷编辑”，可快速进行图片的替换。第二种，在编辑页面，双击图片点击更换。,若想增加除模板以外,的图片，点击下方工具栏的“,+,图片”按钮，可进行图片的添加。,（,a,）双击更换,（,b,）快捷编辑更换,实践操作（2）图片更换（a）双击更换（b）快捷编辑更换,24,实践操作,（,3,）页面管理,在,H5,的第一页，有“页面管理”选项，点击其按钮，可对本套模板内所有页面进行删除、复制、排序工作。,（,a,）页面管理,（,b,）页面排序,实践操作（3）页面管理（a）页面管理（b）页面排序,25,实践操作,（,4,）音乐替换及切换效果更改,在编辑页面，选择右上角的“预览”按钮，可进入到画面预览、设置翻页效果、标题及音乐的更改界面，点击“选音乐”按钮，可实现音乐的更改，可选择其音乐库里的内容，也可以选择自己上传。,（,a,）预览,（,b,）选音乐,实践操作（4）音乐替换及切换效果更改（a）预览（b）选音乐,26,实践操作,（,5,）工具栏介绍,H5,页面底部有添加组件、更改特效、背景修改等工具编辑操作。点击“模板”按钮，可以实现其他模板的页面的添加。,2-4-21,工具栏界面,点击“组件”按钮，可在,H5,界面内添加相应组件，例如视频、链接等。,点击“特效”按钮，有指纹、环境、涂抹、互动等多种特效模式进行选择。,点击“背景”按钮，可更改背景图片，可选择纯色背景，也可以自定义背景图，选择自己的图片作为背景。,实践操作（5）工具栏介绍2-4-21 工具栏界面点击“组件”,27,实践操作,3.,一键生成,H5,作品并发布,在编辑的预览界面，点击“分享”按钮，可进行分享方式的选择，可选择分享链接至微信、朋友圈、小程序等多种选项。,也可在,APP,首页的作品界面进行编辑和分享操作。,（,a,）我的作品分享,（,b,）分享界面,实践操作3.一键生成H5作品并发布（a）我的作品分享（b）,28,PART 06,06,单元小结,PART 0606单元小结,29,1.H5,是超文本标记语言,(HyperText Markup Language),的英文单词缩写，以网页的形式呈现。,2.H5,是一种准则、标准，不是一项技术，而是各项技术的合集。,3.H5,的主要类型有展示型、交互型、游戏型、技术型、模拟型五种。,4.H5,的具有品牌性、本地存储性、跨平台性、交互性强、营销转化率高、维护简单、传播快等特点,5.H5,的内容设计要注意明确营销目的、满足用户需求、找到正确的消息触点，并且保证其内容有价值。,6.H5,的视觉设计要注意视觉呈现和风格统一,单元小结,1.H5是超文本标记语言(HyperText Markup,30,谢谢观看,谢谢观看,31,
展开阅读全文