网络广告设计 第1讲 那些花样百出的“H5广告” 2-1-1 什么是H5广告.pptx

教学情境一 H5广告初阶 子教学情境一 认识H5广告;导入;教学情境一 H5广告初阶 子教学情境一 认识H5广告 什么是H5广告;/cases/201805/bwgbtzj.html;;;Html是超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。;CSS通俗的讲就是管页面样式样貌的 就是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。;起初，html5广告指代的是利用该技术实现的互联网广告； 而现在的H5广告则泛指那些在网络社交媒体中传播的带有特效、互动体验和声效的Web 网页。;延伸阅读;教学情境一 H5广告初阶 子教学情境一 认识H5广告 H5广告的功能与设计目标;;2、品牌宣传型 ?? ?不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。;3、产品介绍型 ?? ?聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。;4、总结报告型 ?? ?自从支付宝的十年账单引发热议以后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。;教学情境一 H5广告初阶 子教学情境一 认识H5广告 三、H5广告的表现形式;1.简单图文 简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。 滴滴打车这个案例就是典型的简单图文型H5专题页，用几张照片故事串起了整套页面。视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙色。每切换一张图片，文字就渐隐浮现，???有其他互动形式，让观众聚焦于内容，通过陌生人之间的真情联系来塑造品牌的正能量形象。;2.视频、动画 案例：过年在女朋友家，老板问我忙吗 出品：向上金服 亮点： 策划上，加载完毕之后，映入眼帘的是BOSS的电话界面，在此时点击屏幕任意位置都会播放视频；视频的内容是，以第一视角进行拍摄，我新年在女朋友家拜访她的父母，突然收到了BOSS的电话，但是我选择挂断，之后BOSS接连的打电话让我受不了，所以接通了电话，之后才知道是给客户的稿子出现了问题，于是我赶紧改稿子，之后女朋友进来与我有了争吵，改好之后BOSS告诉我客户还是喜欢第一版，于是为了弥补我，给了一个小的红包；之后我如释重负的躺在了穿上，突然手机响了吓得我一下子跳了起来，才发现是向上金服的收益提醒。于是我放松了，也露出了欣喜的笑容。 设计上，开头以第一视角进行拍摄，带入感强。 体验上，利用设计师不断改稿，怕手机响的心态；做了强烈的对比，在这种情况下只有向上金服的收益可以给一点安慰。第一视角的拍摄，会让用户被主动带入剧情里，宣传效果好。;3.问答/评分/测试 问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。 这是为姜文的电影《一步之遥》做持续推广，让用户为姜文的代表作评分。视觉设计依旧出彩，开脑洞的创意和动画设计令人叫绝（一定要扫一扫体验下！）。延续了怀旧大字报风格，字体、文案、装饰元素等细节处理也十分用心。问答形式的H5页面能做到这个份上也是蛮拼的。;4.游戏 从 “围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。 Same在圣诞节推出了一款名为《圣诞老人拯救计划》的H5小游戏，操作非常简单，只需用手指交替上滑，把角色的脖子向上拉到无限长，游戏会记录你拉的最高距离，跟朋友比一比谁比较长。界面清新可爱，与Same的招牌画风一致，游戏角色也是Same的品牌角色，通过幽默恶搞的游戏向用户传达Same独到有趣的产品文化。;谢 谢!