Doyle Dane Bernbach:闻香识情

2019-09-12 H5案例分享 H5案例分享
Doyle Dane Bernbach:闻香识情


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

闻香识情-查阅二维码

完整欣赏此案例大约需要2分钟


案例:闻香识情

品牌:Doyle Dane Bernbach

技术实现: html5

亮点:

  1. 创意定位

全球知名广告公司Doyle Dane Bernbach(简称DDB),推出的创意作品,用户在作品中感受界面转换乐趣和随之带来的视觉冲击,了解四种风格香型对应的花草名称,和效果描述,展现公司的创意无限,增加用户对DDB的好感和印象。

 

  1. 策划逻辑

作品加载完毕后就可以开始点击或滑动屏幕开始转换

①加载。

加载界面是星星闪烁的宇宙中两个小星球缓缓移动,屏幕中央一颗星星围绕着加载进度数字不断转动,加载完毕后,屏幕显示标题和围绕标题的四只卡通怪兽“回春”“宁神”“治愈”和“振奋”。

②转换。

点击任意怪兽,跳至怪兽界面,中间是怪兽坐躺在星球上的图案,四周是对应怪兽风格的图案,与怪兽名称对应的花朵名字,花香解析和功效描述,再次点击或滑动屏幕可转换至标题界面或其他怪兽界面,转换是随机的,若是转换较慢则会先显示跟加载界面一样的过渡画面。

③香型。

四只怪兽的香型对应关系为:“回春”——野橘香,“宁神”——薰衣草香,“治愈”——乳香,“振奋”——薄荷香。

 

  1. 设计上

手绘的卡通界面,元素十分丰富,集中到屏幕中间显示,背景虽然在每个界面都露的不多,但始终是加载界面的宇宙星空背景,转换界面是一个星球旋转,然后各种元素突然一起蹦出占据屏幕,色彩繁多互相映衬,一下从极简变为丰富,视觉冲击力很强,每个小怪兽的样子都对应了它的名字,代表回春的笑着捂着红扑扑的小脸,代表宁神的睡出鼻涕泡,代表振奋的全身发红边走边抖,外表新奇夸张,也十分可爱。主界面下方有DDB的公司名字和标志。

 

  1. 交互上

在主界面转换时,点击小怪兽名字,从下往上滑动屏幕即可,在小怪兽页面时可从下往上滑动屏幕转换。

 

 





以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

夜听:夜听.爱情博物馆

360:10秒!揪出你内心的焦虑怪兽

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~