(完整版)H5培训PPT

4
合理运用技术，打造流畅的互动体验
淘宝《双12》活动专题H5页面
在浏览过程中我只使用了一种向上滑动的手势，而页面呈现出来的效果却犹如一个流畅的动 态GIF
结语
随着手机硬件的升级、HTML5技术的发展以及微信 平台的开放，HTML5的跨平台、低成本、快迭代等 优势被进一步凸显，这对身处于移动互联网大潮的 企业主、品牌、设计师和开发者来说，都将是一个 最好的时代。
从功能与设计目标来看， H5专题页主要有以下4大类型
1
活动营型
2
品牌宣传型
4
总结报告型
3
产品介绍型
1
活动运营型
大众点评为电影《狂怒》设计的推广页
以选择为主旋律，复古风格，层层推出大众点评网上购票，网上选座位的最终营销目的。
2
品牌宣传型
《首草先生的情书》
以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出“首草——滋阴圣 品，爱妻首选”的宣传语。
3
产品介绍型
LEXUS NX 产品H5页面
体验和操控性极佳，页面设计科技感十足
4
总结报告型
京东的十大任性
扁平化风格，纸面质感复古卡片，最后有小刘的小彩蛋做压轴
形式为功能服务
在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。 列举几种常见的H5专题页表现形式：
1
简单图文
嘀嘀打车
为设计加分的4个要点
1
细节与统一
大众点评《一步之遥》H5推广
从二维码入口到性感的loading页，再到最后分享提示的设计，包括文案措辞和背景音效， 无不与整体的戏虐风保持一致，给到用户一个完整统一的互动体验。
尤其关注“分享提示”这个细节设计
2
紧跟热点，利用话题效应
天天P图《全民COS武媚娘》
Evernote的新年贺卡
语音结合中国风动画做成一张独一无二的语音贺卡，整体色调也是以Evernote品牌色为主， 同时蕴含着一丝优雅的年味，十分讨巧
3
问答/评分/测试
大众点评《一步之遥》推广H5
视觉设计依旧出彩，开脑洞的创意和动画设计令人叫绝
4
游戏
Same的《圣诞老人拯救计划》
界面清新可爱，与Same的招牌画风一致，游戏角色也是Same的品牌角色，通过幽默恶搞 的游戏向用户传达Same独到有趣的产品文化。
什么是HTML5？
其本身的含义对我们的营销没有任何卵用
通俗的讲：是网络页面编辑脚本的规范和标
准
（万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改）
但其呈现效果却是目前最炙手可热的营销 手段之一
从引爆朋友圈的H5小游戏《围住神经猫》 到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》 各种H5游戏和专题页纷纷崭露头角。 “H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台， 正在走进更多人的视野。
操作简单易上手，一键上传照片就能立刻完成媚娘妆，与万千媚娘们进行PK，娱乐了大众 又推广了产品
网易《神还原武媚娘被剪胸真相》
3
讲个好故事，引发情感共鸣
LEVI’S《新年优惠活动专题》
LEVI’S新年优惠活动专题页以第一人称的口吻，用小时候简朴却热闹的新年与长大后富足 却乏味的新年做对比，用手绘风渲染出亲切的怀旧氛围。
I want you to join H5!
最后，分享一个能够动态展示H5的网站
/
用几张照片故事串起了整套页面。视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙 色。
从此看尽中国人的名与利
每个页面都是一张人民币风景局部放大图，创作者加入巧妙的创意元素与微动态进行细腻刻 画，带观众走进了人民币的微观世界。
2
礼物/贺卡/邀请函
AKQA营销公司的梦幻水晶球
H5页面使用了重力感应、3D等技术，文字与BGM的使用也十分讲究，给用户带来了完美 的互动体验