欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

你见过最炫酷的微信html5营销或宣传页面是哪个?

程序员文章站 2022-05-23 15:57:17
...

回复内容:

活动运营型

为活动推广运营而打造的H5页面是最常见的类型,形式多变,包括游戏、邀请函、贺卡、测 试题等形式。与以往简单的静态广告图片传播不同,如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5 页面到最后落地到品牌App内部,如何设计一套合适的引流路线也颇为重要。

大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮,富有质感的旧票根、忽闪的霓虹灯,配 以幽默的动画与音效,恨不得每个选项都点一遍。围绕“选择”这个品牌关键词,用引人入胜的测试题让用户把人生当作大片来选择,选到最后一题引出“大众点评 选座看电影”,一键直达App购票页面。即使明知是软文也忍不住带着“矮油不错,这个页面有点diao噢”的心情点击了分享。

你见过最炫酷的微信html5营销或宣传页面是哪个?

品牌宣传型

不同于讲究时效性的活动运营页,品牌宣传型H5页面等同于一个品牌的微官网,更倾向于品牌形象塑造,向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言,让用户对品牌留下深刻印象。

伴随着浪漫的钢琴旋律,《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子 的爱与愧疚,最后引出“首草——滋阴圣品,爱妻首选”的宣传语。设计上采用回忆般的黑白色调,简单的照片加文字,配以花瓣掉落、水面涟漪等轻动画,渲染出 唯美优雅的气氛。“首草”这个全新的高端养生草药品牌,用H5打出了一副走心的情感牌,让用户记住了“半生只为你”的爱妻品牌形象。


你见过最炫酷的微信html5营销或宣传页面是哪个?

大众点评的项目,这次是为姜文的电影《一步之遥》做持续推广,让用户为姜文的代表作评分。视觉设计依旧出彩,开脑洞的 创意和动画设计令人叫绝(一定要扫一扫体验下!)。延续了怀旧大字报风格,字体、文案、装饰元素等细节处理也十分用心。问答形式的H5页面能做到这个份上 也是蛮拼的。
你见过最炫酷的微信html5营销或宣传页面是哪个?

大众点评
你见过最炫酷的微信html5营销或宣传页面是哪个?
接听来电
你见过最炫酷的微信html5营销或宣传页面是哪个?


New balance
你见过最炫酷的微信html5营销或宣传页面是哪个?
一加
你见过最炫酷的微信html5营销或宣传页面是哪个?
以上都是是这家叫W的创造者们的作品,我不是大众点评的托,是很喜欢这家的作品Sina Visitor System



产品介绍型

聚焦于产品功能介绍,运用H5的互动技术优势尽情展示产品特性,吸引用户买买买。

这一类型的H5页面多见于汽车品牌,LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕,通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性,宏观和微观都照顾周全。


你见过最炫酷的微信html5营销或宣传页面是哪个?
总结报告型

自从支付宝的十年账单引发热议后,各大企业的年终总结现也热衷于用H5技术实现,优秀的互动体验令原本乏味的总结报告有趣生动了起来。

《京东的十大任性》用10张横屏页面讲述了京东在2014年的十大成就,视觉设计上采用简洁的扁平风插画,加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果,最后还有刘总这个小彩蛋。一口气看完后大概就了解2014年京东都干了哪些大事。


你见过最炫酷的微信html5营销或宣传页面是哪个?
简单图文

简单图文是早期最典型的H5专题页形式。“图”的形式千变万化,可以是照片、插画、GIF等。通过翻页等简单的交互操作,起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。

滴滴打车这个案例就是典型的简单图文型H5专题页,用几张照片故事串起了整套页面。视觉简洁有力,采用整屏黑白照片,点缀以滴滴的品牌橙色。每切换一张图片,文字就渐隐浮现,没有其他互动形式,让观众聚焦于内容,通过陌生人之间的真情联系来塑造品牌的正能量形象。


你见过最炫酷的微信html5营销或宣传页面是哪个?
在除夕夜全国人民疯狂抢红包的时刻,微信推出了《从此看尽中国人的名与利》这样一个专题页。 第一眼就被镇住了,好亲切的RMB~每个页面都是一张人民币风景局部放大图,创作者加入巧妙的创意元素与微动态进行细腻刻画,带观众走进了人民币的微观世 界。每一张钞票图案配合发人深省的文案,在推广微信红包的同时呼吁人们重新审视人情与名利的奥义。 你见过最炫酷的微信html5营销或宣传页面是哪个?

AKQA创意营销公司在圣诞之际献上了一份厚礼——梦幻水晶球。通过移动手机,镜头从水晶球外不断摇晃推近,渐渐走进 水晶球的微观世界里。通过手机环顾四周,可以360度欣赏水晶球里的全景,摇一摇雪花便漫天飘洒。写下你的祝福并分享给朋友,相信一定会惊艳到对方。这个 H5页面使用了重力感应、3D等技术,文字与BGM的使用也十分讲究,给用户带来了完美的互动体验,值得细细品味。
你见过最炫酷的微信html5营销或宣传页面是哪个?

游戏

从 “围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”(即山寨版“别踩白块儿”)等品牌植入式小游戏,H5游戏因为操作简单、竞技性强, 一度风靡朋友圈,但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播,需要在玩法和设计上多下点功夫。

Same在圣诞节推出了一款名为《圣诞老人拯救计划》的H5小游戏,操作非常简单,只需 用手指交替上滑,把角色的脖子向上拉到无限长,游戏会记录你拉的最高距离,跟朋友比一比谁比较长。界面清新可爱,与Same的招牌画风一致,游戏角色也是 Same的品牌角色,通过幽默恶搞的游戏向用户传达Same独到有趣的产品文化。


你见过最炫酷的微信html5营销或宣传页面是哪个?

网易娱乐在武媚娘剪胸风波的风口浪尖上推出了名为《神还原武媚娘被剪胸真相》的H5专题页,放下节操用极富想象力的粗旷草图风向广大观众“还原”了真相。一时间被疯狂转发,网易娱乐也算是顺势自我宣传了一把。 你见过最炫酷的微信html5营销或宣传页面是哪个?

LEVI’S新年优惠活动专题页以第一人称的口吻,用小时候简朴却热闹的新年与长大后富足却乏味的新年做对比,用手绘 风渲染出亲切的怀旧氛围。最后引出“这个新年,把压力和束缚打包扔掉,用新鲜的眼光感受生活,一起活出趣”的品牌推广slogan,代入感极强的故事无疑 是驱动分享的源动力。
你见过最炫酷的微信html5营销或宣传页面是哪个?

随着技术的发展,如今的HTML5拥有众多出彩的特性,让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。(有兴趣的话可以点击这个网站 Form Follows Function几乎有所有H5动态效果的展示)。相较于塞入各种不同种类的动效导致页面混乱臃肿,我们更提倡的是合理运用技术,用心专注于为用户提供流畅的互动体验。

典型的案例是淘宝在双12推出的预售推广H5专题页。在浏览过程中我只使用了一种向上滑 动的手势,而页面呈现出来的效果却犹如一个流畅的动态GIF。设计师巧妙利用图形设计与组合,在滑动过程中营造出一种丰富的视差滚动效果,单个图形元素的 遮罩、旋转与整体页面的动势配合极为默契。

你见过最炫酷的微信html5营销或宣传页面是哪个?


来源腾讯ISUX 那些过目不忘的H5页面 snow.akqa.com/

你见过最炫酷的微信html5营销或宣传页面是哪个? W在14年《一步之遥》上映时给大众点评做的“九步之遥”电影推广页面。说到酷,必须是这个没跑了!
你见过最炫酷的微信html5营销或宣传页面是哪个?
你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个?
挺简单的问答内容,但是从视觉呈现到音效都十分完美的表现了酷这个字,现在保存下面的图片,扫扫二维码还可以进去玩玩看。
你见过最炫酷的微信html5营销或宣传页面是哪个? 真想做出超级炫酷的营销页,说真的,国内的case可以不用研究了,距离国外的先进水平真是以光年计算。我推荐一个网站给你:
Awwwards - Website Awards
真是花样百出。

下面是我自己选的几个案例你去看看就知道了,记得在PC端体验:
The Boat | SBS
Kingsman: Become A Knight
Beagle by Podio: Proposal Software
Landing
A World of Belonging on Airbnb
In Pieces - 30 Endangered Species, 30 Pieces.
KUROKAWA WONDERLAND

看完你才知道炫酷这个词的正确用法。 《告诉全世界,我的深圳下雪了》,看的我眼泪打转
w.liveapp.cn/auto/index

虽然是煽情题材,但是你能说它不炫酷? 它可能不是我见过最炫的,但一定是最触动我心弦的。(用手机看才有效果

小时候 我这样看他
你见过最炫酷的微信html5营销或宣传页面是哪个?
扫一扫也可以看
你见过最炫酷的微信html5营销或宣传页面是哪个? 最近对 H5 比较感兴趣,稍微分析了一些比较优秀的 H5 产品。


# 严禁转载,欢迎吐槽和交流!#


你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 你见过最炫酷的微信html5营销或宣传页面是哪个? 就我见过的来说,这个很惊艳,也很实用。
请一定要在WIFI环境下打开
720yun.com/i/b6em4cdytv 广告预警
收集H5单屏滚动页面的Demo · Issue #21 · yanhaijing/zepto.fullpage · GitHub
不得不推荐下 这个,大家有好的demo推荐下 imgbbsw.baidu.com/data/